how to use custom command buttons in kendo grid with ajax call using javascript

Question

i have the problem to use the custom command buttons in kendo grid with ajax call using javascript call web api post action with dynamic parameters behind buttons click(start,Stop,Restart)

1. datasource

dataSource = new kendo.data.DataSource({
            transport: {
                read:
                    {
                        url: crudServiceBaseUrl + "WindowsService",
                        dataType: "json",
                    },
                destroy:
                    {
                        url: crudServiceBaseUrl + "WindowsService/Delete/?deletedby=" + clientid,
                        type: "DELETE"
                    },
                create:
                    {
                        url: crudServiceBaseUrl + "WindowsService/Post",
                        type: "POST"
                        //complete: function (e) {
                        //    $("#grid").data("kendoGrid").dataSource.read();
                        //}
                    },
                update:
                    {
                        url: crudServiceBaseUrl + "WindowsService/Put/",
                        type: "PUT",
                        parameterMap: function (options, operation) {
                            if (operation !== "read" && options.models) {
                                return {
                                    models: kendo.stringify(options.models)
                                };
                            }
                        }
                    },
            },
            schema:
                {
                    model:
                        {
                            id: "WindowsServiceId",
                            fields: {
                                WindowsServiceId: { editable: true, nullable: false, type: "int" },
                                ServiceName: { editable: true, nullable: true, type: "string" },
                                ServiceStatus: { editable: true, nullable: false, type: "string" },
                            }

                        }
                }
        });

2. kendo grid

$("#grid").kendoGrid({
        dataSource: dataSource,
        editable: "popup",
        toolbar: ["create"],
        columns: [
        {
            field:"ServiceName",
            title: "Service",
            width: '200px',
        },
        {
            field: "ServiceStatus",
            title: "Status",
            width: '140px',
        },
        {
            field: "CreatedDate",
            title: "Date",
            width: '140px',
        },
        {
            command: [
                     {
                      name: "start",
                      text: "Start",
                      click: function (e) {
                          $.ajax({
                              method: "POST",
                              url: crudServiceBaseUrl + "WindowsService/Start?windowsserviceid=3c661827-01cf-e511-bcd8-3859f9fd735e"+"&clientid="+clientid
                          }).done(function (msg) {
                              alert("Service Started successfully");
                          }).fail(function () {
                              alert("service failed");
                          });
                      }
                     },
                     {
                         name: "stop",
                         text: "Stop",
                         click: function (e) {
                             $.ajax({
                                 method: "POST",
                                 url: crudServiceBaseUrl + "WindowsService/Stop?windowsserviceid=3c661827-01cf-e511-bcd8-3859f9fd735e"+"&clientid="+clientid
                             }).done(function (msg) {
                                 alert("Service Stop successfully");
                             }).fail(function () {
                                 alert("service failed");
                             });
                         }
                     },
                     {
                         name: "restart",
                         text: "Restart",
                         click: function (e) {
                             $.ajax({
                                 method: "POST",
                                 url: crudServiceBaseUrl + "WindowsService/ReStart?windowsserviceid=3c661827-01cf-e511-bcd8-3859f9fd735e"+"&clientid="+clientid
                             }).done(function (msg) {
                                 alert("Service ReStarted successfully");
                             }).fail(function () {
                                 alert("service failed");
                             });
                         }
                     },
                     {
                         name: "history",
                         text: "History",
                         click: function (e) {
                             alert("History");
                         }
                     }
            ]

        }
        ],

        //height: "500px",
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
    }).data("kendoGrid")

   ;

3. html

<div id="grid"> </div>

i have the problem to pass the dynamic windowsserviceid which is unique id, now i just use the static id. its working with static value. please help/guide me how to use the dynamic windowsserviceid in ajax function call. i appreciate your valuable time and effort. thanks in advance.

Answer 1

This should work for you:

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { hidden: true, field: "id" },
    { field: "name" }
  ],
  dataSource: [ { id: 1, name: "Jane Doe" }, { id: 2, name: "John Doe" } ]
});
</script>

You can read more about it here:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.headerAttributes

Then all you have to do is access the hidden field value in your function.

On another note, you should remove your functions from the grid definition and have them as separate functions that you call from within the grid def.

Answer 2

Finally I found the solution by accessing the Unique Id of row and then using that Id in my Button Clicks functions and it all worked for me perfect.

var tr = $(e.target).closest("tr");    //accessing a row in grid
var item = this.dataItem(tr);     //accessing row items in the grid
var winServiceId = item.WindowsServiceId;    //my Unique Id in a row

and finally used this winServiceId in my Button click functions.