1. Home
  2. Forum
  3. ASP.NET MVC
  4. ColorPicker in Grid & Dialog Edit mode

ColorPicker in Grid & Dialog Edit mode

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

5 Replies
HE Henryk February 28, 2017 05:42 AM UTC

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

HE Henryk March 1, 2017 06:45 AM UTC

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

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

MS Mani Sankar Durai Syncfusion Team March 1, 2017 02:00 PM UTC

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. 
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. 

Also refer the documentation link. 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


HE Henryk March 7, 2017 05:50 AM UTC

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

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team March 8, 2017 05:05 PM UTC

Hi Henry, 


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




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 :- 



Please refer to the online demo sample:- 



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

Loader.
Up arrow icon