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

Kendo Kendo Grid with dropdownlist Model

2 Answers 985 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Leuenberger
Top achievements
Rank 1
Leuenberger asked on 31 Aug 2012, 02:13 PM
Kendo-UI-Grid.JPG

Kendo Hello Friends Have a grid with inline editing and to 3 drop-down lists. The display and fill the drop-down lists ok. Works but if I want to save changes, so do not get the desired data to the controller? The list the values ​​I need are the IDs of the selected items from the drop! But come on, only the new text of the drop-down lists for the controller.
Here is my code and annexed the image on the controller

function loadTable() {
    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                    url: "/Customer/LoadOperatingPictureTable",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    data: {}
                },
                update: {
                    url: "/Customer/UpdateAnimalValues",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8"
                },
                parameterMap: function (data, operation) {
                    if (operation !== "read") {
                        return JSON.stringify({ model: data });
                    }
                }
        },
        autoSync: false,
        schema: {
            model: {
                id: "Id",
                fields: {
                    Id: { editable: false, nullable: true },
                    Name: { editable: false },
                    AnimalCount: {
                        type: "number",
                        validation: {
                            required: {
                                message: "Das Feld darf nicht leer sein!"
                            }
                        }
                    },
                    Distributor: { editable: true },
                    Label: { editable: true },
                    Marketer: { editable: true }
                }
            }
        },
        error: function (e) {
            alert(e.status + ' ' + e.statusText);
        }
    });
 
    $("div#operatingPictureTable").kendoGrid({
        dataSource: dataSource,
        scrollable: true,
        sortable: true,
        editable: "inline",
        columns: [
            {
                field: "Name",
                title: "Tierkategorie"
            },
            {
                field: "AnimalCount",
                title: "Anzahl Tiere",
                template: '<div style="text-align: right">#= AnimalCount #</div>',
                width: 80
            },
            {
                field: "Distributor",
                title: "Lieferant",
                editor: onDrpDistributor
            },
            {
                field: "Label",
                title: "Label",
                editor: onDrpLabel
            },
            {
                field: "Marketer",
                title: "Vermarkter",
                editor: onDrpMarketer
            },
            {
                command: "edit",
                titel: " ",
                width: 110
            }
        ],
    });
         
    function onDrpDistributor(container, options) {
    $('<input name="Distributors" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            dataTextField: "Value",
            dataValueField: "Id",
            autoBind: false,
            dataSource: new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "/Main/GetDistributors",
                        dataType: "json"
                    },
                    schema: {
                        model:{
                            id: "Id",
                            value: "Value"
                        }
                    }
                }
            })
        });
    }
         
    function onDrpLabel(container, options) {
    $('<input name="Distributors" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            dataTextField: "Value",
            dataValueField: "Id",
            autoBind: false,
            dataSource: {
                type: "json",
                transport: {
                    read: "/Main/GetLabels"
                }
            }
        });
    }
         
    function onDrpMarketer(container, options) {
    $('<input name="Distributors" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            dataTextField: "Value",
            dataValueField: "Id",
            autoBind: false,
            dataSource: {
                type: "json",
                transport: {
                    read: "/Main/GetMarketers"
                }
            }
        });
    }
}

2 Answers, 1 is accepted

Sort by
0
Accepted
Gerald
Top achievements
Rank 2
answered on 31 Aug 2012, 07:43 PM
I was having similar issues. This is my configuration. I am getting the data from WebMethod(s) in my code behind. Hope it helps.

$(document).ready(function () {
    dataSource = new kendo.data.DataSource({
        transport: {
            create: {
                url: "Default2.aspx/AddUser", //specify the URL which should create new records. This is the Create method of the Products.asmx service.
                contentType: "application/json; charset=utf-8", // tells the web service to serialize JSON
                type: "POST", //use HTTP POST request as the default GET is not allowed for ASMX
                complete: function (e) {
                    $("#grid").data("kendoGrid").dataSource.read();
                }
            },
            read: {
                url: "Default2.aspx/GetGridData",
                contentType: "application/json; charset=utf-8",
                type: "POST"
            },
            update: {
                url: "Default2.aspx/UpdateUser",
                contentType: "application/json; charset=utf-8",
                type: "POST",
                complete: function (e) {
                    $("#grid").data("kendoGrid").dataSource.read();
                }
            },
            destroy: {
                url: "Default2.aspx/DeleteGridUser",
                contentType: "application/json; charset=utf-8",
                type: "POST"
            },
            parameterMap: function (options, operation) {
                switch (operation) {
                    case "destroy":
                        var id = options.ID;
                        return kendo.stringify({ id: id });
                        break;
                    case "create":
                        var fname = options.fname,
                            lname = options.lname,
                            username = options.username,
                            roleid = options.roleID;
                        return kendo.stringify({ fname: fname, lname: lname, username: username, roleid: roleid });
                        break;
                    case "update":
                        var id = options.ID,
                            fname = options.fname,
                            lname = options.lname,
                            username = options.username;
                            roleid = options.role;
                        return kendo.stringify({ id: id, fname: fname, lname: lname, username: username, roleid: roleid });
                        break;
                    default:
                        return "{}";
                }
            }
        },
        schema: {
            data: "d", // ASMX services and or WebMethods return JSON in the following format { "d": <result> }. Specify how to get the result.
            model: { // define the model of the data source. Required for validation and property types.
                id: "ID",
                fields: {
                    ID: { editable: false, nullable: true },
                    fname: { validation: {required: true} },
                    lname: { validation: { required: true} },
                    username: { validation: { required: true} }
                }
            },
            total: function (response) {
                return $(response.d).length;
            }
        },
        pageSize: 10,
        aggregate: [{ field: "ID", aggregate: "sum"}]
    });
 
    // Create Grid
    $("#grid").kendoGrid({
        dataSource: dataSource,
        toolbar: ["create"], // specify toolbar commands
        height: 400,
        groupable: true,
        sortable: true,
        filterable: true,
        columnMenu: true,
        reorderable: true,
        resizable: true,
        pageable: {
            refresh: true,
            pageSizes: true
        },
        columns: [
                { field: "ID", title: "ID", footerTemplate: "Total: #=sum#", width: "40px" },
                { field: "fname", title: "First Name", width: "150px" },
                { field: "lname", title: "Last Name", width: "150px" },
                { field: "username", title: "User", width: "100px" },
                { field: "role", title: "Role", width: "80px", editor: roleDropDown },
                { command: ["edit", "destroy"], title: " ", width: "150px"}],
        editable: "inline" // enable editing
    }); // End Grid
 
    // Grid drop down list
    function roleDropDown(container, options) {
        $('<input id="roleDD" data-text-field="role" data-value-field="roleID" data-bind="value:' + options.field + '" />')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
            enabled: true,
            optionLabel: "Select Role",
            dataSource: {
                transport: {
                    read: {
                        url: "Default2.aspx/GetDropListData",
                        contentType: "application/json; charset=utf-8",
                        type: "POST"
                    }
                },
                schema: {
                    data: "d"
                }
            }
        });
    } // End drop down list
});


Here is the read WebMethod so you can kind of get an idea.

[WebMethod]
        public static object GetGridData()
        {
            DataTable tbl = new DataTable();
            SqlConnection conn = new SqlConnection("Server=your server;Database=your db;Trusted_Connection=True");
            SqlCommand cmd = new SqlCommand("usp_displayallusers", conn);
            cmd.CommandType = CommandType.StoredProcedure;
            conn.Open();
            SqlDataReader rdr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
            tbl.Load(rdr);
            rdr.Close();
            var result = from DataRow row in tbl.AsEnumerable() select new { ID = row.Field<int>("ID"), fname = row.Field<string>("fname"), lname = row.Field<string>("lname"), username = row.Field<string>("username"), roleID = row.Field<int>("roleID"), role = row.Field<string>("role") };
            return result;
        }
0
Leuenberger
Top achievements
Rank 1
answered on 04 Sep 2012, 02:08 PM
Kendo-UI-Grid.jpg
Hello Gerald
Thanks for your answer. I've looked at your code ...
You turn so easy because the Id with the role from the drop down to what is a good trick, of course.

RoleID = options.role

But somehow this is so not the solution to the problem. Or I just did not understand correctly.
The real problem I have, which is after the update will click me the id's of the drop shown and not the text. What the user wants to do with a number as information.
Storing the controller I can already quarrels because I know yes, the distributor for DistributorId ... ;-)
Then please look again at the picture in the Attached files. It shows the state before and after the update by command.
I have the problem even temporarily released so that I look at the table after the update just re-charging ... 8-(

Gruss JanLeu
Tags
Grid
Asked by
Leuenberger
Top achievements
Rank 1
Answers by
Gerald
Top achievements
Rank 2
Leuenberger
Top achievements
Rank 1
Share this question
or