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

Selected listview item within a grid not getting updated.

0 Answers 66 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sneha
Top achievements
Rank 1
Sneha asked on 31 Jul 2012, 01:07 PM
I have a editable grid which has a list view in it. List view is getting populated properly but when i when i select a listview item within editable grid, All the fields get updated except the listview items.
Below is the code:

(function ($) {
    // UpdateAPI url
    var UPDATEUSER_API_URL = '/api/UserManagement/PostUpdateUser';
    // Create API url
    var CREATEUSER_API_URL = '/api/UserManagement/PostUpdateUser';
    // Delete API url
    var DELETEUSER_API_URL = '/api/UserManagement/DeleteUser';
    // Search API url
    var GETUSER_API_URL = '/api/UserManagement/GetUser';
    // Search By Id API url
    var GETUSERBYID_API_URL = '/api/UserManagement/GetUserById';
    // Get Role url
    var GETROLE_API_URL = '/api/RoleManagement/GetRole';

    var isCreating = false;

    $(function () {

        userSource =
            new kendo.data.DataSource({
                transport: {
                    read: {
                        url: GETUSER_API_URL,
                        dataType: "json"
                    },
                    update: {
                        url: CREATEUSER_API_URL,
                        contentType: 'application/json;charset=utf-8',
                        dataType: "json",
                        type: "POST"
                    },
                    destroy: {
                        url: DELETEUSER_API_URL,
                        contentType: 'application/json;charset=utf-8',
                        type: "DELETE",
                        dataType: "json",
                    },
                    create: {
                        url: CREATEUSER_API_URL,
                        contentType: 'application/json;charset=utf-8',
                        type: "POST"
                    },
                    parameterMap: function (options, operation) {
                        //console.log(operation);

                        if (operation == "destroy" && options.models.length > 0) {
                            return JSON.stringify(options.models[0]);
                        }
                        else if (operation !== "read" && options.models.length > 0) {
                            return JSON.stringify(options.models[0]);
                        }
                    }
                },
                batch: true,
                pageSize: 10,
                schema: {
                    model: {
                        id: "UserProfileId",
                        fields: {
                            UserProfileId: { editable: false, nullable: true },
                            Password: {
                                type: "string", validation: {
                                    required: true,
                                    password: function (input) {
                                        input.attr("data-password-msg", "Password cannot be greater than 50 characters!");
                                        return input.val().length <= 50;
                                    }
                                },
                            },
                            Username: {
                                validation: {
                                    required: true,
                                    username: function (input) {
                                        input.attr("data-username-msg", "Username cannot be greater than 50 characters!");
                                        return input.val().length <= 50;
                                    }
                                },
                            },
                            FirstName: {
                                type: "string", validation: {
                                    required: true,
                                    firstname: function (input) {
                                        input.attr("data-firstname-msg", "Firstname cannot be greater than 50 characters!");
                                        return input.val().length <= 50;
                                    }
                                },
                            },
                            LastName: {
                                type: "string", validation: {
                                    required: true,
                                    lastname: function (input) {
                                        input.attr("data-lastname-msg", "Lastname cannot be greater than 50 characters!");
                                        return input.val().length <= 50;
                                    }
                                },
                            },
                            EmailAddress: { nullable: false, validation: { required: true } },
                            IsSuperUser: { type: "boolean", validation: { required: false } },
                            RoleName: { validation: { required: true } },
                        }
                    }
                }
            });

        $("#grid").kendoGrid({
            dataSource: userSource,
            pageable: true,
            height: 400,
            toolbar: ["create"],
            columns: [
                "Username",
                { field: "Password", title: "Password", width: ".1px" },
                "FirstName",
                "LastName",
                { field: "EmailAddress", title: "Email Address", width: "170px" },
                { field: "IsSuperUser", title: "SuperUser", width: "90px" },
                {
                    field: "RoleName", title: "Roles", width: "150px", editor: role_editor
                },
                { command: ["edit", "destroy"], title: "&nbsp;", width: "210px" }],
            editable: "popup",
            edit: function (e) {
                debugger;
                if (isCreating) {
                    var window = e.container.data("kendoWindow");
                    window.title("Add new record");
                    e.container.find("a.k-grid-update").html('<span class="k-icon k-update"></span>Create');
                    //reset the flag
                    isCreating = false;
                }
                else {
                    //e.container.find("k-input k-textbox").html('<input type="text" class="k-input k-textbox" name="Username" disabled="true"/>');
                    //e.model.container.find("k-input k-textbox").html('<input type="text" class="k-input k-textbox" name="Username" disabled="true"/>');
                    document.getElementsByName("Username")[0].disabled = "true";
                }
            }
        });
        $(".k-grid-add").on("click", function (e) {
            debugger;
            isCreating = true;
            document.getElementsByName("Username")[0].disabled = "false";
        });     
    });

    function role_editor(container, options) {
        $(function () {

            $("div[data-container-for=" + options.field + "]").kendoListView({
                dataSource: {
                    type: "json",
                    transport:
                        {
                            read: GETROLE_API_URL,
                        }
                },
                pageable: true,
                selectable: "multiple",
                navigatable: true,
                editable: true,
                template: "<li>${RoleName}</li>",
                editTemplate: '<li><input type="text" data-bind="value:RoleName" name="RoleName" required="required"/></li>'
            });
        });

    }
})(jQuery);


Function written for binding the listview within the grid is marked in bold. While updating/creating any record, i am not able to insert/update the listview items in the database.

No answers yet. Maybe you can help?

Tags
Grid
Asked by
Sneha
Top achievements
Rank 1
Share this question
or