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

Determine data type per row for inline editor at runtime

2 Answers 118 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Darren
Top achievements
Rank 1
Darren asked on 20 Aug 2012, 05:49 PM
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!

2 Answers, 1 is accepted

Sort by
0
April Nguyen
Top achievements
Rank 1
answered on 27 Aug 2012, 09:58 AM
I have the same question. Is this posible at all ?
0
Petur Subev
Telerik team
answered on 30 Aug 2012, 09:10 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Darren
Top achievements
Rank 1
Answers by
April Nguyen
Top achievements
Rank 1
Petur Subev
Telerik team
Share this question
or