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.