This is a migrated thread and some comments may be shown as answers.

Grid change event firing issue

7 Answers 715 Views
Grid
This is a migrated thread and some comments may be shown as answers.
loi
Top achievements
Rank 1
loi asked on 13 Feb 2013, 06:50 PM
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.

7 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 15 Feb 2013, 09:56 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Pawan
Top achievements
Rank 1
answered on 19 Apr 2013, 10:56 AM
    $('#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");
        }




0
loi
Top achievements
Rank 1
answered on 19 Apr 2013, 03:00 PM
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();
    });
}


0
Pawan
Top achievements
Rank 1
answered on 19 Apr 2013, 03:03 PM
Hi Loi
Is that function attached to databound event?
0
loi
Top achievements
Rank 1
answered on 19 Apr 2013, 03:11 PM

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();
    });
}

0
Pawan
Top achievements
Rank 1
answered on 19 Apr 2013, 03:13 PM
Thanks Loi For the answer but  i am still getting the same issue.
0
loi
Top achievements
Rank 1
answered on 19 Apr 2013, 03:24 PM

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

change: function (e) {
    onRowSelected(e);
}
Tags
Grid
Asked by
loi
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Pawan
Top achievements
Rank 1
loi
Top achievements
Rank 1
Share this question
or