How to set numeric text box max value based on template data item field

[Luke]

I am setting up a custom kendo window for a grid popup. On the window I have a form that will be posted via ajax. I am attempting to use a numeric text box in the template for the popup but I need to set the max value based on the data item that is using the popup. Is it possible to use a numeric text box in a kendo template and set the max value to a field in the data item for the template? Also, I can't seem to figure out how to set up validation for numeric text box either. How do I use a numeric text box that is not bound to the model but still validates the input?

 

This is the grid columns. The custom command opens my kendo window.

.Columns(columns =>
            {
                columns.Bound(m => m.Name).Groupable(false);
                columns.Bound(m => m.InventoryTypeName);
                columns.Bound(m => m.Description).Hidden().Groupable(false);
                columns.Bound(m => m.Active);
                columns.Bound(m => m.BulkItems).Hidden();
                columns.Bound(m => m.QuantityOnHand).Hidden();
                columns.Bound(m => m.QuantityAssigned).Hidden();
                columns.Bound(m => m.QuantityTotal).Hidden();
                columns.Bound(m => m.Brand).Title("Brand Required").Hidden();
                columns.Bound(m => m.SerialNumber).Title("S/N Required").Hidden();
                columns.Bound(m => m.ModelNumber).Title("Model# Required").Hidden();
                columns.Bound(m => m.Size).Title("Size Required").Hidden();
                columns.Bound(m => m.Color).Title("Color Required").Hidden();
                columns.Bound(m => m.CreatedBy).Title("Creator").Hidden();
                columns.Bound(m => m.CreatedDate).Title("Creation Date").Hidden();
                columns.Bound(m => m.UpdatedBy).Title("Last Editor").Hidden();
                columns.Bound(m => m.UpdatedDate).Title("Last Edit Date").Hidden();
                columns.Command(m => { m.Edit(); m.Custom("Assign").Click("AssignInventory"); });
            })

Here is the script for the custom command.

@*Assign inventory script for command button*@
    <script type="text/javascript">
        function AssignInventory(e) {
            e.preventDefault();

            var assignTemplate = kendo.template($("#AssignInventoryTemplate").html());
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            var wnd = $("#AssignInventoryWindow").data("kendoWindow");

            wnd.content(assignTemplate(dataItem));
            wnd.center().open();
        }

        function AssignmentTypeData() {
            var inventoryTypeId = $("#InventoryTypeId").val();

            return { inventoryTypeId: inventoryTypeId };
        }

        function FilterAssignees(e) {
            return {
                assignmentTypeId: $("#AssignmentType").val()
            }
        }
    </script>

This is my template script for the window.

<script type="text/x-kendo-template" id="AssignInventoryTemplate">
    <form id="AssignInventoryForm" class="k-edit-form-container" action="/Inventory/AssignInventory" method="post" kendo-validator="true">
        <style>
            .k-edit-form-container {
                max-height: 600px;
            }

            .k-edit-form-container .k-edit-buttons {
                margin: 0;
                padding: 8px 0px;
            }
        </style>
        <input type="hidden" id="InventoryId" name="InventoryId" value="#:data.Id#" />
        <input type="hidden" id="InventoryTypeId" name="InventoryTypeId" value="#:data.InventoryTypeId#" />

        <div class="k-edit-label">
            <label>Assignment Type</label>
        </div>
        <div class="k-edit-field">
            @(Html.Kendo().DropDownList()
                .Name("AssignmentType")
                .DataTextField("Name")
                .DataValueField("Id")
                .OptionLabel("Select Assignment Type")
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("GetAssignmentPermissions", "InventoryType").Data("AssignmentTypeData");
                    });
                })
                .ToClientTemplate()
            )
        </div>

        <div class="k-edit-label">
            <label>Assign To</label>
        </div>
        <div class="k-edit-field">
            @(Html.Kendo().DropDownList()
                .Name("Assignee")
                .DataTextField("Name")
                .DataValueField("Id")
                .OptionLabel("Select Assignee")
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("GetAssignees", "Inventory").Data("FilterAssignees");
                    })
                    .ServerFiltering(true);
                })
                .Enable(false)
                .AutoBind(false)
                .CascadeFrom("AssignmentType")
                .ToClientTemplate()
            )
        </div>

        # if(data.BulkItems) { #
            <div class="k-edit-label">
                <label>Quantity To Assign</label>
            </div>
            <div class="k-edit-field">
                @*<span class="k-input k-textbox k-input-solid k-input-md k-rounded-md k-invalid" style="">
                    <input id="QuantityToAssign" class="k-input-inner" type="number" min="1" max="#:QuantityOnHand#" name="QuantityToAssign" value="1" required="required">
                </span>
                <div class="k-tooltip k-tooltip-error k-validator-tooltip k-invalid-msg field-validation-error k-hidden" data-for="QuantityToAssign" id="QuantityToAssign_validationMessage" data-valmsg-for="QuantityToAssign">
                    <span class="k-tooltip-icon k-icon k-i-warning"></span>
                    <span class="k-tooltip-content">The QuantityToAssign field is required.</span>
                    <span class="k-callout k-callout-n"></span>
                </div>*@
                @(Html.Kendo().NumericTextBox()
                    .Name("QuantityToAssign")
                    .Value(1)
                    .Min(1)
                    .Max(@<text>#:QuantityOnHand#</text>)
                    .ToClientTemplate()
                )
                <span class="k-invalid-msg" data-for="QuantityToAssign"></span>
            </div>
        #}#
    </form>

</script>

In the template I can set up a numeric input but I'd like to use the Kendo numeric text box if possible. Either way, I need to validate that the numeric input is within the min/max range but can't seem to get it to validate.

[Stoyan]

Hi Luke,

Thank you for sharing your code.

I suspect the issue arises because the QuantityOnHand variable may not be available in the AssignInventoryTemplate.

That being said could you please share an isolated sample project with dummy data that showcases your approach? This will allow me to investigate and suggest a possible solution faster.

Alternatively, in the Open Event handler of the Window you could get the client-side instance of the NumericTextBox and use its max method to set the maximum value of the Component.

Regards,
Stoyan
Progress Telerik

[Luke]

Hey Stoyan,

The QuantityOnHand variable is available in my template. I can use the following in a normal input tag and it works as expected.

max="#:QuantityOnHand#"

I'm just wondering how I can achieve the same if I change the input tag to a Kendo().NumericTextBox()? I will use your alternative suggestion to set the max value in the open event of the window for now. I am hoping there is a better option that allows me to us the .Max() of the numeric text box instead.

[Stoyan]

Hi Luke,

I did some testing on my side and realized the reported issue occurs because there is difference in time between the Razor Syntax's evaluation and the evaluation of the Kendo Templates.

More specifically Razor Syntax is evaluated on the server (including Components that are defined in Client Templates) , on the other hand Kendo Templates are evaluated on the client where configurations of Telerik HtmlHelpers have already been resolved to their jQuery serialization.

This therefore means the approach I have suggested previously is the appropriate solution in the scenario at hand.

[Luke]

Thank you, Stoyan. I appreciate the help.