This is a migrated thread and some comments may be shown as answers.

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

2 Answers 83 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Alex asked on 16 Oct 2015, 05:19 PM

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")
                                    )
                                )
                              )
                )

 

2 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 20 Oct 2015, 03:01 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Alex
Top achievements
Rank 1
answered on 21 Oct 2015, 10:05 PM

 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
}

Tags
Grid
Asked by
Alex
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Alex
Top achievements
Rank 1
Share this question
or