[Solved] MVC Grid Scrolling

[Alan Murphy]

I have the following mvc grid which binds using ajax called from JavaScript.  Everything displays properly.  

Two questions

1. How do I set the scrolling height of the grid in JavaScript 
2. How do I scroll the grid back to the top in JavaScript

Grid

<%=Html.Telerik().Grid(Model.Details.Data)

     .Name("AlertGrid")

     .Sortable(sorting=> sorting.SortMode(GridSortMode.SingleColumn))

     .Ajax(ajax =>ajax.Action("GetAlertDetails", "AlertOpenOrderDetail", new {dcId=Guid.Empty.ToString(), alertType=-1}))

      .Scrollable(scrolling => scrolling.Height(450))

     .Columns(columns=>

     {

         columns.Add(o=> o.AlertType).Title(string.Empty).Width(30);

         columns.Add(o=> o.CustomerNumberDisplay).Title("Cust #").Width("11%");

         columns.Add(o=> o.CustomerName).Title("Customer").Width("20%");

         columns.Add(o=> o.DeliveryDateDisplay).Title("Delivery").Width("9%");

         columns.Add(o=> o.ProductNumber).Title("Prod #").Width("6%");

         columns.Add(o=> o.Brand).Title("Brand").Width("6%");

         columns.Add(o=> o.PackSize).Title("Size").Width("8%");

         columns.Add(o=> o.ProductDescription).Title("Description").Width("30%");

         columns.Add(o=> o.AlertTypeDescription).Title("Alert").Width("10%");

         columns.Add(o=> o.MonitorOrderDetailAlertId).Visible(false);

     })

      .ClientEvents(events => events

           .OnRowDataBound("onRowDataBound")

       )

                                                                                                                                   

   %>

JavaScript

function bindGrid() {

    showWait();

    var grid= $('#AlertGrid').data('tGrid');

    var dcIdVal = $('#DcId').val();

    var alertTypeVal = $('#AlertType').val();

    grid.rebind({dcId: dcIdVal, alertType: alertTypeVal });

    hideWait();

}

[Atanas Korchev]

Hello ALAN MURPHY,

You can use the following jQuery code:

1. Set the scroll height:
   $('#AlertGrid .t-grid-content').css("height", "200px");
2. Scroll to top:
   $('#AlertGrid .t-grid-content').scrollTop(0);

Regards,
Atanas Korchev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Patrick Rubeski]

I am having the same problem and the proposed solution is not working for me.  I have the following js function being executed at OnLoad which appears to have no effect on changing the height...Is there something I'm doing wrong?

function OnLoad() {

            $('#TypesGrid.t-grid-content').css("height", "500px");

        }

[Alan Murphy]

Try using the onDatabound event instead of the onLoad event to do your resizing.

[Alex Gyoshev]

Hello Patrick,

The selector in this snippet is invalid - there should be a space between the grid id and the content class name:

function OnLoad() {

    $('#TypesGrid .t-grid-content').css("height", "500px");

}


Greetings,
Alex Gyoshev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Patrick Rubeski]

this is working now - thank you both!