Grid change event firing issue

[loi]

I notice the following 'features' after attaching a change event to a grid.
 1) The change event fires even when an already selected row is clicked on.
 2) The change event fires when clicking on an anchor or a button element in a grid's row.

Any work-around suggestion for the grid to not fire the change event in the above cases is appreciated.

Thank you in advance.

[Vladimir Iliev]

Hi Loi,

 

1. Please note that this behavior is not an issue but it's the way that the selection works, however in the change event you can track if currently selected row is equal to the last selection using global variable - please check the example below:

   var lastSelection;
   function onChange(e) {
   
       var currentSelection = e.sender.select().attr("data-uid");
       if (lastSelection && currentSelection != lastSelection) {
           //new row is selected
           //execute your custom logic
       }
       lastSelection = currentSelection;
   }

2. You can use delegate to attach mousedown event handler to all anchor tags in the grid tbody element to execute the jQuery stopImmediatePropagation method (which prevents the selection change). Please check the example below:  

   $(function () {
       $('#GridName').data('kendoGrid').tbody.on('mousedown', 'a', function (e) {
           e.stopImmediatePropagation()
       })
   })

     

Kind Regards,
Vladimir Iliev
the Telerik team

[Pawan]

    $('#GridName').data('kendoGrid').tbody.on('mousedown', 'a', function (e) {
        e.stopImmediatePropagation()
    })

does not stop propagation in my case.


For this code how could you make the alert("hello") appear only once. At the moment i am getting the alert twice. Which means my event is being fired twice .

   gridResult = $("#grid").kendoGrid({

                scrollable: {
                    virtual: true
                },
                navigatable: true,
                groupable: true,
                sortable: true,
                selectable: "row",

                pageable: {
                    buttonCount: 5,
                    input: true,
                    numeric: false,

                },

                resizable: true,
                reorderable: true,
                filterable: {
                    extra: false
                },
                columns: [            
                      {
                          field: "DealExchange",
                          width: 150,
                          title: "Exchange",
                          filterable: {
                              operators: {

                                  string: {
                                      startswith: "Starts With",
                                      contains: "Contains"
                                  }
                              }
                          }
                      },
                         {
                             field: "DealType",
                             width: 150,
                             title: "Type",
                             filterable: {
                                 operators: {
                                     string: {
                                         startswith: "Starts With",
                                         contains: "Contains"
                                     }
                                 }
                             }

                         },
                            {
                                field: "DealValue",
                                width: 150,
                                title: "Value ($m)",
                                filterable: {
                                    operators: {
                                        string: {
                                            startswith: "Starts With",
                                            contains: "Contains"
                                        }
                                    }
                                },
                                /*   template: '#= kendo.culture("en-US");kendo.toString(${DealValue/1000000},"p")#' */

                                template: '#= kendo.toString(DealValue,"c2") #'

                            },                          
                     {
                         field: "DealPricingCompletionDate",
                         width: 230,
                         title: "DealPricingCompletionDate",
                         format: "{0:dd/MM/yyyy}",
                         filterable: {
                             ui: "datetimepicker",
                             operators: {
                                 date: {
                                     gt: "After",
                                     lt: "Before",
                                     eq: "Equals"
                                 },
                                 messages: {
                                     filter: "Apply",
                                     clear: "Clear"
                                 }
                             }

                         }
                     },
                ],
               change: function (e) {

                    onRowSelected(e);
                    $('#grid').data('kendoGrid').tbody.on('mousedown', 'a', function (e) {
                        e.stopImmediatePropagation()
                    });
                },
                height: 700
            }).data("kendoGrid");


    function onRowSelected(e) {         
            console.log(e);
            alert("hello");
        }

[loi]

Pawan, place the code inside the databound event..

function onDataBound_PersonSearchResultGrid(e){
    var grid = e.sender;
    grid.tbody.on('mousedown','a,button,input[type="button"]', function (evnt) {
        evnt.stopImmediatePropagation();
    });
}

[Pawan]

Hi Loi
Is that function attached to databound event?

[loi]

That was the stand-alone event databound function, you can hook it into your grid databound event.. or you can declare it inline like so

dataBound: function(e){
    var grid = e.sender;
    grid.tbody.on('mousedown','a,button,input[type="button"]', function (evnt) {
        evnt.stopImmediatePropagation();
    });
}

[Pawan]

Thanks Loi For the answer but  i am still getting the same issue.

[loi]

try removing that select override code block in your 'change' event..

change: function (e) {
    onRowSelected(e);
}