Show when document ready

4 posts, 0 answers
  1. Dina
    Dina avatar
    50 posts
    Member since:
    Feb 2012

    Posted 18 Dec 2016 Link to this post

    When I use kendo ui I have usual practice to set display:none attribute to kendo ui control and later in  $(document).ready(function () I go $("#date").show(); for ex.

    This makes page looks better as user do not see controls before it was enhanced by kendo.

    Now with Kendo Ui Core this trick doest work. For ex I set

     .HtmlAttributes(new { style = "display:none;" })

    and control is invisible but

            $(document).ready(function () {
                alert('');
                $("#date").show();
            });

    doesnt do its magic any longer - control stays invisible.
  2. Rumen
    Admin
    Rumen avatar
    14421 posts

    Posted 19 Dec 2016 Link to this post

    Hello Dima,

    I tested your code in the ASP.NET Core demo project and verified that it works without problems as you can see in the following video: http://screencast.com/t/g1KOSFzXyDx

    During the screencast you'll notice that I have modified it slightly by adding a setTimeout function for the purposes of the demonstration:

    @using Kendo.Mvc.UI
     
    <div>
        <h4>Basic Button</h4>
        <p>
            @(Html.Kendo().Button()
            .Name("primaryTextButton")
            .HtmlAttributes(new {  style = "display:none;" })
            .Content("Primary Button"))
     
     
        </p>
    </div>
    <script>
        $(document).ready(function () {
            setTimeout(function () {
                $("#primaryTextButton").show();
            }, 1000);
        });
    </script>

     

    Best regards,
    Rumen
    Telerik by Progress
    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.
  3. Dina
    Dina avatar
    50 posts
    Member since:
    Feb 2012

    Posted 19 Dec 2016 in reply to Rumen Link to this post

    Yeah OK. Here is my video

    https://www.youtube.com/watch?v=6i40bXCZU9c&feature=youtu.be

     

    also I noticed that "display: none;"  attribute set to span around input object with my Id so .show() is applied to element wrapped by hidden onw

    <span class="k-widget k-datepicker k-header" style="display: none;"><span class="k-picker-wrap k-state-default"><input id="date" name="date" style="width: 100%;" type="text" value="dd.MM.yyyy" data-role="datepicker" class="k-input" role="combobox" aria-expanded="false" aria-owns="date_dateview" aria-disabled="false"><span unselectable="on" class="k-select" aria-label="select" role="button" aria-controls="date_dateview"><span class="k-icon k-i-calendar"></span></span></span></span>

  4. Ianko
    Admin
    Ianko avatar
    1945 posts

    Posted 22 Dec 2016 Link to this post

    Hello Dima,

    The shown behavior is normal and expected. The $("#date") returns you the input field of the DatePicker and not the widget itself. This input is meant to be hidden as it serves as a form field and not as an UI component.

    To actually show the widget you should get the widget reference and call show on the wrapper element. Like so: 

    @(Html.Kendo().DatePicker()
            .Name("date")
            .HtmlAttributes(new { style = "display:none" })
    )
     
     
    <script>
        $(document).ready(function () {
            $("#date").data("kendoDatePicker").wrapper.show();
        })
    </script>

    Regards,
    Ianko
    Telerik by Progress
    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