|
<div>
<ejs-grid id="Grid" dataSource="ViewBag.DataSource" queryCellInfo="colorPicker" allowSorting="true" allowGrouping="true" allowPaging="true" toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Cancel", "Update"})">
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>
<e-grid-columns>
. . .
<e-grid-column field="color" headerText="Color Picker" template="#color" edit="@(new {create="create" , write="write", destroy = "destroy" })" width="120"></e-grid-column>
</e-grid-columns>
</ejs-grid>
</div>
<script id="color" type="text/x-template">
<div><input id="element" type="color" /></div>
</script>
<script>
// for creating ColorPicker in Grid column
function colorPicker(args) {
if (args.column.field == "color") {
var colorPicker = new ej.inputs.ColorPicker({
mode: 'Palette',
disabled :true,
value: args.data[color]
}, args.cell.querySelector("#element"));
}
}
// for rendering the colorPicker in the edit form
var elem;
var colorPicker;
function create() {
elem = document.createElement('input');
elem.id = "element"
return elem; // create colorpicker element
}
function write(args) {
colorPicker = new ej.inputs.ColorPicker({
mode: 'Palette',
value : args.rowData.color
});
colorPicker.appendTo(this.elem);
}
function destroy() {
this.colorPicker.destroy();
}
</script> | 
