Kendo Grid Column 'Open link in new tab' error in ASP.net MVC

[Avinash]

I have a kendo grid with Multiple column sorting enabled. The issue is whenever sorting is enabled, user can right click on column and click on 'Open link in new tab', and when clicked, user gets directed to error page e.g. the new page would look like: http://localhost:50411/PurchaseOrder/GetPurchaseOrders?GridPOSearchHeaderInfo-sort=Revision-asc (this page doesn't exists)
I checked Kendo grid sorting demo page: http://demos.telerik.com/kendo-ui/grid/sorting and tried opening link in new tab by right clicking the column in the grid and it doesn't have tis issue. The new page url is: http://demos.telerik.com/kendo-ui/grid/sorting# so it would pretty much load same page. 

Is there anyway to disable right click on the kendo grid's column or not generate that random page?

Here is my razor code:

@(Html.Kendo().Grid<SupplierPortal.ViewModels.PaymentResultViewModel>()
    .Name("GridPaymentSearchHeaderInfo")
    .Columns(columns =>
    {
        columns.Bound(e => e.PaymentNumber).Width("160px").HtmlAttributes(new { @style = "text-align:right;" });
        columns.Bound(e => e.PaidToName).Width("170px");
    })
    .ToolBar(tools =>
    {
    tools.Template(@<text>
    <div class="pull-right" style="display: inline-block; padding-right: 10px; padding-top: 2px; padding-bottom: 2px;">
        <a href="#" class="k-button updateView" title="Update Selected View"><i class="fa fa-floppy-o" aria-hidden="true"></i></a>
        <a href="#" class="k-button addView" title="Add New View"><i class="fa fa-plus" aria-hidden="true"></i></a>
        <a href="#" class="k-button deleteView" title="Delete Selected View"><i class="fa fa-times" aria-hidden="true"></i></a>
        <span class="preline"></span>
        <a class="k-button k-button-icontext k-grid-excel POexport" href="#" title="Export to Excel" style="background: #f8fdae;"><span class="k-icon k-i-excel"></span></a>
    </div>
    <div class="col-lg-4 col-md-5 col-sm-5 col-xs-7 pull-right" style="padding-right: 0;">
        <div class="form-group" style="margin-bottom: 0;">
            @Html.Label("Grid View:", new { @class = "col-sm-3 col-xs-4 control-label view" })
            <div class="col-sm-7 col-xs-6" style="padding-left: 0;">
                @Html.DropDownList("lstViewNamesGridPaymentSearchHeaderInfo", new SelectList(Model.ViewNames, "Value", "Text", Model.SelectedPaymentViewId), "All Columns", new { @class = "form-control lstViewNames", @style = "height: auto;" })
            </div>
        </div>
    </div>
    </text>);
    })
    .ColumnMenu()
    .Pageable(x => x.PageSizes(new object[] { 10, 20, 50, 100, "All" }))
    .Reorderable(reorder => reorder.Columns(true))
    .AutoBind(false)
    .Reorderable(reorder => reorder.Columns(true))
    .Selectable()
    .Filterable(filterable => filterable
                    .Extra(false)
                    .Operators(operators => operators
                        .ForString(str => str.Clear()
                            .Contains("Contains")
                            .StartsWith("Starts with")
                            .IsEqualTo("Is equal to")
                            .IsNotEqualTo("Is not equal to")
                        ))
                    )
    .Sortable(sortable => sortable
        .AllowUnsort(true)
        .SortMode(GridSortMode.MultipleColumn))
    .Scrollable(scr => scr.Height(322))
    .Resizable(resize => resize.Columns(true))
    .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                .ServerOperation(false)
                .Read(read => read.Action("GetPayments", "Payment").Data("GetSearchParameters"))
                )
    .Events(events => events.Change("changeHeaderInfo"))
    .Events(events => events.DataBound("gridDataBound"))
    .Events(events => events.DataBinding("gridDataBinding"))
    .Events(events => events.ColumnMenuInit("gridColumnMenuInit"))
)

[Vessy]

Hi Avinash,

The experienced behavior is related to the fact that by default, the ASP.NET MVC framework does not allow you to respond to an HTTP GET request with a JSON payload (what is the response to a sorting GET request). Generally this can be allowed explicitly by configuring the JsonRequestBehavior.AllowGet as the second parameter to the JSON method, but in a Grid sorting case this will return only the sorted JSON result, but not a Grid bound with this data.

In case you decide to disable the right click over the grid, you can try the approach suggested here:
http://www.telerik.com/forums/right-click-and-row-selection

Regards,
Vessy
Telerik by Progress

[Avinash]

The issue i'm having is when the user right clicks on the gird header (where the column name appears). In the screenshot attached above, the user right clicks on 'Purchase Order' column name. I tried the solution you linked in previous answer and it doesn't seem to stop the 'context menu' to appear on right click. i even updated the script to look for thead element of the grid but it didn't work. 

$(function () {
    //replace with your grid name
    $("#GridPaymentSearchHeaderInfo thead").bind("mousedown", function (e) {
        if (event.button == 2) {
                 //prevent the event from bubbling
            e.stopPropagation();
        }
    })
})

[Vessy]

Hi Avinash,

You can try attaching a handler directly to the header element's contextmenu event and prevent its default action like follows:

$(function () {
    //replace with your grid name
    $("#GridPaymentSearchHeaderInfo thead").bind("contextmenu", function (e) {
        e.preventDefault();
    })
})

Please, give it a try and let me know whether it helps in achieving the target result.

Regards,
Vessy
Telerik by Progress

[Avinash]

It works. Thanks :)

[Vessy]

Hi,

You are welcome, Avinash - I am glad the proposed solution helps in achieving the target result. Let us know should you need any further assistance on the matter.

Regards,
Vessy
Telerik by Progress