We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

TreeGrid events for CRUD

Thread ID:

Created:

Updated:

Platform:

Replies:

150678 Jan 15,2020 10:16 PM UTC May 19,2020 06:30 AM UTC Blazor 9
loading
Tags: TreeGrid
Scott Peal
Asked On January 15, 2020 10:16 PM UTC

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 [Syncfusion]
Replied On January 17, 2020 10:15 AM UTC

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. 

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

Regards, 
Manivannan Padmanaban. 


Scott Peal
Replied On January 17, 2020 01:05 PM UTC

Fantastic!

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

Thanks again...

Gowri Loganathan [Syncfusion]
Replied On January 20, 2020 08:30 AM UTC

Hi Scott, 
  
Thanks. 
  
Please revert us, if you need any queries. We will happy to assist you. 
  
Regards, 
Gowri V L. 


Scott Peal
Replied On January 21, 2020 03:06 PM UTC

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 [Syncfusion]
Replied On January 22, 2020 11:43 AM UTC

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. 

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

Regards, 
Manivannan Padmanaban. 


Scott Peal
Replied On January 22, 2020 07:43 PM UTC

Thanks, that was the issue. Now it is working

Sathyanarayanamoorthy Eswararao [Syncfusion]
Replied On January 23, 2020 07:09 AM UTC

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 


Manivannan Padmanaban [Syncfusion]
Replied On May 19, 2020 06:30 AM UTC

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, 

Refer to the modified API link, 

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

Regards, 
Manivannan Padmanaban 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon