jQuery Grid Change Options of Autogenerated Editors

In order to change the options of autogenerated columns’ editors you need to handle the editorCreating event. It is fired just before columns editors to be initialized. The purpose of the event is to pass options to the columns editors. The arguments passed to the event are following:

  • e.field - the name of the columns’s field for which the editor will be created
  • e.options - empty object which receives the editor initialization options

The widget types used for each different column field type are:

  • String - TextBox
  • Number - NumericTextBox
  • Boolean - CheckBox
  • Date - DatePicker

Check the documentation of each control type for the full list of options supported.

NOTE: The initial value of the editor you attempt to pass via the options will be overwritten with the actual one.

$("#grid1").shieldGrid({
    dataSource: {
        data: products,
        schema: {
            fields: {
                id: { path: "ProductID", type: Number},
                name: { path: "ProductName", type: String, nullable: false },
                quantity: { path: "SupplierID", type: Number },
                price: { path: "UnitPrice", type: Number },
                units: { path: "UnitsInStock", type: Number },
                discontinued: { path: "Discontinued", type: Boolean },
                myDate: { path: "d", type: Date }
            }
        }
    },
    events: {
        editorCreating: function(e) {
            if (e.field == "price") {
                e.options = { max: 50 };
            }
        }
    },
    rowHover: false,
    columns: [
        { field: "id" },
        { field: "name", width: "200px" },
        { field: "quantity" },
        { field: "price" },
        { field: "units" },
        { field: "discontinued" },
            { field: "myDate", format: "{0:MM/dd/yyyy}" }
    ],
    editing: {
        enabled: true,
        event: "doubleclick
        type: "cell"
    }
});