MVC different field type in grid column and post grid content to Ienumerable using ClientTemplate

[Gabriele]

Hello everybody,

I need help about ClientTemplate usage cause I really can't solve this problem lookig for solution online.

My goal is:

1) To have the content of a grid saved inside a IEnumerable inside the model, and be able to submit the model (with populated IEnumerable)

2) To have a grid column that can contain different data filed ComboBox(), Numeric or string

 

For achiving goal 1 I'm tring following this exaple: https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/submit-grid-with-form

that use #index(data)# inside the ClientTemplate to save a value to the model ienumerable field,

but that give me an erro, for example using:

(@Html.Kendo().TextBox().Name("ParameterListForCycleTime[#index(data)#].Value")).ToClientTemplate()

function index(dataItem) {
        var data = $("#wizardGrid").data("kendoGrid").dataSource.data();
        return data.indexOf(dataItem);
    }

when I try to access the page it gives me the error: index not defined, and I can't understand why.

As you can see in the code index function is defined in script..

 

2) If I avoid error of point 1 inserting a static 0 index instead of #index(data)# (or I use another Name) once i load the page I see only big textboxs. Clicking near them make them become what I defined in the ClientTemplate (Checkbox,numericBox or normal textbox): https://gyazo.com/7075e354d62758b4a2618f471d463757

(@Html.Kendo().NumericTextBox().Name("ParameterListForCycleTime[0]).Value(0)).ToClientTemplate()

 

Really hope somebody can help me cause I'm losing my mental sanity on this..

Thanks,

   Gabriele

 

Here the full grid code:

@using (Html.BeginForm("Wizardpage1Result", "CycleTime"))
{
    @(Html.Kendo().Grid(Model.ParameterListForCycleTime)
        .Name("wizardGrid")
        .Columns(columns =>
        {
            columns.Bound(p => p.ID).Width(180).EditorTemplateName("ReadOnlyTemplate");
                columns.Bound(p => p.Description).Width(300).EditorTemplateName("ReadOnlyTemplate");
                columns.Bound(p => p.UM).Width(100).EditorTemplateName("ReadOnlyTemplate");
                columns.Bound(p => p.Mandatory).Title("Mandatory").Width(100).ClientTemplate("<input type='checkbox' #= Mandatory ? checked='checked' :'' # />");
                columns.Bound(p => p.Value).Title("Value").ClientTemplate(
                        "# if (Type == 'LIST') { #" +
                        (@Html.Kendo().ComboBox()
                            .Name("ParameterListForCycleTime[#index(data)#].Value")
                            .Placeholder("Select relationship...")
                            .DataTextField("Text")
                            .DataValueField("Value")
                            .BindTo(new List<SelectListItem>() {
            new SelectListItem()
            {
            Text = "Option1",
            Value = "1"
            },
        new SelectListItem()
        {
            Text = "Option2",
            Value = "2"
        },
        new SelectListItem()
        {
            Text = "Option3",
            Value = "3"
        },
        new SelectListItem()
        {
            Text = "Option4",
            Value = "4"
        }
                    }).Value("")).ToClientTemplate()
                + "# } else if (Type == 'NUMERIC') { #" +
                    (@Html.Kendo().NumericTextBox().Name("ParameterListForCycleTime[#index(data)#].Value").Value(0)).ToClientTemplate()
                + "# } else { #" +
                    (@Html.Kendo().TextBox().Name("ParameterListForCycleTime[#index(data)#].Value")).ToClientTemplate()
                + "# } #"
                );
                /*"#= Value #" + "<input type='hidden' name='ParameterListForCycleTime[#= index(data)#].Value' value='#= Value #' />")*/

        })
        .ToolBar(toolbar =>
        {
            toolbar.Save();
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Events(x => x.DataBound("onDataBound"))

        .Navigatable()
        .Sortable()
        .Scrollable()
        .DataSource(dataSource => dataSource
            .Ajax().Group(g => g.Add(c => c.Category))
            .Batch(true)

            .ServerOperation(false)
            .Model(model =>
            {
                model.Id(p => p.ID);
                model.Field(p => p.ID).Editable(false);
                model.Field(p => p.Description).Editable(false);
                model.Field(p => p.UM).Editable(false);
                model.Field(p => p.Mandatory).Editable(false);
                model.Field(p => p.Value);
            })

            .Update("Wizard_Update", "CycleTime")
        )
    )

    <input type="submit" value="SaveModel" />
}


<script type="text/javascript">

    function index(dataItem) {
        var data = $("#wizardGrid").data("kendoGrid").dataSource.data();
        return data.indexOf(dataItem);
    }

    function onDataBound(e) {

        var gridData = this.dataSource.view();
        for (var i = 0; i < gridData.length; i++) {
            var currentUid = gridData[i].uid;
            var currenRow = this.table.find("tr[data-uid='" + currentUid + "']");
            $(currenRow).find(".chkbxCliEditRights").attr("disabled", true);
        }

        $('#wizardGrid script').appendTo(document.body);

        var item = $('#wizardGrid').data().kendoGrid.dataItem($(this.element).closest('tr'));
        item.set('Value', this.value());
    }

</script>

[Tsvetomir]

Hi Gabriele,

In general, the syntax for using the "data" variable, you should make use of the "#=#" syntax. Usage without the equals sign indicates that there will be a JavaScript script:

.Name("ParameterListForCycleTime[#=index(data)#].Value")

As per the second question, there is a switch between the two modes of the grid - read and edit mode. If you would like to not enter edit mode but still use modify the data, set the following option:

columns.Bound(p => p.Value).Editable("returnFalse") // ...

function returnFalse(){
     return false;
}

I hope this helps.

 

Regards,
Tsvetomir
Progress Telerik

[Gabriele]

Hi Tsvetomir,

Thank you very much for the answer!

 

About 1):

Unfortunately I already tried with the #=index(data)#  too. 

But it emerged a new element, even inserting the "returnFalse" as you suggested a "ReferenceError returnFalse not defined" is fired.

I inserted the function returnFalse(){ return false; } method inside the <script type="text/javascript">  </script> tag..

What Am I doing wrong? 

 

2) I tried columns.Bound(p => p.Value).Editable("false") but the problem remain the same. I have textbox until I click near to it.

Using Editable("true") when I click near a wrong textfiled it stop trasforming in my inteded template

 

Thanks

          Gabriele

[Tsvetomir]

Hi Gabriele,

The recommended approach for initializing widgets within the ClientTemplate of the column has been demonstrated in the article below:

https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/faq#how-can-i-use-kendo-ui-widgets-inside-grid-client-column-templates

Attached to my response a sample could be found in which the ComboBox widget is initialized within the template and the cell is not being opened for editing.

 

Regards,
Tsvetomir
Progress Telerik