Show when document ready

[Dina]

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.

[Rumen]

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

[Dina]

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>

[Ianko]

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