Editing NumericTextBox in a Grid and Calling an Action when User Clicks off the NumericTextBox

[Nicholas]

There are two parts to this question:

First, I am trying to add a column to the grid that looks normal, but will turn into a NumericTextBox when clicked into, and back to normal when clicked out. Originally, before I added .ClientTemplate, the cell looked normal and then would turn into a basic textbox when I click into it. After adding the .ClientTemplate, what shows up is a textbox initially (strange), that will SOMETIMES turn into a NumericTextBox when I click into it. There is no telling when this will happen or not. Additionally, if it does happen to turn into a NumericTextBox, when I click on the up or down arrows, the value will change for about .10 seconds and the switch back to the original value.

Second, I want an action to run that will redirect through my controller to update the model after I click off the NumericTextBox so that everything stays up to date. I do not want to have an "update" button because that is too inconvenient for the user, who will be trying to fill out the form as fast as possible.

Here is my Kendo Grid code (it should be noted that my onChangeNumeric function never fires):

@(Html.Kendo().Grid<FrictionGraphProgram.Models.FrictionMaterialModel.TempRawMaterial>()
.Name("RawPaperGrid")
.DataSource(dataSource => dataSource //Configure the Grid data source.
    .Ajax() //Specify that Ajax binding is used.
    .Read(read => read.Action("GetCurrentIngredients", "NewMaterial").Data("rawPaperGridFunctionRef"))
    .Events(events => events.Error("error_handler"))
    .Model(model =>
    {
        model.Id (p => p.id );
        model.Field(p => p.name).Editable(false);
        model.Field(p => p.percent).Editable(true);
    })
)
.Columns(columns =>
{
    columns.Command(ingredient => ingredient
        .Custom("Delete")
        .Text(" ")
        .Click("deleteIngredient")
        .HtmlAttributes(new { title = "Delete Ingredient",
            style = "height:32px;width:32px;min-width:32px;min-height:32px;background-image:url('"
                + Url.Content("~/Images/if_Delete_1493279.png")
                + "');background-color:rgba(0, 0, 0, 0);border-color:rgba(0, 0, 0, 0);",
            functionRef = "DeleteRawPaperIngredient"}))
        .Width(54);
    columns.Bound(ingredient => ingredient.name).Title("Raw Ingredient");
    columns.Bound(ingredient => ingredient.percent).Title("Percent %").Width(200).ClientTemplate(Html.Kendo().NumericTextBox<float>()
        .Name("ingredient_#=name#")
        .HtmlAttributes(new { value = "#=percent#" })
        .Format("{0:n0}")
        .Min(0)
        .Max(100)
        .Step(1)
        .Decimals(0)
        .Events(ev => ev.Change("onChangeNumeric"))
        .ToClientTemplate().ToHtmlString());
})
.Editable(x => x.Mode(GridEditMode.InCell))
.Sortable() // Enable sorting
.Scrollable(scr => scr.Height(173))
.HtmlAttributes(new
{
    type = "grid",
    functionRef = "DeleteRawPaperIngredient",
    gridRef = "#RawPaperGrid"
})
)

[Viktor Tachev]

Hi Nicholas,

I have examined the provided code and noticed that the InCell mode is enabled. With this mode when the user clicks on a cell it will enter edit mode. 

The ClientTemplate that is defined for a column would show the data in preview mode. However it would not be used for editing the underlying field.

To specify what editor would be used for a field you can configure custom editor templates. Please check out the article below that illustrates how to specify editor template for bound fields in the Grid. 

• http://docs.telerik.com/aspnet-mvc/helpers/grid/templating/editor-templates#configuration-Create

Regarding the requirement for saving the changes automatically. For this you can handle the cellClose event of the Grid. In the event handler you can call saveChanges() in order to force the Grid component to save the modifications. The code would look similar to the following:

$(function () {
    var grid = $("#RawPaperGrid").data("kendoGrid");
    grid.bind("cellClose", function (e) {
        this.saveChanges();
    })
});

Have in mind that the cellClose event was introduced in R2 2017 version of the controls. Thus, in order to use it you need to ensure that the version of the components is 2017.2.504 or later.


Regards,
Viktor Tachev
Progress Telerik