Dynamic grid-columns with razor

[Elko]

Hi!

I´m building my grids (and its columns) dynamically using data from a database. This data includes information about the formatting and validation. To configure a grid easily I wrote some razor-extension-methods for the kendoUI-grid but now encounter some problems concerning configuration of kendoUI-grid.

1) To display a checkbox for bool-values I have to defined a clienttemplate like this:

boundColumn.ClientTemplate("<input .... />");

This is always shown independent of edit-mode or display-mode. To make it only visible I added the disabled-attribute. But how can I realize a switch to an editable checkbox for InCell/InLine-editing? 

2) Validation should be also configured by data from the database. E.g. the numeric-input: The grid creates automatically the numericTextBox - but how can I modify attributes like min, max or interval?

For both topics it is important to do these settings on the server-side!

Best Regards!

[Vladimir Iliev]

Hi Elko,

Please check the answers of your questions below:

1) But how can I realize a switch to an editable checkbox for InCell/InLine-editing? - You should set the corresponding property in the model type to "boolean". For example if the Grid is bind to DataTable you can achieve that as demonstrated below:

.DataSource(dataSource => dataSource
    .Ajax()
    .Model(model =>
        {
            foreach (System.Data.DataColumn column in Model.Columns)
            {
                model.Field(column.ColumnName, column.DataType);
            }
        })

2) how can I modify attributes like min, max or interval? - To modify that properties of the editor you can for example use the Edit event of the Grid to set the NumericTextBox "Min", "Max" and "Step" configuration options. Also in order to validate that editors you can create custom validation rules by extending the build-in validator. Please check the example below:

<script type="text/javascript">
    //Edit event of the grid
    function onEdit(e) {
        $("#LastSupply").data("kendoDatePicker").min(new Date("10 10 2012"));
        $("#LastSupply").data("kendoDatePicker").max(new Date("10 11 2012"));
    }

    (function ($, kendo) {
        //Extending the Grid build in validator
        $.extend(true, kendo.ui.validator, {
            rules: {
                // custom rules
                custom: function (input, params) {
                    if (input.is("#LastSupply")) {
                        //If the input is LastSupply
                        var datePicker = $(input).data("kendoDatePicker");
                        var max = datePicker.max();
                        var min = datePicker.min();
                        var currentInputDate = new Date(input.val());

                        if (min > currentInputDate || max < currentInputDate) {
                            return false;
                        }
                    }
                    //check for the rule attribute
                    return true;
                }
            },
            messages: { //custom rules messages
                custom: function (input) {
                    // return the message text
                    return "Date out of range!";
                }
            }
        });
    })(jQuery, kendo);

Regards,
Vladimir Iliev
Telerik