grid with group: navigation only in one editable column

5 posts, 0 answers
  1. Igor
    Igor avatar
    21 posts
    Member since:
    Sep 2016

    Posted 10 Jul 2017 Link to this post

    Helloi All,

    I have a simple grid with 3 columns: section, question, and answer. Only answer column is editable. I need to:

    1) hide group column(section)

    2) don't allow user select a row and only allow a navigation in Answer column with Up/Down/Enter key down events 

    Please look at my example

    http://dojo.telerik.com/@iakhmedov1/AbIlE

    and correct the code to get it working as it is required

    Thanks,

    Igor

     

     

     

     

     

     

     

     

     

  2. Preslav
    Admin
    Preslav avatar
    591 posts

    Posted 12 Jul 2017 Link to this post

    Hi Igor,

    To hide a column, use the columns.hidden configuration:
    To modify the navigation in a Grid, please refer to the "Skip Non-Editable Cells When Tabbing" article:
    Regards,
    Preslav
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Igor
    Igor avatar
    21 posts
    Member since:
    Sep 2016

    Posted 20 Jul 2017 in reply to Preslav Link to this post

    Hi Preslav,

    I put the code you recommended (http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/skip-non-editable-cells-when-tabbing) into my example ( http://dojo.telerik.com/@iakhmedov1/eBuge ). It does not work as expected: tab, up, down don't make next answer editable. Please take a look and fix it.

    Thanks,

    Igor

     

     

     

     

     

  4. Preslav
    Admin
    Preslav avatar
    591 posts

    Posted 24 Jul 2017 Link to this post

    Hello Igor,

    I was able to determinate these issues in the provided code:
    1. the onDataBound was not bound to the Grid:
        editable: "incell",
        dataBound: onDataBound
      });
    2. The "if" statements in the keydown event handler always returns false due to the fact that the currentNumberOfItems variable is two because the dataSource is grouped.

    Additionally, the DropDownList and the ComboBox have their own keydown handlers. That said, in order to disable these handlers in the Grid, you should override them. For example, the code might look like:

    <script>
     
      var oldCBkeydown = $.fn.kendoComboBox.widget.fn._keydown;
      $.fn.kendoComboBox.widget.fn._keydown = function(e){     
        var dataBindAttr = $(e.target).attr("data-bind");
        if(typeof dataBindAttr == typeof undefined || dataBindAttr == false){     
          this.__keydown = oldCBkeydown;
          this.__keydown(e);      
        }
      };
           
       
      var oldDDLkeydown =$.fn.kendoDropDownList.widget.fn._keydown;
      $.fn.kendoDropDownList.widget.fn._keydown = function(e){
        if($(e.target).find("[data-bind]").length < 1){       
          this.__keydown = oldDDLkeydown;
          this.__keydown(e);      
        }
      };
       
    </script>


    Finally, the modified Dojo is available here: http://dojo.telerik.com/ArOKE/2

    I hope the above helps.


    Regards,
    Preslav
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Igor
    Igor avatar
    21 posts
    Member since:
    Sep 2016

    Posted 27 Jul 2017 in reply to Preslav Link to this post

    Hi Preslav,

     

    Thank you very much.

     

    Best regards,

    Igor

Back to Top