Nested Grid Conditional Column

[StuartLittle]

Hi,

I am successfully able to display a nested grid. However there is a new requirement and I need some help.

For simplicity, please consider the following.

Outer grid displays grade information with columns like Grade, Instructor, Room

Inner grid display student information with columns like Name, Race.

So far so good.

Now based a condition in outer grid i.e. if Grade is 12, I would like to add a column to the inner grid called SATAppeared. That is,  I would like a grid like the following

Grade   Instructor   Room

    3          Kelly            20

    Name   Race

      Bo         W

      Li           A

Grade   Instructor   Room

    12          Mac            34

    Name   Race   SATAppeared

      Sue        W            Yes

      Ken        W             No

 

To achieve this, in the template of inner grid, I have put a condition on SATAppeared column. Something like the following but it doesnt seem to work. SATAppeared column doesnt display for any of the grades.

.Columns(columns =>
 {

   columns.Bound(o => o.Name);

   columns.Bound(o => o.Race);

if (Model.Grade == "12")
{
      columns.Bound(o => o.SATAppeared);
}

}

Can you please help. Thank you!

[Aleksandar]

Hello,

To achieve the desired result I can suggest using the client-side API of the Grid. A possible approach would be to:

• define the SATAppeared column as hidden
• add a DetailIInit event handler
• check the Grade of the parent item and show the hidden column if condition is met

I modified the Grid Hierarchy demo to demonstrate this. If the parent item has Country field equal to "UK" the child Grid will display the ShipCountry column, as you can see in this screencast:

    function detailInit(e) {
        var grid = e.sender,
        dataItem = e.data,
        childGrid = e.detailRow.find(".k-grid").getKendoGrid();
        if(dataItem.Country == "UK"){
            childGrid.showColumn(1)
        }
    }

 

I hope this helps.

Regards,
Aleksandar
Progress Telerik