I am using Telerik UI for ASP.NET Core

I have a hierarchical grid with nested child grids where the name is based off the parent grid record ("#gridValue_#=CODE_TABLE_ID#"). Is there an example where only the nested grids are drag and drop sortable and only within the same nested grid? I am not trying to move rows between different nested grids.

Thanks in advance

Hi,

I have a Kendo Grid as per the code below

     @(Html.Kendo().Grid<ReportCompetencyViewModel>()
         .Name("listGrid")
         .BindTo(Model.ReportCompetency.OrderBy(x => x.DisplayOrder))
         .Columns(columns =>
         {
             columns.Bound(c => c.Code).ClientHeaderTemplate("Code");
             columns.Bound(c => c.DisplayName).ClientHeaderTemplate("Description");
             columns.Bound(c => c.IEC).ClientHeaderTemplate("IEC");
             columns.Bound(c => c.Active)
                 .ClientTemplate("#if(Active) {# <i class='fas fa-check'></i>  # } else {# <i class='fas fa-times'></i> #} #")
                 .ClientHeaderTemplate("Active")
                 .HtmlAttributes(new { @class = "text-center" })
                 .Width(100);
         })
         .Pageable(pageable => pageable
             .Refresh(true)
             .PageSizes(true)
             .ButtonCount(5))
         .Sortable()
         .Filterable()
         .Groupable()
         .NoRecords(n => n.Template("<p>There are no records to display.</p>"))
         .HtmlAttributes(new { style = "width:100%;" })
         .Selectable(selectable => selectable
             .Mode(GridSelectionMode.Single)
             .Type(GridSelectionType.Row))
         .Events(events => events
             .Change("lu.onChange")
         )
         .Pageable(p =>
         {
             p.PageSizes(new[] { 5, 10, 30, 50, 100 });
         })
         .DataSource(dataSource => dataSource
             .Ajax()
             .Group(g => g.Add(x => x.IEC))
             .PageSize(50)
             .ServerOperation(false)
             .Read(r => r.Action("RefreshCompetenciesGridData", "ReportLookup").Data("lu.sendAntiForgery"))
         )
    )

I have a partial that has a sortable element in it also as below.
    @(Html.Kendo().Sortable()
              .For($"#{@Model.GridId}")
              .Filter("table > tbody > tr")
              .Cursor("move")
              .PlaceholderHandler("sg.placeholder")
              .ContainerSelector($"#{Model.GridId} tbody")
              .Events(events => events.Change("sg.onChange"))
    )

The sortable element works great, the majority of the time.
When performing a re-order, opening a kendo window and performing a save action the grid is refreshed with the updated data in a TypeScript class as per code below.
    save = (model: any) => {
    var _self = this;
   
    var girdOrderArray = new Array();
   
    if ($("#grid-reorder-warning").length && $("#grid-reorder-warning").is(":visible")) {
        var grid = $("#" + this.girdName).data("kendoGrid");
        var dataItems = grid.dataItems() as any;
        $.each(dataItems,
            (idx: number, dataItem) => {
                var di = idx + 1;
                var id = dataItem.id === undefined ? dataItem.Id : dataItem.id; // Changing the display order appears to also change the dataItem from Id to id.
                girdOrderArray.push({ Id: id, DisplayOrder: di });
            });
   
    }
   
    var da = new Tmsp.AjaxDataAccessLayer(Tmsp.Enums.AjaxCallType.Post,
        Tmsp.Enums.AjaxDataType.Json,
        this.saveUrl,
        JSON.stringify(model),
        "application/json; charset=utf-8",
        { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
        true, true);
   
    da.ajaxCall(data => {
   
        _self.closeWindow();
       
  if ($("#grid-reorder-warning").is(":visible")) {
            grid.dataSource.read().then(() => {
                var dataItems = grid.dataItems();
                var arr = new Array() as any;
                $.each(dataItems,
                    (idx, dataItem: any) => {
                        var id = dataItem.Id === null ? dataItem.id : dataItem.Id;
                        var gridOrderObj = jQuery.grep(girdOrderArray,
                            function (gridOrderObj: any) { return gridOrderObj.Id == id });
                        dataItem.set("DisplayOrder", gridOrderObj[0].DisplayOrder);
                    });
                grid.dataSource.sort({ field: "DisplayOrder", dir: "Desc" });
            });
        } else {
            _self.refreshGrid();
        }
   
        return false;
   
    }, (xhr, status, errorThrown) => {
        console.log(xhr);
        console.log(status);
        console.log(errorThrown);
    });
   
    return false;
    } 

This saves, and reorders teh grid accordingly by the DisplayOrder which is great and what I need. However, when I try and reorder anything else after this the reordered item gives me the new index, but isnt actually changed on the grid.
However, if I refresh the grid through other means, the re-oredering works perfectly.

So, my question, as I need to keep the display order as is prior the the save, how do I acheive this.

Things I have tried
 - Updating the display order on the refreshed gird - suspected cause of the problem.
 - Created a new controller that returns the partial and inisialises the control again -  No effect
 - Resetting the uid (not a preferred option, but thought I would try and see if it was uid) specific. - No effect




 

Hello,

I need to control my sortable list with the keyboard. As far as I know there is no such function implemented in the current sortable widget, right? I just tried the following to extend it by myself, but there is a problem:

1. Go to the demo: http://demos.telerik.com/aspnet-core/sortable/index
2. Add a tabindex="0" to each <li> tag
3. Add a keydown event to either the ul or the li
   • $(document).on('keydown', '#sortable-basic', function (e) { console.log('1', e); });
   • $(document).on('keydown', '#sortable-basic li', function (e) { console.log('2', e); });
4. Now focus a li and press a key. You will see that the event is not triggered by any letter or arrow key, but just on ctrl, tab, shift ... In my case I want to sort the items by holding the ALT key + arrow left/right.

Could you please help me with a working solution?