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

4 posts, 0 answers
  1. Gabriele
    Gabriele avatar
    2 posts
    Member since:
    May 2020

    Posted 05 May 2020 Link to this post

    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>
  2. Tsvetomir
    Admin
    Tsvetomir avatar
    849 posts

    Posted 07 May 2020 Link to this post

    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.
  3. Gabriele
    Gabriele avatar
    2 posts
    Member since:
    May 2020

    Posted 07 May 2020 in reply to Tsvetomir Link to this post

    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

  4. Tsvetomir
    Admin
    Tsvetomir avatar
    849 posts

    Posted 08 May 2020 Link to this post

    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.
Back to Top