Set width on client-side

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

    Posted 18 Jun 2012 Link to this post

    How do you set the width on the client-side via javascript for the NumericTextBox....?
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 19 Jun 2012 Link to this post

    Hi Scott,

    You can set a width style to the NumbericTextBox wrapper element. By default, it has a 12.4em width style applied in kendo.common.css.

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

    $("#MyTextBox").width(50);

    The above line works perfectly for setting the width on a NumericTextBox on the page... however I have a NumericTextBox in a Window that loads after clicking a link.... and when I try and set the width of it, it does nothing... I even tried setTimeout thinking perhaps it just didn't exist in DOM yet... but that did nothing also....

    in popup window.... neither of these worked....

    $("#PopupTextBox").width(50);

    setTimeout(function () { $("#PopupTextBox").width(50); }, 250);


    What could be stopping the width from being set....
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 19 Jun 2012 Link to this post

    Hi Scott,

    As mentioned, you need to set the width style to the wrapper, not the textbox itself.

    If you need further assistance, please submit a support ticket.

    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

    That doesn't make any sense considering the line below works perfectly fine....

    $("#MyTextBox").width(50);

    It just doesn't work in a Kendo UI Window.....

    As for the "wrapper" element, the page you referenced here, makes NO mention of wrapper or clientObject.... I'm assuming you mean the line below:

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

    If so... how do I access the wrapper or clientObject from this.... because the lines below return undefined....

    $("#MyTextBox").data("kendoNumericTextBox").wrapper;
    $("#MyTextBox").data("kendoNumericTextBox").clientObject;
  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 19 Jun 2012 Link to this post

    The NumericTextBox client object is accessed with

    $("#id").data("kendoNumericTextBox")

    This is explained at the bottom of the provided help topic.

    I can't imagine a reason why the following would work...

    $("#MyTextBox").width(50);

    ...unless you are not using the Kendo UI MVC wrappers, but the MVC components.

    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!
  8. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 19 Jun 2012 Link to this post

    P.S. Are you by any chance using the legacy themes for the Kendo UI wrappers for MVC?
  9. Scott
    Scott avatar
    68 posts
    Member since:
    Nov 2011

    Posted 19 Jun 2012 Link to this post

    Originally this project was used with the Telerik Extensions for MVC... but in process of converting over to KendoUI for MVC.... we are NOT using the LegacyThemes but instead are fully embracing KendoUI's version of the MVC controls... we have removed ALL references to Telerik.Web.Mvc and replaced it with KendoUI namespaces and such... including the new themes... we are using BlueOpal.
  10. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 19 Jun 2012 Link to this post

    Hi Scott,

    In order to prevent further message roundtrips and facilitate faster resolution, please provide a runnable demo of you current implementation and I will inspect it locally.

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

    Posted 19 Jun 2012 Link to this post

    I was able to set the width of the numeric text box in the popup, however am still unable to hide it without using a setTimeout.... also this example shows where I can use $("#id).width(50) to set the width and it wasn't suppose to work that way, but did... fyi...

    Sample can be found here...
  12. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 20 Jun 2012 Link to this post

    Hi Scott,

    >> this example shows where I can use $("#id).width(50) to set the width and it wasn't suppose to work that way

    The $("#id).width(50) script works, because you are setting the width to the textbox element before the widget's initialization. The widget picks up the custom width and applies it to the wrapper element. This is a viable approach if you want to use it that way. However, if you will be setting a width after widget initialization, you should set it to the wrapper.

    $("#TempTextBox").wrapper.width(50);

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

    Posted 20 Jun 2012 Link to this post

    Is there a way to check and see if the widget is initialized or not... because document.ready isn't it.....

    $(#id").data("kendoNumericTextBox") = undefined

    Is this what I would check to see if it is initialized or not? When it returns a value, it has been initialized? Or is there a better way?
  14. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 20 Jun 2012 Link to this post

    Hi Scott,

    Yes, this is the way to check for an initialized widget.

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