How to render Syncfusion ColorPicker control for particular column while editing a record?
How to render Syncfusion ColorPicker control for particular column while editing a record?
How to show color picker in grid Edit Mode?
This Knowledge Base explains the way, of how to render Syncfusion ColorPicker control for particular column while editing a record.
show the color picker in grid Edit Mode and apply it for the corresponding column.
HTML
<div id="Grid"></div>
JS
<script type="text/javascript">
$(function () {
var data = [{ OrderID: 10248, CustomerID: "ALFKI", EmployeeID: 1, Color: "#278787" },
{ OrderID: 10249, CustomerID: "ANATR", EmployeeID: 2, Color: "#db11a9" },
{ OrderID: 10250, CustomerID: "ANTON", EmployeeID: 3, Color: "#408a12" }];
$("#Grid").ejGrid({
dataSource: data,
allowPaging: true,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
columns: [
{ field: "OrderID", isPrimaryKey: true, headerText: "Order ID", width: 90 },
{ field: "CustomerID", headerText: "CustomerID", width: 90 },
{ field: "EmployeeID", headerText: "Employee ID", width: 90 },
{field: "Color", headerText: "Color",
editTemplate: { create: "create", read: "read", write: "write" },
width: 90
}
],
rowDataBound: "rowdatabound"
});
});
</script>
Razor
@(Html.EJ().Grid<MVCSampleBrowser.Models.EditableOrder>("Grid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowPaging()
.EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })
.ToolbarSettings(toolbar =>
{
toolbar.ShowToolbar().ToolbarItems(items =>
{
items.AddTool(ToolBarItems.Add);
items.AddTool(ToolBarItems.Edit);
items.AddTool(ToolBarItems.Delete);
items.AddTool(ToolBarItems.Update);
items.AddTool(ToolBarItems.Cancel);
});
})
.Columns(col =>
{
col.Field("OrderID").HeaderText("OrderID").IsPrimaryKey(true).Width(90).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add();
col.Field("EmployeeID").HeaderText("EmployeeID").Width(90).Add();
col.Field("Color").HeaderText("Color").EditTemplate(edit => { edit.Create("create").Read("read").Write("write"); }).Width(90).Add();
})
.ClientSideEvents(eve => eve.RowDataBound("rowdatabound"))
)
C#
namespace Sample.Controllers
{
public class GridController : Controller
{
public static List<Orders> order = new List<Orders>();
public ActionResult GridFeatures()
{
order.Add(new Orders(10248, "ALFKI", 1, "#278787"));
order.Add(new Orders(10249, "ANATR", 2, "#db11a9"));
order.Add(new Orders(10250, "ANTON", 3, "#408a12"));
ViewBag.datasource = order;
return View();
}
[Serializable]
public class Orders
{
public Orders(long OrderId, string CustomerId, int EmployeeId, string Color)
{
this.OrderID = OrderId;
this.CustomerID = CustomerId;
this.EmployeeID = EmployeeId;
this.Color = Color;
}
public long OrderID { get; set; }
public string CustomerID { get; set; }
public int EmployeeID { get; set; }
public string Color { get; set; }
}
}
}
ASPX
<ej:Grid ID="Grid" runat="server" AllowPaging="True"> <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings> <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> <Columns> <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" Width="90" /> <ej:Column Field="CustomerID" HeaderText="CustomerID" TextAlign="Left" Width="90" /> <ej:Column Field="EmployeeID" HeaderText="EmployeeID" Width="90" /> <ej:Column Field="Color" HeaderText="Color" Width="90"> <EditTemplate Create="create" Read="read" Write="write"> </EditTemplate> </ej:Column> </Columns> <ClientSideEvents RowDataBound="rowdatabound" /> </ej:Grid>
Edit template for grid column:
Using Eedit Template feature the ejColorPicker control has been defined inside the write and read functions for the corresponding column (Column Name: “Color”)
<script type="text/javascript">
function create() {
return $("<input>");
}
function write(args) {
var gridId = args.element.parents("#Grid").attr("id");
args.element.ejColorPicker({ value: args.rowdata !== undefined ? args.rowdata["Color"] : "", modelType: "picker" }); // Render the color picker
$("#" + gridId + "Color_Presets").css("display", "none");
}
function read(args) {
var gridId = args.parents("#Grid").attr("id");
return $("#" + gridId + "Color").ejColorPicker("getValue"); // Read the color picker value
}
</script>
The rowDataBound event triggers every time when a row data bind with theto the Grid. In this event, color for the cell can able to set after editing the record.
<script type="text/javascript">
function rowdatabound(args) {
var colIndex = this.getColumnIndexByField("Color"); // Get the column index for Color
var colorTd = $(args.row).find("td.e-rowcell:eq(" + colIndex + ")"); // Get the cell from Grid rows
var color = colorTd.text();//get the color value of the cell
colorTd.text("");
colorTd.append("<div style='padding:3px'>" + color + "</div>")//Append a div element inside the color Td element
colorTd.find("div").css("background-color", args.data.Color).css("color", "white"); // Apply the bg-color to the div element inside the Td nad have set the font color as white
}
</script>
Figure 1: Rendered the color for the column at the initial rendering of grid.
Figure 2: sShows ejColorPicker control has rendered when the grid is in edit Mode for the first row.
Figure 3: Sshows the different color for the row 1 to the color column after editing.
