Dynamically change editor of grid

[Saad]

Hello,

I have two columns
1. column name (which has datatype property)
2. value field (it contains the value of column)

i want to change value field editor when column name changes (from dropdown).
suppose user select data column then value field editor should changed to datepicker.

find attachment to better understand the scenario.

regards,
Saad

[Joseph]

 

I had a very similar scenario where I had to essentially "bind the data" from a drop down list selection from another column to a different column

I was able to achieve this by the following:

-Create a custom drop down list editor that is able to contain complex objects as your list items
-Bind to the change/select events of the drop down list to get data from the selected complex object
-Traverse the drop down list's container/wrapper to find the current data row
-Get the kendo model associated with the found data row via .dataItem() function
-Set any values on your kendo model via .set() using the values from the selected complex object
-Voila! I successfully bounded data from a drop down list to other columns in my grid

In your scenario, you can create a custom editor for your "Value" column. This "editor" would read a value on your kendo model that is set when the "Line Field Name" column is changed. Based on the value that was set by the selection, you can choose which editor to return for the "Value" column.

If you do not know, when configuring your columns for a kendo grid, you can tell the column to use your own custom editor.
See here for an example.

[Saad]

hello joseph,
thanx for your reply, but it will not work in my case.
I am using inline editing mode in which entire row enters in edit mode when i click edit button.
the editor got initialize when i enter edit mode. but i wanna change the editor after it is initialized (when i select column).

here is my code. it works fine when i exit then re enter into edit mode.

GridColumns = [
      {
          field: "LineFieldName", title: "Line Field Name", editor: columnNameDropDownEditor,
          template: function (e) {
              if (e.LineFieldName) {
                  return e.LineFieldName.DisplayName;
              }
              else {
                  return "";
              }
          }
      },
      { field: "Operator", title: "Operator", editor: operatorDropDownEditor },
      { field: "Value", title: "Value"},//, editor: gridValueColumnEditor },
      { field: "Method", title: "Application Method", editor: methodsDropDownEditor },
      {
          command: ["edit", "destroy"]
}}];


function gridValueColumnEditor(container, options) {
        switch (options.model.LineFieldName.DataType) {
            case 'string':
                createStringEditor(container, options);
                break;

            case 'int':
                createIntegerEditor(container, options);
                break;

            case 'decimal':
                createDoubleEditor(container, options);
                break;

            case 'bool':
                createBooleanEditor(container, options);
                break;

            case 'date':
                createDateTimeEditor(container, options);
                break;

            default:
                break;
        }
    }

[Saad]

hello joseph,
thanx for reply. but it will not work in my case coz i am using inline edit mode in which entire row enters editing mode when i click edit button.
the editor property returns editor when it enters into edit mode. i wanna change the editor after it got initilized (when i select column from dropdown).

here is my code. working fine when i exit and re-enter into edit mode.


$scope.GridColumns = [
{
     field: "LineFieldName", title: "Line Field Name", editor: columnNameDropDownEditor,
     template: function (e) {
         if (e.LineFieldName) {
             return e.LineFieldName.DisplayName;
         }
         else {
             return "";
         }
     }
},
{ field: "Operator", title: "Operator", editor: operatorDropDownEditor },
{ field: "Value", title: "Value"},//, editor: gridValueColumnEditor },
{ field: "Method", title: "Application Method", editor: methodsDropDownEditor },
{
     command: ["edit", "destroy"]
}];


function gridValueColumnEditor(container, options) {
    switch (options.model.LineFieldName.DataType) {
       case 'string':
            createStringEditor(container, options);
            break;

       case 'int':
            createIntegerEditor(container, options);
            break;

       case 'decimal':
            createDoubleEditor(container, options);
            break;

       case 'bool':
            createBooleanEditor(container, options);
            break;

       case 'date':
            createDateTimeEditor(container, options);
            break;

       default:
            break;
    }
}

[Alexander Valchev]

Hi Saad,

The scenario that you would like to achieve is not supported out of the box. On UI side you may be able to configure the editor, but on dataSource level there is no way to dynamically define/change the data type of the field. This is likely to create issues when user filters/sorts/groups or edits the data.

Regards,
Alexander Valchev
Telerik