Syncfusion.EJ2.RazorComponents.Grids.EjsGrid' does not have a property matching the name 'ref'

[Frangoudes Panikos]

The sample code gives the error Syncfusion.EJ2.RazorComponents.Grids.EjsGrid' does not have a property matching the name 'ref'

Version is Syncfusion.EJ2.AspNet.Core.RazorComponents  17.1.0.52-beta

The problem appeared after upgrade to 17.1.0.52-beta

Please can you help ?

<EjsGrid id="Grid" ref="@grid" DataSource="@assetTypes" allowResizing="true" AllowPaging="true" AllowSorting="true" AllowMultiSorting="true"

         toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"  

         RowSelected="@rowselect"    

           >

    <GridEditSettings allowAdding="true" allowEditing="true" allowDeleting="true" Mode="@EditMode.Normal" AllowNextRowEdit="true"></GridEditSettings>

    

    <GridSelectionSettings  EnableToggle="true" PersistSelection="false"></GridSelectionSettings>

    <GridColumns>

        <GridColumn Field=@nameof(AssetType.Id) HeaderText="ID" Width="120" IsPrimaryKey="true"></GridColumn>

        <GridColumn Field=@nameof(AssetType.TypeName) HeaderText="Type Name" Width="120"></GridColumn>

        <GridColumn Field=@nameof(AssetType.Description) HeaderText="Description" Width="120"></GridColumn>

        

    </GridColumns>

</EjsGrid>

@functions{

    List<AssetType> assetTypes;

    EjsGrid grid { get; set; }

}

[Uwe Hein]

@Frangoudes Panikos

  if you are using preview6 you should replace ref by @ref.

    regards

       Uwe

[Rahul Narayanasamy]

Hi Frangoudes, 

 

Greetings from Syncfusion.  

 

Query: The sample code gives the error Syncfusion.EJ2.RazorComponents.Grids.EjsGrid' does not have a property matching the name 'ref' 

 

You can resolve it by changing @ref instead of ref as Microsoft has changed the syntax from .NET Core 3.0 Preview 6 update. Please find the below code example and sample for your reference. 

 

[code example] 

... 

 

<EjsGrid id="Grid" @ref="@defaultGrid" DataSource="@gridData" AllowPaging="true" AllowSelection="true" SelectedRowIndex="2"> 

    <GridSelectionsettings Mode="@SelectionMode.Both"></GridSelectionsettings> 

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

    ... 

</EjsGrid> 

 

@functions{ 

    EjsGrid defaultGrid; 

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

 

 

    protected override void OnInit() 

    { 

        gridData = OrdersDetails.GetAllRecords(); 

    } 

} 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Sampletest896428276  

 

Please get back to us if you need further assistance. 

 

Regards,
Rahul 

[Frangoudes Panikos]

Thank you Rahul for your prompt reply.

It worked like a charm.

Best regards

Panikos Frangoudes

[Alex]

Hi Rahoul. When I update your example to the latest version (17.2.0.40-beta), it tells me the following:

InvalidOperationException: Object of type 'Syncfusion.EJ2.Blazor.Grids.EjsGrid`1[[WebApplication1.Pages.Index+Orders, WebApplication1, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]]' does not have a property matching the name 'RowSelected'

I had to modify things to be generic in `Orders`, and I had to delete some attributes to make an error go away.

Also, this documentation link doesn't seem to work: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowSelected

Please advise, thanks!

[Vignesh Natarajan]

Hi Alex,  

Query: “When I update your example to the latest version (17.2.0.40-beta), it tells me the following:” 

From our latest release (17.2.0.40) we have provided Generic type support for our Syncfusion controls due to which there are some breaking changes related to it. So kindly refer the below release notes for your reference 

https://ej2.syncfusion.com/blazor/documentation/release-notes/17.2.40   

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

We are able to reproduce the reported issue at our end while defining the RowSelected event directly in EjsGrid tag. Refer below  

<EjsGrid id="Grid" @ref="@DefaultGrid" RowSelected="OnSelected" DataSource="@gridData" AllowPaging="true" AllowSelection="true" SelectedRowIndex="2"> 

While using our latest Nuget package (17.2.40), Events must be specified as separate tag along with their component due to Generic type support. Refer to the below code example.   

<EjsGrid id="Grid" @ref="@DefaultGrid" DataSource="@gridData" AllowPaging="true" AllowSelection="true" SelectedRowIndex="2"> 

   <GridEvents RowSelected="OnSelected" TValue="OrdersDetails"></GridEvents> 

……………………………… 

</EjsGrid> 

 

@code{ 

    EjsGrid<OrdersDetails> DefaultGrid; 

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

    public void OnSelected(RowSelectEventArgs<OrdersDetails> args) 

    { 

// 

    } 

} 

Kindly download the modified & updated sample from below  

Sample: https://www.syncfusion.com/downloads/support/forum/143578/ze/F1435782039581590  

Query: “Also, this documentation link doesn't seem to work” 

Due to Generic type support which has been provided in our latest release 17.2.40, we have moved the Grid events to separate tag <GridEvents> which causes some link to be broken. Hence the reported issue has occurred. Please find the correct documentation for RowSelected event from below link. 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowSelected  

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan.