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

6 posts, 1 answers
  1. Avinash
    Avinash  avatar
    52 posts
    Member since:
    Jan 2016

    Posted 06 Jul Link to this post

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

  2. Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 08 Jul Link to this post

    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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Avinash
    Avinash  avatar
    52 posts
    Member since:
    Jan 2016

    Posted 08 Jul in reply to Vessy Link to this post

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

  5. Answer
    Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 08 Jul Link to this post

    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
  6. Avinash
    Avinash  avatar
    52 posts
    Member since:
    Jan 2016

    Posted 08 Jul in reply to Vessy Link to this post

    It works. Thanks :)
  7. Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 11 Jul Link to this post

    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready