KendoUI kendo-grid with k-detail-template doesn't fire update

Question

I'm having an issue with a kendo-grid having k-detail-template as row structure. KendoUI version is v2014.3.1411 (Kendo UI Q3 2014 SP2)

Here it is the html code:

<div kendo-grid="mainGrid" id="mobileRole" k-options="mainGridOptions">
    <div k-detail-template>
        <div id="users_#= id #" kendo-grid k-options="loadUsers(dataItem)"></div>
    </div>
</div>

When I edit the main row, clicking the button you can see in the picture...

I can edit the main row label (that is "RoleBA_test"), then the row is successfully modified but when I refresh the grid it is shown again the old label, meaning the update has been made locally but has not been triggered to server.

The weird happens when I remove the

<div k-detail-template>

in this case the update is successfully triggered to server and the row stays modified even after a grid refresh. Here it is my angular javascript code for mainGridOptions and load users:

mainGridOptions

    $scope.mainGridOptions = gridOptions({
        dataSource: jData({
            read: {
                url: function (data) {
                    return "api/read/rest_call";
                }
            },
            update: {
                url: function (data) {
                    return "api/update/rest_call";
                },
                beforeSend: function () {
                    blockUI.start();
                },
                complete: function (data, status) {
                    $scope.$evalAsync(function () {
                        blockUI.stop();
                        if (status.toLowerCase() != 'error') {
                            $scope.editing = false;
                        } else {
                            //error
                        }
                    });
                },
                global: false
            },
            destroy: {
                url: function (data) {
                    return "api/destroy/rest_call
                },
                beforeSend: function () {
                    blockUI.start();
                },
                complete: function (data, status) {
                    $scope.$evalAsync(function () {
                        blockUI.stop();
                        if (status.toLowerCase() != 'error') {
                            $scope.editing = false;
                        } else {
                            //error
                        }
                    });
                },
                global: false
            },
            create: {
                url: function (data) {
                    return "api/create/rest_call";
                },
                beforeSend: function () {
                    blockUI.start();
                },
                complete: function (data, status) {
                    $scope.$evalAsync(function () {
                        blockUI.stop();
                        if (status.toLowerCase() != 'error') {
                            $scope.editing = false;
                        } else {
                            alertify.alert(data.statusText);
                        }
                    });
                },
                global: false
            },
            model: {
                id: "id",
                fields: {
                    id: {
                        type: "number"
                    },
                    name: {},
                }
            }
        }).dataSource,
        sortable: true,
        columnMenu: true,
        resizable: true
    });

loadUsers

$scope.loadUsers = function (dataItem) {
return gridOptions({
    dataSource: jData({
        read: {
            url: function () {
                return "api/read/rest_call/";
            }
        },
        model: {
            id: "id",
            fields: {
                id: {
                    type: "number"
                },
            }
        }
    }).dataSource,
    sortable: true,
    columnMenu: true,
    width: '90%',
    resizable: true,
    dataBound: function (e) {
        onDataBound.call(this, 'mobileRoleUsers', dataItem);
    }
});
};

Has anyone had the same problem?

Thank you all.

What does this code do: onDataBound.call(this, 'mobileRoleUsers', dataItem); Does your scenario work as expected if you remove it? — dimodi
Hi @dimodi, thanks for your comment, I've tried to remove it but it still doesn't fire update rest call. — BitRider

ryohei.izm ryohei.izm · Accepted Answer · 2017-02-25T13:05:19

I had experienced the same issue though I am using the latest version 2017.1.223.

I tried to find something solutions, and I just found a fact that the attribute "k-detail-template" is only one not to replace to the format "data-k-..." such as compatible for HTML mark ups.

I think "k-detail-template" has some problems for angular.

KendoUI kendo-grid with k-detail-template doesn't fire update

1 Answers