Kendo UI Grid post rendered or post databound event?
Solution 1
See this sample code taken from the documentation (API docs on events are here) on how to bind an event handler using MVC wrappers:
@(Html.Kendo().Grid(Model)
.Name("grid")
.Events(e => e
.DataBound("grid_dataBound")
.Change("grid_change")
)
)
<script>
function grid_dataBound() {
//Handle the dataBound event
}
function grid_change() {
//Handle the change event
}
</script>
If you want to bind a handler in JavaScript, you need to access the grid like this:
var grid = $("#grid").data("kendoGrid");
grid.bind("dataBound", function(e) {});
When you do this here:
$('#grid').kendoGrid({
dataBound: function(e) {
console.debug('data bound..');
}
});
you actually create a new grid instance.
Solution 2
you can use this way:
transport: {
read: {
url: searchUrl,
type: "POST",
dataType: "json",
data: additionalData,
complete: function () {
//code here :)
}
},
},
Related videos on Youtube
Sonic Soul
Updated on July 09, 2022Comments
-
Sonic Soul almost 2 years
Is there a way to trigger an event after grid has been reloaded via ajax?
i see the RequestEnd event. but that seems to happen when the request returned, but before the grid has been refreshed.
i also see DataBound event. but that happens even earlier than RequestEnd,
also when i implement DataBound event, my header disappears..i had to resort to this hack
function requestEnd(o) { console.debug('request ended.', o); setTimeout(refreshEditable, 500); // enough time to render the grid } function refreshEditable() { // perform my actions on controls within grid content }
as a side note.. I am having a very hard time finding a reliable kendo grid mvc API reference. when i google for it, i get this: http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/migration/widgets/grid which is a collection of little how-to and some "Events" but those don't correspond to what I am seeing in razor intelisense.
update: adding databound definition
$('#grid').kendoGrid({ dataBound: function(e) { console.debug('data bound..'); } });
and here's grid ajax definition
.Ajax().Read(read => read .Action("FilesRead", "SomeController") .Data("readData")) function readData() { return { IncludeChildren: $("#IncludeChildren").is(':checked'), SearchString: $('input[id=SearchString]').val() }; }
i can see that DataBound is triggered while making the ajax call, not after it comes back.
update
corrected the DataBound event hook.
in dataBound function, i'm trying to get a reference to newly rendered templates..
function dataBound(o) { console.debug($('span.editable').length); // returns 0 setTimeout("console.debug($('span.editable').length)", 500); // returns 4 }
the spans are added using a client template
.ClientTemplate(@"<span class=""editable"" ... >#=DOCUMENT_DATE_FORMATTED#</span>");
see what i mean? data bound happens before grid is rendered
-
Lars Höppner over 10 yearsthe DataBound event is triggered after the DOM is updated; if you're not getting the result you expected, there is a problem with your code, so you should add that
-
Sonic Soul over 10 years@LarsHöppner added that code.. let me know if more is needed.
-
Lars Höppner over 10 yearsthose span.editable elements are part of which template?
-
Sonic Soul over 10 yearsthey are in ClientTemplates for few columns.. made the latest code a bit more clear.. the fields do show up, just with some delay after DataBound.. so it's evident that this event happens before rendering of new rows
-
Sonic Soul over 10 yearsalso added the client template definition.. what i am looking for is a event that fires after the rows have been added
-
Lars Höppner over 10 yearsthat's what dataBound is for - like I said, it definitely gets triggered after the rows are updated; I'm not sure what the problem is in your case; I can only suggest adding your full grid definition here; or maybe you can upload a sample project somewhere
-
Sonic Soul over 10 yearswell from my example it's pretty clear that it gets triggered before the rows are rendered. you can see the 2 consecutive lines and the one with 500ms delay finds the new rows.
-
Lars Höppner over 10 yearsall I know is that if you read the source code, you'll see that triggering dataBound is the last thing that happens in the grid's refresh method (and that method gets called after the data source sends its change event); there's also no asynchrony in the code that would explain what you're seeing; so I'm pretty sure there must be another epxlanation, but I can't see it from the information you've given
-
Sonic Soul over 10 yearshmm.. this is a pickle indeed. well thanks for the help!
-
-
Sonic Soul over 10 yearsright on.. i missed that new-instance part, and the events i was looking at were on DataSource, and not on Grid. the problem with the documentation you posted, is it's a long a-z how to article. i really wanted to find just a Events api documentation.. which seemed like a impossible task
-
Sonic Soul over 10 yearsactually DataBound still happens too soon. it happens at the same time as getting the collection back, but before the contents are rendered. i know this because im calling some javascript that selects rendered elements.. i'll post a sample
-
Sonic Soul about 10 yearsas a fun bonus, when i add that dataBound: function(e) definition with just the console.debug line, my whole grid header drops to the bottom of the grid!
-
Lars Höppner about 10 yearswell, that should obviously not happen..can't help without a demo of the problem unfortunately