CODEWITHSUNDEEP
javascriptkendo-uikendo-grid
Rock
Rock

Reputation: 584

Get selected dropdown value in inside kendo grid

Requirement: How to get selected drop down value in kendo grid while updating records

By using kendo editor i have implemented dropdown in grid column and i want to save datavaluefiled value

Datasource ID:1,Interestname:cricket Id:2,Interestname:football while submiiting i need to save only value i:e Id

    <html>
<head>
    <title></title>
</head>
<body>
    <div id="grid-container"></div>

    @*Scripts*@
    <script type="text/javascript">
        $(document).ready(function () {
            debugger
            var gridDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "/KendoGrid/GetStudents",
                        dataType: "json"
                    },

                    update: {
                        url: "/KendoGrid/CreateOrUpdate",
                        dataType: "json"
                    },
                    create: {
                        url: "/KendoGrid/CreateOrUpdate",
                        dataType: "json"
                    },
                    destroy: {
                        url: "/KendoGrid/DeleteDetails",
                        dataType: "json"
                    },
                    parameterMap: function (options, operation) {
                        debugger
                        if (operation !== "read" && options) {
                            return options;
                        }


                    }
                },

                pageSize: 5,
                schema: {
                    model: {
                        id: "Id",
                        fields: {
                            Id: { editable: false, nullable: true },
                            Name: { editable: false, validation: { required: true } },
                            FatherName: { type: "text", validation: { required: true, min: 1 } },
                            DateOfBirth: { type: "date" },
                            Address: { type: "text", validation: { min: 0, required: true } },
                            Email: { type: "email", validation: { min: 0, required: true } },
                            Phone: { type: "text", validation: { min: 0, required: true } },
                            StudnetInterest: { type: "text", validation: { min: 0, required: true } }
                        }
                    },

                    parse: function (data) {
                        debugger
                        if (!data.success && typeof data.success !== 'undefined') {
                            //notifier.logixNotifier("notifyError", data.message);
                            gridDataSource.read();
                        }

                        if (data.success) {
                            //notifier.logixNotifier("notifySuccess", data.message);
                            gridDataSource.read();
                        }

                        return data;
                    }

                }

            });

            $("#grid-container").kendoGrid({
                dataSource: gridDataSource,
                height: 550,
                groupable: true,
                sortable: true,
                toolbar: ["create"],
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5,

                },
                columns: [
                    {
                        field: "Name",
                        title: "Name",
                        editable: false
                    },
                    {
                        field: "FatherName",
                        title: "Father Name",
                    },
                    {
                        field: "DateOfBirth",
                        title: "Date Of Birth",
                        format: "{0:MM/dd/yyyy}"
                    },
                    {
                        field: "Address",
                        title: "Address",
                    },
                    {
                        field: "Email",
                        title: "Email",
                    },
                    {
                        field: "Phone",
                        title: "Phone",
                        attributes: { hideMe: true }
                    },
                    {
                        field: "StudnetInterest",
                        title: "Student Interest",
                         editor: interestsDropdown,
                        values: interestsDropdown
                    },
                    { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }
                ],
               // editable: "inline"
                editable: "popup"


            });
        });
        @*drop down Data Source*@
        var dropDownDataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    dataType: "json",
                    url: "/KendoGrid/GetInterest",
                },

            }
        });
        function interestsDropdown(container, options) {
            debugger
            $('<input required name="' + options.field + '" id="dropintrest" onchange="drop(this)"/>')
                .appendTo(container)
                .attr('data-bind', 'value:Id')
                .kendoDropDownList({
                    autoBind: false,
                    dataTextField:"InterestName",
                    dataValueField:"Id",
                    dataSource: dropDownDataSource,

                });

        }
        function drop(event) {
            debugger
      var data=   $("#dropintrest").data("kendoDropDownList");


        }


    </script>
</body>
</html>

Upvotes: 3

Views: 4572

Answers (1)

Joe Glover
Joe Glover

Reputation: 1026

I think you may be binding to the wrong property on your model. Also, try setting the valuePrimitive property of your drop down list to true:

        $('<input required data-bind="value:' + options.field + '" name="' + options.field + '" id="dropintrest" onchange="drop(this)"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: false,
                dataTextField:"InterestName",
                dataValueField:"Id",
                dataSource: dropDownDataSource,
                valuePrimitive: true
            });

According to the documentation:

If set to true, the View-Model field will be updated with the selected item value field. If set to false, the View-Model field will be updated with the selected item.

Hope this helps.

Upvotes: 2

Related Questions