Disable DetailTemplate for a row

[Markus Schreyer]

Good day to you all.

I have a grid each row of which may or may not have some details. To show details for a row I defined a DetailTemplate as follows: 

        <GridTemplates>

            <DetailTemplate>

                @GetChildDetailTemplate(context)

            </DetailTemplate>

        </GridTemplates>

But a button for showing details for a row is visible always:

Is it possible to hide the button if there is no details for a current row?

Best regards.

[Vignesh Natarajan]

Hi Markus,  

 

Greetings from Syncfusion support.  

 

Query: ” Is it possible to hide the button if there is no details for a current row?” 

 

During the initial rendering itself we will render the Detail Template icon for each Grid row. On Expanding (on clicking) the expand icon only we will get the row details inside the DetailTemplate. So it might not possible to determine the details record has value or not during the initial rendering. We will validate your requirement further and update you the details by March 5^th 2020.  

 

Till then we appreciate your patience.   

 

Regards, 

Vignesh Natarajan. 

[Vignesh Natarajan]

Hi Markus,  

 

Query: “Is it possible to hide the button if there is no details for a current row?” 

 

We do not have direct support for hiding a DetailTemplate icon when there is no details for the current row. But we have achieved your requirement using RowDataBound and DataBound event of EjsGrid. In the RowDatabound event we have checked whether the current row has details records or not and stored the row index. In the DataBound event we have hided and displayed the details icon which has details row by calling a JavaScript function.  

 

Refer the below code example. 

 

<EjsGrid @ref="Grid" DataSource="@Employees" Height="315px"> 

    <GridEvents RowDataBound="RowDatabound" DataBound="Data" TValue="EmployeeData"></GridEvents> 

    . . . . . . .. . . . . . . 

</EjsGrid> 

<style> 

    .hide { 

        visibility: hidden;         

    } 

    .disable{ 

        pointer-events: none; 

        opacity: 0.4; 

    } 

</style> 

@code{ 

    EjsGrid<EmployeeData> Grid { get; set; } 

    public List<int> DetailData = new List<int>();  //list to store the index of record which has details   

    public async void RowDatabound(RowDataBoundEventArgs<EmployeeData> Args) 

    { 

        List<Order> data = Orders.Where(x => x.EmployeeID == Args.Data.EmployeeID).ToList(); 

        if (data.Count() > 0) 

        { 

            DetailData.Add(Employees.IndexOf(Args.Data)); 

        } 

    } 

    public async void Data() 

    { 

//to hide all the details icon 

        await JSRuntime.InvokeAsync<string>("hideDetail", Grid.ID); 

// to display the icon which has details. 

        var text = await JSRuntime.InvokeAsync<string>("enableDetail", DetailData, Grid.ID); 

    } 

. .. . . . . . .. . .  

} 

 

[detailIcon.js] 

 

function enableDetail(SelectedRecord, GridId) {    var Obj = document.getElementById(GridId).ej2_instances[0];    for (var i = 0; i < SelectedRecord.length; i++) {               Obj.getRowByIndex(SelectedRecord[i]).querySelector(".e-detailrowcollapse div").classList.remove("hide");        Obj.getRowByIndex(SelectedRecord[i]).querySelector(".e-detailrowcollapse").classList.remove("disable");    }}function hideDetail(GridId) {    var Obj = document.getElementById(GridId).ej2_instances[0];    for (var i = 0; i < Obj.getContent().querySelectorAll(".e-detailrowcollapse").length; i++) {        Obj.getContent().querySelectorAll(".e-detailrowcollapse div")[i].classList.add("hide");        Obj.getContent().querySelectorAll(".e-detailrowcollapse")[i].classList.add("disable");    }}

 

 

 

For your convenience we have prepared a sample which can be downloaded from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/152069/ze/BlazorApp1-1127390329  

 

Refer our UG documentation for your reference 

 

https://ej2.syncfusion.com/blazor/documentation/grid/events/#databound  

https://ej2.syncfusion.com/blazor/documentation/grid/events/#rowdatabound 

 

Kindy get back to us if you have further queries.  

 

Regards 

Vignesh Natarajan. 

[Markus Schreyer]

Hi Vignesh,

thank you for your answer, it was very helpful. Now it works as expected.

But I have another question now.

In case if I use <RowTemplate> and there is <DetailTemplate> for a row then the icon for showing DetailTemplate is not visible (obviously because I've overridden the <RowTemplate>). Is it possible somehow to include that icon in my <RowTemplate>?

[Vignesh Natarajan]

Hi Markus,  

 

Query: “Is it possible somehow to include that icon in my <RowTemplate>?” 

 

While using RowTemplate we will customize the entire rendering part of the Grid with contents inside the RowTemplate. So it will not be possible to render DetailTemplate along with RowTemplate. Kindly get back to us with more details about your requirement, like 

1. What type of row customization did you used through RowTemplate feature.
2. Share the rough image to show the look and appearance of your requirement

 

Regards, 

Vignesh Natarajan. 

 

[Markus Schreyer]

Hi Vignesh,

"What type of row customization did you used through RowTemplate feature."

Here is source code for the component:

<EjsGrid @ref="@Self" TValue="DataArea" AllowResizing="true" DataSource="SourceArea.ChildrenDataAreas">

    <GridTemplates>

        <DetailTemplate>

            @GetChildDetailTemplate(context as DataArea)

        </DetailTemplate>

        <RowTemplate>

            @{ 

                var area = context as DataArea;

                <div style="position: relative; height: @GetPXFormat(area.Customizing.Height + 10); width: @GetPXFormat(area.Customizing.Width + 10); border: 2px solid #000000;">

                    @foreach (var datafield in area.DataFields)

                    {

                        if (datafield.Customizing.Title.Equals("Background"))

                            continue;

                        var dfc = datafield.Customizing;

                        @if (dfc.TitleX > 0)

                        {

                            <h1 style="font-size: 12px; position: absolute; left: @GetPXFormat(dfc.TitleX); top: @GetPXFormat(dfc.TitleY); width: @GetPXFormat(dfc.TitleWidth); height: @GetPXFormat(dfc.TitleHeight)">@dfc.Title</h1>

                        }

                        <div style="position: absolute; left: @GetPXFormat(dfc.X); top: @GetPXFormat(dfc.Y); width: @GetPXFormat(dfc.Width); height: @GetPXFormat(dfc.Height)">

                            @GetColumnForDF(datafield)

                        </div>

                    }

                </div>

            }

        </RowTemplate>

    </GridTemplates>

    <GridColumns></GridColumns>

</EjsGrid>

"Share the rough image to show the look and appearance of your requirement"

And this is what I expect to have as row with DetailTemplate (do not pay much attention to the layout of the row - it is just an test):

[Vignesh Natarajan]

Hi Markus,  

Thanks for sharing the details. 

Row Template and details template cannot be used in conjunction. Also we have analyzed your Grid definition and found that you have defined the div element to render the contents inside the template. There are some rules to be followed while defining the RowTemplate in Grid.  

1. Contents of the RowTemplate must be TD elements. If not Grid default styles will not be applied / aligned properly.   

https://ej2.syncfusion.com/blazor/documentation/grid/row/#row-template 

2. We suspect that you are iterating the array [area.DataFields] and rendering the Template based on it. Number of Grid column must match the number of TDs in the RowTemplate if not misalignment will be noticed.
3. So kindly share the details about your model class [DataArea] along with its properties, we will try to achieve your requirement using Column Template feature.   
4. Also share the model screenshot (exact look alike) which will be helpful for us to validate your query further. Because shared screenshot is not clear.      

Regards, 

Vignesh Natarajan.