How to find out which part of the table the current cell being edited is in when using locked and unlocked columns?

Question

I am using locked and unlocked columns in a kendo grid, and I have the edit event happening when I click on a cell. The problem is since the grid is split into two (because of the locked and unlocked columns), I can`t figure out which table the current edit cell is being edited in...

IE: I click on a cell in the Name column, its index is 0, and then if I click a cell in the gender column, its index is 0.

The grid that I am working has more locked and unlocked columns than this one.

$("#grid").kendoGrid({
  columns: [{
      field: "name",
      locked: true,
      width: 200
    },
    {
      field: "gender",
      width: 100
    },
    {
      field: "city",
      width: 100
    }
  ],
  dataSource: {
    data: [{
        id: 1,
        name: "Jane Doe",
        gender: "female",
        city: "Sofia"
      },
      {
        id: 2,
        name: "John Smith",
        gender: "male",
        city: "London"
      },
      {
        id: 3,
        name: "James Jones",
        gender: "male",
        city: "New York"
      },
      {
        id: 4,
        name: "Mary Johnson",
        gender: "female",
        city: "Paris"
      },
      {
        id: 5,
        name: "Robert Lee",
        gender: "male",
        city: "Berlin"
      }
    ],
    schema: {
      model: {
        id: "id",
        fields: {
          name: {
            type: "string",
            editable: true
          },
          gender: {
            type: "string",
            editable: true
          },
          city: {
            type: "string",
            editable: true
          }
        }
      }
    }
  },
  navigatable: true,
  selectable: "row",
  editable: {
    mode: "incell",
    confirmation: false
  },
  edit: function(e) {
    console.log(e.sender.current().index());
  },
  change: function(e) {

  }
});

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.mobile.all.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>

<div id="grid" style="width:400px"></div>

I added an attribute to the columns if its a locked column then I gave it a class of column-locked and if its an unlocked column then I gave it a class of column-unlocked. Now all I need to do is check the classList. If anyone has a different way to do what I need to do then please let me know — Chris, Oct 24 '19 at 16:42

score 0 · Accepted Answer · answered Oct 28 '19 at 15:17

You could try the jQuery .is() method and compare the table of the current cell with the grid's lockedTable element.

See jQuery - how to check if two elements are the same?

edit: function(e) {
    console.log(e.sender.current().index());
    let isLocked = e.sender.current().closest("table").is(e.sender.lockedTable);
    console.log("Is Locked Portion: ", isLocked);    
}

Example

How to find out which part of the table the current cell being edited is in when using locked and unlocked columns?

1 Answers1