Override Create/Edit buttons

[Dave]

Hi,

I'm using the grid control in my MVC 4 application to display selected columns of records.

I don't want to edit or create items from the grid, (i.e.the grid's built in popup/inline capabilities)

I want to transition to another page to do my creates and edits.

Can I override the default behavior of the create and edit buttons?

Below is an example of my grid:

$(function () {

 

    // select the employeesGrid empty div and call the

    // kendoGrid function to transform it into a grid

    var grid = $("#employeesGrid").kendoGrid({

        // specify the columns on the grid

        columns: [

                { title: "", template: "<input type='checkbox' />" },

                { field: "FirstName", title: "First Name" },

                { field: "LastName", title: "Last Name" },

                "Title",

                "City",

                { field: "BirthDate", title: "Birthday", template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #' },

                { command: ["edit", "destroy"], title: " " }

        ],

        // the datasource for the grid

        dataSource: new kendo.data.DataSource({

            // the transport tells the datasource what endpoints

            // to use for CRUD actions

            transport: {

                read: "api/employees",

                update: {

                    // get the id off of the model object that

                    // kendo ui automatically passes to the url function

                    url: function (employee) {

                        return "api/employees/" + employee.Id

                    },

                    type: "POST"

                },

                destroy: {

                    // get the id off of the model object that

                    // kendo ui automatically passes to the url function

                    url: function (employee) {

                        return "api/employees/" + employee.Id

                    },

                    type: "DELETE"

                },

                parameterMap: function (options, operation) {

                    // if the current operation is an update

                    if (operation === "update") {

                        // create a new JavaScript date object based on the current

                        // BirthDate parameter value

                        var d = new Date(options.BirthDate);

                        // overwrite the BirthDate value with a formatted value that WebAPI

                        // will be able to convert

                        options.BirthDate = kendo.toString(new Date(d), "MM/dd/yyyy");

                    }

                    // ALWAYS return options

                    return options;

                }

            },

            // the schema defines the schema of the JSON coming

            // back from the server so the datasource can parse it

            schema: {

                // the array of repeating data elements (employees)

                data: "Data",

                // the total count of records in the whole dataset. used

                // for paging.

                total: "Count",

                model: {

                    id: "Id",

                    fields: {

                        // specify all the model fields, along with validation rules and whether or

                        // not they can be edited or nulled out.

                        FirstName: { editable: false },

                        LastName: { editable: true, nullable: false, validation: { required: true } },

                        Address: { editable: true, nullable: false, validation: { required: true } },

                        City: { editable: true, nullable: false, validation: { required: true } },

                        BirthDate: { editable: true, type: "date" }

                    }

                },

                // map the errors if there are any. this automatically raises the "error"

                // event

                errors: "Errors"

            },

            error: function (e) {

                console.log(e.statusText);

            },

            // the number of records to show per page

            pageSize: 3,

            // do paging on the server

            serverPaging: true

        }),

        // paging is enabled in the grid

        pageable: true,

        // editing happens inline, one row at a time.

        editable: "popup",

        groupable: true

    }).data("kendoGrid");

 

});

[Dave]

Does anyone have any thoughts here?  Seems like it should be pretty easy to do, but I can't find anything in the formum/web or documentation.

[Doni]

See this part of the documentation for information your looking for.
http://docs.kendoui.com/api/web/grid#events

[kashyapa]

please take a look at our latest reference app - www.kendouisaleshub.com. the orders grid has a edit button but clicking that will open a new screen. Code is open sourced so you can take a look at how it was done