Thursday, August 27, 2015

Telerik kendo ui grid - How to pass data from page to api service

<div style="width: 99%; margin-left: 6px; margin-right: 6px;">
                                    <div id="example">
                                        <div id="grid"></div>
                                    </div>
                                </div>





$(document).ready(function () {

            var APIbaseUrl = '<%=this.APIbaseUrl%>';

            var models = {};
            var expenseWorkflowInfo = {
                models: {
                    ExpenseId: 1
                }
            };

            var dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: APIbaseUrl + "/User/Product",
                        dataType: "json",
                        type: "POST",
                        data: expenseWorkflowInfo
                    },
                    update: {
                        url: APIbaseUrl + "/User/Product",
                        dataType: "json",
                        type: "POST",
                        data: expenseWorkflowInfo
                    },
                    destroy: {
                        url: APIbaseUrl + "/User/Product",
                        dataType: "json",
                        type: "POST",
                        data: expenseWorkflowInfo
                    },
                    create: {
                        url: APIbaseUrl + "/User/Product",
                        dataType: "json",
                        type: "POST",
                        data: expenseWorkflowInfo
                    },
                    parameterMap: function (options, operation) {
                        debugger;
                        if (operation !== "read" && options.models[0]) {
                            return options.models[0];
                        }
                        else if (operation == "read" && options.models) {
                            return options.models;
                        }

                    }
                },
                batch: true,
                pageSize: 5,
                schema: {
                    model: {
                        id: "ExpenseId",
                        fields: {
                            ExpenseId: { editable: false, nullable: true },
                            Subject: { validation: { required: true } }//,
                            //BranchId: { type: "number", validation: { required: true } },
                            //LeadId: { type: "number", validation: { required: true } }
                        }
                    }
                }
            });

            $("#grid").kendoGrid({
                dataSource: dataSource,
                pageable: true,
                height: 550,
                toolbar: ["create"],
                columns: [
                    "Subject",
                    //{ field: "BranchId", title: "Branch Id", format: "{0:c}", width: "120px" },
                    //{ field: "LeadId", title: "Lead Id", width: "120px" },
                    { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
                editable: "inline"
            });

        });

No comments:

Post a Comment