New to Telerik UI for ASP.NET Core? Download free 30-day trial

Grid Editing Create Action Without Update Button in Command Column

Environment

Product Grid for Progress® Telerik® UI for ASP.NET MVC

Description

I have a grid where I only need Create, Read and Destroy actions. However, if I have no command.Edit(); in the c.Command, then there is no way to create a record.

If I add the command.Edit();, then it throws an error, saying I need to hook up an Update method.

How do I fix this?

Solution

It is possible to achieve the desired behaviour by providing a custom save button and making it visible only when the edited model is new.

Here is one way of achieving the desired result:

  1. Add a custom command button. You may use the IconClass() to get it to look like the built-in save buttons:

        columns.Command(c =>
        {
            c.Destroy();
            c.Custom("Save").Click("saveRow").IconClass("k-icon k-i-check").Visible     ("shouldBeVisible");
        });
    
  2. Add the click handler which will save the row and trigger the create action:

        function saveRow(e) {
            e.preventDefault();
            // e.target is the DOM element representing the button
            var tr = $(e.target).closest("tr");
            this.saveRow();
        }
    
  3. Set the visibility of the custom button to true only for new models:

        function shouldBeVisible(e) {       
            return e.isNew();
        }
    

See Also

In this article
Not finding the help you need? Improve this article