Reverse behavior of up/down arrows in NumericTextBox on RadGrid

3 posts, 1 answers
  1. Chris
    Chris avatar
    23 posts
    Member since:
    Mar 2012

    Posted 23 Mar 2018 Link to this post

    We have a numeric text box on a RadGrid, and the spin buttons are enabled. From a UX standpoint, we want to reverse the functionality of the up/down buttons. We want the up button to move the value lower, as the item is rising up the "rankings" in our list.

    The page in question is not accessible, but I've attached a screenshot, and what we're trying to do should be pretty obvious from looking at it. In this shot, I have clicked the up arrow next to Josh Allen's "Rank" four times, with the intention of moving him higher in the list (by higher, I mean "better," as in a top ten list.) But, what it did was raise the value of "Rank" from 6 to 10.

    Any idea how we can handle this?



    Chris Barry


  2. Chris
    Chris avatar
    23 posts
    Member since:
    Mar 2012

    Posted 25 Mar 2018 in reply to Chris Link to this post

    Do I need to turn off the spin buttons - and roll my own?  add a column with up down buttons one on top each other and add event handlers to manage the up down?  The master page the grid sits on is embedded in Angular js and I have so far been unable to hit on the css that affects the page - the Skin for the grid is Sunset (THANK YOU for not removing it - like you did Forest) so I've tried html .RadGrid_Sunset .riUp before / .riDown before but no dice - but even reversing the location won't affect the functionality

    in case you get confused, there are really 2 Chris's - the real deal and fake Chris, me - I'm his developer - I used to post as Marianne only now my old posts show as Elliott

  3. Answer
    Vessy avatar
    2067 posts

    Posted 28 Mar 2018 Link to this post

    Hi Chris,

    Setting the IncrementSettings-Step property to a negative value should do the trick:
    <telerik:RadNumericTextBox ID="Numeric1" runat="server"  IncrementSettings-Step="-1" ShowSpinButtons="true">

    I hope this helps.

    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top