Binding a columns with ajax

[Misahael]

Hi,

I have a problem when the data is shown in the grid.
I want a data from the controller, so I pass the value from the column via a script with ajax, I retrieve the value from the controller ,all fine, but that value doesn't show in the grid. I appreciate if you can help me. 

Here's my code

Html.Kendo().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.ID_SOLICITUDSERVICIO).Visible(false);
            columns.Command(command => command.Custom("custom").Text("").Click("MostrarSolicitud")).Title("N° de solicitud").Width(75);
            columns.Bound(p => p.NUMEROSOLICITUD_FISICO).Title("N° reporte físico");
            columns.Bound(p => p.NUMERO_SOLICITUDCLIENTE).Title("Ticket Cliente");
            columns.Bound(p => p.MARCA).Title("Marca");
            columns.Bound(p => p.MODELO).Title("Modelo");
            columns.Bound(p => p.CODIGO_REPUESTO).Title("Código del repuesto");
            columns.Bound(p => p.DETALLE_REPUESTO).Title("Detalle");
            columns.Bound(p => p.CANTIDAD).Title("Cantidad");
            columns.Bound(p => p.VALOR_UNITARIO).Title("Valor unit.");
            columns.Bound(p => p.VALOR_TOTAL).Title("Valor total").ClientFooterTemplate("$ #=sum#");
            columns.Bound(p => p.PROPIETARIO).Title("Propietario");
            columns.Bound(p => p.ID_REPUESTOSERVICIO)
                //.ClientTemplate("#= Texto_Factura(data) #")
                .Title("N° factura");
            //columns.Bound(p => p.ID_REPUESTOSERVICIO)
            //    .ClientTemplate("#= CheckDevoler(data) #")
            //    .Title("Devolver").Width(60)
            //.Sortable(false).Groupable(false).Filterable(false);
        })
                .Filterable()
                .Sortable()
                .Pageable(m => m.PageSizes(new int[] { 10, 20, 50, 100, 500 }))
                .Groupable()
                .Events(e => e.DataBound("dataBound"))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("LeerExt_DevolucionRepuesto", "Consultas").Data("getParameter"))
                    .Model(model => { model.Id(p => p.ID_SOLICITUDSERVICIO); })
                    .Aggregates(aggregate =>
                   {
                       aggregate.Add(p => p.VALOR_TOTAL).Sum();
                   })
        )

that's the script. in the alert appear the value that i want

<script type="text/javascript">

  

    function Texto_Factura(item) {

        var texto = "<label></label>";

        var urls = "/Consultas/GetRepuestoServicioSinById";

        var idrepuesto = item.ID_REPUESTOSERVICIO;

        var factura = "";

 

        $.ajax({

            url: urls,

            data: { id_repuestoservicio: idrepuesto },

            type: 'GET',

            success: function (data) {

                if (data.FACTURA_REPUESTOSERVICIO != null) {

 

                    factura = data.FACTURA_REPUESTOSERVICIO;

                    alert("<label>" + kendo.htmlEncode(factura) + "</label>");

                    return texto = "<label>" + kendo.htmlEncode(factura) + "</label>";

                }

            },

            error: function (resp) {

                //alert(JSON.stringify(resp));  open it to alert the error if you want

                alert(resp);

                return texto = "<label>" + resp + "</label>";

            }

        });
return texto;

    }

</script>

Thanks.

[Alexander Popov]

Hello Christian,

This behavior is not supported out of the box, however you can use the following approach as a workaround:

1. Pass the dataItem to the function called in the template
2. Make the async call and return an empty span with a unique ID based on the data.uid
3. Once the response arrives use the ID to populate the span

Here is a screencast showing how this could be done.

Regards,
Alexander Popov
Telerik

[Misahael]

Thanks for the help.

Regards