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

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

2 Answers 746 Views
Grid
This is a migrated thread and some comments may be shown as answers.
TBG
Top achievements
Rank 1
TBG asked on 06 Apr 2013, 03:45 PM
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 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 08 Apr 2013, 08:40 AM
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!
0
Accepted
TBG
Top achievements
Rank 1
answered on 08 Apr 2013, 02:15 PM
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.

Tags
Grid
Asked by
TBG
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
TBG
Top achievements
Rank 1
Share this question
or