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

Hide NumericTextBox on Client-side

9 Answers 777 Views
NumericTextBox
This is a migrated thread and some comments may be shown as answers.
Scott
Top achievements
Rank 2
Scott asked on 18 Jun 2012, 05:09 PM
How do I hide the NumericTextBox on the client side via javascript?

9 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 19 Jun 2012, 10:31 AM
Hi Scott,

Use the jQuery hide method and the NumericTextBox' wrapper element.

<span class="k-widget k-numerictextbox">
  .................
</span>

The wrapper element can be obtained from the component's client object with

textboxClientObject.wrapper


All the best,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Scott
Top achievements
Rank 2
answered on 19 Jun 2012, 12:24 PM
Still struggling with this one... here is my code in the View....

@(Html.Kendo().NumericTextBox()
    .Name("MyTextBox")
    .Spinners(true)
)

But I can't seem to reference it in jquery.... below are things i've tried... where am i going wrong??

$("#MyTextBox").data("kendoNumericTextBox").wrapper.hide();
$("#MyTextBox").kendoNumericTextBox().wrapper.hide(); 
$("#MyTextBox").data("kendoNumericTextBox").hide(); 
$("#MyTextBox").kendoNumericTextBox().hide(); 
$("#MyTextBox").hide(); 

NONE OF THESE WORK.... the last one hides the shell, but the text box still remains....

My work-around has been to stick the NumericTextBox in a div and just hide the div which works fine.... but it'd be nice to be able to hide the NumericTextBox instead....


0
Dimo
Telerik team
answered on 19 Jun 2012, 01:45 PM
Hello Scott,

The first line is the correct one, given that the NumericTextBox client object has been initialized.

$("#id").data("kendoNumericTextBox").wrapper.hide();

Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Scott
Top achievements
Rank 2
answered on 19 Jun 2012, 02:30 PM
Finally, it worked... however I had to stick it in a setTimeout.... if I don't the text box still remains on the page... i guess because it still hasn't been initialized.... I was doing it in the document.ready event from jQuery... is there a better place to do this from to make sure it is initialized other than using a setTimeout to accomplish it...

View Code
@(Html.Kendo().NumericTextBox()
        .Name("MyTextBox")
)

Javascript
$(document).ready(function ()
{
    setTimeout(function ()
    {
        $("#MyTextBox").data("kendoNumericTextBox").wrapper.hide();
    }, 250);
});
0
Dimo
Telerik team
answered on 19 Jun 2012, 02:45 PM
If you include the above Javascript code below the NumericTextBox declaration, it should work without setTimeout.

Greetings,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Scott
Top achievements
Rank 2
answered on 19 Jun 2012, 02:58 PM
ah... perhaps that's the issue then... all our js is in the <head> tags.. is that why we are having to use the setTimeout? Personally I thought that's what document.ready sought to remedy.. the timing of when DOM elements are ready and available....
0
Scott
Top achievements
Rank 2
answered on 19 Jun 2012, 05:49 PM
Here is a sample project that replicates the inability to hide the numeric text box without using a setTimeout.... see attached....
0
Dimo
Telerik team
answered on 20 Jun 2012, 07:26 AM
Hi Scott,

I thought we have cleared this up - you need to execute the textbox hiding script after the NumericTextBox initialization. Currently the script is registered and executed before widget initialization.

Using document.ready in Demo.js is not a remedy in this case, because document.ready handlers are executed in the order they have been registered. In this case you are registering the textbox hiding script before the NumericTextBox initialization statement, which is inside a document.ready statement as well.

Kind regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Scott
Top achievements
Rank 2
answered on 20 Jun 2012, 12:49 PM
I got it now.... any script that tries to do anything with kendo ui controls in document.ready needs to be included at the very bottom of the html.... i took my sample app and put the script include line at the bottom of Index.cshtml and $("#TempTextBox").data("kendoNumericTextBox").wrapper.hide(); worked as expected this time....

Too bad KendoUI controls don't expose an init event or something (or do they??).... would do away with weird timing issues....
Tags
NumericTextBox
Asked by
Scott
Top achievements
Rank 2
Answers by
Dimo
Telerik team
Scott
Top achievements
Rank 2
Share this question
or