Showing and Hiding Columns and data Conditionally

[Charlston]

I am converting a MVC table grid to a Telerik Grid. While looking at it, there are conditional columns. For example: 

 

@if (Model?.GroupDetail?.IsMec == false)
                                    {
                                        <th class="text-secondary" style="width: 140px;">Group Info</th>
                                    }

<th class="text-secondary">
                                        @if (Model?.GroupDetail?.IsMec == false)
                                        {
                                            <text>Office</text>
                                        }
                                        else
                                        {
                                            <text>Role</text>
                                        }
                                    </th>

How would I go about recreating something like this for the grid 

[Anton Mironov]

Hi Charlston,

Thank you for the details provided.

You can recreate the conditional column rendering from your MVC table in the Telerik Grid for ASP.NET Core by using server-side logic for column definition and dynamic header text. Here’s how you can approach this:

• Conditional Column Visibility:
  In the grid’s Columns configuration, use your model property to decide whether to include or hide a column:

  @(Html.Kendo().Grid<ModelType>()
      .Name("grid")
      .Columns(columns =>
      {
          if (Model?.GroupDetail?.IsMec == false)
          {
              columns.Bound(p => p.GroupInfo).Title("Group Info");
          }
          columns.Bound(p => p.OfficeOrRole)
              .Title(Model?.GroupDetail?.IsMec == false ? "Office" : "Role");
      })
      // Additional grid configuration...
  )
  

• Dynamic Header Text:
  Set the column title based on your condition, as shown above.

• Client-side Alternative:
  If you need to switch column visibility or header text after the grid is rendered (for example, based on user interaction), you can use the grid’s client-side API with JavaScript:

  function onDataBound(e) {
      var grid = this;
      if (isMec) {
          grid.hideColumn("GroupInfo");
          grid.columns[1].title = "Role";
      } else {
          grid.showColumn("GroupInfo");
          grid.columns[1].title = "Office";
      }
      grid.refresh();
  }

For more information:

• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/hidecolumn
• https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/faq
• https://www.telerik.com/aspnet-core-ui/documentation/knowledge-base/grid-dynamic

 

Kind Regards,
Anton Mironov
Progress Telerik

[Charlston]

Thank you 

[Anton Mironov]

Hi Charlston,

Thank you for the kind words. If additional information or assistance is needd, feel free to contact me and the Team.

 

Best Regards,
Anton Mironov