Multiple numeric textbox styling in kendo grid

[toppo]

Hello,

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-role="numerictextbox"
         step="0.25"
         data-min="1.5"
         data-bind="value: CreditHours, events: { spin: onNumericEditChangeOrSpin, change: onNumericEditChangeOrSpin }"
    />
</script>

 

<script type="text/x-kendo-template" id="GridTemplate">
<div id="infoGrid"
     data-role="grid"
     data-bind="source: gridData, events: { dataBinding: onDataBinding }"
     data-filterable="true"
     data-sortable="true"
     data-columns="[
        {
          '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
        }
     ]">
</div>
</script>

 

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");
};

 

[Preslav]

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:

<style>
  td.k-dirty-cell input{
    color: red;
  }
</style>

For a runnable example, check my test Dojo:

• https://dojo.telerik.com/eSixEkoL

Regards,
Preslav
Progress Telerik