CODEWITHSUNDEEP
jsgrid
sjd
sjd

Reputation: 1401

How to override editing row and call custom edit in jsgrid

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

Upvotes: 1

Views: 8904

Answers (2)

Narendra Jadhav
Narendra Jadhav

Reputation: 10262

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>

Upvotes: 2

u936293
u936293

Reputation: 16234

You are not using the documented way. You should use editTemplate.

A simple working example is:

 $(document).ready(function() {
 $("#grid").jsGrid({
    width: "100%",
    editing: true,
    autoload: true,
    data: [ { id:1, name:"Tom"}, {id:2, name:"Dick"}],
    fields: [
             { name: "id", type: "text", title: "Id"},
             { name: "name", type: "text", title: "Name", 
                 editTemplate: function(item) {
                   return "<input type='checkbox'>" + item;
             }},
             { type: "control"}
           ]
     });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>

<div id="grid">
Test
</div>

For the purpose of illustration, I turn the edit of the name field from the standard text box into a check box.

Upvotes: 4

Related Questions