We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

ColorPicker in Grid & Dialog Edit mode

Thread ID:

Created:

Updated:

Platform:

Replies:

129107 Feb 27,2017 11:59 PM Mar 8,2017 12:05 PM ASP.NET MVC 5
loading
Tags: Grid
Henryk
Asked On February 27, 2017 11:59 PM

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
Replied On February 28, 2017 12:42 AM

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
Replied On March 1, 2017 01:45 AM

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

Mani Sankar Durai [Syncfusion]
Replied On March 1, 2017 09:00 AM

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. 


Henryk
Replied On March 7, 2017 12:50 AM

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 [Syncfusion]
Replied On March 8, 2017 12:05 PM

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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;