I understand your answer, but in trying to implement it appears I may not understand completely how .igHierarchicalGrid('allChildrenWidgets')[0] functions.

Is the subscript [0] and index for which row of the grid to return children for?

If I have a grid that renders 4 rows and on child level for each row. If the third row has been expanded I want to rebind the data.  I thought this syntax would work:

var firstChildGrid = $('#grid1').igHierarchicalGrid('allChildrenWidgets')[2];

firstChildGrid.dataBind();

But firstChildGrid is undefined.

Thanks in advance for your help

-Chuck

Hopefully this expample explains what I'm tryin to do.  I have grid this lists Customers and their orders.  For each order there is an action to check status. When clicked I want to rebind the Customer row the order appears. This example is a simplification of the scenario.  here is example grid definition and Javscript for refreshing the grid.

(Html.Infragistics().Grid(Model.CustomerProfiles.AsQueryable())
.ID("ProfilesList")
.Width("100%")
.LoadOnDemand(true)
.AutoGenerateColumns(false)
.AutoGenerateLayouts(false)
.PrimaryKey("ProfileSeq")
.Columns(col =>
{
   col.For(x => x.Name).HeaderText("Name").Width("45%");
})
  .ColumnLayouts(layouts =>
   {
    layouts.For(x => x.OrderList)
    .PrimaryKey("ProfileSeq")
    .DataSourceUrl(Url.Action("GetMembersList"))
    .Width("100%")
    .Columns(childcolumn =>
    {
      childcolumn.For(x => x.OrderNumber).HeaderText("Order Number");
      childcolumn.For(x => x.status).eaderText("status");
      childcolumn.For(x => x.actions).HeaderText("Allowable Actions")
      .Template("<a href='#' onclick='CheckStatus({ProfileSeq})>Check Status</a>");
    });
})
.Features(feature =>
{
  feature.Sorting().Type(OpType.Local);
  feature.Paging().PageSize(10);
  feature.Filtering().Type(OpType.Local);
})
.DataBind()
.Render())

}

<script>

function CheckStatus(seq){
  var findValue = 'tr[data-id="{0}"]'.replace("{0}", seq);       
  var $element = $('#ProfilesList').find(findValue);
  var idx = $element.attr('data-row-idx');

    var firstChildGrid = $(grid).igHierarchicalGrid('allChildrenWidgets')[idx];
    firstChildGrid.dataBind();
}

</script>

Hello Charles,

Thank you for the snippet shared. At the time CheckStatus is called second level grids' widgets are not initialized yet, this is why firstChildGrid.childrenWidgets() returns undefined. To go around this you can:

1) set the initialExpandDepth property to 1 so that the second level grid's are initialized and calling firstChildGrid.dataBind() will create and render the second level grid's also.

2) get reference to the second level grids' widgets on rowExpanding event and then call secondLevelGrid.dataBind()

Since I am not into the details of your scenario I cannot say which would be better. Please let me know which one do you prefer and if you need assistance on how to do it I could be able to prepare a small sample for you.

Looking forward to hearing from you.

Hello Hristo

If oyu could supply example for option 2, that would be most appreciated.

Thanks

-Chuck

Hello,

I am currently working into this and will provide a sample for the option 2 scenario. Thank you for your patience and understanding.

Thank you for the update. Looking forward to seeing the solution.

-Chuck

Hello,

I'm just following up to see if you need any further assistance with this issue. If so please let me know.

Hello Charles,

 Thank you for your question.

 In order to data bind the grid we will need to get the pressed button first. My suggestion is to use delegate instead of simple 'onClick' function, because in that way we will get 'this' object and from it to get all parents of the button including the grid. Below I am showing how to do this, just change those lines of code and everything will work as you desire.

Code snippet:

1. Template column implementation

columns: [
                        { key: "ID", headerText: "ID" },
                        { key: "Name", headerText: "Product Name"},
                        { key: "Price", headerText: "Price", dataType: "number" },
                        { key: "CheckStatus", headerText: "Check Status", dataType: "string", template: '<input type="button" class= "btn"  Value="Check Status"/>' },
                    ],

2. Delegate function

//check status
   $("body").on("click", ".btn", function(){
    $("#" + $(this).parents().find('table').last().attr('id')).igGrid('dataBind');
   });

 Looking forward to hearing from you.

Thank you for the example.

My question, In the CheckStatus function how do I get the proper grid reference to call dataBind?

-Chuck

Hello,

Please refer to my sample that demonstrates how 2) scenario is implemented. It handles the rowExpanding event and calls dataBind for the child grid of the expanding row regardless of the level in the hierarchy.

Please let me know if it meets your requirements. IF you have any further questions, please let me know, I will be glad to help.