NumericTextBox in template with dynamic properties

[Morten]

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

 

 

 

[Morten]

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

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

[Alex Hajigeorgieva]

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

[Morten]

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

[Morten]

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

Please

[Morten]

screenshot

[Alex Hajigeorgieva]

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

[Morten]

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

[Bryon]

This is a great thread, but is there anything on how to achieve this with a Telerik ASP.NET MVC Grid? I have what is below, but it displays a "readonly" text box, and I need it to be editable.

<script id="quantityNumberTemplate" type="text/x-kendo-template"> 
    <input id="txtQuantity" class="k-textbox" type="number" value="#= Remove #" min="1" max="9999" style="width:60px;" />
</script>

<script>
     var quantityTemplate = kendo.template($('#quantityNumberTemplate').html());
</script>

columns.Bound(a => a.Remove).ClientTemplate("#=quantityTemplate(data)#").Title("Quantity").Width(60);

[Angel Petrov]

Hello,

In order to make things work for the MVC grid the dataBound handler logic should also be present. One other thing if Remove is a field holding value to which binding should be present the logic should be modified as follows.

<input id='txtQuantity' type='number' data-role='numerictextbox' data-bind='value: Remove' min='1' max='9999' style='width:360px;'  />"

Here is a markup which I have tested and performs as expected.

columns.Bound(p => p.UnitPrice)
            .ClientTemplate(" <input id='txtQuantity' type='number' data-role='numerictextbox' data-bind='value: UnitPrice' min='1' max='9999' style='width:360px;'  />" ).Width(340);

Regards,
Angel Petrov
Progress Telerik