Hide NumericTextBox on Client-side

10 posts, 0 answers
  1. Scott
    Scott avatar
    68 posts
    Member since:
    Nov 2011

    Posted 18 Jun 2012 Link to this post

    How do I hide the NumericTextBox on the client side via javascript?
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 19 Jun 2012 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Scott
    Scott avatar
    68 posts
    Member since:
    Nov 2011

    Posted 19 Jun 2012 Link to this post

    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....


  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 19 Jun 2012 Link to this post

    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!
  6. Scott
    Scott avatar
    68 posts
    Member since:
    Nov 2011

    Posted 19 Jun 2012 Link to this post

    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);
    });
  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 19 Jun 2012 Link to this post

    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!
  8. Scott
    Scott avatar
    68 posts
    Member since:
    Nov 2011

    Posted 19 Jun 2012 Link to this post

    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....
  9. Scott
    Scott avatar
    68 posts
    Member since:
    Nov 2011

    Posted 19 Jun 2012 Link to this post

    Here is a sample project that replicates the inability to hide the numeric text box without using a setTimeout.... see attached....
  10. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 20 Jun 2012 Link to this post

    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!
  11. Scott
    Scott avatar
    68 posts
    Member since:
    Nov 2011

    Posted 20 Jun 2012 Link to this post

    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....
Back to Top
UI for ASP.NET MVC is VS 2017 Ready