[Solved] CustomEditor in Kendo Grid

[Divyang]

I want to implement a combo box editor in the kendo drid, for which I've followed this link: Grid / Editing custom editor

The issue is I am having is, in the column (with combo box editor) the grid shows the ID instead of the text field while its not in edit mode. The "../api/Users?uid=1" will return JSon: [ { ID: 1, UserName: "aaa" }, { ID: 2, UserName: "bbb" } etc....

Here is the code:

var gridContainer = $('<div id="grdSelectedWorkers" />');
gridContainer.appendTo($(element));

var dataSource = new kendo.data.DataSource({
    type: "odata",
    transport: {
        read: {
            url: "../api/Workers",
            dataType: "json",
            data: { id: arrWorkerIDs }
        },
        update: {
            url: "../api/Workers",
            dataType: "json",
            type: "PUT",
            contentType: "application/json"
        },
        destroy: {
            url: "../api/Workers",
            dataType: "json",
            type: "DELETE",
            contentType: "application/json"
        },
        create: {
            url: "../api/Workers",
            dataType: "json",
            type: "POST",
            contentType: "application/json"
        },
        parameterMap: function (options, operation) {
            if (operation !== "read" && options.models) {
                return JSON.stringify(options.models) ;
            } else {
                return options;
            }
        }
    },
    schema: {
        model: {
            id: "WokerID",
            fields: {
                WokerID: { editable: false, nullable: true },
                FirstName: { type: "string" },
                LastName: { type: "string" },
                UserID: { type: "number" },
                UserName: { type: "string" }
            }
        },
        data: function (data) {
            return data;
        },
        total: function (data) {
            if (data != undefined) {
                if (data.length > 0) { return data[0].Total; }
                return data.length;
            }
        }
    },
    batch: true,
    pageSize: 10,
    serverPaging: true,
    serverFiltering: true,
    serverSorting: true
});

gridContainer.kendoGrid({
    dataSource: dataSource,
    toolbar: ["create", "save", "cancel"],
    editable: true,
    saveChanges: function(e) {
        if (!confirm("Are you sure you want to save all changes?")) {
            e.preventDefault();
        } else {
            this.dataSource.read();
        }
    },
    pageable: true,
    change: function (e) {
        var selectedRow = this.select();
        contentItem.screen.WorkerID = parseInt(selectedRow[0].cells[0].innerHTML);
    },
    columns: [{
        field: "FirstName",
        title: "First Name"
    }, {
        field: "LastName",
        title: "Last Name"
    }, {
        field: "UserID",
        title: "User",
        filterable: {
            extra: false,
            ui: userFilter
        },
        editor: userDropDownEditor
    }, {
        command: ["destroy"], title: " ", width: 150
    }]
});

function userFilter(element) {
    element.kendoDropDownList({
        dataSource: {
            transport: {
                read: "../api/Users/"
            }
        }
    });
}

function userDropDownEditor(container, options) {
    $('<input id=cmbUsers required data-text-field="UserName" data-value-field="ID" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoComboBox({
            autoBind: false,
            dataSource: {
                transport: {
                    read: "../api/Users?uid=1"
                }
            }
        });
}

[Rosen]

Hello Divyang,

The column is showing the id field value as it is what it is set to be bound to. In order to show the text you could expose the entire User object instead of only the ID in the data to which Grid widget is bound to. This approach is used in the demo you are referring to. 

Another approach will be to have the list of available values in a separate global array variable. Than you could use the column template to iterate those values and based on the ID field to find and display the correct text. For example:

var users = [/*list of the Users*/];

gridContainer.kendoGrid({
    /*..*/
    columns: [{
        field: "FirstName",
        title: "First Name"
    }, {
        field: "LastName",
        title: "Last Name"
    }, {
        field: "UserID",
        title: "User",
         template: function(data) {
          for (var idx = 0; idx < users.length; idx++) {
       if (users[idx].UserID == data.UserID) {
        return users[idx].CategoryName;
      }
          }  return "";
   },
        filterable: {
            extra: false,
            ui: userFilter
        },
        editor: userDropDownEditor
    }, {
        command: ["destroy"], title: " ", width: 150
    }]
});

 

Regards,
Rosen
Telerik

 

 

[Divyang]

Thanks Rosen,

I am going to try the array method, but I've spent a lot of time & tried lot of configurations to get the template correct but I couldn't, mostly I am either getting an error of undefined or the grid shows undefined under the column without any error.

So let's say my json for the grid is: WorkerID, FirstName, LastName, UserID, UserName, based on this and I don't want to define any default value how should I configure the Model (under Schema), the Columns for grid and what should be the template?

The combobox JSon is: ID, UserName.

[Rosen]

Hello Divyang,

Here you can find a test page which demonstrates basic implementation of the suggested template approach.

Regards,
Rosen
Telerik

 

 

[Divyang]

Thanks Rosen,

This is perfect, exactly as per my requirement.

[Divyang]

[quote]Divyang said:

Thanks Rosen,

This is perfect, exactly as per my requirement.

[/quote]

One small change I had to do was to use "categories" variable instead of "categoriesDataSource" as a datasource for the kendoDropDownList.