This is a migrated thread and some comments may be shown as answers.
MVC different field type in grid column and post grid content to Ienumerable using ClientTemplate
3 Answers 12 Views
This is a migrated thread and some comments may be shown as answers.
Gabriele
Top achievements
Rank 1
Gabriele asked on 05 May 2020, 10:27 PM

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>

3 Answers, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 07 May 2020, 04:22 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Gabriele
Top achievements
Rank 1
answered on 07 May 2020, 05:21 PM

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

0
Tsvetomir
Telerik team
answered on 08 May 2020, 02:12 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Gabriele
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
Gabriele
Top achievements
Rank 1
Share this question
or