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

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

5 Answers 173 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Avinash
Top achievements
Rank 1
Avinash asked on 06 Jul 2016, 07:23 PM

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

5 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 08 Jul 2016, 01:05 PM
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
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 Feedback Portal and vote to affect the priority of the items
0
Avinash
Top achievements
Rank 1
answered on 08 Jul 2016, 04:17 PM

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();
        }
    })
})

0
Accepted
Vessy
Telerik team
answered on 08 Jul 2016, 05:07 PM
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
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 Feedback Portal and vote to affect the priority of the items
0
Avinash
Top achievements
Rank 1
answered on 08 Jul 2016, 07:39 PM
It works. Thanks :)
0
Vessy
Telerik team
answered on 11 Jul 2016, 07:59 AM
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
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 Feedback Portal and vote to affect the priority of the items
Tags
Grid
Asked by
Avinash
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Avinash
Top achievements
Rank 1
Share this question
or