Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Popup Data Editing with row selection and Add/Edit/Delete buttons outside grid

5 Answers 665 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ed
Top achievements
Rank 1
Ed asked on 19 Jul 2014, 01:02 AM
I would like to have almost the same behavior as the demo on "popup data editing" except this is going into a responsive (with bootstrap) environment where we don't have any room for columns to contain the edit/delete buttons.
http://demos.telerik.com/kendo-ui/grid/editing-popup

What I would like to change is to have the grid be selectable (row) and the edit/delete buttons, which will be above the grid, will enable/disable based on the count of rows selected (edit enabled when 1 row selected; delete enabled with 1..n rows selected).  The add new record button will also need to be outside the grid (unsure whether it will be above or below the grid).

My question is: can I hook into the same functionality that is available in this example while having row selection enabled and the buttons outside the grid?

jsFiddle/jsBin would be great if you can generate one.

Thanks,
--Ed

5 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 22 Jul 2014, 10:53 AM
Hello Ed,

The scenario which you described is supported. Basically all you need to do is to build the additional buttons, hook up to their click event handler and use the grid's API to manipulate the widget behaviour (state).

For your convenience I prepared a small example which demonstrates how you can open the currently selected row for editing with external button.
In order to enable/disable the buttons according to the amount of currently selected rows you may hook up to the change event handler of the Grid and use the select method to check how many rows are selected.

I hope this information will help.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ed
Top achievements
Rank 1
answered on 25 Jul 2014, 12:39 AM
Thanks Alexander.
Can you update the Dojo link again?  It fails to load the snippet.
--Ed
0
Ed
Top achievements
Rank 1
answered on 25 Jul 2014, 01:24 AM
Also, with the editRow, removeRow, addRow methods, do I need to include some special templates?  Nothing is happening at the moment for me when I click edit.
Thanks,
--Ed
0
Ed
Top achievements
Rank 1
answered on 25 Jul 2014, 06:20 PM
Nevermind.  Within the corp env it is blocked.  From home, I can see the code.
from within Chrome > Console, it is the Revision API endpoint and I get the net::ERR_CONNECTION_RESET and the top of the stack is getRequest.
0
Accepted
Alexander Valchev
Telerik team
answered on 28 Jul 2014, 01:04 PM
Hi Ed,

I did not understood - did you opened the example or not? For convenience I am pasting the full source code here:
<!DOCTYPE html>
<html>
<head>
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
</head>
<body>
            <div id="example">
            <button id="edit">Edit</button>
            <div id="grid"></div>
 
            <script>
                $(document).ready(function () {
                    var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
                        dataSource = new kendo.data.DataSource({
                            transport: {
                                read:  {
                                    url: crudServiceBaseUrl + "/Products",
                                    dataType: "jsonp"
                                },
                                update: {
                                    url: crudServiceBaseUrl + "/Products/Update",
                                    dataType: "jsonp"
                                },
                                destroy: {
                                    url: crudServiceBaseUrl + "/Products/Destroy",
                                    dataType: "jsonp"
                                },
                                create: {
                                    url: crudServiceBaseUrl + "/Products/Create",
                                    dataType: "jsonp"
                                },
                                parameterMap: function(options, operation) {
                                    if (operation !== "read" && options.models) {
                                        return {models: kendo.stringify(options.models)};
                                    }
                                }
                            },
                            batch: true,
                            pageSize: 20,
                            schema: {
                                model: {
                                    id: "ProductID",
                                    fields: {
                                        ProductID: { editable: false, nullable: true },
                                        ProductName: { validation: { required: true } },
                                        UnitPrice: { type: "number", validation: { required: true, min: 1} },
                                        Discontinued: { type: "boolean" },
                                        UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                                    }
                                }
                            }
                        });
 
                    $("#grid").kendoGrid({
                        dataSource: dataSource,
                        pageable: true,
                        height: 550,
                        toolbar: ["create"],
                        selectable: "row",
                        columns: [
                            { field:"ProductName", title: "Product Name" },
                            { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" },
                            { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
                            { field: "Discontinued", width: "120px" }],
                        editable: "popup"
                    });
                   
                    $("#edit").on("click", function() {
                      var grid = $("#grid").data("kendoGrid"),
                          selected = grid.select();
                       
                      if (selected.length) {
                        grid.editRow(selected);
                      }
                    });
                });
            </script>
        </div>
 
 
</body>
</html>

Currently the "Edit" buttons puts in edit mode the selected row. If no row is selected the button will do nothing. Please pay attention to the highlighted code.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Ed
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Ed
Top achievements
Rank 1
Share this question
or