How stop refreshing the kendo grid while selecting dropdown inside grid?

Question

Acutally i am using kendo tree view. If i click check box it will create another one grid inside of Activity Column.In that one of the column is outputcategorycode. when ever i am clicking the none value one dropdown will bind dynamically there. then i need to select any one of the value in that dropdown. Once selection is done , checkbox is changing to uncheck mode then inside grid also disappearing that means whole grid is refreshing.

Please have look my Dojo link and give me solution for that.

http://dojo.telerik.com/@bagya/iMeRi

Thanks in advance...

Answer 1

You can bind the databinding event and stop grid from refreshing. Adding this in databound will prevent grid from refreshing.

 $("#grid").data("kendoGrid").bind("dataBinding", function(e) {
      e.preventDefault(); 
    });

Once you are done with 'doing stuff' you can unbind the function by simply calling

grid.unbind("dataBinding");

Check your updated dojo with the changes :

NOTE : I have added it in databound of the grid just to show working, but you probably should not do that, since it wont bind other grid data. So add a different handler and based on certain event as per your requirement, disable grid refresh and enabled after event is done.

Update:

You can use the onOpen and onClose event of the kendoDropDownList. Refer below:

Bind the onOpen and onClose events to the dropdown

 function OutputProductEditor(container, options) {  


        $('<input required data-text-field="Value" data-value-field="Key" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                //autoBind: false,
                dataSource: ProductData,
          close: onClose,
          open: onOpen,
            });
    }

onOpen prevent refresh by adding databinding function

function onOpen() {
                var grid = $("#grid").data("kendoGrid");

   grid.bind("dataBinding", function(e) { e.preventDefault(); });
                };

onClose - remove databinding

  function onClose() {
                   var grid = $("#grid").data("kendoGrid");
                  grid.unbind("dataBinding");
                };

Here is the updated dojo