How to add New Record without inline edit.?

[Shankar]

Hi all,

i have refered video(Get Started With The Kendo UI DataSource) provided 
by kendo team and i have tried to do the same, but on click of create-click button 
create: {} section of datasource is not called. as per video on click of create 
button create:{} section will be called automatically.
 please find the code example below. 

 $(document).ready(function () {
            // --------------------------------------------------------------------------------
            // DataTable Section
            // --------------------------------------------------------------------------------
            clinetDataSource = new kendo.data.DataSource({
                batch: true,
                editable:true,
                transport: {
                    create: {
                        url: _WebServiceAddress + "Client/Client",
                        contentType: "application/json; charset=utf-8", 
                        type: "POST" 
                    },
                    read: {
                        url: _WebServiceAddress + "Client/ClientTable", 
                        datatype: "odata"
                    },
                    parameterMap: function (data, operation) {
                        if (operation !== "read" && data.models) {
                                       return { models: kendo.stringify(data.models) };
                                   }
                                   else if (operation != "read") {
                                       // web service method parameters need to be send as JSON. The Create, Update and Destroy methods have a "products" parameter.
                                       return JSON.stringify(data)
                                   }
                    }
                },
                schema: {
                    model: clientModel
                },
                pageSize: 10,
                batch: true
            });
            var clientModel = kendo.data.Model.define({
                id: "RecId",
                fields: {
                    RecId: { editable: false, nullable: true },
                    ClientName: { type: "string" },
                    ResponsibleName: { type: "string" },
                    IsActive: { type: "boolean" }
                }
            });
             _Table=   $("#tableClientDetails").kendoGrid({
                    columns: [
                     {field: "RecId", title: "Action", width: 50,
                      template: '<img class="buttonEditTable" id="buttonEditTable_#=RecId#" alt="#= RecId #" src="/Desktop/Global/Images/DataTable/Edit.png"/> '
                     },
                    { field: "ClientName", title: "Name" },
                    { field: "ResponsibleName", title: "Contact Person" },
                    { field: "IActive", title: "Active", width:100,
                        template: '<input class="checkboxActive" id="checkbox_#=RecId#" type="checkbox" #= IsActive ? "checked=checked" : "" # ></input>'
                    }
                ],
                    dataSource: clinetDataSource,
                   groupable: true,
                     filterable: true,
                    sortable: true,
                    pageable: true,
                    scrollable:false,
                    editable: true
                });
              
            });
           
            $("#create-client").click(function () {
                clinetDataSource.add({
                    Address: $("#textareaAddress").val(),
                    ResponsibleEmailAddress: $("#fieldContactPersonEmailId").val(),
                    Telephone: $("#fieldTelephone").val(),
                    City: $("#fieldCity").val(),
                    State: $("#selectState").find(':selected').text(),
                    Country: $("#selectCountry").find(':selected').text()
                });
                clinetDataSource.sync();
               
            });
please advice. how create:{}/update:{} will be called.
Thanks,
Shankar