UP/DOWN Arrows for reordering list

[Joel]

I use a Grid to display back some rows that have an Order{int} field.  When I display these items in the grid and elsewhere, they are to be displayed by order. 

 

I would like the user experience to have the 1st column in the grid contain up and down arrows.  Then, the user can select up/down on the arrows and the grid will submit a change to the row and the grid will display the row in its new location.

This is similar to how your NumericTextBox (https://demos.telerik.com/aspnet-core/numerictextbox/index) has arrows except this just sets the order in which the records display in the grid.

public partial class Option
{
    public int Id { get; set; }

    [MaxLength(50)]
    public string Name { get; set; }
    [MaxLength(128)]
    public string Description { get; set; }

    public int Order { get; set; }
}

 

 

 

 

[Joel]

What I'm actually after is your example in the ListBox.  The box on the Right side has UP/DOWN arrows.

https://demos.telerik.com/aspnet-core/listbox/events

Hmmm, maybe I'll get away from the Grid on this one. How do I select an item in the listbox similar to the grid so I can navigate to the Details View (MVC)?

My current grid definition:

@(Html.Kendo().Grid<SessionOptionTemplate>()
      .Name("grid")
      .Columns(columns =>
      {
          columns.Command(command => command
              .Custom("Details")
              .Click("goDetail"))
              .Width(Glossary.Portal.ButtonWidth);
          columns.Bound(p => p.Name);
          columns.Bound(p => p.IsActive);
          columns.Bound(p => p.Order);
      })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .Read(read => read.Action("IndexJson", "SessionOptionTemplates").Data("gridGetData"))
    .Model(m => m.Id(p => p.Id))
))

Script:

<script type="text/javascript">

    var customerId = $("#customerId").val();
    var customerUniqueId = $("#customerUniqueId").val();

    function gridGetData() {
        //alert("grid.gridGetData");
        //alert("customerId: " + customerId);

        return {
            customerId: customerId,
            customerUniqueId: customerUniqueId
        };
    }

    function goDetail(e) {
        e.preventDefault();
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var url = '@Url.Action("Details", "SessionOptionTemplates")?id=' + dataItem.Id + '@Model.GetUrlParameters()';
        // Replace & with & as the above encoding step changes & to &.
        window.location.href = url.replace(/&/g, "&");
    }

...

 

 

 

[Joel]

Cancel this, I have made progress with the ListBox and I believe it will meet my needs.  However, I have posted a question in the ListBox forum.