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