Kendo UI Grid post rendered or post databound event?
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
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.
you can use this way:
transport: {
read: {
url: searchUrl,
type: "POST",
dataType: "json",
data: additionalData,
complete: function () {
//code here :)
}
},
},
I have had situations where, (in a pinch), a MutationObserver may be deployed to “sense” when the grid has inserted rows into the DOM. In most cases, the grid’s own dataBound event will suffice. However, when there’s:
- render-blocking JS, maybe on initial page load, and/or
- slow connection/high latency, and/or
- poorly constructed jumble of Kendo JS from server-side wrapper(s), mixed in with script blocks
Anyway, prior to rows being rendered the tbody tag buried within the grid will look like this:
<tbody>
<tr class="k-no-data">
<td colspan="9"></td>
</tr>
</tbody>
and after the rows are rendered it will like:
<tbody role="rowgroup">
<tr data-uid="004c8970-ba7e-4e3c-ae54-2695c6cbdbe8" role="row" class="k-state-selected"
aria-selected="true">
<td role="gridcell">07/18/2004</td>
<td role="gridcell">24</td>
<td role="gridcell">1890</td>
<td role="gridcell">0</td>
<td role="gridcell">176</td>
<td role="gridcell">0</td>
<td role="gridcell">2439</td>
<td role="gridcell">2500</td>
<td role="gridcell"></td>
</tr>
.....more rows, then
</tbody>
so, something like:
let observer = new MutationObserver(mCallback);
function mCallback(mutations) {
for (let mutation of mutations) {
if (mutation.addedNodes.length > 0) {
doAutoDemoChart();
}
}
}
let observerOptions = { childList: true }
let gridContent = document.querySelector("#dailyProdGrid div.k-grid-content tbody")
observer.observe(gridContent, observerOptions);
will detect the change in DOM. In effect, this creates a “rowsRendered” grid event. I had a situation where there was a lot riding on rows being present for a chart demo; (see here). Programmatically, rows needed to be selected (based on a prescribed date range), then a window opened and filled with a logarithmic chart.
