1. Home
  2. Forum
  3. Blazor
  4. Disable DetailTemplate for a row

Disable DetailTemplate for a row

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.

6 Replies
VN Vignesh Natarajan Syncfusion Team March 4, 2020 03:58 AM UTC

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 5th 2020.  
 
Till then we appreciate your patience.   
 
Regards, 
Vignesh Natarajan. 


VN Vignesh Natarajan Syncfusion Team March 4, 2020 08:55 AM UTC

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  
 
 
Refer our UG documentation for your reference 
 
 
Kindy get back to us if you have further queries.  
 
Regards 
Vignesh Natarajan. 


MS Markus Schreyer March 4, 2020 11:11 AM UTC

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>?

VN Vignesh Natarajan Syncfusion Team March 5, 2020 07:25 AM UTC

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. 
 


MS Markus Schreyer March 6, 2020 11:53 AM UTC

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):


VN Vignesh Natarajan Syncfusion Team March 9, 2020 01:01 PM UTC

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.   
  1. 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.
  2. 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.   
  3. 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. 
 


Loader.
Up arrow icon