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

ColorPicker not behaving

2 Answers 21 Views
ColorPicker
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 1
Steve asked on 22 Sep 2017, 02:59 PM

I have a FlatColorPicker nested inside of a Kendo PanelBar that is not behaving. It is typically NOT visible when the page renders because it is inside a collapsed panel of the PanelBar. At this point it is acceptable except that the slider on the bottom only fills half of the full width of the picker, but it does work. After my "Save" js function for the page runs, the slider disappears leaving on the round slider handle.

 

@(Html.Kendo().FlatColorPicker()
        .Name("screen_background_color_select")
        .HtmlAttributes(new { style = "width: 245px" })
        .Value(Model.screen_background_color)
        .Events(ev => ev.Change("paletteChange"))
        .Preview(true)
        .Opacity(true)
)

 

I DO have some bootstrap styling inside the Panel but I have gone so far as to remove the FlatColorPicker from the PanelBar and bootstrap to no avail.  Still behaves the same.  I have verified that the Value string for the color is correct.

If I make the simple change to a ColorPicker, it works as it should.  I change nothing from the above code except removing the "Flat".

 

2 Answers, 1 is accepted

Sort by
0
Steve
Top achievements
Rank 1
answered on 22 Sep 2017, 03:12 PM

Nevermind on half of it... As is the case most of the time when you take the time to post a problem it causes you to think about what you say.  I have a reference in some of my JS to kendoColorPicker.  This was causing the "post save" problem.

I still cannot figure out why the slider does not use 100% of the width that it should.

0
Magdalena
Telerik team
answered on 26 Sep 2017, 11:09 AM
Hi Steve,

Thank you for the provided code snippet. We have succeeded to reproduce the issue. As the color picker is initialized when its parent is not visible, we recommend to reinitialize the control after expanding the item.
@(Html.Kendo().PanelBar()
.Name("panelBar1")
.Items(p => p.Add()
    .Text("AAA")
    .Content(@<text>
        @(Html.Kendo().FlatColorPicker()
            .Name("screen_background_color_select")
            .HtmlAttributes(new { style = "width: 245px" })
            .Value("#b72bba")
            .Preview(true)
            .Opacity(true)
        )
    </text>))
    .Events(ev => ev.Expand(@<text>
        function(){
            setTimeout(function () {
                var coloPickerWrapper = $("#screen_background_color_select");
                coloPickerWrapper.empty();
                coloPickerWrapper.kendoFlatColorPicker();
            }, 0)
        }
    </text>))
)



Regards,
Magdalena
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
ColorPicker
Asked by
Steve
Top achievements
Rank 1
Answers by
Steve
Top achievements
Rank 1
Magdalena
Telerik team
Share this question
or