Reference parent row data in child row column template?

Is it possible to reference parent row data in the column template of a child row?

I have tried, for example: ${parent.ColumnKey}, but this doesn't work.

 

Further, the grid is bound to a DataSet of (2) related DataTables.

Hello lwoodell,

It depends on what exactly you're aiming to achieve. From the grid API you can get more information about the events where is possible to access the parent row: http://help.infragistics.com/jQuery/2014.2/ui.ighierarchicalgrid#events Could you please explain me in more details what is your purpose in order to be more helpful for you?

Looking forward to your response.

Regards,

Tsanna

Thanks Tsanna,

Specifically, I want to create a hyperlink column in a child row, which uses a parent row cell value in the querystring of the target path.

In the code below, I am setting the Template property of the 'Details' column in ColumnLayouts, but I am unable to capture 'Simulation_id' from the parent level.

 

@(Html.Infragistics().Grid<Contract>()

    .ID("gridContracts")

    .Width("100%")

    .Height("600px")

    .AutoGenerateColumns(true)

    .AutoGenerateLayouts(true)

    .PrimaryKey("Contract_id")

    .Columns(cols =>

    {

        cols.For(x => x.Simulation_id).HeaderText("").Width("100px");

        cols.For(x => x.Contract_id).HeaderText("").Width("100px");

        cols.For(x => x.ContractName).HeaderText("Contract");

    })

   

    …

 

    .ColumnLayouts(layouts =>

    {

        layouts.For(x => x.Versions)

        .PrimaryKey("Version_id")

        .ForeignKey("Contract_id")

        .Columns(cols =>

        {

            cols.For(x => x.Details).HeaderText("Details").HeaderText("").Width("100px")

                .Template("<a href=\"Provision.aspx?s_id=${parent.Simulation_id}&v_id=${Version_id}\" target=\"_self\">Details</a>");

           

           …

 

        })

       

        …

 

    })

    .DataSource(Model)

    .DataBind()

    .Render()

)

Tsanna,

Using the RowExpanding event of the igHierarchicalGrid, I was able to get the desired result. (See below)

If there is a better or more efficient way to achieve this, please let me know.

 

$("#gridContracts").on("ighierarchicalgridrowexpanding", function (evt, ui)

{

var parentRow = ui.parentrow;

var parentRowId = parentRow.attr("data-id");

// get the value from the parent row cell by column key

var simId = $("#gridContracts").igGrid("getCellValue", parentRowId, "Simulation_id");

// get a the child grid object

var childGrid = ui.owner.allChildrenWidgets()[0];

// set the column template

childGrid.setColumnTemplate(childGrid.options.columns[0].key, "<a href=\"targetpage.aspx?s_id=" + simId + "&v_id=${Version_id}\" target=\"_self\">Details</a>", true);

});

Update:

Due to the way that the allChildrenWidgets() method works, it was necessary to add a bit of code to retrieve the correct item from the array.

 

$("#gridContracts").on("ighierarchicalgridrowexpanding", function (evt, ui)

{    

    var parentRow = ui.parentrow;    

    var parentRowId = parentRow.attr("data-id");    

    var simId = $("#gridContracts").igGrid("getCellValue", parentRowId, "Simulation_id");    

    // get primary key value from parent row

    var pk = $("#gridContracts").igGrid("getCellValue", parentRowId, "Contract_id");    

    var childGrids = ui.owner.allChildrenWidgets();

    // loop thru array of allChildrenWidgets()

    for (var i = 0; i < childGrids.length; i++)    

    {        

        // compare pk to fk of first row in each grid item

        if (childGrids[i].getCellValue(childGrids[i].rows(0).attr("data-id"), "Contract_id") == pk)        

        {            

             childGrids[i].setColumnTemplate(childGrids[i].options.columns[0].key, "<a href=\"targetpage.aspx?s_id=" + sim_Id + "&v_id=${Version_id}\" target=\"_self\">Details</a>", true);        

             break;

        }    

    }

});

I marked my last post as the answer, but if anyone has a better way to do this I'd love to know.

Thanks.

Hello lwoodell,

Thank you for sharing your solution with our community. It would be helpful to the other members.

If I can assist you with anything else, do not hesitate to contact me.

Regards,

Tsanna

Hello Tsanna,

I am new to iggrid.

I checked the sample code for using iggrid as parent-child relationship.

But I haven`t got the right solution yet.

I want to use in the following way:

1. get data from server for parent grid

2. when i click the plus icon of the parent row, I have to use some of the parent`s row data as parameter to load the server data for child grid

For now, i can load data only for parent grid. And I am using rowexpanding event to load the data for child.

But, I don`t know :

1.how to get the parent row data by that event.

2 how to set the data source that I searched for child grid.

Thanks for your help!

Hello lwoodell ,

I am new to iggrid.

I can`t call the ighierarchicalgridrowexpanding event when i click the plus icon of the parent row. So, I used the rowExpanding event as below:

rowExpanding : function(e, args) {

var parentRow = args.parentrow;    

    var parentRowId = parentRow.attr("data-id");

    var pk = $("#gridId").igGrid("getCellValue", parentRowId, "ColumnKey");   

}

Then, I got the following error:

Cannot read property dataType of null in infragistics.lob.js

May I know what is the data-id in following line:

var parentRowId = parentRow.attr("data-id");

Thanks

I think the "data-id" row attribute is generated automatically when a primary key is assigned to the row, and correlates to the value of the PK.

In my example, I was dealing with a hierarchical grid bound to a dataset of related tables (PK/FK relation).

Hello lwoodell,

Thank you for your raply.

I haven`t got the solution yet.

Thanks