How to navigate or call ajax action on webgrid header click

Question

I am generating my webgrid dynamically in mvc application. I have a requirement there i need to navigate to different page on webgrid column header. Now web grid column header is hyperlink and its sorting the record in the grid. But i need to go to a different page using ajax call on header click any one help me.

Here is my dynamic generated grid.

@using System.Dynamic
@model List<System.Collections.IDictionary>

<link href="~/Content/grid.css" rel="stylesheet" />

@{
    var result = new List<dynamic>();

    foreach (var emprow in Model)
    {
        var row = (IDictionary<string, object>)new ExpandoObject();
        var eachEmpRow = (Dictionary<string, object>)emprow;

        foreach (KeyValuePair<string, object> keyValuePair in eachEmpRow)
        {
            row.Add(keyValuePair);
        }
        result.Add(row);
    }
    var grid = new WebGrid(result, rowsPerPage: 50);
}

@if (@Model != null)
{
    @grid.GetHtml(
                htmlAttributes: new { id = "grdHoteling" },
                tableStyle: "webgrid-table",
        headerStyle: "webgrid-header",
        footerStyle: "webgrid-footer",
        alternatingRowStyle: "webgrid-alternating-row",
        selectedRowStyle: "webgrid-selected-row",
        rowStyle: "webgrid-row-style",
        mode: WebGridPagerModes.All)
}

Any help please? Thanks in advance.

Answer 1

Something along these lines. There's also a property that will disable the sorting, but you can always register on the click event and cancel the default behavior. Afterwards you can decide where to go. You can also get the DOM element by using the this keyword inside the click event callback. It's useful if you want to store additional data- or just get other info about the header.

$(".webgrid-header").click(function(event){
       event.preventDefault();

       //navigate to your other site
});