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

EditType ColorPicker

Thread ID:

Created:

Updated:

Platform:

Replies:

117760 Dec 8,2014 06:56 PM Mar 3,2015 07:14 AM ASP.NET MVC 3
loading
Tags: Grid
steve mangelschots
Asked On December 8, 2014 06:56 PM

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 [Syncfusion]
Replied On December 9, 2014 07:43 AM

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
Replied On March 2, 2015 06:37 PM

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 [Syncfusion]
Replied On March 3, 2015 07:14 AM

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



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.

Warning Icon 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.Close Icon

;