Kendo UI Grid - ClientTemplate calling MVC Url.Action calls (incorrectly) two different actions

3 posts, 1 answers
  1. TBG
    TBG avatar
    4 posts
    Member since:
    Dec 2011

    Posted 06 Apr 2013 Link to this post

    Hi,

    1.  I have some data that loads into a Kendo grid via the Ajax binding.

    2.   Within one of the columns there's a ClientTemplate that calls a javascript method (showAll).

    3.   This method will call an action and get the details of the data, putting it into a json response, and
    then open a jquery-ui dialog to show the details.

    4.   When the user clicks on the link in the grid the HttpGet is triggered for the GetDetails action BUT,
    the problem is, it is also triggered for the entire page's action (Index).

    The question, I guess, is what is causing the Index action to be triggered? Because, the dialog will show, the detailed data will populate, but once I close the dialog all the filter textboxes will be reset and the grid will reload and the data within it.

    Shouldn't the only action called be the GetDetails?

    Any hints will be greatly appreciated!

    Code:
    @(Html.Kendo().Grid<LogViewModel>()
        .Name("LogGrid")
        .Columns(column =>
        {
    column.Bound(x => x.StuffCount).Title("Stuff").Width(70)
                .ClientTemplate("<a onclick=\"showAll('" + "#= Id #')\"" + " href=''>#= StuffCount
    #</a>");
        })

        .DataSource(dataBinding => dataBinding
                    .Ajax()
                    .PageSize(50)
                    .Read(read => read.Action("GetData", "Summary")
                        .Data("getSearchFilters"))
                    .Model(model => model.Id(o => o.Id)))
                .Events(e => e
                    .DataBound("onGridItemsDatabound"))
                .Pageable(paging => paging.Refresh(true))
    )}

    <div id="dialog-message" title="" style="display: none">
        <p id="msg"></p>   
    </div>

    <script type="text/javascript">
        var showAll= function (id) {
            var url = '@Url.Action("GetDetails",
    "Summary")' + "/" + id;
            var sTitle = 'title text';
            $.getJSON(url, null,

                function (data) {
                    $("#dialog-message").dialog({ title: sTitle });
                    $("#msg").text(data.details);
                    showMessage();       
                });
        };

        var showMessage = function () {
            $("#dialog-message").dialog({
                modal: true,
                draggable: false,
                resizable: false,
                buttons: {
                    Ok: function() {
                        $(this).dialog("close");
                    }
                }
            });
        };
    </script>

    The controller methods
    (content removed for brevity

    public ActionResult Index(...)
    {
        ...
    }

    public ActionResult GetDetails(Guid id)
    {
        ... (get data from repository)
        return Json(data, JsonRequestBehavior.AllowGet);
    }
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 08 Apr 2013 Link to this post

    Hello,

     The problem is caused because the href of your link is set to empty string. This is treated as the current page url. Set the href to "#" ti avoid that or avoid using a link.

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Answer
    TBG
    TBG avatar
    4 posts
    Member since:
    Dec 2011

    Posted 08 Apr 2013 Link to this post

    Thanks!

    Your hint led me in the right direction:
    http://stackoverflow.com/questions/134845/href-attribute-for-javascript-links-or-javascriptvoid0

    I used href="javascript:void(0)" which fixed the issue.

Back to Top