UP/DOWN Arrows for reordering list

3 posts, 0 answers
  1. Joel
    Joel avatar
    207 posts
    Member since:
    Jun 2018

    Posted 15 Dec 2020 Link to this post

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

     

     

     

     

  2. Joel
    Joel avatar
    207 posts
    Member since:
    Jun 2018

    Posted 15 Dec 2020 in reply to Joel Link to this post

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

     

     

     

  3. Joel
    Joel avatar
    207 posts
    Member since:
    Jun 2018

    Posted 16 Dec 2020 Link to this post

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