[Solved] Custom Ajax command in Ajax data-bound grid: 'xhr not found'

[Sebastian]

I'm trying to:

1. load grid asynchronously with Ajax
2. add a custom command in every row - command should pop row's details in window control (asynchronously with Ajax as well)

It works perfectly as long as grid is load synchronously, but it fails when I change binding mode.

@(Html.Telerik().Grid<VouChest.DataContract.ExamType>()
        .Name("ExamTypes")
        .DataKeys(n => n.Add(o => o.Id))
        .ToolBar(cmd => cmd.Custom()
                                               .Name("Create")
                                               .Text("Create")
                                               .Ajax(true)
                                               .Action("Create", "ExamType")
        .HtmlAttributes(new { @class = "detailsLink" }))
        .DataBinding(db => db.Ajax()
                                                 .Select("_List", "ExamType"))
        .Columns(p =>
                 {
                     p.Bound(q => q.Code);
                     p.Bound(q => q.Description);
                     p.Bound(q => q.IsActive);
                     p.Command(q =>
                               {
                                   q.Custom("Details")
                                     .Text("Details")
                                     .Ajax(true)
                                     .Action("Details",
                                                   "ExamType")
                                     .HtmlAttributes(new { @class = "detailsLink" }).DataRouteValues(route => route.Add(o => o.Id));
                               })
                         .Width(272);
                 })
        .Scrollable(s => s.Height(440))
        .Sortable()
        .Selectable()
        .Pageable(p => p.PageSize(24).Style(GridPagerStyles.NextPreviousAndDropDown))
        .Filterable()
        .Groupable()
        .Footer(true)
        .Resizable(resizing => resizing.Columns(true)))

Funny thing is that the command in toolbar works perfectly, but the command in row doesn't. Here's the script I use for loading content in window:

<script type="text/javascript">
    $(function () {
        $('.detailsLink').click(function () {

            $('#detailsContent').ajaxComplete(function () {
                $('#detailsWindow').data('tWindow').center();
                $('#detailsWindow').show();
                $('#detailsContent').ajaxComplete(function () {
                    return false;
                });
                return false;
            });

            $('#detailsContent').load(this.href);
            return false;

        });
    });
</script>

At last, but not least - the error message: "xhr is not defined" in dynamic content ("asset.axd?id=...").

Do you have any ideas what did I do wrong? Thanks in advance.

[Dadv]

Hi,

As I know .Ajax(true) is only for internal Telerik use to explain the return method type (client or server).

If you want to use external javascript function you probably better use MVC in built ajax method, look at this for more information.

[Sebastian]

Thank you very much Dadv, the link you've posted has indeed helped in solving this issue.
To be very honest, I've seen it earlier and I went through it, but I've missed the most important part - the extension you proposed...

To summarize: I owe you one :)

[Dadv]

You're welcome :)
I just made a mistake in another thread ... to err is human ^ ^