Infragistics: Binding function to +/- button with iggrid and jquery

Question

What I am trying to achieve is a load on demand functionality using JQuery and JSON.

I have a value in my table, lets call it "BatchNumber", when I click the + button I want to trigger a function that will make a request to grab all the corresponding data for that particular order row. How does one bind events to the +/- button? I am not sure where the documentation is for this. Right now I'm parsing a full JSON hierarchical dataset, but would like to do this on demand. In the image below you can see where I have the expanded order details below the batch.

If it helps here is my current javascript:

$(function () {
    var data = @Html.Raw(Json.Encode(Model));
    $("#grid").igHierarchicalGrid({
        dataSource: data,
        primaryKey: "BatchNumber",
        autoGenerateColumns: false,
        odata: false,
        initialDataBindDepth: 1,
        columns: [
            { headerText: "Batch Number", key: "BatchNumber", dataType: "string" },
            { headerText: "Process Date", key: "BatchGroupItemDate", dataType: "date", format: "MM-d-yyyy, h:mm tt" },
            { headerText: "Batch Comment", key: "BatchComment", dataType: "string" },
            { headerText: "Number Of Documents", key: "NumberOfDocuments", dataType: "number" },
            { headerText: "Total Transfered", key: "TotalTransfered", dataType: "number" },
            { headerText: "Not Transfered", key: "NotTransfered", dataType: "number" }
        ],
        features: [
            {
                name: "Sorting",
                type: "local"
            },
            {
                name: "Filtering",
                type: "local"
            },
            {
                name: 'Paging',
                type: "local",
                pageSize: 10
            }

        ],
        autoGenerateLayouts: false,
        columnLayouts:[ //This is where I would like to build on demand by calling to the controller for information and inserting it into the grid based on the batchnumber.
            {
                key: "BatchDetails",
                autoGenerateColumns: false,
                primaryKey: "Key",
                foreignKey: "BatchNumber",
                responseDataKey: 'results',
                columns: [
                    { headerText: "Order #", key: "Key", dataType: "string" },
                    { headerText: "Process Date", key: "Date", dataType: "date", format: "MM-dd-yyyy, h:mm:ss tt" },
                    { headerText: "Batch Comment", key: "BatchComment", dataType: "string" },
                    { headerText: "Last Error Message", key: "LastErrorMessage", dataType: "string" },
                    { headerText: "Transferred Status", key: "TransferredStatus", dataType: "string" },
                    { headerText: "Transfer Date", key: "TransferDate", dataType: "date"}
                ],
                features: [
            {
                name: "Sorting",
                type: "local"
            }]
            }
        ]
    });
});

I am fumbling my way through this so please if you need more information just ask and I will update my question. I am very new to jquery and json work.

Here is a screen of my grid for context:

Answer 1

Here is the official sample for the igHierarchicalGrid's Load on Demand functionality. You can inspect the AJAX requests being made when rows of the parent grid are being expanded so you can see what the input and output data of those AJAX requests look like.

The official help article on the "Load on Demand functionality" is here and I would like to stress on the last part: "Load on Demand parameters in MVC". Although the functionality appears to be tightly coupled with either ASP.NET MVC or oData, you can use and back-end data provider, as long as that provider complies with the hierarchical grid's expectations for input and output data.

As far as hooking to the +/- buttons, I'm afraid that their events are not exposed.

The best you can get in terms of events are the rowExpanding, childGridCreating or better yet: childrenPopulating. You can find the official API reference on those events here.

Wrapping one's head around the Load on Demand functionality of any hierarchical grid can be a daunting task so fret not - as long as the details are clear, the solution won't be that hard to compose.

One final piece of reference (and examples) I can provide is the official Infragistics forums. There are quite a few discussions on similar predicaments there already.