This is a migrated thread and some comments may be shown as answers.

$(this).find("#NumericTextBox").data('kendoNumericTextBox') always returns 'undefined'

1 Answer 26 Views
NumericTextBox
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 30 Mar 2021, 09:50 AM

Hi there. Here's my setup;

I have a grid and in the grid I bind to a column. The column has a template applied to it.

View
                    .Columns(current =>
                    {
                        current.Bound(p => p.CurrentMaterial).EditorTemplateName("ddl_Mixing_Materials_Current");
                        current.Group(g1 => g1.Title("Volumes")
                            .Columns(volume =>
                            {
                                volume.Bound(p => p.CurrentVol). EditorTemplateName("kIntegerNoSpinnerNoNegativesNamed"); <---//This one!
                                volume.Command(p => p.Custom("-20").Click("Remove20"));
                            })
                        );

Template

@model int?

@(Html.Kendo().NumericTextBoxFor(m => m)
      .Name("NumericTextBox") <-- I know this will confuse the bounding - I changed just to make next step clearer
      .HtmlAttributes(new { style = "width:100%" })
      .Decimals(0)
      .Placeholder("")
      .Min(0)
      .Max(500) <-- this is what I need to set after data binding!
      .Spinners(false)
)

 

So the issue is, I need to set the max of each column depending on the object bound to it. Each object has a 'maxVolume' that I want to use to set the 'max' value in the template. However - I looked at the API page and I tried to access the numberTextBox like it suggests, but the textbox is always 'undefined'. Here's the script and how I'm trying to access the NumericTextBox

Script

function dataBound(e) {
        var grid = this;
        grid.tbody.find("tr[role='row']").each(function () {
            var model = grid.dataItem(this);
            var maxValue = model.MaxVolume;
            alert(maxValue); <-- All good

            var test2 = $(this).find("#NumericTextBox");
            alert(test2); <-- Object found
            var numericTextBox2 = $('#CurrentVol').data('numerictextbox');
            alert(numericTextBox2); <-- 'Undefined'
            var numericTextBox3 = $(this).find("#NumericTextBox").data('kendoNumericTextBox');
            alert(numericTextBox3); < -- Still 'undefined'
        });
    }

So I'm clearly missing something. Is there some extra bit of traversal I need to do in my script because of the looping through grid rows I do? Am I looking for the wrong .data() type?

Any help would be great. thanks.

1 Answer, 1 is accepted

Sort by
0
Anton Mironov
Telerik team
answered on 02 Apr 2021, 08:38 AM

Hello Matt,

Thank you for the code snippets and details provided.

In order to achieve the desired behavior, I would recommend using the "Range" Data Annotation. This approach will provide the opportunity to set a different range for every numeric field without creating editor templates for each one.

Here is an example:

        [Range(Int32.MinValue, 10)]
        public int? Freight
        {
            get;
            set;
        }
Attached is a sample project that I created for the case. Observe the behavior for the "Freight" field.

Make the needed tests locally with the attached project and let me know if further assistance is needed.

 

Kind Regards,
Anton Mironov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
NumericTextBox
Asked by
Matt
Top achievements
Rank 1
Answers by
Anton Mironov
Telerik team
Share this question
or