How I write a dynamic URL in kendo UI DataSource like "update/{id}"

Question

I have a web API. In that I wrote a update method. But it need to id of the table row to update to the row. I use a grid to show data and use a toolbar to edit the row. My question is how I pass that id to the update. Can someone guide me ??

Answer 1

Well i suggest you, explain more your question, but i think this examples could help , if you have a toolbar as a template like this:

  <script type="text/x-kendo-template" id="template">
            <div class="toolbar">
             <button type="button" id="update">Update</button>

            </div>
  </script>

You "grid" need the attr "toolbar"

    $("#grid").kendoGrid({
        dataSource: dataSource,
        pageable: true,
        height: 550,
        filterable:true,
        toolbar: kendo.template($("#template").html()),
        columns: [
            { field:"username", title: "Username" , width: "120px"  },
            { field: "nombre", title:"Nombre", width: "120px" },
            { field: "apellido", title:"Apellido", width: "120px" },
            { field: "ci", title:"Documento de Identidad", width: "120px" },
            { field: "email", title:"Direccion de Correo", width: "120px" },
            { field: "activo",title:"Estatus", width: "120px" },
            { field: "fecha_caducidad",title:"Fin Demo", width: "120px",template: "#= kendo.toString(kendo.parseDate(fecha_caducidad, 'yyyy-MM-dd'), 'MM/dd/yyyy') #" },
            { field: "licencia_status",title:" ", width: "40px",template:'<img src="assets/images/#:data.licencia_status#.png"/>' },
            { command: ["edit"], title: "&nbsp;", width: "120px" }],
        editable: "popup",
        dataBound: function () {
            var rows = this.items();
            $(rows).each(function () {
                var index = $(this).index() + 1;
                var rowLabel = $(this).find(".row-number");
                $(rowLabel).html(index);
            });
        },
        selectable: true
    });

So,you can configure a kendo button and add functionality in the event click:

 $("#update").kendoButton({
        click: function(){

           //Here you will have the selected row

            var self=$('#grid').data('kendoGrid')
            var index = self.items().index(self.select());
            var rowActual= self.dataSource.data()[index];
            rowActual=self.dataItem(self.select()); 


            if(rowActual==undefined || rowActual ==null) {

                alert("No row selected");


            }else{
                  $.ajax({
                            type: "POST",
                            url: "update",
                            data: {
                                id:rowActual.id
                            },

                            dataType: 'json',
                            success: function (data) {          


                            },
                            error: function(){                                  

                            }
                        });
            }

        }
    });

and send in the ajax the row id, but if you are update the row with the inline edition you could try with a datasource like this

        dataSource = new kendo.data.DataSource({
            transport: {
                read: function(options) {
                    $.ajax( {
                        url: "readUsuarios",
                        dataType: "json",
                        success: function(result) {
                            options.success(result);
                        }
                    });

                },
                update: function(options) {

                    $.ajax( {
                        url: "updateUsuarios",
                        dataType: "json",
                        data: {
                            models: kendo.stringify(options.data.models)
                        },
                        success: function(data) {

                               // response server; 

                        },
                        error: function(result) {
                            // notify the data source that the request failed
                            options.error(result);
                        }
                    });
                }
            },
            batch: true,
            pageSize: 20,
            schema: {
                model: {
                    id: "id",
                    fields: {

                        username: { editable: false, nullable: true },
                        nombre: { validation: { required: true } },
                        apellido: { type: "string", validation: { required: true} },
                        ci: { type: "string", validation: { required: true} },
                        email: { type: "string", validation: { required: true } },
                        activo: { type: "boolean",editable: false },
                        fecha_caducidad: { type: "date" },
                        licencia_status:{editable: false} 

                    }
                }
            }
        });

I hope this help!