How to bind the transport calls with the html buttons?

[Pratap]

Hi,
I have recently started to use Kendo UI technology and currently i am trying to create a grid using the Kendo Grid. For binding the data to the grid, i found two ways:
1. Transport
2. $.ajax( { } );

My requirement is to have a grid that will display the data and that can be auto-refreshed every time i change, create or delete the data in the grid. For this, i have tried the $.ajax( { } ) call as below:

 

var myDataSource = null;

function loadGrid() {
    $("#body").empty();

    $.ajax({
        autoSync: true,
        url: "api/musicController/?Id=3",
        type: 'GET',
        dataType: 'json',
        success: function (data) {
            displayDataInGrid(data);
        },
        error: function (e) {
            alert(e.responseText);
        }
    });
}

function displayDataInGrid(musicData) {
    myDataSource = new kendo.data.DataSource({
        data: musicData,
        pageSize: 5,
        sort: { field: "Id", dir: "desc" },
        width: "50",
        schema: {
            model: {
                id: "MusicId",
                fields: {
                    Id: { validation: { required: false }, editable: false },
                    Title: { validation: { required: false } },
                    Description: { validation: { required: false } },
                    MusicType: { defaultValue: { Id: 1, Value: 1 } }
                }
            }
        }
    });

    myDataSource.read();

    $("#body").kendoGrid({
        dataSource: myDataSource,
        toolbar: [
            { text: "Add Music", className: "clsAddMusic" },
            { text: "Save Changes", className: "clsSaveChanges" },
            { text: "Remove Music", className: "clsRemoveMusic" }
        ],
        columns: [
                    { field: "Id", title: "Music Id" },
                    { field: "Title", title: "Title" },
                    { field: "Description", title: "Description" },
                    { field: "MusicType", title: "Music Type"  }
        ],
        scrollable: true,
        navigatable: true,
        pageable: true,
        groupable: true,
        filterable: true,
        sortable: true,
        selectable: "multiple",
        editable: true
    });

    // Bind function to click event of "Add Music" button.
    $(".clsAddMusic").click(function () {
        addMusic();
    });

    // Bind function to click event of "Save Changes" button.
    $(".clsSaveChanges").click(function () {
        saveMusic();
    });

    // Bind function to click event of "Remove Music" button.
    $(".clsRemove Music").click(function () {
        remove Music();
    });
}

Using the above functions, i am able to create, delete and change the data that gets displayed in the grid immediately as autoSync is set to true.

Now the transport feature:

$.support.cors = true;
 var i = 1;
 $(document).ready(function () {
     var myDataSource = new kendo.data.DataSource({
         autoSync: true,
         pageSize: 5,
         batch: false,
         transport: {
             read: {
                 url: "api/music", // GetAllMusic
                 contentType: "application/json",
                 type: "GET"
             },
             create: {
                 url: "api/music", // AddMusic
                 contentType: "application/json",
                 type: "POST",
             },
             update: {
                 url: "/api/music/3", // UpdateMusic
                 contentType: "application/json",
                 type: "PUT"
             },
             destroy: {
                 url: "/api/music/3", // DeleteMusic
                 contentType: "application/json",
                 type: "DELETE"
             }
         },
         schema: {
             model: {
                 id: "MusicId",
                 fields: {
                     Id: { editable: false, type: "number" },
                     Title: { validation: { required: true }, type: "string" },
                     Description: { validation: { required: true }, type: "string" },
                     MusicType: { validation: { required: true }, type: "string" }
                 }
             }
         },
     });

     $("#grid").kendoGrid({
         height: 300,
         toolbar: [ "create", "save", "cancel" ],
         columns: [
             { field: "Id", title: "Music Id" },
             { field: "Name", title: "Music Name" },
             { field: "Description", title: "Description" },
             { field: "ParameterType", title: "Music Type" },
             { command: "destroy" }
         ],
         pageable: true,
         sortable: true,
         filterable: true,
         editable: true,
         dataSource: dataSource
     });
 });

 // I want to bind the below function to my html button's click event.
 function addMusic() {
      // How and what to add here?
 }

 // I want to bind the below function to my html button's click event.
 function removeMusic() {
      // How and what to add here?
 }

 // I want to bind the below function to my html button's click event.
 function editRow() {
      // How and what to add here?
 }

I am unable to proceed further because i have no idea how to bind only
transport: { create: { } }
to the "Add Music" button and similary for update and destroy.

Also, i would like to know what are the differences between transport and $.ajax({}), what are the pros and cons of each and when to use transport and $.ajax({}).

Thanks in advance,
Pratap

[Alexander Valchev]

Hi Pratap,

Thank you for getting in touch with us.
Basically the dataSource.transport uses $.ajax to communicate with the server. The point to use the build-in transport feature of the DataSource is that it simplifies the development as you will receive many features out-of-the-box.

In order to work easier with the DataSource/Grid I suggest you get familiar with their API. For example in order to insert a new row, you may use the addRow method:

• http://docs.kendoui.com/api/web/grid#methods-addRow
  
  

In order to delete a row you may use the removeRow method:

• http://docs.kendoui.com/api/web/grid#methods-removeRow
  
  

There is also an editRow method, as well as cancel and saveChanges method which will cancel or trigger the synchronization:

• http://docs.kendoui.com/api/web/grid#methods-editRow
• http://docs.kendoui.com/api/web/grid#methods-cancelChanges
• http://docs.kendoui.com/api/web/grid#methods-saveChanges
  
  

Last but not least, please check the DataSource API too:

• http://docs.kendoui.com/api/framework/datasource#methods
  
  

Regards,
Alexander Valchev
Telerik