This is the Kendo UI demo showing hierarchical data: http://demos.telerik.com/kendo-ui/grid/hierarchy
It seems to work very well, but the first row is expanded automatically. I tried hacking around with it in their dojo, but couldn't find a way to disable that behavior.
How do I prevent rows from being automatically expanded in Kendo UI Grid?
It's because there is used expandRow method in dataBound event to expand first row. Remove it.
var element = $("#grid").kendoGrid({
....
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
....
});
Related
I have a dependent column that needs to be editable based on value of the first cell. How can do this using the beforeedit event of kendo grid.
I wish to avoid closing the cell in edit event of kendo grid.
Below is a sample
https://dojo.telerik.com/enodEwub
In order to achieve this when "Inline" edit mode is used you can use the Grid's cancelRow() method.
$("#grid").kendoGrid({
//....
edit: onEdit
});
function onEdit(e) {
//your custom logic
$('#grid').data("kendoGrid").cancelRow();
}
Hope that helps!
I have created a kendo HierarchicalDataSource
var fontidatasource = new kendo.data.HierarchicalDataSource({
data: vm.get("Source")
});
I want search in it the item that are checked.
I have tried to use a gatherStates function (kendo documentation), but don't function...
I'm afraid that there is not such filtering option for HierarchicalDataSources.
You might try this answer even that it says TreeView it applies here since the data model is the same.
I have a kendo grid with first column as Checkboxes. I want to delete multiple rows using those check boxes. I am able to delete only single row at a time.
I tried adding
.Batch(true)
for the data source and below is my function for delete button outside the grid.
function deleteRule() {
var grid = $("#grid").data("kendoGrid");
grid.select().each(function () {
grid.removeRow($(this));
});
}
Any suggestions please ?
Yo mate,
How exactly do you remove that one row? Why you use the select method?
Basically I would suggest you to create a delete button which executes the logic to delete the selected rows - I guess you are using a tempalte column with a checkbox inside. If you add a class to that checkbox you can easily select all the checkboxes inside of the grid. So lets say the name of the class for the checkbox is cool then you can execute the following logic in the delete button click handler:
function whenYourDeleteButtonIsClicked(){
var grid = $("#grid").data("kendoGrid");
$('.cool:selected').each(function(){
grid.removeRow($(this).closest('tr'));
})
}
I hope you got the idea mate.
Good luck.
Here is what i use
works very well
$('#your-grid-id').data("kendoGrid").select().each(function () {
grid.dataSource.remove(grid.dataItem($(this).closest("tr")));
});
Please look at my jsFiddle posted:
http://jsfiddle.net/chugh97/w3Kzt/1/
I have a fixed width jqGrid with scroll enabled and shrinktofit: false. Now when I tab through the 4th field in the jqGrid filter textbox, the filter textboxes are misalinged with the jqGrid columns. How can this be fixed?
jqGrid has very restricted support of keyboard navigation. I agree that the problem which you describe exist in the current (v. 4.3.1) implementation of jqGrid. So +1 from me for the question.
To fix the problem I suggest the following
$('#grid').closest('.ui-jqgrid-view')
.find('.ui-jqgrid-htable .ui-search-toolbar .ui-th-column')
.find('input, select')
.focus(function (e) {
var $header = $(e.target).closest('.ui-jqgrid-hdiv'),
$body = $header.siblings('.ui-jqgrid-bdiv');
setTimeout(function () {
// we syncronize the scroll in the separate thread
// to be sure that the new scrolling value
// already set in the grid header
$body[0].scrollLeft = $header[0].scrollLeft;
}, 0);
});
The usage of setTimeout is required in the Google Chrome web browser for example.
See the demo here.
Can anyone please tell how to get the click event of an empty grid.
i have an empty grid, and after inserting i need to refresh the grid for that i use a right click menu in the grid.
So at first there will be no data and need a click event of the grid,
Thanks,
Devan
It seems to me that you should trigger 'reloadGrid' after the filling of the grid.
If you do need implement 'click' or 'right click' event handler to the whole grid and not only the grid body you can use gbox div which will be constructed by jqGrid and which includes all jqGrid elements (see here for details):
var myGrid = $("#list");
// ...
$('#gbox_'+myGrid[0].id).click(function(e) {
alert("click!");
}).bind('contextmenu', function(e) {
alert("right click!");
});
See the corresponding demo here.