Width of ColorPicker

[Michel]

Is there a way to change the width of the control. I've try htmlattribute with a class that include the width nothing is changing.

Any clue ?

Best regards

[Patrick | Technical Support Engineer, Senior]

Hello Michel,

The best way to change the width of the Kendo ColorPicker is using CSS.  Please take a look at this Kendo UI Dojo by Progress which illustrates one approach.  Here is the styling:

<style>
     .k-colorpicker{
       width: 300px;
     }

     .k-colorpicker .k-selected-color{
       width: 268px;
     }

     div.k-flatcolorpicker{
       width: 500px;
     }

     .k-colorpalette .k-palette{
       width: 600px;
     }
   </style>

Hope this helps!

Regards,
Patrick
Telerik by Progress

[Dan]

I need to have the color picker in a grid but I need the width of the control to be the full width of the cell. Can this be achieved?

[Dan]

After digging some more I found out that if I use width 100% it works. Now I need for the height to be the full height of the parent

[Patrick | Technical Support Engineer, Senior]

Hello Dan,

The following response is based on a Kendo UI ColorPicker inside a Kendo UI Grid's client column template:

        @(Html.Kendo().Grid <GridWithColorPicker.Models.OrderViewModel>()
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.OrderID).Filterable(false);
                    columns.Bound(p => p.Freight);
                    columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
                    columns.Bound(p => p.ShipName);
                    columns.Bound(p => p.ShipCity);
                    columns.Bound(p => p.Color).HtmlAttributes(new { @class = "templateCell" }).ClientTemplate(
                        Html.Kendo().ColorPicker()
                            .Name("colorPicker_#=OrderID#")
                            .Value("#=Color#")
                            .ToClientTemplate().Value)
                        .Width(500);
                })
                .Pageable()
                .Sortable()
                .Scrollable()
                .Filterable()
                .HtmlAttributes(new { style = "height:550px;" })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .Read(read => read.Action("Orders_Read", "Grid"))
                )
                .Events(e => e.DataBound("onDataBound"))
        )

Setting the width of the Kendo UI ColorPicker can be set using CSS like the following approach.  Feel free to adjust the .k-selected-color to your preference:

    .k-colorpicker .k-selected-color {
        width: 95%;
    }

    .k-colorpicker {
        width: 100%;
    }

Pertaining to the height, this can be set using jQuery during the Grid's dataBound event:

    function onDataBound(e) {

        //initializes ColorPickers
        $(".templateCell").each(function () {
            eval($(this).children("script").last().html());
        });

        // get the index of the Color cell
        var columnIndex = this.wrapper.find(".k-grid-header [data-field=" + "Color" + "]").index();

        //iterate through all rows
        var rows = e.sender.tbody.children();

        for (var j = 0; j < rows.length; j++) {

            //get row
            var row = $(rows[j]);

            //get cell containing colorPicker
            var parentCell = row.children().eq(columnIndex);

            //find colorPicker and selected color section
            var colorPickerWrapper = $(parentCell).find(".k-picker-wrap");
            var selectedColor = $(colorPickerWrapper).find(".k-selected-color");

            //sets height using jquery's css method
            $(colorPickerWrapper[0]).css("height", row.height()); 
            $(selectedColor[0]).css("height", row.height()); 
        }
    }

Here is a screenshot from implementing the above:

I hope this information helps with setting the height and width of the Kendo UI ColorPicker.  Please let me know if you have any questions.

Regards,
Patrick
Progress Telerik

[Dan]

Hi Patrick,

Thank you for the quick reply. But it seems that I forgot an important thing. I am using the color picker only for editing. The grid has inline editing. So the way that I was looking was to find a css solution, but maybe I need to look at a javascript solution for this. Thank you for the hint.

[Patrick | Technical Support Engineer, Senior]

Hi Dan,

In the case where the column is using a Kendo UI ColorPicker as a EditorTemplate, the width can still be applied like the previous reply:

    .k-colorpicker .k-selected-color {
        width: 95%;
    }

    .k-colorpicker {
        width: 100%;
    }

The height can be set during the Kendo UI Grid's Edit event:

Grid

@(Html.Kendo().Grid<GridExample.Models.Color>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ID);
        columns.Bound(p => p.ColorName).Width(500);
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
    })
    .Events(e => e.Edit("onEdit"))
    //...
)

ColorPickerEditor.cshtml(set with UIHint() for ColorName)

@model string

@(Html.Kendo().ColorPickerFor(m => m))

JavaScript

    function onEdit(e) {

        //Get the row
        var row = e.container[0];

        //find colorPicker and selected color section
        var colorPickerWrapper = $(row).find(".k-picker-wrap");    
        var selectedColor = $(colorPickerWrapper).find(".k-selected-color");
        
        //set the height using jquery's css method
        $(colorPickerWrapper[0]).css("height", $(row).height());
        $(selectedColor[0]).css("height", $(row).height()); 
    }

With the implementation above,  here is a screenshot:

Please let me know if you have any questions regarding the height and width of the Kendo UI ColorPicker.

Regards,
Patrick
Progress Telerik