I am using kendo UI tree view widget control and I am not able to use dataBound functionality.
$("#treeview").kendoTreeview({
dataSource: parent,
expanded: true,
dataBound: ondata,
dataTextField: ["Parent", "Child"]
}).data("kendoTreeView");
function ondata() {
alert("databound");
}
But the alert is not showing.
What's wrong with it? Am I missing any thing like script files or something?
I can see it is actually working here: Check the differences with your code.
Kendo treeview dataBound event only trigger if the data source is local.
May be check your datasource (binding).
Comments from telerik
"Basically current behavior is expected as currently the TreeView is
bind to the data on the server side. Please note that the DataBound
event is triggered only after binding data on the client side. "
(http://50.56.19.112/forums/databound-event-doesn't-fire#boLRI66aG2OF1P8AAFTdxQ)
Related
I am using Kendo UI TreeList & Grid for jquery. I want to hide a command button based on row values. In grid, I attached dataBound event to evaluate the model value and show/hide command button, below codes works fine
dataBound:function(e){
var delButton = e.container.find(".k-grid-Delete");
if (...) delButton.hide();
}
For TreeList, the same code seems also fine. However, when I add inline edit featrue, the same codes works differently.
When click "Edit" or "Add", the grid stay the original visible status, but treelist show all the button.
When click "Cancel", I triggered dataBound event in cancel event so the UI can be refreshed, then the grid show correctly but treelist still show all the buttons even if the dataBound is executed with correct logic.
Does anybody know how to resolve this issue?
Thanks,
Ziff Dai
My intention is to hide several columns depending on different "steps" in Kendo UIs' Grid. More specifically i want to show 2 columns hidden with {field: "id", hidden: true}, with the "beforeEdit" Event Handler.
$("#grid").kendoGrid({
save:console.log("save"),
cancel:console.log("cancel"),
beforeEdit: console.log("beforeEdit"),
(...some more code...)
dataSource: dataSource
});
According to the Kendo UI Doc(Link) these handlers should trigger on editing, saving or cancelling edits. For testing purposes i make a console.log output within these handlers. But no matter what, the handler seems to fire as soon as i open refresh the page.
I'd appreciate any kind on information why this misfeature occur.
With best regards
Marcel
Ok, my bad. It is friday... i forgot to define a function within the triggers.
save:function(){
console.log("save")
},
Problem solved!
Browser: IE 9
Context: An editable, sortable(server side) KendoUI grid is populated.
Issue: The objective is to pop up a message if there are any unsaved changes.
User clicks on a cell
User edits the text in the cell
User clicks on the column header
The grid’s datasource does not catch the edit. Dirty property of the data item is false.
Kendo UI grid always sorts the column. I have been unable to find a way to intercept the sort event and warn the user and cancel the sort event.
Any help is appreciated.
Version: kendoui.aspnetmvc.2013.2.716
In order to cancel the sort event, call event.preventDefault() in the requestStart event of the datasource.
hasChanges() method of the datasource returns false if
Grid columns are reorderable. (.Reorderable(r => r.Columns(true))
//Kendo htmlhelper code)
Sorting is done on the server
User edits the text in a cell and click on the column header
If you remove the Reorderable setting, hasChanges() method of datasource returns true.
Opening a support ticket for this issue.
In the meantime, if you would like to catch the edit with hasChanges() method when user edits the cell and clicks the column header do not set the Reorderable to true.
Here is a video demonstrating the KendoUI Grid issue
Response from Telerik
Basically this is happening because when reordering the event that is used is the mousedown event.
When the mousedown event is triggered the model is still not updated.
As a work-around I can suggest you the following resolution:
Put this in a script block after initializing the Grid. This way if the Grid is still in edit mode, no matter if you have made a change or not the Dragging will be prevented.
$(function () {
var gr = $('#Grid').data().kendoGrid;
gr.thead.on('mousedown', function (e) {
if (gr.tbody.find('.k-edit-cell').length) {
e.stopImmediatePropagation()
}
});
})
I successfully configured a subgrid including the subGridRowExpanded callback in my grid.
This means the callback and config values are valid.
I want to remove the subgrid configuration now in order to add it programmatically.
First step - set subgrid to true:
jQuery('#s3list').jqGrid('setGridParam', {
subGrid: true
});
This causes the following error:
TypeError: this.p.subGridOptions is undefined.
Second step - adding required subGridOptions:
jQuery('#s3list').jqGrid('setGridParam', {subGridOptions: {
reloadOnExpand: false
}});
This causes the following error:
TypeError: b.p.colModel[(((n + x) + C) + H)] is undefined
Adding my valid callback for subGridRowExpanded has no effect - the error stays the same:
jQuery('#s3list').jqGrid('setGridParam', {
subGridRowExpanded: function(subgrid_id, row_id) {
/* lots of valid code */
}
});
Is it possible at all?
Using jqGrid 4.5.2.
Related issues / questions:
https://github.com/tonytomov/jqGrid/issues/478
jqGrid dynamic event
How to programatically add an event handler on a JQGrid?
How to reload JQuery grid keeping scroll position and collapse elements open
Add an event handler to jqGrid after instantiation
I suppose that there are misunderstanding what subGrid: true option do. jqGrid add column with the namse subgrid if you create grid with the option. Because you can't add new column dynamically in jqGrid you can't switch on subGrid option in the grid without recreating of it with respect of GridUnload method (see the answer).
The method setGridParam is stupid. It just use $.extend to extend the internal option of jqGrid (see the source code). Usage of the method without taking in consideration the specific of the option can break functionality of the grid.
There are some scenarios when one can create grid with subgrid and hide the column with (see the answer and this one). You should consider in details whether such approach is acceptable for your requirements.
I have one page where i have bind data by using JqGrid, but My requirement is In editing one row of a grid, the editable fields must NOT BE builtin fields( builtin textboxs) i want to bind that to other textboxes, check boxes which are outside grid. The data which i want to edit must be supplied to other input controls other than jqgrid builtin input controls, Finally IS THIS POSSIBLE???
Hope iam clear with my question.
Please do help me in reply saying either YES or NO or How, and why.
edited
I am not sure that I understand correctly what you mean, but it seems that you should just use form editing mode. To activate it on the client side you should just add editable: true property to all columns which are editable or use the option cmTemplate: {editable: true} which makes default value of editable for all columns as true. After it you can for example use navGrid to add Add, Edit and Delete buttons in the pager. The functionality on the client side will be ready after that. Now you have to implement editing part in the server code only. If you use commercial version of jqGrid like jqSuite you should address to the documentation or demos for more details.
try this
http://www.trirand.net/examples/grid/selection/selectedrow_client/default.aspx
or
Try this
<ClientSideEvents BeforeEditDialogShown="beforeEdit"/>
<script type="text/javascript">
function beforeEdit(rowID) {
var grid = jQuery("#<%= JQGrid1.ClientID %>");
lastSelectedRow = grid.getGridParam("selrow");
};
</script>