1. Home
  2. Forum
  3. Blazor
  4. Unable to use <Template> tag inside <GridColumn>

Unable to use <Template> tag inside <GridColumn>

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 ?
 

12 Replies
MA Mr Andrey Voronov 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

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


MA Mr Andrey Voronov August 5, 2019 08:49 AM UTC

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)
{
}
}



RN Rahul Narayanasamy Syncfusion Team 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.  
 
                                             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);                
    } 
} 
 
 
 
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 
 


IT ITninja 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

RN Rahul Narayanasamy Syncfusion Team 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   
  

Till then we appreciate your patience.  
 
Regards, 
Rahul 


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

MA Mr Andrey Voronov 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()

MB Maran Baskar Syncfusion Team 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(); 
} 



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 


VN Vignesh Natarajan Syncfusion Team 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 4th September 2019.  

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


Till then we appreciate your patience.  

Regards, 
Vignesh Natarajan. 


VN Vignesh Natarajan Syncfusion Team 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   
 
 
Please find the release notes from below link for the changes and fixes we have included in this release  
 
 
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 Vu December 5, 2019 02:09 AM UTC

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

VN Vignesh Natarajan Syncfusion Team 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 


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. 


Loader.
Up arrow icon