When editing a grid, how do I disable specific fields by row?

7 posts, 1 answers
  1. Nathan
    Nathan avatar
    6 posts
    Member since:
    Jan 2012

    Posted 08 Jan 2013 Link to this post

    I have a grid with data in it and multiple columns (say col 1, 2, and 3). Columns 1, 2, 3 need to be able to be edited (or preventing editing) based off the values of each other. This is row specific.

    For instance, if column 1 (date) is < column 2 (date) then column 3 is not allowed to be edited. 

    I know it's simple enough to disable or enable an entire column but my requirements are row specific. So row 1 could have column 3 enabled and row 2 could have column 3 disabled.

    Any thoughts?
  2.
  3. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 08 Jan 2013 Link to this post

    Hello Nathan,

    In order to achieve this you can hook up to the Grid's edit event and close the currently edited cell (depending on the conditions) using the closeCell() method. For example: 
    $("#grid").kendoGrid({
      //....
      edit: onEdit
    });
       
    function onEdit(e) {
      //your custom logic
      $('#grid').data("kendoGrid").closeCell();
    }

    Kind regards,

    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Robert
    Robert avatar
    6 posts
    Member since:
    Jan 2013

    Posted 09 Apr 2013 Link to this post

    Hi Iliana,
    The above will work for 'InCell'. Is there a method to do the same thing for 'InLine' editing?

    thanks,
    Robert
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 10 Apr 2013 Link to this post

    Hello Robert,

    In order to achieve this when "Inline" edit mode is used you can use the Grid's cancelRow() method. For example:

    $("#grid").kendoGrid({
       //....
       edit: onEdit
    });
        
    function onEdit(e) {
       //your custom logic
       $('#grid').data("kendoGrid").cancelRow();
    }
    Kind regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. jayesh
    jayesh avatar
    1 posts
    Member since:
    Jun 2011

    Posted 30 Dec 2013 Link to this post

    In Inline editing i want to bind different controls.
    Like if fist row cell1 have value is dropdown then while editing second cell it appear with dropdown.
    if Second row cell1 have value is Radio button then while editing second cell it appear with radio button.
    And selected value need to save in database.
  11. qianthinkover
    qianthinkover avatar
    8 posts
    Member since:
    Dec 2011

    Posted 14 Mar 2016 in reply to Iliana Nikolova Link to this post

    I wrote this configuration like yours, but this edit function cannot be fired.

    $("#grid").kendoGrid({
            columns: [
              { field: "name" },
              { field: "age" }
            ],
            edit: function (e) {
                if (e.model.IsNotEditable) {
                    console.log(e);
                    //revert edited cell back to `read` mode
                    this.closeCell();
                }
            },
            dataSource: [
              { name: "Jane Doe", age: 30 },
              { name: "John Doe", age: 33 }
            ],
            editable: true
        });
        function onEdit(e) {
            //your custom logic
            console.log(e);
            $('#grid').data("kendoGrid").closeCell();
        }

  13. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 16 Mar 2016 Link to this post

    Hi Guo,

    The "edit" event fires correctly with the configuration that you have, but the condition that you have will not pass, because you do not have IsNotEditable value in the bound rows. Following is an example for such scenario:
    dataSource: [
      { name: "Jane Doe", age: 30, IsNotEditable: true },
      { name: "John Doe", age: 33 }
    ],

    If your condition differs, please change the if statement, so it could fit to your exact scenario.


    Regards,
    Konstantin Dikov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  14.
Back to Top