Completed
Last Updated: 27 Apr 2021 07:14 by ADMIN
Ryan
Created on: 24 Sep 2019 01:05
Category: Grid
Type: Feature Request
36
Conditionally Hide Hierarchical Grid expand button

How would you remove the icon to expand a detail grid only for certain rows?  Some rows will not have detail data and should not be expandable.

---

ADMIN EDIT

As suggested by Joel, you can use the RowRender event and a bit of CSS to hide the button. Here is a Knolwdge Base article that shows a fully runnable sample: https://docs.telerik.com/blazor-ui/knowledge-base/grid-conditional-expand-button.


in the main TelerikGrid node, add event hook OnRowRender="@OnRowRenderHandler"

that handler is something like:

    void OnRowRenderHandler(GridRowRenderEventArgs args)
    {
        OrgUnit item = args.Item as OrgUnit;

        args.Class = item.Children.length ? "has-children" : "no-children";
    }


Then in the site.css I override display of the hierarchy sign

tr.no-children .k-hierarchy-cell *{
    display:none !important;
}

12 comments
ADMIN
Marin Bratanov
Posted on: 27 Apr 2021 07:14

Hi all,

We have made a knowledge base article to show how you can do this with the OnRowRender event and a bit of CSS: https://docs.telerik.com/blazor-ui/knowledge-base/grid-conditional-expand-button. This will be the way to do this in the grid.

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

ADMIN
Marin Bratanov
Posted on: 24 Mar 2021 13:38

Indeed, Joel, that's a great solution for the time being. The last time I looked at this thread we still didn't have that event.

I've moved your idea to the opener post for anyone new seeing it, and you'll find your Telerik points updated as a small "thank you" for pointing out this rather easy workaround.

 

Regards,
Marin Bratanov
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.

Joel
Posted on: 24 Mar 2021 09:42

I used a css hack to achieve a workaround

in the main TelerikGrid node, add event hook OnRowRender="@OnRowRenderHandler"

that handler is something like:

    void OnRowRenderHandler(GridRowRenderEventArgs args)
    {
        OrgUnit item = args.Item as OrgUnit;

        args.Class = item.Children.length ? "has-children" : "no-children";
    }

Then in the site.css I override display of the hierarchy sign

tr.no-children .k-hierarchy-cell *{
    display:none !important;
}

it's not perfect, but acceptable until Telerik implement an official feature

 

Wei
Posted on: 08 Mar 2021 17:21

we would also need this feature in our hierarchy grid, thanks

wei

ADMIN
Marin Bratanov
Posted on: 04 Oct 2020 09:44

Hello John,

While I am not 100% certain what the scenario and data are, you may find useful the TreeList which is designed for showing hierarchical data with unknown number of levels, and also offers editing abilities https://demos.telerik.com/blazor-ui/treelist/editing-inline.

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

John
Posted on: 04 Oct 2020 06:53

 

I would also like the option for a conditional detail template added to the grid. We are using it to show a hierarchical set of data with uneven paths in a set of generic grid components and would like the expand to only be visible when it has further data to expand. 

Marco
Posted on: 13 Jul 2020 07:52
Hi Martin, I understand, but I've built a system that generates and configures a grid for a generic EF Entity, so in my mind the detailstemplate is always configured with my version of generic grid that is the same for every entity, but I need to activate it only if the entity has a particular collection of items...
ADMIN
Marin Bratanov
Posted on: 13 Jul 2020 07:43

Hello Marco,

If you will be using virtualization, I recommend you don't define a DetailTemplate in the grid, but add a button in a column that will provide the details somewhere else (to the side of the grid in a conditional element, in a TelerikWindow, in a tooltip, whatever suits your needs).

The goal of conditional hiding of the expand-collapse button is to hide it for specific rows only, not stop detail templates for the entire grid.

 

Regards,
Marin Bratanov
Progress Telerik

Marco
Posted on: 13 Jul 2020 07:28
Would be great a bool flag to disable the details view at grid level, the detailstemplate and virtual scrolling are incompatible
Cheryl
Posted on: 23 Nov 2019 03:25

I would also really appreciate this option.  I have a list of 50-100 items, but only ~10 have sub-data.  I have added an additional field to show there is data and allow sort by that field to help my users see if there is data, but it's a little clunky.   The visual of the +/- is a little confusing for them.

It would be great if we could have some optional parameter to remove the +/- option for the items with no sub-data, related to a field from the context data.  I would have no problem adding an extra member function to my data class that could return true/false if the sub-data was valid.  

class GridItem {

    public Product p;

    public List<obj> details;

    public boolean hasData { get { return this.details.Count() > 0; } }

 

<TelerikGrid  >…. 

     <DetailTemplate ShowDetail="hasData"> 

     …

 

Thanks!  I can't wait to see what you come up with!  :) 

Ryan
Posted on: 24 Sep 2019 18:54

One approach would be to add an event that allows us to hook into the creation of the row.  Here's an example:

 

<TelerikGrid Data="salesTeamMembers">
    <DetailTemplate>
        @{
            var employee = context as MainModel;
            <TelerikGrid Data="employee.Orders" Pageable="true" PageSize="5" OnRowRender="@RowRenderHandler">
                <GridColumns>
                    <GridColumn Field="OrderId"></GridColumn>
                    <GridColumn Field="DealSize"></GridColumn>
                </GridColumns>
            </TelerikGrid>
        }
    </DetailTemplate>
    <GridColumns>
        <GridColumn Field="Id"></GridColumn>
        <GridColumn Field="Name"></GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
public async Task RowRenderHandler(GridRowRenderEventArgs args)
    {
var row = args.Row;
var data = (MainModel) args.Item;
if (data.HasSomeProperty)
{
row.DetailEnabled = false;
}
}
}

ADMIN
Marin Bratanov
Posted on: 24 Sep 2019 06:48

Hello Ryan,

I moved this to the feedback portal so you can Follow its status (I added your Vote for you). Here's the link: https://feedback.telerik.com/blazor/1430980-conditionally-hide-hierarchical-grid-expand-button.

At this stage, such a feature does not exist in the grid and I recommend adding an if-block to the detail template in order to show a message like "no details available for this row".

I would also appreciate your thoughts (or some pseudocode/markup) on how you would expect that feature to work (or, rather, to be exposed for configuration).

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor