Grid, parameterMap, and kendoDropDownList

3 posts, 0 answers
  1. Joe
    Joe avatar
    10 posts
    Member since:
    Jun 2011

    Posted 11 May 2012 Link to this post

    I have a dropdownlist in a grid. When I put a row in edit mode and change the selected value of the ddl, the data sent to my update procedure is the value field (i.e. 1, 5, 7). What I want to send is the text field (i.e. Apples, Oranages, Bananas).

    How can I ensure the text value of the dropdownlist is being sent to my update method?

    If I don't change the selection it works like I want (meaning the text value is sent to my update procedure). Only when I change the selected value the parameter value sent is the value field.


    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
        <div id="grid">
        </div>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#grid").kendoGrid({
                    //height: 260,
                    toolbar: ["create"],
                    columns: [
                        "DepartmentID",
                        { field: "FRSAccountNumber", title: "FRS Account No", sortable: true, filterable: true },
                        { field: "DepartmentName", title: "Dept Name", sortable: true, filterable: true },
                        { field: "CollegeName", width: "150px", editor: categoryDropDownEditor },
                        { field: "SubjectArea", title: "Subj Area", sortable: true, filterable: true },
                        { command: ["edit", "destroy"], title: " ", width: "210px", filterable: false }
                            ],
                    editable: "inline",
                    dataSource: {
                        //batch: true,
                        pageSize: 10,
                        schema: {
                            data: function (data) {
                                return data.d || [];
                            },
                            type: "json",
                            total: "d.length",
                            model: {
                                id: "DepartmentID",
                                fields: {
                                    DepartmentID: { type: "number" },
                                    FRSAccountNumber: { type: "string" },
                                    DepartmentName: { type: "string" },
                                    CollegeName: "CollegeName",
                                    SubjectArea: { type: "string" }
                                }//fields
                            }//model
                        }, //schema
                        transport: {
                            read: {
                                url: "Web/KendoDS.asmx/ReadDepartments",
                                contentType: "application/json; charset=utf-8",
                                type: "POST"
                            }, //read
                            update: {
                                url: "Web/KendoDS.asmx/Update",
                                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
                            },
                            parameterMap: function (data, operation) {
                                if (operation != "read") {
                                    return JSON.stringify({ dept: data });
                                }
                            }
                        }//transport
                    }, //dataSource
                    pageable: true
                });
     
                var categoryDataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "Web/KendoDS.asmx/GetColleges",
                            contentType: "application/json; charset=utf-8",
                            type: "POST"
                        }
                    },
                    schema: {
                        data: "d"
                    }
                });
                
                function categoryDropDownEditor(container, options) {
                    $('<input data-text-field="CollegeName" data-value-field="Ranking" data-bind="value:' + options.field + '"/>')
                    .appendTo(container)
                    .kendoDropDownList({
                        autoBind: false,
                        dataSource: categoryDataSource
                    });
                }
            });
     
     
     
     
     
     
     
     
        </script>
    </asp:Content>
  2. Mike
    Mike avatar
    27 posts
    Member since:
    Oct 2007

    Posted 29 Sep 2012 Link to this post

    Running into the same thing here!   Did you find a fix?
  3. Kendo UI is VS 2017 Ready
  4. Joe
    Joe avatar
    10 posts
    Member since:
    Jun 2011

    Posted 01 Oct 2012 Link to this post

    I did. Below is a mod of what I posted above.

    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
        <div id="grid">
        </div>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#grid").kendoGrid({
                    toolbar: ["create"],
                    columns: [
                        { field: "FRSAccountNumber", title: "FRS Account No", sortable: true, filterable: true },
                        { field: "DepartmentName", title: "Dept Name", sortable: true, filterable: true },
                        { field: "CollegeName", width: "150px", editor: categoryDropDownEditor },
                        { field: "SubjectArea", title: "Subj Area", sortable: true, filterable: true },
                        { command: ["edit", "destroy"], title: " ", width: "210px", filterable: false }
                            ],
                    editable: "inline",
                    dataSource: {
                        pageSize: 10,
                        schema: {
                            data: function (data) {
                                return data.d || [];
                            },
                            type: "json",
                            total: "d.length",
                            model: {
                                id: "DepartmentID",
                                fields: {
                                    DepartmentID: { type: "number" },
                                    FRSAccountNumber: { type: "string" },
                                    DepartmentName: { type: "string" },
                                    CollegeName: "CollegeName",
                                    SubjectArea: { type: "string" }
                                }//fields
                            }//model
                        }, //schema
                        transport: {
                            read: {
                                url: "Web/KendoDS.asmx/ReadDepartments",
                                contentType: "application/json; charset=utf-8",
                                type: "POST"
                            }, //read
                            update: {
                                url: "Web/KendoDS.asmx/Update",
                                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
                            },
                            parameterMap: function (data, operation) {
                                if (operation != "read") {
                                    return JSON.stringify({ dept: data });
                                }
                            }
                        }//transport
                    }, //dataSource
                    pageable: true
                });
      
                var categoryDataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "Web/KendoDS.asmx/GetColleges",
                            contentType: "application/json; charset=utf-8",
                            type: "POST"
                        }
                    },
                    schema: {
                        data: "d"
                    }
                });
                 
                function categoryDropDownEditor(container, options) {
                    $('<input data-text-field="CollegeName" data-value-field="Ranking" data-bind="value:' + options.field + '"/>')
                    .appendTo(container)
                    .kendoDropDownList({
                        autoBind: false,
                        dataSource: categoryDataSource
                    });
                }
            });
        </script>
    </asp:Content>
Back to Top