33748

Navigatable Grid Lost Focus to Top When Setting Data Item Value

I have a kendo grid with "<strong>navigatable</strong>" and "<strong>scrollable</strong>" options enabled. I have a custom template column which includes a checkbox inside. And there are a few records to make vertical scroll visible.

When I set a dataItem value in the "<strong>change</strong>" event of my custom checkbox, the grid changes its focus to the top row of the same column. Which also means; if I click a checkbox at the bottom of the scrolled grid, the scroll goes top of the records. I've discovered the case occurs only when the "navigatable" option is enabled. If I disable it, it does not lose focus.

Here is a jsFiddle example of this case:

function chkChanged() {
    var isChecked = $(this).is(":checked");
    var item = $("#grid").data("kendoGrid").dataItem($(this).closest("tr"));
    if (!item) {
        return;
    }
    item.fields["CheckBox"].editable = true;
    item.fields["FirstName"].editable = true;
    item.set("CheckBox", isChecked);
    item.set("FirstName", isChecked.toString().toLowerCase());
    item.fields["FirstName"].editable = false;    
    item.fields["CheckBox"].editable = false;    
    setTimeout(reBindChangeEvents, 200);
}


function reBindChangeEvents() {
    $(".chk").unbind("change", chkChanged);   
    $(".chk").change(chkChanged);
}

$(document).ready(function () {
    var grid = $("#grid").kendoGrid({
        dataSource: {
            data: createRandomData(10),
            group: {
                field: "City"
            },
            schema: {
                model: {
                    fields: {
                        CheckBox: {
                            type: "bool",
                            editable: false
                        },
                        FirstName: {
                            type: "string",
                            editable: false
                        },
                        LastName: {
                            type: "string",
                            editable: true
                        },
                        City: {
                            type: "string",
                            editable: false
                        },
                        Title: {
                            type: "string",
                            editable: false
                        },
                        BirthDate: {
                            type: "date",
                            editable: false
                        },
                        Age: {
                            type: "number",
                            editable: false
                        }
                    }
                }
            },
            pageSize: 10
        },
        height: 300,
        scrollable: true,
        sortable: true,
        selectable: false,
        editable: true,
        filterable: true,
        groupable: true,
        //navigatable: true,
        columns: [{
            field: "CheckBox",
            title: " ",
            template: "<input class='chk' type='checkbox' #= CheckBox && CheckBox.toString().toLowerCase() === 'true' ? checked='checked' : '' # >",
            width: 30,
            filterable: false,
            groupable: false
        }, {
            field: "FirstName",
            title: "First Name",
            width: 150,
        }, {
            field: "LastName",
            title: "Last Name",
            width: 150,
        }, {
            field: "City",
            width: 150,
        }, {
            field: "Title",
            width: 150,
        }, {
            field: "BirthDate",
            width: 500,
            title: "Birth Date",
            template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #'
        }, {
            field: "Age"
        }]
    }).data("kendoGrid");    
    setTimeout(reBindChangeEvents, 200);
});


Is this a bug, or I am doing something wrong? At the moment, I could not find any other way to disable the "navigatable" option.

<strong>EDIT 1 :</strong> With the help of the answers here and using Kendo Grid after a 1-year time, this information may help others who have issues about html refreshing and grid performance. dataItem.set() function always refreshes the whole grid html (at least in version 2013_Q2) <strong>You should use grid.editCell($td) method</strong> to switch into cell editing mode. And then grid.closeCell() after setting dataItem value. This lets grid to refresh only td cell html. And helps a lot about grid performance.

<hr>

Answer1:

After stepping through the code, I'd say this is a bug in kendoGrid's refresh method. If navigatable is true, the grid changes its current element to the first grid cell when refreshing the grid widget, scrolls to it and focuses the table again.

Additionally, in Chrome, the focusTable function breaks the jsfiddle page for me by moving the top menu bar out of view. It seems to be caused by table[0].focus()in the grid's focusTable function, which is called after refreshing the grid. I've seen this behavior before, so I don't think it's an issue with jsfiddle. In fact, calling $(grid.table).focus(); seems to reproduce the behavior consistently for Chrome.

Edit:

The second bug appears to be fixed in their Q3 release (2013.3.1119).

Answer2:

This issue occurred when we try to do the dataItem.set('IsSelected', checked); because re rendered the grid when we did the dataItem.set('IsSelected', checked);

Answer3:

With the help of the answers here and using Kendo Grid after a 1-year time, this information may help others who have issues about html refreshing and grid performance:

dataItem.set() function always refreshes the whole grid html (at least in version 2013_Q2)

<strong>You should use grid.editCell($td)</strong> method to switch into cell editing mode. And then grid.closeCell() after setting dataItem value. This lets grid to refresh only td cell html. And helps a lot about grid performance.

Recommend

  • Nested child state with ui-router
  • 'RUN PEX' does not appear on rightclick
  • How do I silently install a 7-zip self-extracting archive to a specific directory?
  • Swift app stops running after an error
  • Corp image with ruby
  • HTML input field disable input but still POST
  • windows.resize function issue
  • unbind ng-click dynamically from element : angularjs
  • Jquery Disable Next button until animation finishes
  • jquery: how to disable dblclick events?
  • Bash - Hiding command (preventing from bad manipulations)
  • saving checkbox values in vb.net
  • Can't get attr id with jquery
  • Navigatable Grid Lost Focus to Top When Setting Data Item Value
  • boto s3 Bucket versus get_bucket
  • MIPS questions about writing assembly to call functions on an array
  • JavaScript RegEx to match punctuation NOT part of any HTML tags
  • Set columns of JTable in specified order after creation
  • Can i run WebAppContext with WebSocketHandler in same instance?
  • QStandardItemModel::removeRows() does not work in my use case
  • Increasing dimensions on hover without changing the position of other elements
  • keydown event triggered only once
  • How to do custom filtering in Datatables with comma separated values?
  • Seamless scrolling text
  • IE8 stops network access after 5 long polling request
  • Collect checkbox values in jQuery and POST them on submit
  • setTimeOut and local function
  • Is is safe to use HSQLDB for production? (JBoss AS5.1)
  • Is there a way to disable a specific event in kendo ui scheduler?
  • Python: sending key press events over SSH
  • Uncaught TypeError: $(…).select2 is not a function
  • Button click event not firing in jQuery
  • chrome.tabs.executeScript only fires when the Developer Console is open
  • Word Open XML Mail Merge
  • JSON response opens as a file, but I can't access it with JavaScript
  • How do I alternate colors in Flat List (React Native)
  • Bitwise OR returns boolean when one of operands is nil
  • sending mail using smtp is too slow
  • costura.fody for a dll that references another dll
  • Binding checkboxes to object values in AngularJs