Search code examples
javascriptjqueryinfragisticsignite-uiiggrid

iggrid Add New Row event

How can I create separate triggers for Add new row and the iggrid itself? I want to be able to select (single click) a row with out the editor opening up but at the same time i would like to click the add new row button and open the editor on a single click. I would also like to hook the dblclick event to the row and have the editor open up.

Desired events

  • Add new row button : click
  • row editing : dblclick
  • row select : click

So far i have the following setup but it is applied to the entire grid including the add new row button. As seen below, row editing works by dblclick (good) and row selected by a single click (good) However, I still need to double click the add new row button. How do I trigger the opening of the editor dialog?

enter image description here

Update

I could not figure out how to subscribe directly into the grid event but I was able to use jquery to create an onclick handler on the add row header.

        rendered: function(evt, ui) {
          console.log("rendered");
          var ds = $("#groupMappingTable").igGrid("option", "dataSource");
          console.log("datasource");
          console.log(ds);
          $("#groupMappingTable > thead > tr.ui-iggrid-addrow.ui-widget-header > td")
            .on('click',
              function(e) {
                var obj = $("#groupMappingTable").igGridUpdating("startAddRowEdit", e);
                console.log("grid updating");
                console.log(obj);
              });
        },

I had to register in the rendered callback. From here I trigger the following

var obj = $("#groupMappingTable").igGridUpdating("startAddRowEdit", e);

Now when I click on add row this fires and adds a row but the data-id are now all zero and clicking on the row selects all of the added rows and dbl clicking on a row only selects the first one added.

enter image description here

Solution

  • All of these events are already exposed by the igGrid.

    Row adding:

    //Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Updating",
            rowAdding: function(evt, ui){ ... }
        }
    ]
});

    Row Editing:

    //Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Updating",
            editRowStarting: function(evt, ui){ ... }
        }
    ]
});

    Row Selected:

    //Initialize
$(".selector").igGrid({
    features : [
        {
            name : "RowSelectors",
            rowSelectorClicked: function(evt, ui){ ... }
        }
    ]
});