I want to add event programmatically in DataGrid.

[Seil]

Hello.

I want to add event programmatically in DataGrid.

The reason is, we want to apply a consistent toolbar that does the same.

Toolbar can be applied to Toolbar property, but to make the added toolbar run, OnToolbarClick event must be implemented.

How can I register the DataGrid's OnToolbarClick event programmatically?

Thank you.

[Vignesh Natarajan]

Hi Seil,  

 

Thanks for contacting Syncfusion support.  

 

Query: “Toolbar can be applied to Toolbar property, but to make the added toolbar run, OnToolbarClick event must be implemented. How can I register the DataGrid's OnToolbarClick event programmatically?” 

 

We suggest you to bind the GridEvents dynamically to Grid based on Boolean value. Refer the below code example.  

 

<SfGrid DataSource="@Orders" AllowPaging="true" Height="200" Toolbar="Toolbaritems"> 

    @if (CustomTool) // here check for the condition whether the toolbar has custom items.  

    { 

        <GridEvents OnToolbarClick="ToolbarClickHandler" TValue="Order"></GridEvents> 

    } 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" IsPrimaryKey="true" ValidationRules="new ValidationRules() { Required = true }" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" ValidationRules="new ValidationRules() { Required = true }" Width="150"></GridColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" ValidationRules="new ValidationRules() { Required = true }" Width="120"></GridColumn> 

    </GridColumns> 

</SfGrid> 

 

 

Note: as an example we have used Boolean variable to bind GridEvents. So when Boolean property is enabled, we have defined the custom toolbar and OnToolBarClick event to Grid. When it is disabled, GridEvents wont be defined to Grid.  

 

Kindly download the sample from below  

 

Sample:   https://www.syncfusion.com/downloads/support/forum/156765/ze/BlazorApp11559562610  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[Seil]

Thanks for the guide. The answer works for me too.

But the gist of my question is how can I add an event to the code? For example, this is how to register Grid event in cs, not razor file.

Thank you.

[Vignesh Natarajan]

Hi Seil,  

Thanks for the update.  

Query: “But the gist of my question is how can I add an event to the code? For example, this is how to register Grid event in cs, not razor file” 

We have analyzed your query and it is not feasible to define the GridEvents as property in Code section to Grid Components instance. So we request you to define the GridEvents with condition as provided in previous update to achieve your requirement.  

  

Kindly get back to us, If you have further queries or if you are facing any difficulties in workaround solution.   

Regards,
Vignesh Natarajan 

[HFirst]

I'm needing to do the same thing.  Are you ever going to add the ability for us to add from code?

[Vignesh Natarajan]

Hi HFirst,  

Thanks for contacting Syncfusion support.  

Query: “Are you ever going to add the ability for us to add from code?” 

From your query we understand that you want to define the GridEvents component in the Code behind. But for Grid events and complex properties, we use cascading approach to define them to component. So it is not possible to define the template, events of Grid component in code behind (.cs) and define the Grid component in razor file. 

We can achieve your requirement when Grid component is rendered using RenderTreeBuilder concept when entire Grid component will be defined in .cs file. If you are fine to use renderTreeBuilder concept kindly get back to us. Based on your reply we will prepare and update you the solution.   

Regards, 

Vignesh Natarajan 

[Juan Pablo]

Hi. I have a pretty simmilar situation. But, in my scenario, the Grid is entirely defined within the code. 

I create the Grid like this:

 var sfGrid = new SfGrid<Type>

Then I configure the grid with statements like this:

Toolbar = new List(){"Edit","Cancel","Update"},

Now it has come the moment to define behaviors. Documentation says you can do by using the GridEvents tag when you're creating the grid from the interface, so I suppose that in the code this could be made with statements,  and it would be something like sfGrid.GridEvents.RowSelected = "RowSelectHandler";. But I can't find the GridEvents property or object and now I'm stuck, as I can't add behavior to my control. Could you help?

What I'm trying is to edit a row in the pretty moment it is selected, enabling columns for edition according to some given conditions. 

And yes, the Grid is displayed using the RenderTreeBuilderConcept, as you have described in https://www.syncfusion.com/faq/blazor/components/how-to-create-component-dynamically-using-rendertreebuilder-in-blazor

[Vignesh Natarajan]

Hi Juan,  

 

Thanks for contacting Syncfusion support.  

 

Query: “the Grid is displayed using the RenderTreeBuilderConcept, as you have described  it would be something like sfGrid.GridEvents.RowSelected = "RowSelectHandler";. But I can't find the GridEvents property or object and now I'm stuck”, 

 

We have analyzed your query and we understand that you want to edit a record by selecting it. We can achieve your requirement using StartEdit() method of the Grid inside the RowSelected event of the Grid. Kindly refer the below code example to define the RowSelected event to Grid when rendered using RenderBuilderTree concept.  

 

public async Task RowSelected(Syncfusion.Blazor.Grids.RowSelectEventArgs<T> args) 

       {    

          await GridRef.StartEdit(); 

       } 

       private SfGrid<T> GridRef { get; set; } 

       protected override void BuildRenderTree(RenderTreeBuilder builder) 

       {             

           builder.OpenComponent<SfGrid<T>>(0);                

           builder.AddAttribute(1, nameof(AllowPaging), true); 

           builder.AddAttribute(2, nameof(DataSource), DataSource); 

           builder.AddAttribute(3, "ChildContent", new RenderFragment(inner => 

           { 

               inner.OpenComponent<GridPageSettings>(5); 

               inner.AddAttribute(6, nameof(GridPageSettings.PageSize), Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.TypeCheck<System.Int32>(10)); 

               inner.CloseComponent(); 

  

               inner.OpenComponent<GridEditSettings>(8); 

               inner.AddAttribute(9,"AllowAdding",true); 

               inner.AddAttribute(10, nameof(GridEditSettings.AllowDeleting), Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.TypeCheck<bool>(true)); 

               inner.AddAttribute(11, nameof(GridEditSettings.AllowEditing), Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.TypeCheck<System.Boolean>(true)); 

               inner.CloseComponent(); 

  

               inner.OpenComponent<GridColumns>(12); 

               inner.AddAttribute(13, "ChildContent", (RenderFragment)((_builder1) => 

               { 

  

                   _builder1.OpenComponent(14, typeof(Syncfusion.Blazor.Grids.GridColumn)); 

                   _builder1.AddAttribute(15, "Field", Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.TypeCheck<System.String>("OrderID")); 

                   _builder1.AddAttribute(16, "IsPrimaryKey", Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.TypeCheck<System.Boolean>(true)); 

                   _builder1.CloseComponent(); 

                   _builder1.AddMarkupContent(17, "\r\n"); 

  

                   _builder1.OpenComponent(18, typeof(Syncfusion.Blazor.Grids.GridColumn)); 

                   _builder1.AddAttribute(19, "Field", Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.TypeCheck<System.String>("CustomerID")); 

                   _builder1.CloseComponent(); 

                   _builder1.AddMarkupContent(21, "\r\n"); 

  

                   _builder1.OpenComponent(22, typeof(Syncfusion.Blazor.Grids.GridColumn)); 

                   _builder1.AddAttribute(23, "Field", Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.TypeCheck<System.String>("Freight")); 

                   _builder1.CloseComponent(); 

                   _builder1.AddMarkupContent(25, "\r\n"); 

                    

                   _builder1.OpenComponent(26, typeof(Syncfusion.Blazor.Grids.GridColumn)); 

                   _builder1.AddAttribute(27, "Field", Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.TypeCheck<System.String>("OrderDate")); 

                   _builder1.CloseComponent(); 

                   _builder1.AddMarkupContent(29, "\r\n"); 

  

  

               })); 

               inner.CloseComponent(); 

  

               inner.OpenComponent<GridEvents<T>>(31); 

               inner.AddAttribute<Syncfusion.Blazor.Grids.RowSelectEventArgs<T>>(32, "RowSelected", 

                   EventCallback.Factory.Create<Syncfusion.Blazor.Grids.RowSelectEventArgs<T>>(this, RowSelected)); 

               inner.CloseComponent(); 

  

           })); 

           builder.AddAttribute(34, nameof(Toolbar), new List<string>() {"Add", "Edit", "Cancel", "Update" }); 

           builder.AddComponentReferenceCapture(35, inst => { GridRef = (SfGrid<T>)inst; }); 

           builder.CloseComponent(); 

       } 

 

    

Kindly download the sample from below which we have prepared using above code example.  

 

Sample: https://www.syncfusion.com/downloads/support/forum/156765/ze/DataGrid-RenderTreebuilder1732287674  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan