Sortable / Integration - Grid

3 posts, 0 answers
  1. David
    David avatar
    25 posts
    Member since:
    Jan 2017

    Posted 25 Oct 2017 Link to this post

    Hi

    In aspnet mvc, I'm using a Kendo grid integrating the sortable component.

    The setup is just like this example:

    http://demos.telerik.com/aspnet-mvc/sortable/integration-grid

    However, my grid has a set height and is scrollable.  If I drag a row over the top (or bottom) of the grid, I'm expecting the grid to automatically scroll until it reaches the top (or bottom) row.  I have set the autoscroll property to true on the sortable component.  But I can only scroll to the top (or bottom) of the display, no automatic scrolling occurs.

    Is this possible with the kendo grid in aspnet mvc?

    I'm looking for the same behavior as the Kendo UI sample - http://dojo.telerik.com/@petyosi/IgOkU

    Any help or specific examples would be appreciated

     

  2. Angel Petrov
    Admin
    Angel Petrov avatar
    1144 posts

    Posted 27 Oct 2017 Link to this post

    Hi,

    Since the MVC Wrappers are actually using the Kendo jQuery widgets on the client this means that the functionality should be achievable. I have modified one of our demos to demonstrate a possible implementation. Here you can see the scrolling behaving as expected. Below you can find the demo code that I used.

    @model IEnumerable<Kendo.Mvc.Examples.Models.ProductViewModel>
     
    @(Html.Kendo().Grid(Model)
        .Name("Grid")
        .HtmlAttributes(new { style = "height:400px;" })
        .Scrollable()
        .Columns(columns =>
        {
            columns.Bound(p => p.ProductName).Title("Product Name");
            columns.Bound(p => p.UnitPrice).Title("Unit Price").Width(130);
            columns.Bound(p => p.UnitsInStock).Title("Units In Stock").Width(130);
            columns.Bound(p => p.Discontinued).Width(130);
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(16)
            .ServerOperation(false)
         )
    )
     
    @(Html.Kendo().Sortable()
        .For("#Grid")
        .Filter("> tbody > tr")
        .Cursor("move")
        .HintHandler("noHint")
        .AutoScroll(true)
        .PlaceholderHandler("placeholder")
        .ContainerSelector("#Grid tbody")
        .Events(events => events.Change("onChange"))
    )
     
    <script>
        var noHint = $.noop;
     
        function placeholder(element) {
            return element.clone().addClass("k-state-hover").css("opacity", 0.65);
        }
     
        function onChange(e) {
            var grid = $("#Grid").data("kendoGrid"),
                skip = grid.dataSource.skip(),
                oldIndex = e.oldIndex + skip,
                newIndex = e.newIndex + skip,
                data = grid.dataSource.data(),
                dataItem = grid.dataSource.getByUid(e.item.data("uid"));
     
            grid.dataSource.remove(dataItem);
            grid.dataSource.insert(newIndex, dataItem);
        }
    </script>
     
    <style>
        .k-grid tbody tr {
            cursor: move;
        }
    </style>


    Regards,
    Angel Petrov
    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.
  3. David
    David avatar
    25 posts
    Member since:
    Jan 2017

    Posted 30 Oct 2017 in reply to Angel Petrov Link to this post

    Thanks Angel, I think i figured out the issue ....

    I'm using version 2016.3.914 so it may have been already fixed since then .. it appears some extension method for razor syntax isn't quite rendering the html correctly

    I tried your code and noticed the following.  When building a Sortable / Integration - Grid using razor syntax the rendered html for the k-grid-content class is missing the additional class k-auto-scrollable

    so creating the grid using razor syntax renders this html:

    <div class="k-grid-content" style="height: 170px;">

    creating the grid using javascript renders this html:

    <div class="k-grid-content k-auto-scrollable" style="height: 170px;">

     

     

     

Back to Top