Override Create/Edit buttons

4 posts, 0 answers
  1. Dave
    Dave avatar
    23 posts
    Member since:
    Jun 2010

    Posted 02 Oct 2012 Link to this post

    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");
     
    });
  2. Dave
    Dave avatar
    23 posts
    Member since:
    Jun 2010

    Posted 02 Oct 2012 Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. Doni
    Doni avatar
    4 posts
    Member since:
    Oct 2012

    Posted 03 Oct 2012 Link to this post

    See this part of the documentation for information your looking for.
    http://docs.kendoui.com/api/web/grid#events
  5. kashyapa
    kashyapa avatar
    7 posts
    Member since:
    Jan 2011

    Posted 10 Sep 2013 Link to this post

    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
Back to Top
Kendo UI is VS 2017 Ready