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

Display Grid's Editor DropdownList Default Selection In Cell View

1 Answer 71 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Allan asked on 23 Aug 2012, 08:10 PM

Find below a very simplified example derived from an application I'm currently developing.  In the real application the data source comes from an AJAX RESTFUL service call, but I have no issues with that part of the code.

The editor function on the ApplicationLogLevel works correctly from a pure editing point of view.  When I click on the cell the kendoDropDownList default selection is bound to the cell current value and if I change the current value the cell is updated with the appropriate new value and marked as changed.

What I want to do though, is instead of having the cell's actual numeric value displayed I want the cell to display the default selection from the kendoDropDownList when initially loading the cells contents into the grid.  If the value is changed then the default selection of the kendoDropDown should be re-bound to the newly selected value and then displayed with the new selection shown within the cell.

What would be the best way to accomplish this task?

<div id="grid"></div>
    <script type="text/javascript">
        var simpleAvailableLevels = [{text: "Level -1 = Undefined", value: "-1"},
                                                      {text: "Level  0 = No Logging", value: "0"},
                                                      {text: "Level  1 = Critical", value: "1"},
                                                      {text: "Level  2 = Error", value: "2"},
                                                      {text: "Level  4 = Warning", value: "4"},
                                                      {text: "Level  8 = Informational", value: "8"},
                                                      {text: "Level 16 = Verbose", value: "16"}];

        var simpleDS = [{ "ApplicationLogLevel": -1, "ApplicationName": "", "ConfiguredLogLevel": -1, "CreatedDate": "2012-08-01T10:24:33", "IsActive": false, "IsSecure": false, "MachineName": "Host 1", "ModifiedBy": null },
                                       { "ApplicationLogLevel": 8,  "ApplicationName": "", "ConfiguredLogLevel": -1, "CreatedDate": "2012-08-01T10:24:33", "IsActive": true,  "IsSecure": false, "MachineName": "Host 2", "ModifiedBy": null },
                                       { "ApplicationLogLevel": 8,  "ApplicationName": "", "ConfiguredLogLevel": -1, "CreatedDate": "2012-08-09T15:07:20", "IsActive": true,  "IsSecure": false, "MachineName": "Host 3", "ModifiedBy": null },
                                       { "ApplicationLogLevel": 16, "ApplicationName": "", "ConfiguredLogLevel": -1, "CreatedDate": "2012-08-03T11:04:05", "IsActive": true,  "IsSecure": false, "MachineName": "Host 4", "ModifiedBy": null}];

        $(document).ready(function () {
                dataSource: simpleDS,
                columns: [{
                    width: 150,
                    field: "ApplicationName",
                    title: "Application Name"
                }, {
                    width: 150,
                    field: "MachineName",
                    title: "Host Name"
                }, {
                    width: 100,
                    field: "IsActive",
                    title: "Active"
                }, {
                    width: 125,
                    field: "ApplicationLogLevel",
                    title: "Current Log Level",
                    editor: function (container, options) {
                        $('<input name="' + options.field + '"/>')
                          value: options.field,
                          dataTextField: "text",
                          dataValueField: "value",
                          dataSource: simpleAvailableLevels
                    editable: "inline"
                }, {
                    width: 100,
                    field: "ModifiedBy",
                    title: "Modified By",
                    nullable: true
                sortable: {
                    mode: "multiple",
                    allowUnsort: true
                pageable: {
                    pageSizes: [10, 25, 50]
                editable: { update: true },
                toolbar: [{ name: "save", text: "Save These Record" },
                              { name: "cancel", text: "Cancel"}]

1 Answer, 1 is accepted

Sort by
Top achievements
Rank 1
answered on 24 Aug 2012, 06:09 PM
Found a solution to my own problem.  Here it is.

I defined the following function to return the text portion of a LogLevel object when matched again the numeric LogLevel.

function displayLevelText(value) {
   var text = "";
    $.each(AvailableLevels, function () {
        if (this.value == value) {
            text = this.text;
            return false;
    return text;

I then added the following template statement to the Grid.

template: "${displayLevelText(ApplicationLogLevel)}",

and everything work exactly like I wanted.  Hope this helps someone else to achieve similar functionality in their applications.


Asked by
Top achievements
Rank 1
Answers by
Top achievements
Rank 1
Share this question