This is a migrated thread and some comments may be shown as answers.
Multiple numeric textbox styling in kendo grid
1 Answer 43 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
toppo asked on 28 Aug 2018, 12:04 AM


I've got multiple numeric textbox that gets rendered inside a gride via SPA architecture with MVVM binding and templates. I've posted this on stackoverflow before but have gotten no response hopefully I'll get one here. Stackoverflow link

My main issue was the numeric textboxes are editable and onchange/onspin I'd like whichever textbox's font that got changed to change color so lets say red in my case. It only works for whichever one is selected, so if I changed the first textbox and then I click somewhere on my page to focusout of the textbox and then I try to change the 2nd textbox and focusout the first textbox styles gets reverted back to it's default and doesn't keep its red font color and only the 2nd textbox does. I want all changed textboxes to keep its font color change.


My code:

<script type="text/x-kendo-template" id="numericEditableTemplate">
    <input id="#= UserId##= UserCode#"
         class="#= UserId##= UserCode#"
         data-bind="value: CreditHours, events: { spin: onNumericEditChangeOrSpin, change: onNumericEditChangeOrSpin }"


<script type="text/x-kendo-template" id="GridTemplate">
<div id="infoGrid"
     data-bind="source: gridData, events: { dataBinding: onDataBinding }"
          'field': 'UserId',
          'title': 'User Id'
          'field': 'EmailAddress',
          'title': 'Email Address'
        { 'field': 'PersonName',
          'title': 'Name'
        { 'field': 'Hours',
          'title': 'Credit Hours',
          'template': $('#numericEditableTemplate').html(),
          'editable': true
        { 'field': 'MatchedUserId',
          'title': 'Matched User ID',
          'template': $('#userIdEditableTemplate').html(),
          'editable': true


My viewmodel function that handles the changing of the colors:

onNumericEditChangeOrSpin: any = function (e) {
    var target = e.sender;
    var inputClass = target.element[0].class;
    $("." + inputClass).find("input").css("color", "red");


1 Answer, 1 is accepted

Sort by
Telerik team
answered on 29 Aug 2018, 12:21 PM
Hello Sudo,

When the value of the NumericTextBox changes, it changes the dataItem, and the Grid rebinds. Thus, all the inline styles are lost due to the Grid refresh.

What I could suggest is adding an additional style to change the color of the inputs of all the "dirty" cells. For example:

  td.k-dirty-cell input{
    color: red;

For a runnable example, check my test Dojo:

Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question