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

[TBG]

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

[Atanas Korchev]

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

[TBG]

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.