Jsgrid: Add Custom Control

Created on 18 Dec 2015  路  7Comments  路  Source: tabalinas/jsgrid

a suggestion here.

I'm trying to add 1 more custom button(Quick Review) inside the control.
but seen, it doesn't provide this kind of function.
hopefully there will be a way for importing our new custom control.

question

Most helpful comment

You can add custom field just next (or before) control field.
If you want to add a column just inside the control field, then you can do the following:

itemTemplate: function() {
    var $result = jsGrid.fields.control.prototype.itemTemplate.apply(this, arguments);
    var $myButton = $("<button>");
    return $result.add($myButton);
}

Code above not tested and may contain typos, but it shows the principle.

All 7 comments

It's not clear what you mean by 'custom button inside the control'

Thanks for your reply. I will give an example to let you more understand my point.

for each row of data. I'm trying to add a button inside the control view.
the function of the button is mainly has a quick review for full details.

the problem is, i would like to use the default "edit" and "delete" button.
but I can't use my custom control at the same time using default "edit" and "delete" function as well.
my current solution is, i create a custom field, i need to redo the "Edit" and "Delete" button and also my custom button function.

if there is a function i can put in my custom button in the "control" there will be save a lot of work.
hope you can understand my english.

You can add custom field just next (or before) control field.
If you want to add a column just inside the control field, then you can do the following:

itemTemplate: function() {
    var $result = jsGrid.fields.control.prototype.itemTemplate.apply(this, arguments);
    var $myButton = $("<button>");
    return $result.add($myButton);
}

Code above not tested and may contain typos, but it shows the principle.

it works! thanks.

You are welcome!

yeah the code works great but when i add two buttons to $result var it hide all buttons ,can you explain why ?

`var $result = jsGrid.fields.control.prototype.itemTemplate.apply(this, arguments);
                            var $editButton = $("<span>")
                                    .addClass("s7-note");
                            $result.add($editButton);
                            var $removeButton = $("<span>")
                                    .addClass("s7-trash");
                            return $result.add($removeButton);`

@ahmedwafdi, this is how jQuery add function works, you have to assign its result $result = $result.add($editButton)

Was this page helpful?
0 / 5 - 0 ratings