Get row index of a data table control that is being changed

Forms
1

How do you find the row index of a data table control that is being changed? I have tried the JS codes below without success.

fd.control('DataTable1').$on('change', function(e) {
    var selectedItem = $(e.currentTarget).closest("tr");
    console.log("selectedItem ", selectedItem)
    var rec = selectedItem.index();
    console.log("rec ", rec);
});

Your assistance would be much appreciated! Thank you!

2

Dear @COR6603,
There are different ways to do it, but you can use this:

fd.control('DataTable1').$on('edit', function(e) {
    var currentRow = $(e.container).closest("tr");
    console.log(currentRow.index());
});
3

That works! Thank you!

1 Like
4

I am using datatable , after I have update multiple rows (row 1, 4 ,7) , anyway I can know which rows have been changed?

5

Hi Derek,

I have used the provided JS codes and expanded it to address the specify your own value on a single row in the data table. That is, if the 1st column value in the row is “Other (Specify)”, then it enables the 2nd column and let user enters their own value, otherwise, it will assign the value in column 1 to column 2. See example below.

/*****************************************************************/
//  DataTable DataTable1

//

var isNew = false;
var currentRowIndex = 0;

 //On edit, get current row index 
fd.control('DataTable1').$on('edit', function(e) {
    var currentRow =  $(e.container).closest("tr");
    currentRowIndex = currentRow.index();
    //console.log("currentRowIndex ", currentRowIndex);
})

//Set flag if current row is a new record
fd.control('DataTable1').widget.wrapper.find('.k-grid-add').on('click', e => {
    isNew = true;
});

//Set flag if current row is not a new record
fd.control('DataTable1').widget.bind('edit', function(e) {
    if (isNew) {
        isNew = false;
    }
    
});  // on edit

//On change, 
fd.control('DataTable1').$on('change', function(value) {
        
    var rec = currentRowIndex;
    //console.log("rec ", rec);
    //console.log("value ", value);

    // if column 1 value = Other (Specify), allow user to enter a value in the 2nd column when it’s new
    if (fd.control('DataTable1').value[rec].Column1 == "Other (Specify)") {
            
        //Make the 2nd column editable
        fd.control('DataTable1').columns[1].editable = function(){return true};

        //If it’s a new record, default column2 value to blank so user can enter the value 
        if (isNew && fd.control('DataTable1').value[rec].Column1.length == 0 ) {
            fd.control('DataTable1').value[rec].Column2 = null;
        }
            
    } else {
        
        //If it’s not a new record, update the value in the 2nd column if the value in the 1st column has changed
        if (fd.control('DataTable1').value[rec].Column2 != fd.control('DataTable1').value[rec].Column1) {
            fd.control('DataTable1').value[rec].Column2 = fd.control('DataTable1').value[rec].Column1;
        }     
   
    }

    isNew = false;
    //refresh data table so the set value will display
    fd.control('DataTable1').widget.refresh();

});  // on change

/*****************************************************************/

Hopes this help!

1 Like