Last Updated: 08 Jan 2020 07:20 by ADMIN
Created on: 06 Nov 2018 23:19
Category: Grid
Type: Feature Request
introduce a "BeforeRender" event on Telerik/Kendo grid
I hope other developers realize the importance of this feature and vote for it.

It would be nice (in fact, important to have) an event that we can hook into, after the Edit event fires but before the editor template (more relevant when the editor is a custom popup template).

Let me explain.  On my custom editor template, I have a few dropdownlists that are not defined as foreign keys from the grid datasource.  The dropdowns are defined on the template, usually with a Read action on it.  This read action fires when the template is rendered.  In the Edit event, I need to set some of the elements as different or hidden or shown based on the selected value from more than one dropdown.  This is needed so that some other elements are shown/hidden when the popup is rendered.  The problem is, The edit event is too early to know the selected items in these dropdowns since the data for these ddls are not loaded yet.  Since I need values from multiple dropdowns, hooking into individual databound events of the ddls won't work either.

So, if we had an event something like "BeforeRender" on the grid that fires after all the datasources are loaded and databound for all relevant elements on the editor template, but before the template is rendered onscreen that would be great.  Then, we can hook into this event and when we do, all the datasources for all the dropdowns, comboboxes etc. are loaded and databound already. We can use the items from these elements to show/hide other elements.
1 comment
Alex Hajigeorgieva
Posted on: 07 Jan 2020 13:55

Hi, Babu,

The Kendo UI Grid has an edit and beforeEdit event and the custom editable popup window has an activate and open events that could be used:

However, it seems that you would like the grid to trigger an event when all of the widgets in the custom template that you have are read and dataBound. 

The desired functionality can be achieved by utilizing autoBind:false for the dropDownLists, then using promises as the read() method of the data source returns a promise:

 var promises = [];
var productsPromise =;
var colorsPromise =;
$.when.apply(null, promises)
        .then(function() {
        console.log("Both finished");

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.