ClientTemplate not working for inline dropdown

[Evan]

Hi there,

 

I am using a trial version to make sure it covers our project requirements. Will upgrade to full if this works.

 

I'm trying to display a dropdown for related data inline inside a grid. I've followed this link as closely as possible https://demos.telerik.com/aspnet-mvc/grid/editing-custom

 

But the ClientTemplate is not rendering the dropdown.

 

View:
@(Html.Kendo().Grid<GrindrodDataCapture.Models.RailConsignmentDetail>()
      .Name("grid")
      .Columns(columns =>
      {
          columns.Bound(c => c.LoadedWeight);
          columns.Bound(c => c.GrossWeight);
          columns.Bound(c => c.TareWeight);
          columns.Bound(c => c.Tarps);
          columns.Bound(c => c.Status).ClientTemplate("=Status.Name#");
          columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
      })
      .ToolBar(toolBar =>
      {
          toolBar.Create();
          toolBar.Save();
      })
      .Editable(editable => editable.Mode(GridEditMode.InCell))
      .Pageable()
      .Sortable()
      .Scrollable()

      .DataSource(dataSource => dataSource
          .Ajax()
          .Batch(true)
        .ServerOperation(false)
        .Events(events => events.Error("error_handler"))
          .Model(model =>
          {
              model.Id(rd => rd.ID);
              model.Field(rd => rd.ID).Editable(false);
              model.Field(rd => rd.Status).DefaultValue(ViewData["defaultStatus"] as GrindrodDataCapture.Models.ConsignmentDetailStatus);
          })
          .PageSize(20)
          .Read(read => read.Action("RailConsignmentDetails_Read", "RailDetailGrid", new { headerID = Request.Params["ConsignmentHeaderID"] }))
          .Create(create => create.Action("RailConsignmentDetails_Create", "RailDetailGrid"))
          .Update(update => update.Action("RailConsignmentDetails_Update", "RailDetailGrid"))
          .Destroy(destroy => destroy.Action("RailConsignmentDetails_Destroy", "RailDetailGrid"))
      )
)

Controller section:

 public class RailDetailGridController : Controller
    {
        private GrindrodContext db = new GrindrodContext();

        public ActionResult Manage(int ConsignmentHeaderID)
        {
            PopulateWagons();
            return View();
        }

 

 private void PopulateWagons()
        {
            ViewData["statuses"] = db.ConsignmentDetailStatuses;
            ViewData["defaultStatus"] = db.ConsignmentDetailStatuses.First();
        }

public ActionResult RailConsignmentDetails_Read([DataSourceRequest]DataSourceRequest request, int headerID)
        {

            IQueryable<RailConsignmentDetail> railconsignmentdetails = (from rd in db.RailConsignmentDetails
                                                                        where rd.RailConsignment.ID == headerID
                                                                        select rd).Include("Status");

            DataSourceResult result = railconsignmentdetails.ToDataSourceResult(request, railConsignmentDetail => new {
                ID = railConsignmentDetail.ID,
                LoadedWeight = railConsignmentDetail.LoadedWeight,
                GrossWeight = railConsignmentDetail.GrossWeight,
                TareWeight = railConsignmentDetail.TareWeight,
                Tarps = railConsignmentDetail.Tarps,
                Status = new ConsignmentDetailStatus ()
                {
                    ID = railConsignmentDetail.Status.ID,
                    Code = railConsignmentDetail.Status.Code,
                    Name = railConsignmentDetail.Status.Name,
                    NameLocal = railConsignmentDetail.Status.NameLocal,
                    Description = railConsignmentDetail.Status.Description,
                    IsOcean = railConsignmentDetail.Status.IsOcean,
                    IsRail = railConsignmentDetail.Status.IsRail,
                    IsRoad = railConsignmentDetail.Status.IsRoad

                }
            });

            return Json(result, JsonRequestBehavior.AllowGet);
        }

 

[Evan]

Here is the error:

 

kendo.all.js:198 Uncaught Error: Invalid template:'<tr data-uid="#=data.uid#" role='row'><td class="#= data && data.dirty && data.dirtyFields && data.dirtyFields['LoadedWeight'] ? ' k-dirty-cell' : '' #" role='gridcell'>#= data && data.dirty && data.dirtyFields && data.dirtyFields['LoadedWeight'] ? '<span class="k-dirty"></span>' : '' ##:data.LoadedWeight==null?'':data.LoadedWeight#</td><td class="#= data && data.dirty && data.dirtyFields && data.dirtyFields['GrossWeight'] ? ' k-dirty-cell' : '' #" role='gridcell'>#= data && data.dirty && data.dirtyFields && data.dirtyFields['GrossWeight'] ? '<span class="k-dirty"></span>' : '' ##:data.GrossWeight==null?'':data.GrossWeight#</td><td class="#= data && data.dirty && data.dirtyFields && data.dirtyFields['TareWeight'] ? ' k-dirty-cell' : '' #" role='gridcell'>#= data && data.dirty && data.dirtyFields && data.dirtyFields['TareWeight'] ? '<span class="k-dirty"></span>' : '' ##:data.TareWeight==null?'':data.TareWeight#</td><td class="#= data && data.dirty && data.dirtyFields && data.dirtyFields['Tarps'] ? ' k-dirty-cell' : '' #" role='gridcell'>#= data && data.dirty && data.dirtyFields && data.dirtyFields['Tarps'] ? '<span class="k-dirty"></span>' : '' ##:data.Tarps==null?'':data.Tarps#</td><td class="#= data && data.dirty && data.dirtyFields && data.dirtyFields['Status'] ? ' k-dirty-cell' : '' #" role='gridcell'>#= data && data.dirty && data.dirtyFields && data.dirtyFields['Status'] ? '<span class="k-dirty"></span>' : '' #=Status.Name#</td><td class="k-command-cell" role='gridcell'><a role="button" class="k-button k-button-icontext k-grid-edit"  href="\#"><span class="k-icon k-i-edit"></span>Edit </a><a role="button" class="k-button k-button-icontext k-grid-delete"  href="\#"><span class="k-icon k-i-close"></span>Delete</a></td></tr>' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='<tr data-uid="'+(data.uid)+'" role=\'row\'><td class="'+( data && data.dirty && data.dirtyFields && data.dirtyFields['LoadedWeight'] ? ' k-dirty-cell' : '' )+'" role=\'gridcell\'>'+( data && data.dirty && data.dirtyFields && data.dirtyFields['LoadedWeight'] ? '<span class="k-dirty"></span>' : '' )+''+$kendoHtmlEncode(data.LoadedWeight==null?'':data.LoadedWeight)+'</td><td class="'+( data && data.dirty && data.dirtyFields && data.dirtyFields['GrossWeight'] ? ' k-dirty-cell' : '' )+'" role=\'gridcell\'>'+( data && data.dirty && data.dirtyFields && data.dirtyFields['GrossWeight'] ? '<span class="k-dirty"></span>' : '' )+''+$kendoHtmlEncode(data.GrossWeight==null?'':data.GrossWeight)+'</td><td class="'+( data && data.dirty && data.dirtyFields && data.dirtyFields['TareWeight'] ? ' k-dirty-cell' : '' )+'" role=\'gridcell\'>'+( data && data.dirty && data.dirtyFields && data.dirtyFields['TareWeight'] ? '<span class="k-dirty"></span>' : '' )+''+$kendoHtmlEncode(data.TareWeight==null?'':data.TareWeight)+'</td><td class="'+( data && data.dirty && data.dirtyFields && data.dirtyFields['Tarps'] ? ' k-dirty-cell' : '' )+'" role=\'gridcell\'>'+( data && data.dirty && data.dirtyFields && data.dirtyFields['Tarps'] ? '<span class="k-dirty"></span>' : '' )+''+$kendoHtmlEncode(data.Tarps==null?'':data.Tarps)+'</td><td class="'+( data && data.dirty && data.dirtyFields && data.dirtyFields['Status'] ? ' k-dirty-cell' : '' )+'" role=\'gridcell\'>'+( data && data.dirty && data.dirtyFields && data.dirtyFields['Status'] ? '<span class="k-dirty"></span>' : '' )+'=Status.Name';</td><td class="k-command-cell" role='gridcell'><a role="button" class="k-button k-button-icontext k-grid-edit"  href="#"><span class="k-icon k-i-edit"></span>Edit </a><a role="button" class="k-button k-button-icontext k-grid-delete"  href="#"><span class="k-icon k-i-close"></span>Delete</a></td></tr>;$kendoOutput+=;}return $kendoOutput;'
    at Object.compile (kendo.all.js:198)
    at Object.d [as template] (jquery.min.js:2)
    at init._tmpl (kendo.all.js:61791)
    at init._templates (kendo.all.js:61888)
    at new init (kendo.all.js:57451)
    at HTMLDivElement.<anonymous> (kendo.all.js:2449)
    at Function.each (jquery.min.js:2)
    at n.fn.init.each (jquery.min.js:2)
    at n.fn.init.e.fn.(:50171/RailDetailGrid/anonymous function) [as kendoGrid] (https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js:26:4956)
    at HTMLDocument.<anonymous> (Manage?ConsignmentHeaderID=1:189)
compile @ kendo.all.js:198
d @ jquery.min.js:2
_tmpl @ kendo.all.js:61791
_templates @ kendo.all.js:61888
init @ kendo.all.js:57451
(anonymous) @ kendo.all.js:2449
each @ jquery.min.js:2
each @ jquery.min.js:2
e.fn.(anonymous function) @ kendo.all.js:2448
(anonymous) @ Manage?ConsignmentHeaderID=1:189
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
K @ jquery.min.js:2

[Evan]

OK I fixed it. It needed to be server side.

[ratnakar]

How did you fix it?

[Petar]

Hi Ratnakar,

Usually, the shared error appears because of a "#" symbol inside the Kendo Template which is not correctly escaped.

You can check this Hash literals article. It has details about how the hash literals that are not part of the Kendo Template can be escaped.   

If you don't manage to resolve the issue, I will need more details about your scenario and the error that you have.

Regards,
Petar
Progress Telerik