This is a migrated thread and some comments may be shown as answers.

ClientTemplate not working for inline dropdown

4 Answers 54 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Evan
Top achievements
Rank 1
Evan asked on 04 Jan 2019, 10:01 AM

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

 

4 Answers, 1 is accepted

Sort by
0
Evan
Top achievements
Rank 1
answered on 04 Jan 2019, 10:02 AM

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

0
Evan
Top achievements
Rank 1
answered on 04 Jan 2019, 11:30 AM
OK I fixed it. It needed to be server side.
0
ratnakar
Top achievements
Rank 1
answered on 11 Feb 2021, 08:09 AM
How did you fix it?
0
Petar
Telerik team
answered on 12 Feb 2021, 02:28 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Evan
Top achievements
Rank 1
Answers by
Evan
Top achievements
Rank 1
ratnakar
Top achievements
Rank 1
Petar
Telerik team
Share this question
or