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

CustomEditor in Kendo Grid

5 Answers 297 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Divyang
Top achievements
Rank 1
Divyang asked on 11 Jun 2015, 11:05 AM

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"
                }
            }
        });
}

5 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 15 Jun 2015, 07:49 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Divyang
Top achievements
Rank 1
answered on 15 Jun 2015, 10:25 AM

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.

0
Accepted
Rosen
Telerik team
answered on 16 Jun 2015, 02:07 PM

Hello Divyang,

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

Regards,
Rosen
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Divyang
Top achievements
Rank 1
answered on 17 Jun 2015, 09:00 AM

Thanks Rosen,

This is perfect, exactly as per my requirement.

0
Divyang
Top achievements
Rank 1
answered on 17 Jun 2015, 09:07 AM
[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.

Tags
Grid
Asked by
Divyang
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Divyang
Top achievements
Rank 1
Share this question
or