TreeGrid events for CRUD

[Scott Peal]

Can you pleae point me to the documentation on how to capture the event for CRUD? 

I have looked at the RowSelected and RowSelecting events; however, they don't tell us which operation is being conducted. For example, if using the command buttons in the row, how do I know if the user clicked the edit button, the save button, or the delete button? 

    < EjsTreeGrid ID="TreeGrid" @ref="TreeGrid" DataSource="@TreeData" IdMapping="OrgUnitId" ParentIdMapping="ParentOrgUnitId" TreeColumnIndex="4"

                 AllowPaging="true" AllowExcelExport="true" AllowFiltering="true" AllowMultiSorting="true" AllowPdfExport="true"

                 AllowReordering="true" AllowResizing="true" AllowRowDragAndDrop="true" AllowSorting="true" AutoCheckHierarchy="true"

                 EnableAltRow="true" EnableCollapseAll="true" EnableHover="true" ShowColumnMenu="true"

                 Toolbar="Toolbaritems">

        < TreeGridEvents TValue="Node" OnToolbarClick="Toolbarclick" RowSelected="RowSelectHandler" RowSelecting="RowSelectingHandler"></TreeGridEvents>

        < TreeGridSelectionSettings Type="Syncfusion.EJ2.Blazor.Grids.SelectionType.Single" Mode="Syncfusion.EJ2.Blazor.Grids.SelectionMode.Row">

< /TreeGridSelectionSettings>

        <TreeGridPageSettings PageSizeMode="PageSizeMode.Root" PageSize="50"></TreeGridPageSettings>

        <TreeGridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="Syncfusion.EJ2.Blazor.TreeGrid.EditMode.Row" >

< /TreeGridEditSettings>

        < TreeGridFilterSettings Type="Syncfusion.EJ2.Blazor.TreeGrid.FilterType.Menu"></TreeGridFilterSettings>

        < TreeGridColumns>

            < TreeGridColumn HeaderText="" Width="15" Commands="commands" AllowReordering="false" AllowSorting="false" AllowResizing="false"> 

< /TreeGridColumn>

            < TreeGridColumn Field="Id" HeaderText="Id" Width="100" IsPrimaryKey="true" Visible="false" AllowEditing="false"></TreeGridColumn>

            < TreeGridColumn Field="ParentId" HeaderText="ParentId" Width="100" Visible="false" AllowEditing="false"></TreeGridColumn>

            < TreeGridColumn Field="Code" HeaderText="Code" Width="20"></TreeGridColumn>

            < TreeGridColumn Field="Name" HeaderText="Name" Width="40"></TreeGridColumn>

        < /TreeGridColumns>

    < /EjsTreeGrid>

        protected async void RowSelectHandler(Syncfusion.EJ2.Blazor.Grids.RowSelectEventArgs<Node> Args)

{

          this.SelectedRowIndexes = await this.TreeGrid.GetSelectedRowIndexes();   /// get the selected row indexes

          this.SelectedRecords = await this.TreeGrid.GetSelectedRecords();   /// get the selected records

          // What CRUD action was clicked??

}

[Manivannan Padmanaban]

Hi Scott, 

Greetings from Syncfusion Support. 

Query: Can you please point me to the documentation on how to capture the event for CRUD?  

 

Using ActionComplete event of TreeGrid, we can able to capture the CRUD actions. Refer the below code example, 

<EjsTreeGrid ………….> 

………………………. 

   <TreeGridEvents  OnActionComplete="Complete" TValue="TreeData.BusinessObject"></TreeGridEvents> 

 

    <TreeGridColumns> 

………………… 

    </TreeGridColumns> 

</EjsTreeGrid> 

@code{ 

………………………. 

 

 

    private void Complete(ActionEventArgs<TreeData.BusinessObject> args) 

    { 

        if (args.RequestType.ToString() == "Add") 

        { 

           //Do your stuff here. 

        } 

        if (args.RequestType.ToString() == "BeginEdit") 

        { 

            // Do your stuff here. 

        } 

        if (args.RequestType.ToString() == "Save") 

        { 

            // Do your stuff here. 

        } 

        if (args.RequestType.ToString() == "Delete") 

        { 

            // Do your stuff here. 

        } 

    } 

} 

Also, refer the below API link. 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_OnActionComplete 

Kindly get back to us, if you need further assistance. 

Regards, 

Manivannan Padmanaban. 

[Scott Peal]

Fantastic!

BTW, that link to the properties is what I have been missing for finding the events!

Thanks again...

[Gowri Loganathan]

Hi Scott, 

  

Thanks. 

  

Please revert us, if you need any queries. We will happy to assist you. 

  

Regards, 

Gowri V L. 

[Scott Peal]

Hello,

It seems the save and delete action events are not firing. It is firing and catching the BeginEdit and Cancel events though. Can the devs validate the save and delete events are firing on their side?

        protected void ActionComplete(Syncfusion.EJ2.Blazor.Grids.ActionEventArgs args)

        { 

            if (args.RequestType.ToString() == "Add")

            {

                //Do your stuff here. 

            }

            if (args.RequestType.ToString() == "BeginEdit")

            {

                // Do your stuff here. 

            }

            if (args.RequestType.ToString() == "Save")

            {

                // Do your stuff here. 

            }

            if (args.RequestType.ToString() == "Delete")

            {

                // Do your stuff here. 

            }

        }

    < EjsTreeGrid ID="TreeGrid" @ref="TreeGrid" DataSource="@TreeData" IdMapping="OrgUnitId" ParentIdMapping="ParentOrgUnitId" TreeColumnIndex="1"

                 AllowPaging="true" AllowExcelExport="true" AllowFiltering="true" AllowMultiSorting="true" AllowPdfExport="true"

                 AllowReordering="true" AllowResizing="true" AllowRowDragAndDrop="true" AllowSorting="true"

                 EnableAltRow="true" EnableCollapseAll="true" EnableHover="true" ShowColumnMenu="true"

                 Toolbar="@(new List() { "Add", "Delete", "Update", "Cancel" })">

        < TreeGridEvents TValue="Node" OnToolbarClick="Toolbarclick" RowSelected="RowSelectHandler" OnActionComplete="ActionComplete" >

        < TreeGridSelectionSettings Type="Syncfusion.EJ2.Blazor.Grids.SelectionType.Single" Mode="Syncfusion.EJ2.Blazor.Grids.SelectionMode.Row">

< /TreeGridSelectionSettings>

        < TreeGridPageSettings PageSizeMode="PageSizeMode.Root" PageSize="50">

        < TreeGridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="Syncfusion.EJ2.Blazor.TreeGrid.EditMode.Row">

< /TreeGridEditSettings>

        < TreeGridFilterSettings Type="Syncfusion.EJ2.Blazor.TreeGrid.FilterType.Menu">

        < TreeGridColumns>

            < TreeGridColumn Field="Code" HeaderText="Code" Width="20">

            < TreeGridColumn Field="Name" HeaderText="Name" Width="40">

            < TreeGridColumn Field="LegalName" HeaderText="Legal Name" Width="40">

            < TreeGridColumn Field="ExternalCode" HeaderText="Ext. Code" Width="20">

            < TreeGridColumn HeaderText=".." Width="15" Commands="commands" AllowReordering="false" AllowSorting="false" AllowResizing="false">

< /TreeGridColumn>

        < /TreeGridColumns>

    < /EjsTreeGrid>

[Manivannan Padmanaban]

Hi Scott, 

Thanks for the update. 

Query : It seems the save and delete action events are not firing 

From the shared code example, we could see that you have not defined the primary key in the column definition which results the reported issue. In order to perform the CRUD operation in TreeGrid we need to define the primary key column. Kindly refer the below code example, 

<EjsTreeGrid DataSource="@TreeGridData" …………. > 

    ……………. 

 

    <TreeGridColumns> 

        <TreeGridColumn Field="TaskId" HeaderText="Task ID" IsPrimaryKey="true" Width="80" TextAlign="Syncfusion.EJ2.Blazor.Grids.TextAlign.Right"></TreeGridColumn> 

……………………. 

        <TreeGridColumn HeaderText="Manage Records" Width="150" Commands="@commands"></TreeGridColumn> 

    </TreeGridColumns> 

</EjsTreeGrid> 

 

For your convenience we have created the sample, refer the below link. 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Test1120875897.zip  

Kindly get back to us, if you need further assistance. 

Regards, 

Manivannan Padmanaban. 

[Scott Peal]

Thanks, that was the issue. Now it is working

[Sathyanarayanamoorthy Eswararao]

Hi Scott, 

We are happy to hear that, your issue has been resolved. If you have any further queries, please get back to us. We will be happy to assist you. 

Regards, 

Sathyanarayanamoorthy 

[OSCAR PEREZ]

This link is not working

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_OnActionComplete 

[Manivannan Padmanaban]

Hi Oscar, 

Greetings from Syncfusion Support. 

From V18.1.36-beta, we have name change in our component and syncfusion nuget package. There will also be changes to the name of the components in the help documentation. 

Kindly refer to the below link for release notes changes, 

https://blazor.syncfusion.com/documentation/release-notes/18.1.36/ 

Refer to the modified API link, 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_OnActionComplete 

Please get back to us, if you need further assistance. We will be happy to assist you. 

Regards, 

Manivannan Padmanaban