jQuery kendo grid popup editor doesn't pass dropdown values to .net MVC controller?

0
votes

I am trying to edit a row in jquery kendo grid popup editor. But when I click on update button it does not submit selected dropdown values to the controller while it submits the other properties without any issues. I have tried many examples but nothing works well. This is my code

var element = $("#grid").kendoGrid({
        dataSource: {
            type: "json",
            transport: {
                read: '/controller/GetEmployees', 
                update: {
                    url: "/controller/UpdateEmployee",
                    dataType: "json"
                },
            },
            pageSize: 10,
            serverPaging: true,
            serverSorting: false,
            schema: {
                model: {
                    id: "EmployeeID",
                    fields: {
                        EmployeeID: { type: "number", editable: false },
                        EmployeeName: { type: "string", editable: true },  
                        EmployeeStatus: { defaultValue: { ID: 1, Name: "Active" }, editable: true }
                    }
                }
            }
        },
        height: 500,
        sortable: false,
        pageable: false,
        editable: "popup",
        toolbar: ["create"],
        columns: [               
            {
                field: "EmployeeName",
                title: "Employee Name",
                width: "110px"
            },
            {
                field: "EmployeeStatus",
                title: "Status",
                width: "110px",
                editor: activeInactiveDropDownEditor,
                template: "#=EmployeeStatus.Name#"
            },
            {
                command: "edit",
                width: "80px"
            }
        ]
    });

});

}

function activeInactiveDropDownEditor(container, options) {    
    $('<input required name="' + options.field + '" data-bind="ID"/>')
    .appendTo(container)
        .kendoDropDownList({
            //autoBind: true,
            dataTextField: "Name",
            dataValueField: "ID",
            dataSource: {
                type: "json",
                transport: {
                    read: "/controller/GetStatusList"
                }
            }
        });
}

could anyone found the fault here please ?

2
javascriptjquerykendo-uipopupkendo-grid
Any error on the console? Have you try to log the value of the EmployeeStatus after submit? – CMartins
no error showed. Yes I checked value from controller breakpoint. It showed { ID = 0, Name = null } – Ravi Rajindu

2 Answers

2
votes

Finally I found a solution. I just modified update request with a type property and it works well now.

                update: {
                    type: 'post', // just added this and works well
                    url: "/controller/UpdateEmployee",
                    dataType: "json"
                },
1
votes

I think your problem is with the binding, I mean, it is not just add a data attribute bind with the field name, sometimes binding models to widgets needs some level of complexity. As I can't reproduce your whole snippet, I would suggest you to use options.model to set the input value, hence the widget can initialize with the right value:

function activeInactiveDropDownEditor(container, options) {    
    $('<input required name="' + options.field + '" value="' + options.model.ID + '" />')

If that doesn't works, set the value init parameter or anything like that.