javascriptkendo-uisetwidthkendonumerictextbox

Set property of a span in javascript


I would like to set the width of a span, I succeded in getting the right element. I already tried :

$(".k-widget .k-numerictextbox")[0].style.width=60;
//the next one gives VM37616:1 Uncaught TypeError: $(...)
//[0].style.setAttribute is not a function
$(".k-widget .k-numerictextbox")[0].setAttribute('width', '60');
$(".k-widget .k-numerictextbox")[0].style.setAttribute('width', '60');

In the console :

$(".k-widget .k-numerictextbox")[0].style.width

Shows me this but I would like to set it to 60px:

""

In fact I am iterating and my last iteration set a numeric textbox which seems to reset my width :

 $.each(grid.wrapper.find("[class=k-filter-row]"), function (index, elt) {
    $.each(grid.wrapper.find("[data-field=Id]"), function (index, elt) {
        $(".k-widget .k-numerictextbox")[0].style.width = "60px";//works
        $.each(grid.wrapper.find("[data-role=numerictextbox]"), function (index, elt) {
            console.log($(this));
          //will undo my changes
            $(this).kendoNumericTextBox({
                culture: "fr-FR",
                format: "#",
                decimals: 0,
                min: 0,
                width:60,
                step: 1

            });
        });
     });
}); 

Any help ?


Solution

  • Very simple solution : I set my width AFTER.

    $.each(grid.wrapper.find("[class=k-filter-row]"), function (index, elt) {
        $.each(grid.wrapper.find("[data-field=Id]"), function (index, elt) {
            $.each(grid.wrapper.find("[data-role=numerictextbox]"), function (index, elt) {
                console.log($(this));
                $(this).kendoNumericTextBox({
                    culture: "fr-FR",
                    format: "#",
                    decimals: 0,
                    min: 0,
                    step: 1
    
                });
                $(".k-widget .k-numerictextbox")[0].style.width = "60px";
            });
         });
    });