title: Infragistics: Binding function to +/- button with iggrid and jquery
body: <p>What I am trying to achieve is a load on demand functionality using JQuery and JSON.</p>
  
  <p>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.</p>
  
  <p>If it helps here is my current javascript:</p>
  
  <pre><code>$(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"
              }]
              }
          ]
      });
  });
  </code></pre>
  
  <p>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.</p>
  
  <p>Here is a screen of my grid for context:
  <img src="https://i.stack.imgur.com/N87ue.png" alt="enter image description here"></p>