Dynamic grid with dynamic validations

[Dan]

We've been trying to figure out how to make the kendo grid dynamic, based on the models data. Then get validation settings from within the model onto the grid for the appropriate columns.

We got the dynamic grid working but cannot figure out how to setup the validations specified by the model. Has anyone done this, or have any ideas on how to do this? 

Here's the partial razor view for this grid.

@(Html.Kendo().Grid<CrossReferenceMapDataViewModel>()

           .Name("MappingGrid")

           .Columns(columns =>

                        {

                            columns.ForeignKey(row => row.DataSource, new SelectList(new[]{

                                                                                            new {text="CPDP",value = "1"},

                                                                                            new {text="GXS",value = "2"},

                                                                                            new {text="Terminal",value = "3"},

                                                                                        }, "value", "text")).Title("Data Source");

 

                            if (@ViewBag.crossReferenceMapColumnsList != null)

                            {

                                foreach (CrossReferenceMapColumnViewModel availableColumn in @ViewBag.crossReferenceMapColumnsList)

                                {

                                    switch (availableColumn.XrefDataColumnName)

                                    {

                                        case "DATA01":

                                            columns.Bound(row => row.Data01).Title(availableColumn.ColumnName + " (" + (availableColumn.Direction.ToString() == "Input" ? "from" : "to") + ")");

                                            break;

                                        case "DATA02":

                                            columns.Bound(row => row.Data02).Title(availableColumn.ColumnName + " (" + (availableColumn.Direction.ToString() == "Input" ? "from" : "to") + ")");

                                            break;

                                        case "DATA03":

                                            columns.Bound(row => row.Data03).Title(availableColumn.ColumnName + " (" + (availableColumn.Direction.ToString() == "Input" ? "from" : "to") + ")");

                                            break;

                                        case "DATA04":

                                            columns.Bound(row => row.Data04).Title(availableColumn.ColumnName + " (" + (availableColumn.Direction.ToString() == "Input" ? "from" : "to") + ")");

                                            break;

                                        case "DATA05":

                                            columns.Bound(row => row.Data05).Title(availableColumn.ColumnName + " (" + (availableColumn.Direction.ToString() == "Input" ? "from" : "to") + ")");

                                            break;

                                    }

                                }

                            }

                            columns.Command(row =>

                                                    {

                                                        if (SecurityHelper.UserCanEdit(UserFeature.CrossReferenceDataMapping, Context))

                                                        {

                                                            row.Edit().HtmlAttributes(new {@name = "btnGridRowEdit"});

                                                        }

                                                        else

                                                        {

                                                            row.Custom("hdnE").HtmlAttributes(new { style = "display:none" });

                                                        }

                                                        if (SecurityHelper.UserCanDelete(UserFeature.CrossReferenceDataMapping, Context))

                                                        {

                                                            row.Destroy().HtmlAttributes(new {@name = "btnGridRowDelete"});

                                                        }

                                                        else

                                                        {

                                                            row.Custom("hdnD").HtmlAttributes(new { style = "display:none" });

                                                        }

                                                    }).Title("Actions");

                        })

           .Pageable()

           .Sortable()

           .Scrollable()

           .AutoBind(false)

           .Filterable()

           .Editable(editable => editable.Mode(GridEditMode.InLine))

           .ToolBar(toolBar =>

                        {

                            if (SecurityHelper.UserCanAdd(UserFeature.CrossReferenceDataMapping, Context))

                            {

                            toolBar.Create()

                                .HtmlAttributes(new { @id = "btnCreateMapping" });

                            }

 

                            toolBar.Custom()

                                .Text("Export To Excel")

                                .HtmlAttributes(new { @id = "btnExport" })

                                .Url(UrlMaker.ToCrossReferenceDataMappingExport());

                        })

           .DataSource(dataSource =>

                       dataSource

                           .Ajax()

                           .Events(e => e.Error("onError"))

                           .Read(reader => reader.Action("Read", "CrossReferenceDataMapping").Data("additionalData"))

                           .Create(reader => reader.Action("Create", "CrossReferenceDataMapping").Data("additionalData"))

                           .Update(reader => reader.Action("Update", "CrossReferenceDataMapping"))

                           .Destroy(reader => reader.Action("Destroy", "CrossReferenceDataMapping"))

 

                           .Model(model => model.Id(row => row.MapDataId))

           )

      )

It's not the most elegant way, but it does the job for now, until we can find a better way. 

So, I'm looking for anyone who has a better on how to create the grid and apply the validation. The model will have a regex expression or a max length to validate against. 

[Dan]

I got the maxlength attribute set, but now I need to be able to specify a regex expression...

Here's how I got the maxLength set.

$(document).ready(LoadGridData);

 

function LoadGridData() {

    var $exportLink = $('#btnExport');

    var href = updateQueryStringParameter($exportLink.attr('href'), "mapId", $("#mapsList").val());

    $exportLink.attr('href', href);

 

    var grid = $("#MappingGrid").data("kendoGrid");

    grid.dataSource.read();

    grid.bind("edit", function (e) {

        if (!e.model.isNew()) {

            var index = 1;

            @foreach (CrossReferenceMapColumnViewModel availableColumn in @ViewBag.crossReferenceMapColumnsList)

            {

                @:var column = grid.columns[index];

                @:$('#'+ column.field).attr('maxlength', '@availableColumn.ColumnLength');

                @:index++;

            }

        }

    });

}

[Dan]

I got the regex validation working. Here's how I did it.

<script type="text/javascript">

 

    $(document).ready(LoadGridData);

 

    function LoadGridData() {

        var $exportLink = $('#btnExport');

        var href = updateQueryStringParameter($exportLink.attr('href'), "mapId", $("#mapsList").val());

        $exportLink.attr('href', href);

 

        var grid = $("#MappingGrid").data("kendoGrid");

        grid.dataSource.read();

        grid.bind("edit", function (e) {

            if (!e.model.isNew()) {

                var index = 1;

                @foreach (CrossReferenceMapColumnViewModel availableColumn in @ViewBag.crossReferenceMapColumnsList)

                {

                    @:var column = grid.columns[index];

                    @:$('#'+ column.field).attr('maxlength', '@availableColumn.ColumnLength');

 

                    //This is set so the regex error mesage says the correct column name.

                    @:$('#'+ column.field).attr('name', '@availableColumn.ColumnName');

                    @:$('#'+ column.field).attr('pattern', '@availableColumn.Regex');

                    @:index++;

                }

            }

        });

    }

</script>

There will be a check to see if the regex value needs to be set. I just wanted to show how I set it. 

Does anyone have a better way to handle dynamic grids with validations?