This is a migrated thread and some comments may be shown as answers.

Sortable / Integration - Grid

2 Answers 174 Views
Grid
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 25 Oct 2017, 10:38 PM

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 Answers, 1 is accepted

Sort by
0
Angel Petrov
Telerik team
answered on 27 Oct 2017, 01:27 PM
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.
0
David
Top achievements
Rank 1
answered on 30 Oct 2017, 02:50 PM

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

 

 

 

Tags
Grid
Asked by
David
Top achievements
Rank 1
Answers by
Angel Petrov
Telerik team
David
Top achievements
Rank 1
Share this question
or