Unable to use <Template> tag inside <GridColumn>

[Mr Andrey Voronov]

I am using VS 16.3.0 Preview 1.0

I would like to display "Select" button for each row in Grid

<EjsGrid DataSource="..." AllowPaging="true">

    <GridColumns>

        <GridColumn Field="ID"></GridColumn>

        <GridColumn HeaderText="Select" Width="10%">

            <Template>

                <EjsButton @onclick="...">Select</EjsButton>

            </Template>

        </GridColumn>

    </GridColumns>

</EjsGrid>

Q1. VS does not highlight <Template> tag and Grid is not displayed.

Q2. How do I pass selected ID value (column 1) to button onclick event ?

 

[Mr Andrey Voronov]

The ModelType property must be provided with named model before using template columns.

Select button now is rendered in templated column, but I am still unable to access ID value in button event handler

<EjsGrid ModelType="@DbPatientData.Empty" DataSource="@dataprovider.GeneralOffice.PatientSearchResult" AllowPaging="true">

<GridPageSettings PageSize="25"></GridPageSettings>

<GridColumns>

               ....

<GridColumn HeaderText="Select" Width="10%">

<Template>

@{

var patient = (context as DbPatientData);

}

<EjsButton ID="@($"select{patient.C_RowID}")" @onclick="@SelectPatient">Select</EjsButton>

</Template>

</GridColumn>

</GridColumns>

</EjsGrid>

@code

{

private void SelectPatient()

{

               // HOW DO I ACCESS context here ?

}

}

[Mr Andrey Voronov]

I figured it out: need use lambda expression:

<GridColumn HeaderText="Select" Width="10%">

<Template>

@{

var patient = (context as DbPatientData);

}

<EjsButton @onclick="@(e => SelectPatient(patient.Id))">Select</EjsButton>

</Template>

</GridColumn>

@code

{

private void SelectPatient(long id)

{

}

}

[Rahul Narayanasamy]

Hi Mr Andrey, 

 

Greetings from Syncfusion. 

 

Query: Unable to use <Template> tag inside <GridColumn>. 

 

We have validated your query and checked the reported problem by creating sample based on your requirement. It works fine at our end. To use templates, the grid must be bound with named model. This can be done by specifying the model type using the ModelType property of the grid component.  

 

Help Documentation:      https://ej2.syncfusion.com/blazor/documentation/grid/templates/#template-modeltype  

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

Here, we have rendered a template(as button) in one of the grid columns. Please find the below code example and sample for your reference. 

[code example] 

... 

<EjsGrid @ref="@grid" DataSource="@gridData" TValue="OrdersDetails" ModelType="@model" AllowPaging="true" AllowSelection="true">     

    <GridColumns> 

                  . . . . . .  

        <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"> 

            <Template> 

                @{ 

                var order = (context as OrdersDetails); 

                <div class="image"> 

                    <EjsButton @ref="button" @onclick="@OnClick" CssClass="e-flat">Select</EjsButton> 

                </div> 

                } 

            </Template> 

        </GridColumn> 

        ... 

   </GridColumns> 

</EjsGrid> 

 

@code{ 

    EjsGrid<OrdersDetails> grid { get; set;} 

    public List<OrdersDetails> gridData { get; set; } 

    public OrdersDetails model = new OrdersDetails(); 

    ...   

 

} 

 

Query: VS does not highlight <Template> tag and Grid is not displayed. 

 

Visual Studio does not highlight the Template tag because it is same name as HTML element. But it will works as a template column of Grid.  

 

Query: How do I pass selected ID value (column 1) to button onclick event ? 

 

You can also get the ID of the selected record by using GetSelectedRecords method of the grid. Please find the below code example and sample for your reference. 

 

[code example] 

... 

<EjsGrid @ref="@grid" DataSource="@gridData" TValue="OrdersDetails" ModelType="@model" AllowPaging="true" AllowSelection="true"> 

    <GridColumns> 

                 . . . .  

        <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"> 

           <Template> 

                @{ 

                var order = (context as OrdersDetails); 

                <div class="image"> 

                    <EjsButton @ref="button" @onclick="@OnClick" CssClass="e-flat">Select</EjsButton> 

                </div> 

                } 

            </Template> 

        </GridColumn> 

        ... 

   </GridColumns> 

</EjsGrid> 

 

@code{ 

    EjsGrid<OrdersDetails> grid { get; set;} 

    ... 

    private async void OnClick(UIMouseEventArgs args) 

    { 

        var data = await this.grid.GetSelectedRecords();  //you can get the selected records details 

        Console.WriteLine(data[0].OrderID);                

    } 

} 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorColumnTemplate-255464645  

 

Note: We have created the above sample with latest NuGet version(17.2.0.40-beta) and latest source(17.2.40). 

 

If you are still facing any difficulties, could you please share the below details. It will be helpful to provide a better solution. 

 

• Share full grid code snippets.
• Share Essential Studio JS 2 package version details.
• Reproduce the reported problem in the provided sample if possible.

 

Regards, 

Rahul 

 

[ITninja]

Rahul,

I have downloaded your template and can confirm that it works just fine. However when I try to implement this in our app I am getting this error message in the console:

blazor.server.js:15 [2019-08-05T14:50:16.099Z] Error: System.ArgumentException: Property set method not found.

   at System.Reflection.RuntimePropertyInfo.SetValue(Object obj, Object value, BindingFlags invokeAttr, Binder binder, Object[] index, CultureInfo culture)

   at System.Reflection.RuntimePropertyInfo.SetValue(Object obj, Object value, Object[] index)

   at Syncfusion.EJ2.Blazor.BaseComponent.GetObject(Dictionary`2 Data, Type ModelType)

   at Syncfusion.EJ2.Blazor.Grids.GridColumn.BuildRenderTree(RenderTreeBuilder builder)

   at Microsoft.AspNetCore.Components.ComponentBase.<.ctor>b__5_0(RenderTreeBuilder builder)

   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment)

   at Microsoft.AspNetCore.Components.Rendering.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)

   at Microsoft.AspNetCore.Components.Rendering.Renderer.ProcessRenderQueue()

Attached are screenshots of my implementation and classes.

Any guidance or help is very much appreciated!

Using the latest version of Blazor and Syncfusion Blazor Components (17.2.40)

Thanks

Attachment: Annotation_20190805_095505_c938bd41.zip

[Rahul Narayanasamy]

Hi ITninja, 

 

Query: I try to implement this in our app I am getting this error message in the console: Error: System.ArgumentException: Property set method not found. 

 

We have validated your query and we suspect that you have defined model class properties with read only properties(ie: without set method). Due to this the above error is occurred. We have already considered “read only properties throw exception while using inside the column template” as a bug. The fix for the issue will be included in our upcoming NuGet release which is expected to be rolled out on August 19, 2019.  

 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link   

  

https://www.syncfusion.com/feedback/7698/read-only-properties-throw-exception-while-using-inside-the-column-template 

Till then we appreciate your patience.  

 

Regards, 

Rahul 

[ITninja]

Hi Rahul,

You are correct, we do have read-only properties in our POCO.

Look forward to a new release that fixes this :)

[Mr Andrey Voronov]

My POCO model does not has readonly properties.

<Template> grid column is not displayed anymore once I added TimeSpan {get; set;} filed to the model:

Newtonsoft.Json.JsonReaderException: Unexpected character encountered while parsing number: :. Path '', line 1, position 2.

   at Newtonsoft.Json.JsonTextReader.ReadNumberCharIntoBuffer(Char currentChar, Int32 charPos)

   at Newtonsoft.Json.JsonTextReader.ReadNumberIntoBuffer()

   at Newtonsoft.Json.JsonTextReader.ParseNumber(ReadType readType)

   at Newtonsoft.Json.JsonTextReader.ParseValue()

   at Newtonsoft.Json.JsonReader.ReadAndMoveToContent()

   at Newtonsoft.Json.JsonReader.ReadForType(JsonContract contract, Boolean hasConverter)

   at Newtonsoft.Json.Serialization.JsonSerializerInternalReader.Deserialize(JsonReader reader, Type objectType, Boolean checkAdditionalContent)

   at Newtonsoft.Json.JsonSerializer.DeserializeInternal(JsonReader reader, Type objectType)

   at Newtonsoft.Json.JsonSerializer.Deserialize(JsonReader reader, Type objectType)

   at Newtonsoft.Json.JsonConvert.DeserializeObject(String value, Type type, JsonSerializerSettings settings)

   at Newtonsoft.Json.JsonConvert.DeserializeObject(String value, Type type)

   at Syncfusion.EJ2.Blazor.BaseComponent.ChangeType(Object value, Type conversionType)

   at Syncfusion.EJ2.Blazor.BaseComponent.GetObject(Dictionary`2 Data, Type ModelType)

   at Syncfusion.EJ2.Blazor.Grids.GridColumn.BuildRenderTree(RenderTreeBuilder builder)

   at Microsoft.AspNetCore.Components.ComponentBase.<.ctor>b__5_0(RenderTreeBuilder builder)

   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment)

   at Microsoft.AspNetCore.Components.Rendering.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)

   at Microsoft.AspNetCore.Components.Rendering.Renderer.ProcessRenderQueue()

[Maran Baskar]

Hi Andrey, 

  

Thanks for your update. 

  

Query: <Template> grid column is not displayed anymore once I added TimeSpan {get; set;} filed to the model 

We have prepared the sample by using your requirement. But unfortunately, the reported issue was not reproduced at our end. So, we have attached the  code example and prepared sample in the below link for your reference. 

@using Syncfusion.EJ2.Blazor.Grids 

 

<EjsGrid DataSource="@GridData" ModelType="@Model” AllowPaging="true"> 

    <GridColumns> 

        <GridColumn HeaderText="Timespan"> 

            <Template> 

                @{   

                    <span>@timespan</span> 

                } 

            </Template> 

        </GridColumn>        

          ...    

    </GridColumns> 

</EjsGrid> 

 

@code{ 

    public List<OrdersDetails> GridData { get; set; } 

 

    TimeSpan timespan { get; set; } = new TimeSpan(365, 21, 19, 45); 

 

    public OrdersDetails Model = new OrdersDetails(); 

} 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Timespan-2024858487 

If you are still facing the issue, Kindly  get back to us with the following details, 

1. Share the code example.
2. Share the screenshot of script error in console
3. If possible try to reproduce the reported issue in provided sample  or share the issue reproducible sample.

Regards, 

Maran Baskar 

[Vignesh Natarajan]

Hi Andrey,  

Query: “<Template> grid column is not displayed anymore once I added TimeSpan {get; set;} filed to the model:” 

We are able to reproduce the reported issue at our end while using the TimeSpan DataType in our Grid DataSource. We have confirmed it as an issue and logged the defect report “template column is not displayed when its DataType is TimeSpan” for the same. Fix for the issue will be included in our Upcoming Bi-Weekly Nuget release which is expected to be roll out on or before 4^th September 2019.  

Kindly refer the below feedback link for your reference. You can track the status of the issue using below feedback portal. 

Feedback: https://www.syncfusion.com/feedback/8597/template-column-is-not-displayed-when-its-datatype-is-timespan  

Till then we appreciate your patience.  

Regards, 

Vignesh Natarajan. 

[Vignesh Natarajan]

Hi Andrey / ITninja,  

 

We are glad to inform that our latest Nuget package (17.2.0.49-beta) has been successfully rolled out. Please find the latest Nuget package from below   

 

Nuget: https://www.nuget.org/packages/Syncfusion.EJ2.Blazor/17.2.0.49-beta  

 

Please find the release notes from below link for the changes and fixes we have included in this release  

 

Grid: https://ej2.syncfusion.com/blazor/documentation/release-notes/17.2.49/#grid  

 

In this release we have included the fix for the issues “template column is not displayed when its DataType is TimeSpan” && “read only properties throw exception while using inside the column template”.  

 

Please get back to us if you have further queries. 

 

Regards, 

Vignesh Natarajan 

[Vu]

I use version 17.3.0.29beta template column job.IsVisible not display:

<EjsGrid @ref="gr" DataSource="@jobs" ModelType="@modelgrid"  AllowPaging="true">

    <GridPageSettings PageSize="5"></GridPageSettings>

    <GridEvents CommandClicked="OnCommandClicked" TValue="JobHoSo"></GridEvents>

<GridColumns>

    <GridColumn Field=@nameof(JobHoSo.Name) HeaderText="Tên hồ sơ">

    </GridColumn>

    <GridColumn Field=@nameof(JobHoSo.LastedUpdateDate) HeaderText="Lần cập nhật gần nhất"

                CustomFormat="@(new { type = "dateTime", format = "dd/MM/yyyy hh:mm" })" Type="ColumnType.DateTime" TextAlign="TextAlign.Right" Width="150"></GridColumn>

    <GridColumn HeaderText="Sử dụng" TextAlign="TextAlign.Center" Width="120">

        <Template>

            @{

                var job = (context as JobHoSo);

                <div class="image">

                    job.IsVisible

                </div>

            }

        </Template>

    </GridColumn>

</GridColumns>

</EjsGrid>

This message from console:

Attachment: hinh_4140df8d.rar

[Vignesh Natarajan]

Hi Vu,  

Query: “I use version 17.3.0.29beta template column job.IsVisible not display:” 

The reported issue might occur when ModelType property of EjsGrid is not defined properly. To replicate the issue, we have prepared a sample using your code example and we are not able to reproduce the issue at our end. Kindly download the sample from below 

Sample: https://www.syncfusion.com/downloads/support/forum/146396/ze/BlazorApp1-659796791  

Kindly share the following details which will be helpful for us to validate the reported issue at our end. 

1. Share your Grid code example.
2. Share your Nuget package version.
3. Kindly ensure that you have referred same version scripts and css file corresponding to Nuget package.
4. If possible share the issue reproducible sample or try to reproduce the reported issue in provided sample.

Regards, 

Vignesh Natarajan.