Editing in a Grid in Hierarchy view

[adamhughes]

When in Hierarchy view .. how can I Add/Update/Delete both Master and Detail?

[Alexander]

Hi Adam,

Thank you for the provided information and screenshot.

In general, the Grid exposes editing functionality primarily used for manipulating the way its data is presented through the .Editable() configuration method. Having this in mind, the Grid exposes the following edit modes:

• The Inline Editing mode is where you can toggle a grid cell into edit mode by clicking on an edit button for instance. An example where this is used can be seen in the Grid Inline Editing Demo.

• The Popup Editing mode allows you to edit a specific row content in a popup edit form. This can be observed in the Grid Popup Editing Demo

• The Batch Editing mode processes all changes in a singular batch updated whilst the editing can be triggered by simply clicking on a specific grid cell. The Batch Editing Demo shows a visual representation of how it is utilized.

In addition, it is important to also have the DataSource configured for CRUD operations. For example:

@(Html.Kendo().Grid<OrderViewModel>()
      .Name("grid")
      .DataSource(source => source.Ajax()
          .Model(model =>
           {
               model.Id(o => o.OrderID);
           })
          .Events(events => events.Error("error_handler"))
          .Create(create => create.Action("Orders_Create","Grid"))
          .Read(read => read.Action("Read_Orders", "Grid"))
          .Update(update => update.Action("Orders_Update", "Grid"))
          .Destroy(destroy=>destroy.Action("Orders_Destroy","Grid"))
      )
 )

More information revolving around this topic can be found here:

• CRUD Operations

With that said, the Grid Hierarchy can be configured for editing operations as well. In general, the destroy, create, and update operations do not differ from how a regular grid that is not part of a hierarchy would be configured. Hence, you can use the same approach as in the previously outlined demos and configure your hierarchy based on your preference.

We also have a dedicated GitHub example for Hierarchy Grid Editing that you might find helpful. Notice that the example is configured within an MVC project but the same approach is also applicable for an ASP.NET Core project as well:

• https://github.com/telerik/ui-for-aspnet-mvc-examples/blob/master/grid/ajax-3-level-hierarchy-editing/AjaxHierarchyEditing/Views/Home/Index.cshtml

Finally, I am attaching a runnable sample that illustrates Hierarchy Grid Editing with Inline Editing in case you experience any difficulties.

I hope you find this helpful.

Best Regards,
Alexander
Progress Telerik

[Russell]

Great example. I would like to see the same example using Razor page handlers instead of MVC Action methods.

Thanks

[Alexander]

Hi Russell,

Thank you for the kind words and for reaching out.

In order to set up both the hierarchy and parent Grid within a Razor Pages scenario, the following specifics need to be taken into account:

• The CRUD Urls of the Grid's DataSource needs to point to the respective page handlers. This can be achieved using the .Url() configuration option instead of the .Action() option. For example:

 .DataSource(ds => ds.Ajax()
        .Read(r => r.Url("/Grid/GridCrudOperations?handler=Read").Data("forgeryToken"))
        .Update(u => u.Url("/Grid/GridCrudOperations?handler=Update").Data("forgeryToken"))
        .Create(c => c.Url("/Grid/GridCrudOperations?handler=Create").Data("forgeryToken"))
        .Destroy(d => d.Url("/Grid/GridCrudOperations?handler=Destroy").Data("forgeryToken"))
        .Model(m => m.Id(id => id.OrderID))
)

• With each POST request, it is mandatory that an AntiForgeryToken is passed. This can be achieved using the .Data() configuration option for each of the CRUD operations respectively (highlighted in green):

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()

// Omitted for brevity.

<script>
        function forgeryToken() {
            return kendo.antiForgeryTokens();
        }
</script>

That being said, for more in-depth information I would recommend reviewing the following guideline:

Telerik UI Grid in Razor Pages

Finally, as requested, I am also attaching an updated version of the previously sent sample that tackles CRUD operations for an hierarchical grid within a Razor Pages scenario.

I hope this helps.