Grid Multiple Edit Command target specified columns and multiple save endpoints

[Akhil]

I am using a Grid , 

Suppose there are two columns and two Edit buttons ,while clicking the first edit button only edit the first column and second edit button for second column. Save button needs to called to different endpoints with the data.

[Mihaela]

Hello Akhil,

You can achieve the desired result by adding a separate custom column command for each cell:

@(Html.Kendo().Grid Model>()
.Name("grid")
.Columns(columns =>
{
  columns.Bound(p => p.Field1);
  columns.Bound(p => p.Field2);
  columns.Command(command => 
  { 
    command.Custom("Edit1").Text("Edit Field1").Click("onEditField1"); 
    command.Custom("Edit2").Text("Edit Field2").Click("onEditField2"); 
  });
 })
  .Editable()
)


<script>
    function onEditField1(e) {
         e.preventDefault();
         var grid = $("#grid").data("kendoGrid");
         var editedRow = $(e.currentTarget).closest("tr"); //get the Grid row
         var cellToEdit = $(editedRow).find("td:nth-child(1)"); //Get the first table cell in this row
         grid.editCell($(cellToEdit)); //Use the editCell() method to switch the specified table cell in edit mode
    }

    function onEditField2(e) {
         e.preventDefault();
         var grid = $("#grid").data("kendoGrid");
         var editedRow = $(e.currentTarget).closest("tr");
         var cellToEdit = $(editedRow).find("td:nth-child(2)");
         grid.editCell($(cellToEdit));
    }
</script>

Regarding the saving, when the "Save" button of the respective field is clicked, you can send an AJAX request to the specified endpoint, and trigger the cellClose() method to close the edited cell.

Another possible solution is to add a button to every cell column that opens a Popup window with an editor for that cell as described in the following KB article:

https://docs.telerik.com/kendo-ui/knowledge-base/custom_column_popup_editor

I hope that helps.

 

 

Regards, Mihaela Progress Telerik

[Akhil]

I am using Inline grid and need to edit some columns based on condition.

for instance the model:

public string Name{};

public string Address{}

public string DOB{}

 

I want to two edit button- "Edit personal details" and  "Edit DOB"

On clicking "Edit personal details" only name and address have to be edited

On clicking "Edit DOB" Only DOB can be changed.

there should be Save and cancel button as inline  , clicking save a button need to respective api calls with all the data as a post request.

[Mihaela]

Hello Akhill,

I would suggest the following approach:

• Add two custom column commands in the Grid:

 

.Columns(columns =>
{
  columns.Bound(p => p.Name);
  columns.Bound(p => p.Address);
  columns.Bound(p => p.DOB);
  columns.Command(command => 
  { 
    command.Custom("Edit1").Text("Edit personal details").Click("onEdit1"); 
    command.Custom("Edit2").Text("Edit DOB").Click("onEdit2"); 
  });
})

 

• Handle the "click" event of each column command, switch the appropriate Grid row in edit mode, add the default "Update"/"Cancel" commands with jQuery, and disable the respective table cell in the editable row:

 

 let newCommands = '<button type="button" class="k-grid-update k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary"><span class="k-icon k-i-check k-button-icon"></span><span class="k-button-text">Update</span></button><button type="button" class="k-grid-cancel k-button k-button-md k-rounded-md k-button-solid k-button-solid-base"><span class="k-icon k-i-cancel k-button-icon"></span><span class="k-button-text">Cancel</span></button>';    

function onEdit1(e) {
        e.preventDefault();
        var grid = $("#grid").data("kendoGrid");
        var editedRow = $(e.currentTarget).closest("tr");
        grid.editRow($(editedRow));
        let commands = $(e.currentTarget).closest(".k-command-cell"); //Select the table cell with the commands
        $(commands).html(newCommands); //Add the default commands of the editable row (Update/Cancel)
        $("input[name='DOB']").parent().addClass("k-disabled"); //Disable the "DOB" cell
    }

    function onEdit2(e) {
         e.preventDefault();
         var grid = $("#grid").data("kendoGrid");
         var editedRow = $(e.currentTarget).closest("tr");
         grid.editRow($(editedRow));
         let commands = $(e.currentTarget).closest(".k-command-cell");
         $(commands).html(newCommands);
         $("input[name='Name']").parent().addClass("k-disabled");
         $("input[name='Address']").parent().addClass("k-disabled");
    }

You can attach a "click" event handler to the "Update" command and send an AJAX POST request to the respective endpoint:

function onClickUpdate() {
        $.ajax({
            url: "....",
            data: {name: $("input[name='Name']").val(), addr: $("input[name='Address']").val()},
            dataType: "json",
            type: "POST",
            success: function(result) {
              //if the data is received successfully, switch the table row and save the changes
              $("#grid").data("kendoGrid").saveRow();
            }
        });
}