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

Grid with Batch edit and check box

1 Answer 132 Views
Grid
This is a migrated thread and some comments may be shown as answers.
satish
Top achievements
Rank 1
satish asked on 02 Jan 2017, 05:50 AM

hi,

we have a grid with batch edit and a check box in the column. this check box can be changed in the view mode also. while editing data is not updated in the UI and check box is also not working like not editable. we are using 2016 kendo with angularJs.

 

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/grid/editing">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.material.mobile.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
        <div id="example">
            <div id="grid"></div>

            <script>
                $(document).ready(function () {
                    var crudServiceBaseUrl = "//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,
                        navigatable: true,
                        pageable: true,
                        height: 550,
                        toolbar: ["create", "save", "cancel"],
                        columns: [
                            "ProductName",
                            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
                            { field: "UnitsInStock", title: "Units In Stock", width: 120 },
                            { field: "Discontinued", width: 120 ,
                          template: '<input ng-model = "dataItem.Discontinued" id ="qw_#=ProductName#" type="checkbox" ng-change="getClick(dataItem)" class = "k-checkbox"></input><label for="qw_#=ProductName#" class="k-checkbox-label"></label>', editor: '<input ng-model = "dataItem.Discontinued" id ="qw_#=ProductName#" type="checkbox" ng-change="getClick(dataItem)" class = "k-checkbox"></input><label for="qw_#=ProductName#" class="k-checkbox-label"></label>'},
                            { command: "destroy", title: "&nbsp;", width: 150 }],
                        editable: true
                    });
                });
            </script>
        </div>


</body>
</html>

1 Answer, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 04 Jan 2017, 09:45 AM
Hello Satish,

Please accept my apology for the delay in responding.

To achieve the desired behaviour, there are a few changes that should take place:

- Instead of binding the Discontinued column to the field of the dataItem, make it a template column, e.g:

{
  title: "Discontinued",
  template: '<input ng-model="dataItem.Discontinued" id="qw_#=ProductName#" type="checkbox"class="k-checkbox" ng-click="getClick(dataItem)"/><label for="qw_#=ProductName#" class="k-checkbox-label" ></label>',
  width: 120
}

This will stop the grid entering in edit mode. 

- add the k-dirty flag programmatically for consistency with the rest of the fields

Since this is a  navigatable grid, you may use the current()  method of the grid to get the focused cell:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-current

Then, prepend the dirty flag which is a span like below:

"<span class='k-dirty'></span>"

For your convenience, I have created a runnable demo using this approach at:

http://dojo.telerik.com/ULESa
Kind Regards,
Alex Hajigeorgieva
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
satish
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Share this question
or