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

advertisements

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" },
                            }

                        }
                }
        });

  1. 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")

   ;

  1. 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.


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.