NumericTextBox in template with dynamic properties

8 posts, 0 answers
  1. Morten
    Morten avatar
    331 posts
    Member since:
    Jul 2012

    Posted 14 Jun Link to this post

    I'm trying to set NumericTextBox properties dynamically and directly in the <input /> tag. However, I can get decimals, restrictDecimals and format to have effect.

    Here is my template:

        <script type="text/x-kendo-template" id="tmpl">
                #
                var step = allowDecimals ? decimalStep : 1;
                var decimals = allowDecimals ? 2 : 0;
                var format = allowDecimals ? "" : "\#";
                #
                <span>#:fix#</span>
                <input class="unit-count" type="number" value="#:count#" step="#:step#" min="0" data-decimals="#:decimals#" format="#:format#" />
        </script>

    Only value, step and min have effect on the configuration of the NumericTextBox.

    I have tried with data-decimals="#:decimals#" and decimals="#:decimals#" with the same effect.

    What properties can I set (and how) directly in the <input /> tag?

    /Morten

     

     

     

  2. Morten
    Morten avatar
    331 posts
    Member since:
    Jul 2012

    Posted 14 Jun in reply to Morten Link to this post

    I'm instantiating the NumericTextBoxes in the listview dataBound event.

    The NumericTextBoxes are setup correctly, only not all configuration properties are recognized

  3. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    464 posts

    Posted 18 Jun Link to this post

    Hello, Morten,

    The correct syntax for the initialization with "data-" options should be:

    <input type="number" value="#:price#" data-decimals="#:decimals#" data-role="numerictextbox" data-format="#:format#" data-restrict-decimals="#:restrict#" />

    I have created a sample Dojo and it works correctly when I test:

    http://dojo.telerik.com/ayuCoKOs

    I would suspect that the variables are not evaluated to a valid value and would suggest placing a console.log() to verify that in the template:

    <script type="text/x-kendo-template" id="tmpl">
         #     var step = allowDecimals ? decimalStep : 1; #
         #     var decimals = allowDecimals ? 2 : 0; #
         #     var format = allowDecimals ? "" : "\#"; #
         #     console.log(step, decimals, format); #
              <span>#:fix#</span>
              <input class="unit-count" type="number" value="#:count#" step="#:step#" min="0" data-decimals="#:decimals#" format="#:format#" />
      </script>

    Can you let me know what is the outcome - are the step and decimals integers and is the format a valid number format?

    Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Morten
    Morten avatar
    331 posts
    Member since:
    Jul 2012

    Posted 19 Jun in reply to Alex Hajigeorgieva Link to this post

    Hi Alex

    thanks for your reply:

    I change the content of the template to this:

        <script type="text/x-kendo-template" id="fixture-grid-fixture-clmn-tmpl">
            <div class="ise-fixture">
                #
                var step = allowDecimals ? decimalStep : 1;
                var decimals = allowDecimals ? 2 : 0;
                var format = allowDecimals ? "" : "\#";
                var restrict = allowDecimals ? true : false;
                console.log(step, decimals, format, restrict);
                console.log(typeof step);
                console.log(typeof decimals);
                console.log(typeof format);
                console.log(typeof restrict);
                #
                @*<input class="fixture-unit-count" type="number" value="#:count#" step="#:step#" min="0" data-fixture-id="#:fixId#" />*@
                <input class="fixture-unit-count" type="number" data-role="numerictextbox" data-fixture-id="#:fixId#"
                       step="#:step#" min="0" value="#:count#"
                       data-decimals="#:decimals#" data-format="#:format#" data-restrict-decimals="#:restrict#" />
            </div>
        </script>

    Attached a screenshot of the console.log (appear to be in correct format).

    I think my trouble lies in the fact that I instantiate the numerictextboxes this way in the grid.databound event:

    dataBound: function (e) {

                                        $("input.fixture-unit-count").kendoNumericTextBox({

                                            change: function () {

                                               ...
                                                });
                                            }
                                        });

    How to I bind the template with the data in the grid column the way you show in the listview example?

    /Morten

  5. Morten
    Morten avatar
    331 posts
    Member since:
    Jul 2012

    Posted 19 Jun in reply to Morten Link to this post

    Alex, could you delete the attachment in the previous post and use this instead.

    Please

  6. Morten
    Morten avatar
    331 posts
    Member since:
    Jul 2012

    Posted 19 Jun in reply to Morten Link to this post

    screenshot
  7. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    464 posts

    Posted 21 Jun Link to this post

    Hello, Morten,

    The Kendo UI ListView and Grid work in a different way so if this template is part of the Kendo UI Grid in read mode, then a slightly different approach is needed.

    The listview has to have a template and the widget makes a call to the kendo.bind() method internally which initializes any widgets with declarative initialization options. For performance reasons, the grid is not designed in this way.

    So to bind a declarative dynamic column template for the grid, you may define it as a function or a string and then in the dataBound event, call the kendo.bind() method as shown in this how-to article:

    https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/grid-editors-in-column-templates

    Currently, the function that is shared in the last response initializes all the $("input.fixture-unit-count") as a jQuery plugin and uses the options passed in the configuration object, not the HTML data-attributes. So instead, try something like this for the column template:

    * if there is a pound sign in the template, it should be escaped as shown below:
    * I would use "{0:n0}" format instead 

    template: '<input data-bind="value:price" data-step="#=step#" data-decimals="#:allowDecimals ? 2: 0#" data-role="numerictextbox" data-format="\\#" data-restrict-decimals="#:allowDecimals? true : false #" />'


    dataBound:function(e){     
      var grid = this;
      var rows = grid.items();
      $.each(rows, function(idx, row){
        var dataItemForRow = grid.dataItem(row);
        kendo.bind($(row), dataItemForRow);
      });
    }

    Here is a runnable Dojo for your convenience:

    http://dojo.telerik.com/@bubblemaster/UJABIfoW

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. Morten
    Morten avatar
    331 posts
    Member since:
    Jul 2012

    Posted 24 Jun in reply to Alex Hajigeorgieva Link to this post

    Thank Alex, you've been a great help :-)
Back to Top