Multiple numeric textbox styling in kendo grid

2 posts, 0 answers
  1. toppo
    toppo avatar
    9 posts
    Member since:
    Jun 2017

    Posted 27 Aug 2018 Link to this post

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

     

  2. Preslav
    Admin
    Preslav avatar
    574 posts

    Posted 29 Aug 2018 Link to this post

    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:

    Regards,
    Preslav
    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.
Back to Top