Display ClientTemplate with complex Data

[Rosa Maria]

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

[Tsvetomir]

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