Unable to use <Template> tag inside <GridColumn>

Mr Andrey Voronov

Asked On August 2, 2019 11:57 AM UTC

I am using VS 16.3.0 Preview 1.0

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

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

Reply | Reply with quote

Mr Andrey Voronov

Replied On August 5, 2019 08:38 AM UTC

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

....

@{

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 ?

}

Reply | Reply with quote

Mr Andrey Voronov

Replied On August 5, 2019 08:49 AM UTC

I figured it out: need use lambda expression:

@{

var patient = (context as DbPatientData);

}

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

</Template>

</GridColumn>

@code

{

private void SelectPatient(long id)

{

}

Reply | Reply with quote

Rahul Narayanasamy [Syncfusion]

Replied On August 5, 2019 12:22 PM UTC

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

@{

var order = (context as OrdersDetails);

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

@{

var order = (context as OrdersDetails);

<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

Reply | Reply with quote

ITninja

Replied On August 5, 2019 02:58 PM UTC

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

Reply | Reply with quote

Rahul Narayanasamy [Syncfusion]

Replied On August 6, 2019 06:38 AM UTC

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

Reply | Reply with quote

ITninja

Replied On August 6, 2019 04:36 PM UTC

Hi Rahul,

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

Look forward to a new release that fixes this :)

Reply | Reply with quote

Mr Andrey Voronov

Replied On August 30, 2019 09:42 AM UTC

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

Reply | Reply with quote

Maran Baskar [Syncfusion]

Replied On September 2, 2019 02:38 PM UTC

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,

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

Regards,

Maran Baskar

Reply | Reply with quote

Vignesh Natarajan [Syncfusion]

Replied On September 3, 2019 08:26 AM UTC

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.

Reply | Reply with quote

Vignesh Natarajan [Syncfusion]

Replied On September 4, 2019 01:09 PM UTC

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

Reply | Reply with quote

Vu

Replied On December 5, 2019 02:09 AM UTC

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

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

@{

var job = (context as JobHoSo);

job.IsVisible

</div>

}

</Template>

</GridColumn>

</GridColumns>

</EjsGrid>

This message from console:

Attachment: hinh_4140df8d.rar

Reply | Reply with quote

Vignesh Natarajan [Syncfusion]

Replied On December 5, 2019 12:00 PM UTC

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.

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

Regards,

Vignesh Natarajan.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
146396	Aug 2,2019 11:57 AM UTC	Dec 5,2019 12:00 PM UTC	Blazor	12

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US