ColorPicker not behaving

3 posts, 0 answers
  1. Steve
    Steve avatar
    10 posts
    Member since:
    Nov 2012

    Posted 22 Sep 2017 Link to this post

    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. Steve
    Steve avatar
    10 posts
    Member since:
    Nov 2012

    Posted 22 Sep 2017 in reply to Steve Link to this post

    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.

  3. Magdalena
    Admin
    Magdalena avatar
    466 posts

    Posted 26 Sep 2017 Link to this post

    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.
Back to Top