Jsgrid: Way to customize Add button?

[samuelrobertson]

I have a requirement where the Add button has to be outside the control and when a blank row is inserted it has a save and cancel icons like the edit rows (i.e. no toggle behavior for Add button).

Could you point me in the right direction to do this? Thanks!

[tabalinas]

For the control field redefine insertTemplate template to have save and cancel buttons (see how it's implemented for control field in editTemplate), and turn off button in the header modeSwitchButton: false. Save button should call insertItem() and cancel should turn off inserting option of the grid.
Just add an external button that will turn on inserting: true option of the grid to show inserting row.

[samuelrobertson]

I did it like you said. Works great! Maybe you can suggest improvements in my code? I wasn't able to call e.StopPropagation() because e wasn't defined when I tried debugging it. This one has an Add button in the header but you can get rid of it. Maybe this will help someone.

Declare control field like this in fields[] array in JS Grid (usually this is the last field)

  { type: "control", width: 100,
       headerTemplate: function() { return getCustomInsertHeader("yourJsGridDivId") },
       insertTemplate: function() { return getCustomInsertControls("yourJsGridDivId") },
   }

   // Templates for JS Grid that get rid of the default plus icons when adding rows
   // Declare these functions outside of JS Grid
        function getCustomInsertHeader(gridId) {
            return $("<button>").attr("type", "button").text("Add").addClass("your css classes here")
            .on("click", function() {
                $("#" + gridId).jsGrid({ inserting: true });
            });
        }

        function getCustomInsertControls(gridId) {
            var grid = $("#" + gridId).data("JSGrid");
            return $("<input>").addClass("jsgrid-button")
                              .addClass("jsgrid-update-button")
                              .attr({
                                  type: "button",
                              })
                              .on("click", function () {
                                  grid.insertItem().done(function () {
                                      grid.option("inserting", false)
                                  });
                              })
                              .add($("<input>")
                              .addClass("jsgrid-button")
                              .addClass("jsgrid-cancel-edit-button")
                              .attr({
                                  type: "button",
                              })
                              .on("click", function () {
                                  grid.option("inserting", false);
                              }));
        }

[hurtonypeter]

$("#jsGrid").jsGrid({ inserting: true });
causing me an error with v1.5.3 :(

I have nothing tricky in my inicialization:

var model = [{},{},...];
$("#jsGrid").jsGrid({
            width: "100%",

            inserting: true,
            editing: true,
            sorting: true,
            confirmDeleting: false,

            data: model,
            fields: [
                fields...,
                {
                    type: "control",
                    modeSwitchButton: true,
                    editButton: false
                }
            ]
        });

Chrome:

jquery?v=TBhUwxff6fXjXreSkaAUXrDbIuV34qKQ3z8w43eI0zM1:1 Uncaught RangeError: Maximum call stack size exceeded
    at Function.isPlainObject (jquery?v=TBhUwxff6fXjXreSkaAUXrDbIuV34qKQ3z8w43eI0zM1:1)
    at Function.i.extend.i.fn.extend (jquery?v=TBhUwxff6fXjXreSkaAUXrDbIuV34qKQ3z8w43eI0zM1:1)
    at Function.i.extend.i.fn.extend (jquery?v=TBhUwxff6fXjXreSkaAUXrDbIuV34qKQ3z8w43eI0zM1:1)
    at Function.i.extend.i.fn.extend (jquery?v=TBhUwxff6fXjXreSkaAUXrDbIuV34qKQ3z8w43eI0zM1:1)
    at Function.i.extend.i.fn.extend (jquery?v=TBhUwxff6fXjXreSkaAUXrDbIuV34qKQ3z8w43eI0zM1:1)
    at Function.i.extend.i.fn.extend (jquery?v=TBhUwxff6fXjXreSkaAUXrDbIuV34qKQ3z8w43eI0zM1:1)
    at Function.i.extend.i.fn.extend (jquery?v=TBhUwxff6fXjXreSkaAUXrDbIuV34qKQ3z8w43eI0zM1:1)
    at Function.i.extend.i.fn.extend (jquery?v=TBhUwxff6fXjXreSkaAUXrDbIuV34qKQ3z8w43eI0zM1:1)
    at Function.i.extend.i.fn.extend (jquery?v=TBhUwxff6fXjXreSkaAUXrDbIuV34qKQ3z8w43eI0zM1:1)
    at Function.i.extend.i.fn.extend (jquery?v=TBhUwxff6fXjXreSkaAUXrDbIuV34qKQ3z8w43eI0zM1:1)
    at Function.i.extend.i.fn.extend (jquery?v=TBhUwxff6fXjXreSkaAUXrDbIuV34qKQ3z8w43eI0zM1:1)
    at Function.i.extend.i.fn.extend (jquery?v=TBhUwxff6fXjXreSkaAUXrDbIuV34qKQ3z8w43eI0zM1:1)
    at Function.i.extend.i.fn.extend (jquery?v=TBhUwxff6fXjXreSkaAUXrDbIuV34qKQ3z8w43eI0zM1:1)
    at Function.i.extend.i.fn.extend (jquery?v=TBhUwxff6fXjXreSkaAUXrDbIuV34qKQ3z8w43eI0zM1:1)
    at Function.i.extend.i.fn.extend (jquery?v=TBhUwxff6fXjXreSkaAUXrDbIuV34qKQ3z8w43eI0zM1:1)

Firefox:
InternalError: too much recursion

Edit
Sorry, false alarm. It was a jQuery bug/feature, I didn't investigated it more. The issue is with jQuery v2.1.4, with 2.2.4 it is working fine. Live example here: https://jsfiddle.net/hurtonypeter/wyehhef9/