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

Create, Update and Cancel not working in hierarchy grid.

1 Answer 288 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sandeep
Top achievements
Rank 1
Sandeep asked on 02 Sep 2015, 09:45 AM

Hi There,

 I am trying to implement hierarchy grid and want to allow Create and update on both master and child grid. Data in hierarchy grid populated perfectly. But mentioned below are the problems with Create and Edit feature. I am using Inline editing.

 1) When I click on Edit button, selected row opened in editable form with Update and Cancel button, but nothing happens when I click on Update or Cancel, both button not working. This issue is both on Master and Child grid.

2) If I click on "Add New Record" on master grid, then it tries to bind the child grid as well and also new row added but not in editable format. It adds a blank row with Edit button and after that "Edit" button not works not only of this row but of rows of entire grid.

 3) If I try to put create and update method in child grid then no data is populated in child Grid.

 

I have tried to look out for solution but with no luck. Below is the code, if you guys want to check.

<link href='@Url.Content("~/Content/kendo.common.min.css")' rel="stylesheet" type="text/css" />
<link href='@Url.Content("~/Content/kendo.default.min.css")' rel="stylesheet" type="text/css" />
<script src='@Url.Content("~/Scripts/kendo.all.min.js")' type="text/javascript"></script>
 
<div id="example">
    <div id="userDefinedGrid"></div>
 
    <script>
        $(document).ready(function () {
 
            masterDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "/MCSSIF/Template/GetUserDefinedType",
                        type: 'POST',
                        dataType: "json"
                    },
                    update: function (options) {
                        alert('not firing');
                    },
                    create: function (options) {
                        alert('not firing');
                    },
                    parameterMap: function (options, operation) {
                        if (operation !== "read" && options.models) {
                            return { models: kendo.stringify(options.models) };
                        }
                    }
                },
                pageSize: 20,
                autoSync: true,
                schema: {
                    data: function (response) {
                        return response.UserTypes;
                    },
                    total: function (response) {
                        return response.UserTypes.length;
                    },
                    model: {
                        id: "UserDefinedTypeID",
                        fields: {
                            UserDefinedTypeID: { editable: false, nullable: true },
                            UserDefinedTypeName: { validation: { required: true } },
                            Active: { type: "boolean" },
                            CreatedBy: { editable: false },
                            CreatedOn: { editable: false },
                            ModifiedBy: { editable: false },
                            ModifiedOn: { editable: false },
                        }
                    }
                }
            });
 
            $("#userDefinedGrid").kendoGrid({
                dataSource: masterDataSource,
                height: 600,
                filterable: true,
                sortable: true,
                pageable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                detailInit: detailInit,
                dataBound: function () {
                    this.expandRow(this.tbody.find("tr.k-master-row").first());
                },
                toolbar: ["create"],
                columns: [
                    { command: ["edit"], title: " ", width: "100px" },
                    { field: "UserDefinedTypeName", title: "User Defined Type", width: "200px" },
                    { field: "Active", title: "Active", width: "100px" },
                    { field: "CreatedBy", title: "Created By", width: "150px" },
                    { field: "CreatedOn", title: "Created On", width: "150px" },
                    { field: "ModifiedBy", title: "Modified By", width: "150px" },
                    { field: "ModifiedOn", title: "Modified On", width: "150px" }
                ],
                editable: "inline"
            });
        });
 
        function detailInit(e) {
            $("<div/>").appendTo(e.detailCell).kendoGrid({
                dataSource: {
                    type: "POST",
                    transport: {
                        read: {
                            url: "/MCSSIF/Template/GetUserDefinedTypeOptions",
                            type: 'POST',
                            dataType: "json",
                            data: { userDefinedTypeID: e.data.UserDefinedTypeID }
                        }
                    },
                    schema: {
                        data: function (response) {
                            return response.UserTypeValues;
                        },
                        model: {
                            id: "UserDefinedTypeOptionID",
                            fields: {
                                UserDefinedTypeOptionID: { editable: false, nullable: true },
                                UserDefinedTypeID: { editable: false },
                                Sequence: { editable: false },
                                OptionText: { validation: { required: true } },
                                Active: { type: "boolean" },
                                CreatedBy: { editable: false },
                                CreatedOn: { editable: false },
                                ModifiedBy: { editable: false },
                                ModifiedOn: { editable: false },
                            }
                        }
                    }
                },
                filterable: true,
                scrollable: false,
                sortable: true,
                toolbar: ["create"],
                columns: [
                    { command: ["edit"], title: " ", width: "100px" },
                    { field: "OptionText", title: "User Defined Type Option", width: "200px" },
                    { field: "Active", title: "Active", width: "100px" },
                    { field: "CreatedBy", title: "Created By", width: "150px" },
                    { field: "CreatedOn", title: "Created On", width: "150px" },
                    { field: "ModifiedBy", title: "Modified By", width: "150px" },
                    { field: "ModifiedOn", title: "Modified On", width: "150px" }
                ],
                editable: "inline"
            });
        }
    </script>
</div>

 

Please update me where I am doing wrong ASAP.

 

Thanks,

Sandeep

1 Answer, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 04 Sep 2015, 06:30 AM

Hello Sandeep,

 

The problem occurs because mixing functions and objects for the transport operations is not supported. Basically, each operation should be of the same type as the "read", which in this case is an object, but update and create are functions. 

 

If you scenario requires the update and create operations to be functions then the read operation should be a function as well. 

 

Regards,
Boyan Dimitrov
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
Sandeep
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Share this question
or