How do I move my (working) Update & Add function from the toolbar into the Update/Cancel buttons context?

[Alex]

A user has requested an "Update and Add" button to the left of the Kendo Update command in the grid. I was able to get this feature working in the toolbar, but it is always visible and we would prefer to get it into the command area and only visible during edit. Please advise.

 

Here's the Javascript snippet that saves and adds (generic so we can pass in other grid commands):

function UpdateAdd(e) {
    var grid = $(e).data("kendoGrid");
    grid.saveRow();
    grid.addRow();
}

 

Here's the Kendo Grid in MVC/Razor (w/the working toolbar button and the command where want but as a placeholder:

@(Html.Kendo().Grid<FOO>()
                              .Name("grid")
                              .Columns(columns =>
                              {
                                  columns.Bound(x => x.ID).Width(250).Visible(false);
                                  columns.Bound(x => x.Name).Width(250);
                                  columns.Command(commands =>
                                  {
                                      commands.Custom("Update and Add").Click("UpdateAdd");
                                      commands.Edit();// The "edit" command will edit and update data items
                                      commands.Destroy(); // The "destroy" command removes data items
                                  }).Title("Commands").Width(200);
                              })
                              .ToolBar(toolBar => toolBar.Create())
                              .ToolBar(toolBar =>
                               toolBar.Custom().Name("UpdateAdd").Text("Update and Add").Url("#")
                                .HtmlAttributes(new { onclick = "UpdateAdd('#grid')" })
                                ) // The "create" command adds new data items
                              .Editable(editable => editable.Mode(GridEditMode.InLine)) // Use inline editing mode
                              .DataSource(dataSource => dataSource
                                    .WebApi()
                                    .Model(model =>
                                    {
                                        model.Id(x => x.ClientCollectionTypeID); // Specify the property which is the unique identifier of the model
                                        model.Field(x => x.ClientCollectionTypeID).Editable(false); // M
                                        model.Field(x => x.Name).Editable(true); // M
                                    })
                                    .Create(create => create.Url("/api/Foo/gridCreate"))
                                    .Read(read => read.Url("/api/Foo/grid"))
                                    .Update(update => update.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "F", id = "{0}" })))  // Action invoked when the user saves an updated data item
                                    .Destroy(destroy => destroy.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "F", id = "{0}" }))) // Action invoked when the user removes a data item
                                    .Events(e => { e.Error("onErrors"); })
                              )
                              .Pageable()
                              .Sortable()
                              .Scrollable()
                              .Filterable(ftb => ftb.Mode(GridFilterMode.Row)
                                .Operators(ops => ops
                                    .ForString(str => str.Clear()
                                        .Contains("Contains")
                                        .StartsWith("Starts with")
                                        .EndsWith("Ends with")
                                        .IsEqualTo("Is equal to")
                                    )
                                )
                              )
                )

 

[Boyan Dimitrov]

Hello Alex,

 

In order to achieve the described behavior I would suggest using the following methods from the Kendo UI Grid API: 

 

   - to create a new row please use the addRow method. 

   - to switch specific row in edit mode you can use the editRow method (inline editing). It expects a jQuery object of the table row you want to edit. 

 

In order to differentiate which button is clicked you can use the event.target and execute the desired logic.  

 

Regards,
Boyan Dimitrov
Telerik

 

 

[Alex]

 This was the fix (combined w/the UpdateAdd function above):

function onEdit(e) {
    var commandCell = e.container.find("td:last"); //find the command column
    commandCell.html('<a class="k-button k-button-icontext" onclick="UpdateAdd(\'#' + e.container.context.id + '\')" ><span class="k-icon"></span>Update and Add</a><a class="k-button k-button-icontext k-grid-update" href="#"><span class="k-icon k-update"></span>Update</a><a class="k-button k-button-icontext k-grid-cancel" href="#"><span class="k-icon k-cancel"></span>Cancel</a>'); //append the buttons
}