This is a migrated thread and some comments may be shown as answers.

Display ClientTemplate with complex Data

1 Answer 23 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Rosa Maria
Top achievements
Rank 1
Rosa Maria asked on 16 Apr 2021, 08:04 AM

Hi.

I need display content in a ClientTemplate with contain two DropDownList and one input.

columns.Bound(m => m.ComposicioMix).ClientTemplate("#= prueba(ComposicioMix)#").EditorTemplateName("ComposicioMix").Width(300).Title("Composició/Mix");

In EditorTemplateName i've build the next Template ComposicioMix and this model

public class ComposicioMix_VM
    {
        //datos de 2 desplegables y numerico del porcentaje
        public PaisosListItem PaisMix { get; set; }
        public AgenteListItem AgenteMix { get; set; }
        public int Porcentaje { get; set; }
    }
    public class PaisosListItem
    {
        public int OBJECTID { get; set; }
        
        public string Nom { get; set; }
    }
    public class AgenteListItem
    {
        public int OBJECTID { get; set; }

        public string DESCRIPCIO { get; set; }
    }

@model DGMAS.Data.ViewModels.FluxosREN.ComposicioMix_VM
<table>
    <tr>
        <td>
            <label>Pais/Agent</label>
        </td>
        <td>
            @(Html.Kendo().DropDownListFor(m => m.PaisMix.OBJECTID)
                                     .Name("PAIS1")
                                     .DataValueField("OBJECTID")
                                     .DataTextField("Nom")
                                     .BindTo((System.Collections.IEnumerable)ViewData["PAIS"])
            )
        </td>
        <td>
            @(Html.Kendo().DropDownListFor(m => m.AgenteMix.OBJECTID)
                                     .Name("AGENTE1")
                                     .DataValueField("OBJECTID")
                                     .DataTextField("DESCRIPCIO")
                                     .BindTo((System.Collections.IEnumerable)ViewData["AGENTE"])
            )
        </td>
        <td>
            <input id="porcentaje1" type="text" size="2" />
            <span>%</span>
        </td>
    </tr>
    <tr></tr>
</table>

I have a problem with ClientTemplate I can't display it

<script id="responsive-column-template-ComposicioMix" type="text/x-kendo-template">
    <div class="responsiveGridCssAnchor">
        <div class="titleRowMobile">Pais/Agent</div>
        <p class="col-template-val textMobileCell">#= data.PaisMix.Nom #</p>
        <p class="col-template-val textMobileCell">#= data.AgenteMix.DESCRIPCIO #</p>
        <p class="col-template-val textMobileCell">#= data.Porcentaje #</p>
    </div>
</script>

var prueba = kendo.template($("#responsive-column-template-ComposicioMix").html());

I need help to get contain to display in kendo-template

Regards,
Rose

1 Answer, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 21 Apr 2021, 05:39 AM

Hi Rosa,

I have investigated the provided code snippets and I have noticed that the client template receives only the "ComposicioMix", also, it was only evaluating the template rather than binding it to the respective data item. What I can recommend is the following:

1. Set the ClientTemplate to pass the whole data item:

            columns.Bound(x => x.ComposicioMix).ClientTemplate("#= prueba(data)#");

2. Update the "prueba" to be a JavaScript logic so that we can apply logic inside:

<script>
    function prueba(dataItem) {
        var template = kendo.template($("#responsive-column-template-ComposicioMix").html());
        return template(dataItem);
    }
</script>

Give this suggestion a try and let me know how it works out for you.

 

Kind regards,
Tsvetomir
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid
Asked by
Rosa Maria
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
Share this question
or