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

Grid, parameterMap, and kendoDropDownList

2 Answers 548 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 2
Joe asked on 11 May 2012, 11:58 PM

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 Answers, 1 is accepted

Sort by
0
Admin
Top achievements
Rank 1
answered on 29 Sep 2012, 11:08 PM
Running into the same thing here!   Did you find a fix?
0
Joe
Top achievements
Rank 2
answered on 01 Oct 2012, 03:48 PM
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>
Tags
Grid
Asked by
Joe
Top achievements
Rank 2
Answers by
Admin
Top achievements
Rank 1
Joe
Top achievements
Rank 2
Share this question
or