asp.net webgrid header formatting and paging issue

Question

I am using the aspx view engine with asp.net MVC 3. I have a WebGrid control that displays my selected records and pages through the selected records properly. Clicking on field header also sorts the data.

The problems:

If am on page two and I click on any of the sortable fields, the grid reloads back to the first page after sorting. I want to keep it on the second page itself while still doing the sort.
Next to one of the fields, 'Level' as in code below, I want to display an image , which on mouse over will display a static DIV layer behaving like a tool tip describing that field.

There don't seem to be any built in properties for doing these two things. Are there any work arounds? Here is my code:

var grid = new WebGrid(source: Model.EmployeeList, columnNames: new[] { "Name", "Level", "Department"});

grid.GetHtml(tableStyle: "table-EmpStyle", headerStyle: "tr-header", rowStyle: "webGrid-Row", alternatingRowStyle: "webGrid-alt-Row", previousText: "Previous",nextText: "Next", numericLinksCount: 0, 
     columns: grid.Columns(
     grid.Column("Name", header: "Full Name"),
     grid.Column( "Level", header: "Level"   ),
     grid.Column("Department", header: "Department") ))

Thanks for your time...

score 0 · Answer 1 · answered Apr 26 '12 at 19:24

You need to set ajaxUpdateContainerId parameter as well to the name of the container where your webgrid is located. For exampe:

<div id="updateWebGrid">
    @grid.GetHtml(tableStyle: "table-EmpStyle", headerStyle: "tr-header", rowStyle: "webGrid-Row", alternatingRowStyle: "webGrid-alt-Row", previousText: "Previous",nextText: "Next", numericLinksCount: 0,  ajaxUpdateContainerId: "updateWebGrid"
     columns: grid.Columns( 
         grid.Column("Name", header: "Full Name"), 
         grid.Column( "Level", header: "Level"   ), 
         grid.Column("Department", header: "Department") )) 
</div>

For your second question, you need to use Format property of your column to inject some class

For example:

@helper CreateImage(string m)
{
    <div>@m <img src="#" class="someImage"/></div>
}

@grid.GetHtml(columns: new WebGridColumn[]
{
    new WebGridColumn() {ColumnName = "TestTypeId", Header = "Test Type"},
    new WebGridColumn() {ColumnName = "Name", Header = "Name", Format = m => CreateImage(m.Name)}
})

Once you declare this part, you should use jQuery to show your div whenever you hover with your mouse over an img tag with class someImage.

$(document).ready(function() {
    $(".someImage").mouseover(function() {
        $("yourDivId_Or_Class_for_Tooltip").show();
    });

    $(".someImage").mouseout(function() {
        $("yourDivId_Or_Class_for_Tooltip").show();
    });
});

That's about it. I did not check every piece of this code, but this is the logic that you should follow. I wrote a blog article regarding WebGrid, so you can check that for further reference: http://apparch.wordpress.com/2012/01/04/webgrid-in-mvc3/

score 0 · Answer 2 · answered Nov 08 '22 at 22:24

 [Code]
   //Stay on the same page during refresh. 
//Keep the page & position.
function refreshPage() {
var page_y = document.getElementsByTagName("body")[0].scrollTop;
window.location.href = window.location.href.split('?')[0] + '?page_y=' + 
page_y;
 }
 window.onload = function () {
 setTimeout(refreshPage, 350000);
if (window.location.href.indexOf('page_y') != -1) {
    var match = window.location.href.split('?')[1].split("&") 
    [0].split("=");
    document.getElementsByTagName("body")[0].scrollTop = match[1];
   }
}

 $(document).ready(function () {
$('#webGrid tbody').scroll(function (e) { //detect a scroll event on the 
   tbody
    /*
   Setting the thead left value to the negative valule of tbody.scrollLeft 
   will make it track the movement
   of the tbody element. Setting an elements left value to that of the 
    tbody.scrollLeft left makes it maintain it's relative position at the 
   left of the table.
   */
    $('#webGrid thead').css("left", -$("tbody").scrollLeft()); //fix the 
   thead relative to the body scrolling
    $('#webGrid thead th:nth-child(1)').css("left", 
    $("tbody").scrollLeft()); //fix the first cell of the header
    $('#webGrid tbody td:nth-child(1)').css("left", 
    $("tbody").scrollLeft()); //fix the first column of tdbody
   });
});
    [/Code]

asp.net webgrid header formatting and paging issue

2 Answers2