I am currently evaluating Kendo UI. I had a question about Grid.
Once I make filterable: { extra: true} I get the option of using either "And" operator and "Or" operator. Is there a way to get rid of "Or" operator in UI?
And is default value in filter and drop down list with one element looks weird so you can show whole drop down list via CSS:
form.k-filter-menu .k-filter-and{
display: none;
}
If you want there some label with text and use filterMenuInit event to add it:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-filterMenuInit
Related
I use a small grid in a grid to store a relation table.
Example:grid in grid example
This works fine so far.
If I now click on the second column in the inner grid table, the whole field with the integrated grid goes out of edit mode. The first field in the inner grid can be edited without problems.
I have tried different types of preventDefault(). But unfortunately no workaround.
What do I have to do so that I can edit the two columns in the inner grid?
Just changein your editable function
editable: true
To
editable: {
mode: "inline"
},
here is the documentation
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/editable.mode
note that you have editable:true twice at your editor: function
runs also with:
editable: {
mode: "popup"
},
Similar to the inline mode, edit can be controlled via button.
have fun...
I'm using a kendo grid in the same way as the following demo: http://demos.telerik.com/kendo-ui/grid/filter-row
Is there anyway of adding a debounce time to the string filter inputs so the filter is applied "as the user types"
You can easily achieve this by adding the code in the column you want to filter while typing:
filterable: {
cell: {
operator: "contains",
template: function (args) {
args.element.css("width", "90%").addClass("k-textbox").keydown(function(e){
setTimeout(function(){
$(e.target).trigger("change");
});
});
}
}
}
I've made an example here:
http://dojo.telerik.com/ApukU
I have configured a listview to enable filtering. In another event, how can I reset the filter?
This is what I have:
$("#listview").kendoMobileListView({
dataSource: dataSource,
template: $("#listview-template").text(),
filterable: {
field: "ProductName",
operator: "startswith"
}
});
In another function, how can I reset the filter so the listview shows all again (in case someone typed a search)?
$("#listview").data("kendoMobileListView")...??
Do:
$("#listview").data("kendoMobileListView").dataSource.filter({});
One-liner that will clear the input text and handle dataSource filtering by triggering the clearButton click event:
$("#listview").data("kendoMobileListView")._filter.clearButton.click();
I have set filterable attribute to true of kendo ui grid. When the filter is opened it lists all the filter options.It has a deopdown with 'And' and 'OR' option.
The dropdown shows first 'And' option and then the 'OR' option.
I have a requirement where I want to show first 'OR' option and then the 'And' option.
How can I do this. Please tell me.
You can customize filter menu. Here is the link on docs.Kendoui. You can customize it as per below code.
filterable: {
extra: true,
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to"
}
}
},
But I don't think you can change the sequence of And/Or options in the dropdown.
I want to change the pointer to hand when hovering over jqgrid's rows
Is there an API for that?
This can be done more easily using the classes colModel property as below:
{ name: 'Email', index: 'Email', classes: 'pointer' }
From the wiki:
This option allow to add classes to the column. If more than one class will be used a space should be set. By example classes:'class1 class2' will set a class1 and class2 to every cell on that column. In the grid css there is a predefined class ui-ellipsis which allow to attach ellipsis to a particular row. Also this will work in FireFox too.
I just add this into my css file
#mygrid .jqgrow{
cursor:pointer;
}
Use a custom formatter on any cell in the grid. For more info on these, see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter
Here's how I did it. I wanted the first column in my grid to appear like it is a clickable link (but really it triggers a custom jqgrid event, onCellSelect).
Snippet of my grid object:
colModel :[
{name:'ticket', index:'IMINDT', width:125, formatter: pointercursor},
pointercursor is a function name. The code for it is defined like this:
// Custom formatter for a cell in a jqgrid row.
function pointercursor(cellvalue, options, rowObject)
{
var new_formatted_cellvalue = '<span class="pointer">' + cellvalue + '</span>';
return new_formatted_cellvalue;
}
My CSS class of "pointer" is:
.pointer {
cursor: pointer;
text-decoration: underline;
}
That's it!
in css file put this:
.ui-jqgrid .ui-jqgrid-btable { cursor : pointer; }
It seems to me that you have not a jqgrid question, but pure CSS or javascript question. Look at How to get cursor to change before mouse moves when changing the cursor style dynamically for example. It shows how can one change cursor style of a html element. See also in http://www.quirksmode.org/css/cursor.html, that 'hand' is supported not in all browsers.