kendo hierarchical grid Client template does not support @Ajax.actionLink

[Srikanth]

I have following hierarchical grid using template. 
Ajax link does not work moment I add  { UpdateTargetId  = "mainBody" } to AJAX option.
It seems the client template doesn't like # in front of data-ajax-update [ data-ajax-update=\"#mainBody\"]

Any workaround, I tried replacing it with its unicode value but it din't worked.
Please help.

<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<STAR.EPIC.Models.GNMA.LoanViewModel>()
          .Name("exceptionsGrid_#=ExceptionQueueId#")
          .HtmlAttributes(new { style = "width:30%;" })
          .Columns(columns =>
              {
                  columns.Bound(p => p.id).Width(100)
                  .ClientTemplate(@Ajax.ActionLink("\\#=id\\#", "LoanDetail", "LoanDetail", 
                                                     new
                                                         {
                                                             Id = "\\#=LoanNumber\\#", 
                                                         }, new AjaxOptions() { UpdateTargetId  = "mainBody" }).ToHtmlString());
              })
          .DataSource(dataSource => dataSource
                                        .Ajax()
                                        .Read(read => read.Action("GetLoansForException", "LoanCollection", new { ExceptionQueueId = "#=ExceptionQueueId#", }))
          ).ToClientTemplate()
          )

</script>

[Jayesh Goyani]

PLease try with below Code Snippet.

@Ajax.ActionLink("Test1", "Test1", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "test1Div" }).ToHtmlString()
<div id="test1Div">
</div>
<div>
    @(Html.Kendo().Grid<MvcApplication1.Models.TestModels>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.ID);
            columns.Bound(p => p.Name);



        })
                                      .Filterable()
                                      .Sortable()

                                                .ClientDetailTemplateId("template")
                                      .DataSource(dataSource => dataSource
                                          .Ajax()

                                                  .Read(read => read.Action("Grid_Read", "Home"))
                                           .Model(model => { model.Id(p => p.ID); })
                                      )
                                  )
</div>
<script id="template" type="text/kendo-tmpl">

    @(Html.Kendo().Grid<MvcApplication1.Models.TestFullCalender>()
            .Name("grid_#=ID#")
            .Columns(columns =>
            {
                columns.Bound(o => o.id).Width(70);
                columns.Bound(o => o.title).Width(70);
                columns.Template(@<text></text>).ClientTemplate("<a name='ajaxa' data-ajax='true' data-ajax-method='POST' data-ajax-mode='replace' href='/Home/Test1'>#=id #</a>");
            })
            .DataSource(dataSource => dataSource
                .Ajax()

                .PageSize(5)
                .Read(read => read.Action("Grid_ReadChild", "Home", new { ID = "#=ID#" }))
            )
            .Pageable()
             .Events(events => events.DataBound("_ItemDataBound"))
            .Sortable()
            .ToClientTemplate()
    )

</script>
<script type="text/javascript">
    function _ItemDataBound(e) {

        if (e.sender.dataSource._data.length > 0) {
            $('a[name=ajaxa]').each(function () {

                $(this).attr('data-ajax-update', '#test1Div');

            });


        }
    }
</script>

public class HomeController : Controller
    {
        public ActionResult Index()
        {


            ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";

            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your app description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

        public ActionResult Grid_Read([DataSourceRequest] DataSourceRequest request)
        {
            List<TestModels> models = new List<TestModels>();

            for (int i = 1; i < 6; i++)
            {

                TestModels model = new TestModels();
                model.ID = i;
                model.Name = "Name" + i;
                models.Add(model);

            }

            return Json(models.ToDataSourceResult(request));
        }

        public ActionResult Grid_ReadChild([DataSourceRequest] DataSourceRequest request, int ID)
        {
            List<TestFullCalender> models = new List<TestFullCalender>();

            for (int i = 1; i < 6; i++)
            {

                TestFullCalender model = new TestFullCalender();
                model.id = i.ToString();
                model.title = "title" + i;
                models.Add(model);

            }

            return Json(models.ToDataSourceResult(request));
        }

        [HttpPost]
        public ActionResult Test1()
        {
            return PartialView("_Test1");
        }

    }

public class TestModels
{
    public int ID { get; set; }
    public string Name { get; set; }
    public bool IsActive { get; set; }
    public int FID { get; set; }
}

public class TestFullCalender
{
    public string id { get; set; }
    public string title { get; set; }
}

Note : By using ToHtmlString(), I get the rendered mark up and then i have assigned this markup into ClientTemplate.

@Ajax.ActionLink("Test1", "Test1", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "test1Div" }).ToHtmlString()

[Dimiter Madjarov]

Hi Srikanth,


If you want to use a property in the ActionLink route values, you could use some kind of placeholder and then replace it as demonstrated in the following forum thread.

You could also use the approach from the previous post and add the markup directly. Then you should escape the hash symbol.
E.g.

columns.Bound(o => o.id).ClientTemplate(@"<a name='ajaxa' data-ajax='true' data-ajax-update='\\\#test1Div' data-ajax-method='POST' data-ajax-mode='replace' href='/Home/Test1'>\#=id\#</a>");

 

All the best,
Dimiter Madjarov
the Telerik team