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

Show when document ready

3 Answers 219 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Dina
Top achievements
Rank 1
Dina asked on 19 Dec 2016, 01:12 AM

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.

3 Answers, 1 is accepted

Sort by
-1
Rumen
Telerik team
answered on 19 Dec 2016, 11:54 AM

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.
0
Dina
Top achievements
Rank 1
answered on 19 Dec 2016, 05:27 PM

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>

0
Ianko
Telerik team
answered on 22 Dec 2016, 01:24 PM

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.
Tags
General Discussions
Asked by
Dina
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Dina
Top achievements
Rank 1
Ianko
Telerik team
Share this question
or