ColorPicker in Grid & Dialog Edit mode

[Henryk]

Hi,

Anyone added a Color Picker to 

1. in a grid column
2. in the edit dialog when using dialog edit mode of the grid

?

Seems simple enough but I can't seem to make it work.

Cheers,

H

[Henryk]

Ok, I've found how to make it happen in a grid https://www.syncfusion.com/forums/117760/edittype-colorpicker.

But would still like to know how to make it happen in the Dialog edit template.

Cheers,

H

[Henryk]

Ok, found how to make it happen in the grids Dialog Edit template.

Example can be found here -> https://help.syncfusion.com/aspnetmvc/grid/editing?cs-save-lang=1&cs-lang=js#dialog-template-form

Basically in the Dialog edit template I have defined the color input field as follows:

<input id="colour" name="colour" value="{{: colour }}" class="e-colorwidget valid" />

And then (as per above mentioned documentation/example) I've added the following line to my grids existing ActionComplete JavaScript function:

$("#colour").ejColorPicker({ buttonMode: "Dropdown" });

If you need to set other properties on the ColorPicker refer to this documentation -> https://help.syncfusion.com/api/js/ejcolorpicker

Cheers,

H

[Mani Sankar Durai]

Hi Henryk, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and based on your requirement we have prepared a sample that can be downloaded from the below link. 

Link: http://www.syncfusion.com/downloads/support/forum/129107/ze/ColorPickerGridEdit-241647003 

In this sample we have rendered the color picker using dialog template in grid. Please refer the below code example. 

<div id="template" style="display: none"> 

    <b>Order Details</b> 

    <table cellspacing="10"> 

        <tr> 

... 

            <td style="text-align: left"> 

                <input type="text" id="CGPA" name="CGPA" value="{{:CGPA}}" /> 

            </td> 

            <td style="text-align: right;"> 

                Color 

            </td> 

            <td style="text-align: left"> 

                <input type="text" id="Color" name="Color" value="{{:Color}}" /> 

            </td> 

        </tr> 

         

    </table> 

</div> 

@(Html.EJ().Grid<ColorPickerGridEdit.OrdersView>("FlatGrid") 

        .Datasource((IEnumerable<object>)ViewBag.datasource) 

                                                

        .AllowPaging() 

        .PageSettings(page => page.PageSize(20)) 

        .EditSettings(edit =>{ 

            edit.AllowDeleting().AllowEditing().AllowAdding().EditMode(EditMode.DialogTemplate).DialogEditorTemplateID("#template"); 

        }) 

        ... 

            .Columns(col => 

            { 

... 

                col.Field("Color").HeaderText("Color").EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).Width(100).Add();                

... 

            }) 

                .ClientSideEvents(eve => eve.ActionComplete("complete").RowDataBound("rowdatabound"))   

    ) 

 

 

 

<script type="text/javascript">    

    function complete(args) { 

        if ((args.requestType == "beginedit" || args.requestType == "add")) { 

            $("#color").ejColorPicker(); 

        } 

    } 

    function create() { 

        return $("<input>"); // Create a input element 

    } 

 

    function write(args) { 

        var gridId = args.element.parents(".e-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(".e-grid").attr("id");             

        return $("#" + gridId + "Color").ejColorPicker("getValue"); // Read the color picker value 

    } 

    function rowdatabound(args) { 

        var colIndex = this.getColumnIndexByField("Color"); // Get the column index for Color 

        ... 

//Apply the color to the div element inside Td 

    } 

</script> 

 

 

Using ActionComplete event in grid we have rendered the colorPicker control for the particular column when editing the grid using dialog template. 

We have also already discussed this topic in our below Knowledge base link. 

Link: https://www.syncfusion.com/kb/7174/how-to-render-syncfusion-colorpicker-control-for-particular-column-while-editing-a-record 

Also refer the documentation link. 

Link: https://help.syncfusion.com/api/js/ejgrid#events:actioncomplete 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai. 

[Henryk]

Thank you, that helped a lot, as I was struggling to get the color value to come through to the controller on the post method.

Cheers,

H

[Farveen Sulthana Thameeztheen Basha]

Hi Henry, 

We have created sample according to your requirement which can be downloaded from the below location. 

http://www.syncfusion.com/downloads/support/forum/129107/EXPORT~1279770635.ZIP 

In this sample, we have used “remoteSaveAdaptor” to handle the serverside operations. By default you can perform CRUD operations in Grid to Server-Side Controller action using the  properties such as InsertURL, RemoveURL, UpdateURL. In the “read” event of the editTemplate, you can get the value of the color that you have selected.  

Please refer to the Help document :- 

https://help.syncfusion.com/aspnetmvc/datamanager/data-adaptors?cs-save-lang=1&cs-lang=razor#remotesave-adaptor 

Please refer to the online demo sample:- 

http://mvc.syncfusion.com/demos/web/grid/celledittype 

Please refer to the code example:- 

clientSide:- 

@(Html.EJ().Grid<object>("FlatGrid") 

        .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource).UpdateURL("CellEditUpdate").InsertURL("CellEditInsert").RemoveURL("CellEditDelete").Adaptor(AdaptorType.RemoteSaveAdaptor)) 

        .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("Color").HeaderText("Color").EditTemplate(edit => { edit.Create("create").Read("read").Write("write"); }).Width(90).Add(); 

            }) 

             .ClientSideEvents(eve => eve.ActionComplete("complete").RowDataBound("rowdatabound"))   

) 

 

<script type="text/javascript"> 

    function create() { 

        return $("<input>"); 

    } 

    function write(args) { 

        var gridId = args.element.parents("#FlatGrid").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("#FlatGrid").attr("id"); 

        return $("#" + gridId + "Color").ejColorPicker("getValue"); // Read the color picker value 

    } 

</script> 

 

In the serverside, while on updating the records you can get the updated, inserted and deleted value. Please refer to the code example for handling the CRUD operations on serverside. In the below screentshot you can get the value of updated color on serverside. 

Serverside:- 

public ActionResult GridFeatures() 

        { 

            var DataSource = OrderRepository.GetAllRecords().ToList(); 

            ViewBag.datasource = DataSource; 

            return View(); 

        } 

        public ActionResult CellEditUpdate(EditableOrder value) 

        { 

 

            OrderRepository.Update(value); 

            var data = OrderRepository.GetAllRecords(); 

            return Json(data, JsonRequestBehavior.AllowGet); 

             

        } 

 

        public ActionResult CellEditInsert(EditableOrder value) 

        { 

            OrderRepository.Add(value); 

            var data = OrderRepository.GetAllRecords(); 

            return Json(value, JsonRequestBehavior.AllowGet); 

        } 

 

        public ActionResult CellEditDelete(int key) 

        { 

            OrderRepository.Delete(key); 

            var data = OrderRepository.GetAllRecords(); 

            return Json(data, JsonRequestBehavior.AllowGet); 

       } 

Please refer to the screenshot:- 

 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T