editor

editor – Gets a string contains html with inputs or a function which adds custom editor for the column. The arguments passed to the function are following:

  • cell – thml cell to which the editor will be instantiated
  • item – data item on the current position in the datasource

In order to update the value of a field with the custom editor you need to handle the getCustomEditorValue event and to pass value to its e.value argument. 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 }
        }
    }
},
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", 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();
}