Kendo UI Grid post rendered or post databound event?

23
votes

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

3
javascriptkendo-uitelerikkendo-gridtelerik-grid
the 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 – Lars Höppner
@LarsHöppner added that code.. let me know if more is needed. – Sonic Soul
those span.editable elements are part of which template? – Lars Höppner
they 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
also added the client template definition.. what i am looking for is a event that fires after the rows have been added – Sonic Soul

3 Answers

11
votes

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.

1
votes

you can use this way:

 transport: {
           read: {
           url: searchUrl,
           type: "POST",
           dataType: "json",
           data: additionalData,
           complete: function () {
              //code here :)
           }
        },                   
     },
0
votes

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.