Jsgrid: How to enable/disable "Edit"/"Delete" button for each item?

[sunlin7]

Hi,

I'm looking for a method to control the "Delete"/"Edit" button for each item, for example, here are three items,

| item1 | text1 | D/E btn|
| item2 | text2 | D/E btn|
| item3 | text3 | D/E btn|

How to make
item1 no Edit/Delete button,
and item2 have a "Edit" button (but no "Delete" button),
and item3 have a "Delete" button (but no "Edit" button)?

Thank you
Best Regards

[tabalinas]

Hi,

You can redefine itemTemplate of control field (if you wish this functionality for multiple grids, creating custom field would be better solution), like following:

{ 
    type: "control",
    itemTemplate: function(value, item) {
        var $result = $([]);

        if(item.Editable) {
            $result = $result.add(this._createEditButton(item));
        }

        if(item.Deletable) {
            $result = $result.add(this._createDeleteButton(item));
        }

        return $result;
    }
}

See working example http://jsfiddle.net/tabalinas/yLf21191/

[sunlin7]

hi Artem,

It's brilliant! Thank you~

[llucio]

also you should add this to jsGrid options

        onItemEditing: function(args) {
          // cancel editing of the row of item with field 'Editable' = false
            if(args.item.Editable === false) {
                args.cancel = true;
            }
        }

[Mluna97]

But, if I want to create a custom field, what should I put instead of "(this._createDeleteButton(item));", I mean, the this is the problem that I can't solve

[tabalinas]

@MartinLuna123, in this example we are redefining the itemTemplate of the existing control field. If you are defining completely custom field, checkout control field sources for inspiration.

[ghost]

Hi,

You can redefine itemTemplate of control field (if you wish this functionality for multiple grids, creating custom field would be better solution), like following:

{ 
    type: "control",
    itemTemplate: function(value, item) {
        var $result = $([]);

        if(item.Editable) {
            $result = $result.add(this._createEditButton(item));
        }

        if(item.Deletable) {
            $result = $result.add(this._createDeleteButton(item));
        }

        return $result;
    }
}

See working example http://jsfiddle.net/tabalinas/yLf21191/

Doesn't work.

[realFranco]

Hi,
You can redefine itemTemplate of control field (if you wish this functionality for multiple grids, creating custom field would be better solution), like following:

{ 
    type: "control",
    itemTemplate: function(value, item) {
        var $result = $([]);

        if(item.Editable) {
            $result = $result.add(this._createEditButton(item));
        }

        if(item.Deletable) {
            $result = $result.add(this._createDeleteButton(item));
        }

        return $result;
    }
}

See working example http://jsfiddle.net/tabalinas/yLf21191/

Doesn't work.

Hello @ChristianCRM,

At the fiddle's code. You need to add the jsGrid libraries in the HTML text area, before to render the example.

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

Like this.

<!-- jsGrid -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
 <!--end jsGrid -->

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

In that way the Table will be rendered properly.

Example: http://jsfiddle.net/hva2yx3w/