setting variable Max value in NumericTextBox cell

[Entilzha]

@(Html.Kendo().Grid<OurToolsAdminDesk.Models.MyBusinessRules>()
    .Name("items-grid")
    .Columns(columns =>
        {
            columns.Bound(e => e.ID).Visible(false);
            columns.Bound(e => e.WebFormattedName).Title("Product").Width(200);
            columns.Bound(e => e.Description).Title("Description").Width(250);
            columns.Bound(e => e.IncrementAmount).Title("IncrementAmount").Width(85).Title("Quantities Available");
            columns.Bound(e => e.Increments)
                .Format("{0:n)}")
                .Width(75)
                .Title("Add to Order")
                .ClientTemplate(Html.Kendo().NumericTextBox<int>()
                    .Name("increment_#=Increments#").Value(0)
                    .Min(0)
                    .Max(100) // .Max("#=MaxValue#") does not work
                    .Step(1)
                    .Events(ev => ev.Change("incrementsChanged"))
                    .ToClientTemplate().ToHtmlString());
        })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
        .Events(events => events.Error("error_handler"))
        .Model(model =>
            {
                model.Id(p => p.ID);
                model.Field(p => p.ID).Editable(false);
                model.Field(p => p.WebFormattedName).Editable(false);
                model.Field(p => p.Description).Editable(false);
                model.Field(p => p.IncrementAmount).Editable(false);
                model.Field(p => p.Available).Editable(false);
                model.Field(p => p.Increments).Editable(true).DefaultValue(0);
            })
        .Read(read => read.Action("GetAvailableItems", "Admin").Data("additionalData"))
        .Update(update => update.Action("UpdateOrders", "Admin").Data("extraData"))
        )
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Sortable()
    .Navigatable()
    .Resizable(resize => resize.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))
    .Selectable(selectable => selectable
        .Mode(GridSelectionMode.Single))
)

[Dimiter Madjarov]

Hello Marcus,


The MVC wrappers are evaluated on the server side, so using a client template syntax in the configuration is not possible. There are several possible resolutions. For example you could skip the Max() configuration when initializing the widget and then set it in the dataBound event handler.
E.g.

function dataBound(e) {
    var grid = this;

    grid.tbody.find("tr[role='row']").each(function (e) {
        var model = grid.dataItem(this);
        var maxValue = model.MaxValue;
        var inc = model.Increments;

        $(this).find("#increment_" + inc).data("kendoDatePicker").set({ max: maxValue });
    });
}

Another option would be to only include an <input> element in the client template and again use the dataBound event handler to initialize the widget via JavaScript syntax.

I hope this information helps. 

Regards,
Dimiter Madjarov
Telerik

 

 

[Entilzha]

Dimiter,

Thank you for responding!  I had not thought of going that route.  I took your advice but had to change the "kendoDatePicker" to "kendoNumericTextBox".  Unfortunately it is not working.  It fails on the ".data(..)" call.  I looked around and found other examples that use "kendoNumericTextBox" so I figure that change should be okay.  Any thoughts as to why my "numerictextbox" value is empty?

function dataBound(e) {

    var grid = this;
    grid.tbody.find("tr[role='row']").each(function (e) {
        var model = grid.dataItem(this);
        var maxValue = model.Max;
        var id = model.ID;

        var ntb = $(this).find("#increment_" + id);
        var numerictextbox = ntb.data("kendoNumericTextBox"); // <-- returns undefined
        numerictextbox.set({ max: maxValue })
    });
}

[Entilzha]

I believe I know the reason why the call to get the .data is returning 'undefined'.  The box was not correctly configured to be a Kendo UI NumericTextBox.  Here is what I found when I went to inspect the element.

<input id="increment_13" type="number" value="0" step="1" name="increment_13" min="0" max="5">

So the real question now is "why didn't the ClientTemplate for the call to "columns.Bound(e => e.Increments)" create the NumericTextBox<int> that I requested in the original code snippet?

[Dimiter Madjarov]

Hello Marcus,


Please disregard my first suggestion. I would recommend including only an input element in the client template:

columns.Bound(p => p.Increments).ClientTemplate("<input id='increment_#=Increments#' class='numeric' />");

function dataBound(e) {
    var grid = this;

    grid.tbody.find("tr[role='row']").each(function (e) {
        var model = grid.dataItem(this);

        $(this).find(".numeric").kendoNumericTextBox({
            min: 0,
            max: 100, //you could access model values here
            step: 5
        });
    });
}

Let me know if I could provide further assistance.

Regards,
Dimiter Madjarov
Telerik

 

 

[Entilzha]

Thank you, Dimiter!  I appreciate you staying with me on this.  I am starting to fall behind on my deadlines because of this issue.

I applied your suggestion to my page and it starts off much better since I can now see the Kendo spinner.  However, the nature of the control keeps changing as I try to use it.  For example, it starts off as a Kendo NumericTextBox but as soon as I click on the up-down arrows it changes to what looks like a regular html numeric box.  If I set the focus to the inside of the numeric box and then tab out I see yet a third version of the control that looks like the box loses all of its attributes.  Really weird! This was happening before I made your latest changes but is really obvious now.

I have attached an image that shows all three different states along with the Firebug window showing the html for each of these three different states.  I figured you wouldn't believe it unless you saw it.

[Dimiter Madjarov]

Hi Marcus,


The reason for the issue is that the Grid has InCell edit mode enabled, so a click switches the cell to edit mode, which in the current case seems to be a regular numeric text box. If the current cell should not be part of the editing, you could directly use a template column.
E.g.

columns.Template(p => { }).ClientTemplate("<input id='increment_#=Increments#' class='numeric' />");

Regards,
Dimiter Madjarov
Telerik

 

 

[Entilzha]

Thanks Dimiter!  Looking much better now.  Although I still have to make it use integers instead of floats.

[Dimiter Madjarov]

Hello Marcus,


Thanks for the update. I am glad the information was helpful. As for the current question, you could use the decimals and format configuration options to achieve the desired behavior. Here is a runnable example.

Regards,
Dimiter Madjarov
Telerik

 

 

[Entilzha]

I didn't realize this at first since I was so happy to see the spinners working consistently.  The problem is this implementation breaks the data binding and I am not able to access the values from the numeric spinner.  Here is how I am getting the values from the grid (using javascript on the page):

var gridData = $("#items-grid").data("kendoGrid").dataSource.data();

Here is my latest code that implements the changes you recommended.  You can see I am using "columns.Bound(..)" for the other columns and the values for those fields get updated correctly.  When I replaced the binding for the "Increments" field (labeled "Add to Order") with the template, it lost the ability to bind back to the model and never changes the value on the model.  How do I get it back?  Or how do I access these values using javascript to create my own array?

@(Html.Kendo().Grid<OurToolsAdminDesk.Models.MyBusinessRules>()

    .Name("items-grid")

    .Columns(columns =>

        {

            columns.Bound(e => e.ID).Visible(false);

            columns.Bound(e => e.WebFormattedName).Title("Product").Width(200).Encoded(false);

            columns.Bound(e => e.Description).Title("Description").Width(250);

            columns.Bound(e => e.IncrementAmount).Title("IncrementAmount").Width(85).Title("Quantities");
                 // columns.Bound(e => e.Increments).Title("Add to Order") old way

            columns.Template(p => { }) // new way that breaks binding for this column

                .Width(75)

                .Title("Add to Order")

                .ClientTemplate("<input id='increment_#=ID#' class='numeric' />");

        })

    .DataSource(dataSource => dataSource

        .Ajax()

        .Batch(true)

        .ServerOperation(false)

        .Events(events => events.Error("error_handler"))

        .Model(model =>

            {

                model.Id(p => p.ID);

                model.Field(p => p.ID).Editable(false);

                model.Field(p => p.WebFormattedName).Editable(false);

                model.Field(p => p.Description).Editable(false);

                model.Field(p => p.IncrementAmount).Editable(false);

                model.Field(p => p.Available).Editable(false);

                model.Field(p => p.Increments).Editable(true).DefaultValue(0);

            })

        .Read(read => read.Action("GetAvailableItems", "Admin").Data("additionalData"))

        )

    .Editable(editable => editable.Mode(GridEditMode.InCell))

    .Events(g => g.DataBound("onDataBound"))

    .Sortable()

    .Navigatable()

    .Resizable(resize => resize.Columns(true))

    .Reorderable(reorder => reorder.Columns(true))

    .Selectable(selectable => selectable

    .Mode(GridSelectionMode.Single))

)

[Dimiter Madjarov]

Hi Marcus,


Indeed with the current implementation the numeric text box is not used for editing, since we didn't clarify that this is a requirement in the current case. As a side question, should this numeric text box be displayed always (and used for editing) or should it just be an editor template and be displayed when the cell is clicked (as in our demos)?

With the current implementation (numeric text box always displayed), you could bind to it's change event, access the model for the current row and manually set the new value.
E.g.

function dataBound(e) {
    var grid = this;

    grid.tbody.find("tr[role='row']").each(function (e) {
        var model = grid.dataItem(this);

        $(this).find(".numeric").kendoNumericTextBox({
            min: 0,
            max: 100,
            step: 5,
            value: model.Increments,
            change: onChange //bind to the change event
        });
    });
}

//change event handler
function onChange(e) {
    var grid = $("#items-grid").data("kendoGrid");  //get Grid instance
    var row = this.wrapper.closest("tr"); //get current row
    var value = this.value();  //numeric value
    var model = grid.dataItem(row);
    model.set("Increments", value);  //set the new value
}

I hope this clarifies the scenario.

Regards,
Dimiter Madjarov
Telerik

 

 

[Entilzha]

Worked the first time!

In answer to your question, it is better to have the numeric text box always be visible for each element since this conveys "editability".  However, it could just as well have required a click in the cell to initiate editing.  I like it the way it is now working.  If there were a lot of rows (>100) I might have said differently.

Marcus

[Dimiter Madjarov]

Hello Marcus,


Thanks for keeping me updated. I am happy that the issue is resolved.

Regards,
Dimiter Madjarov
Telerik