I'm using tabulator (fantastic thing), which has a built in, in line editing functionality.
The thing is though, it's either on or off by having the editor tag on a column basis.
You can disable the editor for a given cell as well.
What I'm trying to do is to have the table displayed as read only so to say.
Then click on a 'edit' button (which is in my table and I capture the click). That would in turn enable the inline, built-in editor functionality for that raw only.
Then I click a save button, write the updated data back to my DB and make the row read-only again.
So, with tabulator 4.2, I'd be looking for something like
var usrtable = new Tabulator("#usrtable", {
ajaxURL:"/account/cgi-bin/getallusers.php",
resizableColumns:false,
tooltips:true,
history:true,
pagination:"local",
paginationSize:10,
paginationSizeSelector:true,
reactiveData:true,
selectable:true,
initialSort:[{column:"username", dir:"asc"},],
columns:[
{ formatter: editIcon, width: 40, sortable: false, align: "center", cellClick: function (e, cell) {
var id = cell.getRow().getData().id;
row(id).editable=true;
/\/\/\/\/\/\/\/\/\/\/\
}
},
{title:"Id", field:"id", visible:false},
{title:"Username", field:"username", width:80, editor:"input"},
{title:"Password", field:"password", width:70, editor:"input"},
{title:"Role", field:"role", width:70, align:"center", formatter:"plaintext", editor:"select", editorParams:{values:["user","admin"]}},
{title:"Change passwd", field:"changepasswd", width:90, align:"center", formatter:"tickCross", sorter:"boolean", editor:true},
],
});
Is that somehow possible or do I have to re-invent the wheel? i.e. create a model to edit the data outside the table?
What I have tried.....
Once rendered, a cell looks like this:
<div class="tabulator-cell" role="gridcell" tabulator-field="username" tabindex="0" title="test" style="width: 80px; height: 29px;">test</div>
And when you click on the cell, it becomes editable and the class 'tabulator-editing' is added to the div.
So..... I though I could 'just' catch the click event and do something like this:
$(".tabulator-cell").on("click",function(){
($this).removeClass("tabulator-editing");
});
that didn't work so tried this:
$(".tabulator-cell").on("click",function(e){
e.preventDefault();
});
that didn't work either.
When doing this:
$(".tabulator-cell").on("click",function(){
alert("cell clicked");
});
it actually never fires... :-(
Either I'm doing something wrong or really do not know where to go from here....
This can be achieved with Tabulator's Optional Editing:
// column definition
{ title:"Name", field:"name", editor:"input", editable:editCheck }
var editCheck = function (cell) {
var isEditable = cell.getRow().getElement().classList.contains('isEditable');
return isEditable;
}
With this logic in place, you simply need to toggle isEditable class on the appropriate Tabulator Row.
In the documentation under Column Setup, there is a Data Manipulation option called editable.
http://tabulator.info/docs/4.2/columns#definition
editable - callback to check if the cell is editable (see Manipulating Data for more details)
I haven't experimented with it myself, but it appears as if this is only called when initially rendering the table, so you may have to force a re-render with table.redraw(true) when the user clicks the Edit and Save buttons.
You could also just use your cellClick event and call cell.edit().
So, I also got feedback from Oli who is the developer for Tabulator.
The short answer is that there is no option to enable editing at the row lever as I feared.
Furthermore, the option will not be added due to multiple factors.
In other words, what I'm trying to do is not available out of the box and the editing is to be done at the cell level.
There is no option for this in the tabulator. But if you want to disable a cell from editing, you can simply remove all the tabulator applied classes for the particular cell. For eg., if you want to make the last row edit disabled, you can use something like this,
$(".tabulator-row:last .tabulator-cell").removeAttr("role tabulator-field tabindex title");
I know this is a old question but my answer can be useful for visitors come here (like me) in future..
We have also a similar requirements, and we ended up by this solution. We have added "editor" in every column with another attribute "editable". In "editable", we are checking whether the row is selected or not, if row is selected then field can be editable otherwise not editable.
Other than that we have also used a "rowSelected" and "rowDeselected" to show/hide save button and on "rowSelected", we are checking that only 1 row is selected at a time.
I would like to show a custom message in <p:schedule>. It shows the message with time prefix, e.g. "12a CycDemo".
How can I show only "CycDemo" without time prefix? I'm adding it as follows:
model.addEvent(new DefaultScheduleEvent("CycDemo", fromDate, toDate));
I get one solution. It will not be good solution because of I still cannot find another way.
When I debug the html content on the browser by the developer tool, I found the following code.
....
<span class="fc-event-time">12a</span>
<span class=".....">CycDemo</span>
...
That's why, I solve it by CSS display:none.
.fc-event-time {
display: none;
}
Now, I can only see my expected message without time prefix :)
You have to add an empty timeFormat attribute in <p:schedule> then the prefix will disappear.
<p:schedule id="schedule" value="#{scheduleView.eventModel}" widgetVar="myschedule" timeFormat="">
Set AllDay to true of DefaultScheduleEvent
DefaultScheduleEvent d = new DefaultScheduleEvent();
d.setAllDay(true);
eventModel.addEvent(d)
I was using Telerik MVC Grid in my project. I just wanted to change the dropdown value orders a bit. I googled for the requirement and found the filter dropdown options are handled by **telerik.grid.min.js file. But, I dont know how can i change the order from
Options by Default
Is Equal to
Is not equal to
Starts with
Contains
Does not contain
Ends with
Change to the below format
Contains
Does not contain
Starts with
Ends with
Is Equal to
Is not equal to
Can anybody tell me the possibilities that i can change the order of filter dropdown box ..
Thanks,
You can do it by JQuery simply by some codes like this :
$('#GRIDID').find(".t-filter").click(function () {
setTimeout(function () {
$(".t-filter-operator").html('<option value="substringof">Contains</option><option value="notsubstringof">Does not contain</option>');
});
});
NOTE : the above code is a sample, you should do a process to check what operators you have and then repopulate the items in desired order. You can find all allowed "option" tags by inspecting the rendered grid.
The easy way (if you're using MVC razor syntax)
#Html.Kendo().Grid<Model>().Columns(columns =>
{
columns.Bound(x => x.variableName);
})
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.Contains("Contains").DoesNotContain("DoesNotContain").WhateverYouNeed)
.ForEnums( dat => dat.Clear()
.IsEqualTo("Is Equal To"))
))
Here, the Clear() empties the options in the filter and then you can add the ones you want or even create your own custom ones there, simply place them there in the order that you want.
Have fun!
I think this is a bug in jqGrid (I'm using version 4.4.0). In my colModel, this works fine:
stype:'select', searchoptions: {sopt: ['eq','ne'], value:"Red:Red;Green:Green;Blue:Blue"}
but this does not:
stype:'select', searchoptions: {sopt: ['eq','ne'], dataUrl:'rest/selectcolors'};
where the dataUrl is returning
<option value='Red'>Red</option><option value='Green'>Green</option><option value='Blue'>Blue</option></select>
The colors show up okay in the combobox with 'Red' as the default value but the filter is not correctly initialized unless the user changes the combobox filter by selecting 'Green' or 'Blue' (and then possibly going back and selecting 'Red'). If the user tries to filter without first changing the combobox value, no matches are found. This problem occurs upon initial use of the filter dialog and after resetting the filter dialog, so it is very confusing to the user.
Does anyone know of a workaround / fix for this?
in first sight your returned dataurl doesn't have
<select>
and it might be a mistake
however, i have this problem too!
but i don't find any solution by search on web.
i resolve this problem temporary by a trick
i add one option with value = -1 and text "Please Select"
then in change event i remove this option
searchoptions: {sopt: ['eq', 'ne'], dataUrl:'yoururl',
dataEvents:[{ type: 'change',
fn: function(e)
{
$('td.data').find('option[value=-1]').remove();
}
}]},
but the problem still exist.. if user doesn't change combobox and select "Please Select" option, he will see an error.
i use the folowing code in my php url
echo "<select>";
echo "<option value='-1'>please select</option>";
while($row = pg_fetch_assoc($res))
{
echo "<option value='".$row['cid']."' >".$row['cname']."</option>";
}
echo"</select>";
you can use an style like this and remove it after change for select element
style='font-style:italic; color:gray; width:100px' data-native-menu='false'
I am having problems trying to access some a link in a drop down menu In a web site. When you put your cursor over the button, as shown in the first picture, the menu drops down. Below that is a picture of the webpage script. What i want to do is click the search specifications button inn the drop down menu.
the like of code would go something like this :
e.frame(:name => "content").frame(:name => "main").a(:index => 0).click.a(:index => 10).click
However, that is not a valid peace of code, i just don't know the right way of doing it.
< e.frame(:name => "content").frame(:name => "main")
=> #<Watir::Frame:0x7f74b4d4 located=false selector={:name=>"main"}>
irb(main):064:0> my_frame.a(:text => 'Operations').click
Watir::Exception::UnknownObjectException: unable to locate element, using {:text
=>"Operations", :tag_name=>"a"}
from C:/Ruby193/lib/ruby/gems/1.9.1/gems/watir-webdriver-0.6.1/lib/watir
-webdriver/elements/element.rb:365:in `assert_exists'
from C:/Ruby193/lib/ruby/gems/1.9.1/gems/watir-webdriver-0.6.1/lib/watir
-webdriver/elements/element.rb:95:in `click'
from (irb):64
from C:/Ruby193/bin/irb:12:in `<main>'
irb(main):065:0>
The dropdown menu does not appear to be in the HTML part that you posted. It is likely further down in the HTML.
Instead of trying to locate by index, which can easily change, you could locate by text. Try:
my_frame = e.frame(:name => "content").frame(:name => "main")
my_frame.a(:text => 'Operations').click
my_frame.a(:text => 'Search Specifications').click
This assumes that the 'Search Specifications' link is also in the same frame as the 'Operations' link.
Try this:
myframe.a(:text, 'Operations').fire_event 'mouseover'
myframe.a(:text, 'Search Specifications').click
Not sure if this is perfect, but the idea is that you make the link in the drop down menu present after you select the drop down. Play around with other elements. The fire_event method is the best way I know to make the drop down menu present.