This is a migrated thread and some comments may be shown as answers.

Width of ColorPicker

6 Answers 107 Views
ColorPicker
This is a migrated thread and some comments may be shown as answers.
Michel
Top achievements
Rank 1
Michel asked on 29 Sep 2016, 03:30 PM

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

6 Answers, 1 is accepted

Sort by
0
Patrick
Telerik team
answered on 03 Oct 2016, 09:08 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Dan
Top achievements
Rank 1
Iron
Veteran
answered on 20 Jan 2021, 02:14 PM
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?
0
Dan
Top achievements
Rank 1
Iron
Veteran
answered on 20 Jan 2021, 02:44 PM
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
0
Patrick
Telerik team
answered on 20 Jan 2021, 11:05 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Dan
Top achievements
Rank 1
Iron
Veteran
answered on 21 Jan 2021, 05:42 AM

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.

0
Patrick
Telerik team
answered on 21 Jan 2021, 08:01 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
ColorPicker
Asked by
Michel
Top achievements
Rank 1
Answers by
Patrick
Telerik team
Dan
Top achievements
Rank 1
Iron
Veteran
Share this question
or