This is a migrated thread and some comments may be shown as answers.

How to bind the transport calls with the html buttons?

1 Answer 323 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Pratap
Top achievements
Rank 1
Pratap asked on 30 May 2013, 12:12 PM
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

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 03 Jun 2013, 09:05 AM
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:
In order to delete a row you may use the removeRow method:
There is also an editRow method, as well as cancel and saveChanges method which will cancel or trigger the synchronization:
Last but not least, please check the DataSource API too:

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Pratap
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or