How to override editing row and call custom edit in jsgrid

Question

Tried this How to customize edit event in JsGrid as below. But doesnt seem to work

$("#jsgrd").jsGrid({
  data: ds,
  fields: [{
    type: "control",
    editItem: editrow(item)
  }, ]
});

function editrow(item) {
  var $row = this.rowByItem(item);
  if ($row.length) {
    console.log('$row: ' + JSON.stringify($row)); // I modify this
    this._editRow($row);
  }
}

The error I get now is "item" not defined.

What I m looking for is, when user clicks edit, I want to get the rowid stored in a hidden col and use it to fetch more data from server and populate outside jsgrid. And avoid changing the row to edit mode

Answer 1

You could use itemTemplate to get the required result.

• itemTemplate is a function to create cell content. It should return markup as string, DomNode or jQueryElement. The function signature is function(value, item), where value is a value of column property of data item, and item is a row data item.

Inside of itemTemplate you can customise your dom element based on your requirement.

Run Demo

$("#jsGrid").jsGrid({
    width: "100%",
    height: "auto",
    paging: false,

    //for loadData method Need to set auto load true
    autoload: true,

    noDataContent: "Directory is empty",

    controller: {
        loadData: function(filter) {
            var data = [{
                id: 1,
                nickname: "Test",
                email: "[email protected]"
            }, {
                id: 2,
                nickname: "Test 1",
                email: "[email protected]"
            }, {
                id: 3,
                nickname: "Test 2",
                email: "[email protected]"
            }, {
                id: 4,
                nickname: "Test 3",
                email: "[email protected]"
            }];
            return data;
        }
    },

    fields: [{
        name: "nickname",
        type: "text",
        width: 80,
        title: "Name"
    }, {
        name: "email",
        type: "text",
        width: 100,
        title: "Email Address",
        readOnly: false
    }, {
        type: "control",

        itemTemplate: function(value, item) {
            var editDeleteBtn = $('<input class="jsgrid-button jsgrid-edit-button" type="button" title="Edit"><input class="jsgrid-button jsgrid-delete-button" type="button" title="Delete">')
                .on('click', function (e) {
                    console.clear();
                    if (e.target.title == 'Edit') {
                        //Based on button click you can make your customization  
                        console.log(item); //You can access all data based on item clicked
                        e.stopPropagation();
                    } else {
                        //Based on button click you can make your customization
                        console.log('Delete')
                    }
                });

            return editDeleteBtn; //
        },
    }]
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>

<div id="jsGrid"></div>