Determine data type per row for inline editor at runtime

[Darren]

The demo for Editing custom editor at http://demos.kendoui.com/web/grid/editing-custom.html shows us how to bind to a drop down when performing inline editing, and also the Unit Price has the numeric textbox since the field's type is set to "number" within the schema's model configuration of the data source.  

What if the data type for each item within a column changed from row to row?  How could we dynamically get the grid's inline editor to render a numeric textbox if it's "number", or date picker if it's a "Date", and so on?

Put another way, what if we wanted to take the notion of the grid's filtering capabilities and turned it on its side?  Create a grid of filters, each row being the corresponding column header of the grid to apply these filters on?

Here's an example of the desired output:

  <style>

    table,th, td { border: 1px solid silver; padding:0 2px; }

  </style>

  <p>This dynamic table:</p>

  <table>

  <thead>

    <tr><th>Col 1</th><th>Col 2</th></tr>

  </thead>

  <tbody>

   <tr><td>Data</td><td>ABC DEF</td></tr>

   <tr><td>Data</td><td>8/20/2012</td></tr>

  </tbody>

</table>

  <p>Would correspond to this dynamic filter table:</p>

<table>

  <thead>

    <tr><th rowspan="2">Field</th><th colspan="2">Filter 1</th><th rowspan="2">Logical Operator</th><th colspan="2">Filter 2</th></tr>

    <tr><th>Operator</th><th>Value</th><th>Operator</th><th>Value</th></tr>

  </thead>

  <tbody>

    <tr><th>Col 1</th><td>Contains</td><td>abc</td><td>Or</td><td>Contains</td><td>def</td></tr>

    <tr><th>Col 2</th><td>Is After</td><td>8/1/2012</td><td>And</td><td>Is Before</td><td>8/31/2012</td></tr>

  </tbody>

</table>

You may ask, "Why would someone bother managing the built-in filtering outside of the grid control?"  The answer is a requirement to have both server-side filtering (to get the bulk data load) as well as client-side filtering (to "search within" the server-filtered results).  I don't think this can be easily accomplished with one kendoGrid.

Any ideas and/or thoughts would be great!

[April Nguyen]

I have the same question. Is this posible at all ?

[Petur Subev]

Hello,

The Grid does not support different dataItem types for one column. The type for the column is one (which you define like shown here http://docs.kendoui.com/api/framework/datasource ) and it cannot be changed while editing.
However you can change the editor template based on your model or some other condition.
e.g.

function categoryDropDownEditor(container, options) {

                    if (options.model.UnitPrice>20) {
                        $('<input data-text-field="CategoryName" data-value-field="CategoryName" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: false,
                            dataSource: {
                                type: "odata",
                                transport: {
                                    read: "http://demos.kendoui.com/service/Northwind.svc/Categories"
                                }
                            }
                        });
                    }
                    else {
                        $('<input style=\"background:red\" name="' + options.field + '"/>')
                        .appendTo(container)
                    }
                }

Kind Regards,
Petur Subev
the Telerik team