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:
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.