iggrid Add New Row event

Question

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?

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.

score 1 · Accepted Answer · answered Sep 30 '16 at 08:43

1

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){ ... }
        }
    ]
});

answered Sep 30 '16 at 08:43

Konstantin Dinev

34,219
14
75
100

If i set the Updating event property [startEditTriggers] to dblClick that also makes the header only listen for a dblClick as well. I want the header to listen for a click event (single) and respond to add new and the row to listen for a dbl click and respond to editing a row. – monkeyjumps Sep 30 '16 at 15:22
1

@monkeyjumps The two events are separated in the grid. rowAdding corresponds to the click in the add new row header, and editRowStarting corresponds to the interaction putting an existing row into edit mode. – Konstantin Dinev Oct 03 '16 at 08:32
But how do i trigger them separately? I want to trigger the rowAdding on a single click and the editRowStarting on a dbl click – monkeyjumps Oct 03 '16 at 16:15
@monkeyjumps The events are triggered by the grid. The examples show how to subscribe to them. Does some event not get triggered for you? – Konstantin Dinev Oct 04 '16 at 08:21
startEditTriggers: "dblclick,F2", applies to the entire grid itself. I want row edit to trigger on dblclick but i want add row header to trigger on single click. I also want the row selector to work enforcing that the entire row needs to be initialized to trigger on dblclick. I updated my code to show how i finally got it to work attaching event using jquery but would like to still know how to properly do this with any iggrid hooks OTB – monkeyjumps Oct 04 '16 at 15:23
@monkeyjumps The double click and F2 are triggering start edit provided that an existing row is focused. Double click only puts an existing row into an edit mode. The add row UI is a separate row, so rowAdding is triggered specifically on a click on that row. The row selection events are triggered on a single click on the row selection element: checkbox or row numbering column. I believe you're trying to reimplement what the grid has already implemented for you. Can you provide the scenario, and what events are not working for you in that scenario? – Konstantin Dinev Oct 04 '16 at 15:28
user should be able to select the Add Row header with a single click. User should be able to edit a row by double clicking the row, as a result the editor template is displayed. User should be able to select (highlight) a row. Upon selection of a row; a user may move row up or down in grid. These are the scenarios that i have. I have everything working but like you said i may be doing more work then necessary and that is where I am asking for help. Starting from the beginning and the update, i have described my implementation. – monkeyjumps Oct 04 '16 at 16:20
It sounds to me like the only thing you need to handle with custom logic is moving rows up and down by the end user. You can achieve this by initializing a jQuery UI draggable on the row element that the user is selecting. That will make the row draggable, and then you can initialize a droppable on the table and handle the drop in order to rearrange the rows. – Konstantin Dinev Oct 05 '16 at 11:54

iggrid Add New Row event

1 Answers1