EditType ColorPicker

[steve mangelschots]

Hi,

I would like to user a colorpicker as edittype in my grid in inline edit is this possible?

And could you provide me with and example how to do this?

my code

@(Html.EJ().Grid<Resource>

("ResourceGrid")

.Datasource(dg => dg.Json((IEnumerable<Resource>)Model).InsertURL("Resource/Insert").RemoveURL("Resource/Delete").UpdateURL("Resource/Update").Adaptor("remoteSaveAdaptor"))

.AllowSorting()

.AllowPaging()

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

.AllowFiltering()

.AllowResizing(true)

.AllowResizeToFit(true)

.EditSettings(edit =>

{

edit

.AllowDeleting()

.AllowEditing()

.AllowAdding()

;

})

.ToolbarSettings(toolbar =>

{

toolbar.ShowToolbar().ToolbarItems(items =>

{

items.AddTool(ToolBarItems.Add);

items.AddTool(ToolBarItems.Delete);

items.AddTool(ToolBarItems.Edit);

items.AddTool(ToolBarItems.Update);

items.AddTool(ToolBarItems.Cancel);

});

})

.FilterSettings(d => d.FilterType(FilterType.Menu))

.Columns(col =>

{

col.Field(ResourcesManager.GetName(m => m.idResource)).IsPrimaryKey(true).Visible(false).Add();

col.Field(ResourcesManager.GetName(m => m.idCustomer)).IsPrimaryKey(true).Visible(false).Add();

col.Field(ResourcesManager.GetName(m => m.Name)).TextAlign(TextAlign.Left).HeaderText(ResourcesManager.GetDisplay(m => m.Name)).Add();

col.Field(ResourcesManager.GetName(m => m.Description)).TextAlign(TextAlign.Left).HeaderText(ResourcesManager.GetDisplay(m => m.Description)).Add();

col.Field(ResourcesManager.GetName(m => m.Color)).TextAlign(TextAlign.Left).EditType(?).HeaderText(ResourcesManager.GetDisplay(m => m.Color)).Add();

col.Field(ResourcesManager.GetName(m => m.Note)).TextAlign(TextAlign.Left).HeaderText(ResourcesManager.GetDisplay(m => m.Note)).Add();

}))

[Ajith R]

Hi Steve,

 

Thanks for using Syncfusion products.

 

Query: EditType ColorPicker

 

We suggest you to use EditTemplate functionality to achieve your requirement. The EditTemplate is used to create a custom editor for the edited column.

Edit Template has three functions.

•Create – It is used to create the control at time of initialize

•Read –  It is used to read the input value at time of save

•Write – It is used to assign the value to control at time of editing

Please refer the below code snippet for further details.

 

 

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

            -----------------

            .Columns(col =>

            {

                -----------

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

               

            })      

    )

 

<script type="text/javascript">  

    function create() {

        return $("<input>"); // Create the 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");

    }

 

</script>

 

 

We are sorry to let you know that “read function args doesn’t get the ColorPicker element” is an issue, But we have provided the workaround solution to resolve this issue. Please refer the below work around for further details.

 

 

    function read(args) {

        var gridId = args.parents(".e-grid").attr("id");           

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

    }      

 

Please refer the below UG Documentation and online demo link to know further details about EditTemplate in Grid.

 

UG Documentation: http://help.syncfusion.com/ug/js/default.htm#!documents/edittemplate.htm

 

Online Demo: http://mvc.syncfusion.com/demos/web/Grid/EditTemplate

 

For your convenience we have created a simple sample and the same can be downloaded from the below link

 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/132113/ColorPickerGridEdit2052804757.zip

 

Please let us know if you have any concerns.

 

Regards,

Ajith R

[steve mangelschots]

Hi Ajith R

the edit works fine only what I would also like is that the background color  of the cell matches the selected color.

What is the best way to do this?

thanks

Steve

[Ajith R]

Hi Steve,

Thanks for your update.

Query: What I would also like is that the background color  of the cell matches the selected color. What is the best way to do this?

We suggest you to use RowDataBound client side event and apply the background-color to the cell based on its data value (args.data.Color). Please refer the below code snippet for further details.

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

        ------

        ------

        .ClientSideEvents(eve=>eve.RowDataBound("onRowDataBound"))      

    )

<script type="text/javascript">     

    function onRowDataBound(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

        colorTd.css("background-color", args.data.Color); // Apply the BG-color to cell

    }   

</script>

For your convenience we have created a simple sample and the same can be downloaded from the below link.

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/117760/ColorPickerGridEdit-1646577265.zip

Please let us know if you have any concerns.

Regards,

Ajith R