Nested Grid Conditional Column

1 Answer 124 Views
Grid
StuartLittle
Top achievements
Rank 1
StuartLittle asked on 27 Apr 2023, 01:51 PM

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!

1 Answer, 1 is accepted

Sort by
1
Accepted
Aleksandar
Telerik team
answered on 02 May 2023, 04:54 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid
Asked by
StuartLittle
Top achievements
Rank 1
Answers by
Aleksandar
Telerik team
Share this question
or