Articles in this section
Category / Section

How to render Syncfusion ColorPicker control for particular column while editing a record?

1 min read

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>

 

C:\Users\Manisankar.durai\Desktop\cc1.png

 

Figure 1: Rendered the color for the column at the initial rendering of grid.

 

 

 

C:\Users\Manisankar.durai\Desktop\cc-2.png

 

Figure 2: sShows ejColorPicker control has rendered when the grid is in edit Mode for the first row.

 

C:\Users\Manisankar.durai\Desktop\cc-3.png

Figure 3: Sshows the different color for the row 1 to the color column after editing.

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied