ColorPicker not behaving

[Steve]

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".

 

[Steve]

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.

[Magdalena]

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