[Solved] Use Ajax.ActionLink within Kendo Grid Client Template

[Mark]

I have a grid with parent records and when I click on a hyperlink in the Invoice Number column I want the child data to appear below the grid. I have nailed it down to the hashtag (#) symbol in the AjaxOptions for UpdateTargetId throws an invalid template exception and Telerik escape sequences (\\ and \\\\) do not work.

Grid is in partial view (_ExpenseGrid)

@(Html.Kendo().Grid(Model.ExpenseModels)
            .Name("ExpenseGrid")
            .DataSource(ds => ds
                .Ajax()
                .PageSize(5)
                .ServerOperation(false) // Paging, sorting, filtering and grouping will be done client-side
                .Model(model =>
                            {
                                // the unique identifier (primary key) of the model
                                model.Id(m => m.ExpenseId);
                                model.Field(f => f.ExpenseId).Editable(false);
                            })
                .Read(read => read.Action("GetExpenses", "Warehouse")
                                        )
            )
            .Columns(c =>
                        {
                            c.Bound(p => p.ExpenseId).Hidden();
                            c.Bound(p => p.DriverId).Hidden();
                            c.Bound(p => p.DriverName).Title("Contractor");
                            c.Bound(p => p.InvoiceNumber)
                                .ClientTemplate(Ajax.ActionLink(
                                                    "#= InvoiceNumber #",
                                                    "ExpenseDetail",
                                                    @ViewContext.RouteData.Values["controller"].ToString(),
                                                    new { @id = "#= ExpenseId #", @statusType = @Model.StatusType },
                                                    new AjaxOptions { UpdateTargetId = "targetDiv" }
                                                )
                                                .ToHtmlString());
                            c.Bound(p => p.InvoiceDate);
                            c.Bound(p => p.TotalSubmitted);
                            c.Bound(p => p.DateSubmitted);
                        })
            .Pageable(pager => pager.PageSizes(true)) // Enable paging

)

If I add a hashtag escaped or not to UpdateTargetId = "targetDiv" then the grid renders without the exception but Ajax fails to update the target Div because the data-ajax-update="targetDiv" when it should be data-ajax-update="#targetDiv"

Controller action

public ActionResult ExpenseDetail(int? id, string statusType)
        {
            ExpenseViewModel viewModel = new ExpenseViewModel();
            viewModel.SetStatusType(statusType);
            viewModel.ExpenseModels = GetExpenses(viewModel.StatusType);

            // load
            viewModel.ExpenseModel = LoadExpense(id);

            if (viewModel.StatusType == StatusType.Return)
                return View("ReturnedForm", viewModel);
            else
                return View("_ExpenseItemDetail", viewModel.ExpenseModel);
        }

The view that holds the target Div

@using DriverPayroll.BusinessEntities.Enums;
@model DriverPayroll.WebUI.Areas.Expense.Models.ExpenseViewModel

<h4>Expenses Submitted for Approval</h4>

<div class="row" style="padding: 1em 0em">
    <div class="col-md-12">
        @Html.Partial("_ExpenseGrid", Model)
    </div>
</div>

<div id="targetDiv">This is the Expense Grid target div.</div>

The resulting Exception

Unhandled exception at line 10643, column 7342 in eval code

0x800a139e - JavaScript runtime error: Invalid template:'<tr data-uid="#=data.uid#" role='row'><td style="display:none" role='gridcell'>#:data.ExpenseId==null?'':data.ExpenseId#</td><td style="display:none" role='gridcell'>#:data.DriverId==null?'':data.DriverId#</td><td  role='gridcell'>#:data.DriverName==null?'':data.DriverName#</td><td  role='gridcell'><a data-ajax="true" data-ajax-mode="replace" data-ajax-update="#targetDiv" href="/Expense/Warehouse/ExpenseDetail/#= ExpenseId #?statusType=Submit">#= InvoiceNumber #</a></td><td  role='gridcell'>#:kendo.format("{0:d\}",data.InvoiceDate==null?'':data.InvoiceDate)#</td><td  role='gridcell'>#:kendo.format("{0:C\}",data.TotalSubmitted==null?'':data.TotalSubmitted)#</td><td  role='gridcell'>#:kendo.format("{0:d\}",data.DateSubmitted==null?'':data.DateSubmitted)#</td></tr>' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='<tr data-uid="'+(data.uid)+'" role=\'row\'><td style="display:none" role=\'gridcell\'>'+$kendoHtmlEncode(data.ExpenseId==null?'':data.ExpenseId)+'</td><td style="display:none" role=\'gridcell\'>'+$kendoHtmlEncode(data.DriverId==null?'':data.DriverId)+'</td><td  role=\'gridcell\'>'+$kendoHtmlEncode(data.DriverName==null?'':data.DriverName)+'</td><td  role=\'gridcell\'><a data-ajax="true" data-ajax-mode="replace" data-ajax-update="';targetDiv" href="/Expense/Warehouse/ExpenseDetail/;$kendoOutput+='= ExpenseId ';?statusType=Submit">;$kendoOutput+='= InvoiceNumber ';</a></td><td  role='gridcell'>;$kendoOutput+=':kendo.format("{0:d}",data.InvoiceDate==null?\'\':data.InvoiceDate)';</td><td  role='gridcell'>;$kendoOutput+=':kendo.format("{0:C}",data.TotalSubmitted==null?\'\':data.TotalSubmitted)';</td><td  role='gridcell'>;$kendoOutput+=':kendo.format("{0:d}",data.DateSubmitted==null?\'\':data.DateSubmitted)';</td></tr>;$kendoOutput+=;}return $kendoOutput;'

Any ideas on how to get this to work?

[Dimiter Madjarov]

Hello Mark,

Since the current Grid is using ajax binding i.e. the rows are rendered on the client, the Ajax.ActionLink method cannot be used. It is recommended to use Url.Action in order to add an action link and manually add the required data-ajax attributes.

Regards,
Dimiter Madjarov
Telerik

 

 

[Mark]

Oh ok, thanks I will look into the alternative methodology.