jQuery Grid Custom Editors

When the grid cell is put in edit mode the grid generates editor based on the colum type. However in some cases you may need a different editor to be generated for a column. In this case you can use custom editor. Each column has editor property to which you can pass function and into it to instantiate different editors. Then in order to get appropriate value from this custom editor the grid will fire getCustomEditorValue event. It is fired when the grid needs the custom editor value in order to update a field. The value of the editor needs to be assigned to the e.value argument of the event. For example:

$("#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 }
        }
    }
},
rowHover: false,
columns: [
    { field: "id" },
    { field: "name", width: "200px" },
    { field: "quantity" },
    { field: "price", editor: myCustomEditor },
    { field: "units" },
    { field: "discontinued" },
        { field: "myDate", format: "{0:MM/dd/yyyy}" }
],
events: {
        getCustomEditorValue: function (e) {
            e.value = $("#test").swidget().value();
            $("#test").swidget().destroy();
        }
},
editing: {
    enabled: true,
    event: "doubleclick
    type: "cell"
}
});
function myCustomEditor(cell, item) {
    $('<div id="test"/>')
        .appendTo(cell)
        .shieldDropDown({
            dataSource: {
                data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
            },
            value: !item["price"] ? null : item["price"].toString()
        }).swidget().focus();
}