Kendo MVC Grid - NumericTextBox Change event not triggered

Question

I have a kendo grid which contains a numeric text box in each row.

I want to detect change and spin events of these numeric text boxes, but the events does not trigger for some reason.

The Kendo grid code,

@(Html.Kendo().Grid<ContactLenseViewModel>()
    .Name("contactLensesGridOs")
    .Columns(columns =>
    {
        columns.Bound(p => p.Id).Title("Id").Hidden();
        columns.Bound(p => p.Description).Title("Description");

        columns.Bound(p => p.CostPrice).Title("Cost Price");
        columns.Bound(p => p.SellingPrice).Title("Selling Price");


        //numeric increment
        columns.Bound(p => p.ItemQuantity).ClientTemplate(Html.Kendo().NumericTextBox()
        .Name("clItemQuantityOs_#=Id#")
        .HtmlAttributes(new { value = "#=ItemQuantity #" })
        .Min(0)
        .Max(5)
        .Step(1)
        .Decimals(0)

        .Events(e => e
            .Change("change")
            .Spin("spin")
        )
        .ToClientTemplate().ToHtmlString());


    })
    .ToolBar(toolbar =>
    {
        toolbar.Template(@<text>
        <div class="toolbar">
            <div class="row">
                <div class="col-md-3">
                    <div class="input-group">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
                        <input type="text" class="form-control" id='FieldFilterOs' placeholder="Search for...">

                    </div>
                </div>                  
            </div>
        </div>
        </text>);

            })
.Events(e =>
{
    e.DataBound("GridBound");
    e.Change("Grid_OnRowSelect");
})
.Pageable()
.Sortable() 
.Scrollable()
.HtmlAttributes(new { style = "height:400px;" })
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(5)
    .Events(events => events.Error("error_handler"))
    .Model(model => model.Id(p => p.Id))

    .Read(read => read.Action("SearchData", "Cls").Data("searchInputsOs"))
)
)

The Change and spin events used are,

<script type="text/javascript">

        $(document).ready(function () {
            //....
        });           


        function change() {

            alert("Change :: " + this.value());
        }

function spin() {
            alert("Spin :: " + this.value());
        }
</script>

If I use a same kind of numeric textbox outside of kendo grid, it works as expected and fires spin and change events on changes (selection of a number, typing a number).

So, the question Im having is - why the change, spin events are not fired when the numeric text box is inside the grid? Any help will be much appreciated. Thank you.

Answer 1

im not sure what's your problem exactly , but you can try to create an Editor template of your NumericText and put it inside : Shared/EditorTemplates. something looks like this:

 @Html.Custom_DropdownList("ArticleId", ViewData["articles"] as SelectList, new { @class = "form-control validate[required]  ", style = "width:100%" })

<script>
    $(function () {
        $('#ArticleId').select2();

    });
</script>

and then you can access to change and spin events using the ID of your element (inside js script). finaly you can call your editorTemplate inside the grid like this :

:columns.Bound(p => p.ArticleId).EditorTemplateName("DossierListe").Title("Catégorie").ClientTemplate("#= Article#");

Answer 2

For this I could not find a solution to the issue of NumericTextBox, when used inside a kendo MVC grid.

As a workaround, I used the inline cell edit mode of the kendo grid and enabled edit feature only in the ItemQuantity column. And as the ItemQuantity is a number, in the edit mode grid automatically adds a input field of type="number" which helps in achieving same thing as of using a NumericTextBox.

New kendo grid code is given below.

@(Html.Kendo().Grid<ContactLenseViewModel>()
                                    .Name("contactLensesGridOd")
                                    .Columns(columns =>
                                    {
                                        columns.Bound(p => p.Id).Title("Id").Hidden();
                                        columns.Bound(p => p.Description).Title("Description");
                                        columns.Bound(p => p.Daily).Title("Daily").Hidden();
                                        columns.Bound(p => p.Daily).ClientTemplate("#= Daily ? 'Yes' : 'No'#").Title("Daily");
                                        columns.Bound(p => p.Stigimatism).Title("Stigimatism").Hidden();
                                        columns.Bound(p => p.Stigimatism).ClientTemplate("#= Stigimatism ? 'Yes' : 'No'#").Title("Stigimatism");
                                        columns.Bound(p => p.NumberOfLensesInBox).Title("Number Of Lenses In Box");
                                        columns.Bound(p => p.NameOfLenses).Title("Name Of Lenses").Width(125);
                                        columns.Bound(p => p.Brand).Title("Brand");
                                        columns.Bound(p => p.CostPrice).Title("Cost Price");
                                        columns.Bound(p => p.SellingPrice).Title("Selling Price");
                                        columns.Bound(p => p.ItemQuantity).Title("Quantity").HtmlAttributes(new {@class = "numericIncrementer" });

                                        //columns.Bound(p => p.ItemQuantity).ClientTemplate("<input type='number' name='quantity' min='1' max='5'>");

                                        //columns.Bound(p => p.ItemQuantity).ClientTemplate(Html.Kendo().NumericTextBox()
                                        //    .Name("clItemQuantityOs_#=Id#")
                                        //    .HtmlAttributes(new { value = "#=ItemQuantity #" })
                                        //    .Min(0)
                                        //    .Max(5)
                                        //    .Step(1)
                                        //    .Decimals(0)
                                        //    .ToClientTemplate().ToHtmlString());

                                    })
                                    .ToolBar(toolbar =>
                                    {
                                    toolbar.Template(@<text>
                                        <div class="toolbar">
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <div class="input-group">
                                                        <span class="input-group-addon"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
                                                        <input type="text" class="form-control" id='FieldFilterOd' placeholder="Search for...">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </text>);

                                    })
                                    .Events(e =>
                                    {
                                        e.Save("CellChangedRight");
                                        e.DataBound("GridBoundRight");
                                    })
                                    .Editable(editable => editable.Mode(GridEditMode.InCell))
                                    .Pageable(pageable => pageable.Refresh(false))
                                    .Sortable()
                                    .Selectable()
                                    .Scrollable()
                                    .HtmlAttributes(new { style = "height:400px;" })
                                    .DataSource(dataSource => dataSource
                                        .Ajax()
                                        .PageSize(5)
                                        .Events(events => events.Error("error_handler"))
                                        .ServerOperation(false)
                                    .Model(model =>
                                    {
                                        model.Id(p => p.Id);
                                    })
                                    .Model(model =>
                                    {
                                        model.Id(p => p.Id);
                                        model.Field(p => p.Description).Editable(false);
                                        model.Field(p => p.Daily).Editable(false);
                                        model.Field(p => p.Stigimatism).Editable(false);
                                        model.Field(p => p.NumberOfLensesInBox).Editable(false);
                                        model.Field(p => p.NameOfLenses).Editable(false);
                                        model.Field(p => p.Brand).Editable(false);
                                        model.Field(p => p.CostPrice).Editable(false);
                                        model.Field(p => p.SellingPrice).Editable(false);

                                    })
                                    .Read(read => read.Action("SearchContactLensesUnpaged", "Cls").Data("searchInputsOd"))
                                )
                    )

And I read the changes in the value of item quantity from JS file like this,

function CellChangedRight(e) {

  if (e.values != null && e.model.Id != null) {
     var grid = e.sender;
     var changedProperty = Object.getOwnPropertyNames(e.values)[0];
     var currentId = e.model.Id;  // Edited columns Id value
     var currentQty = e.values[changedProperty];   // New value inserted by user     

  }    
}

Note that the above code is triggered when a cell is edited in the grid, as the grid has below configuration.

.Events(e =>
      {
           e.Save("CellChangedRight");
           e.DataBound("GridBoundRight");
      })

Hope this work around would be helpful for anyone who faces a similar situation.

Answer 3

For a Change Event to work, the grid needs to be Selectable. So add .Selectable() to your grid.