MVC Grid Client Template with multiple input values

[Michael]

Here is the grid:

this.Html.Kendo().Grid<Model>()
      .Name("grid")
      .Filterable()
      .ColumnMenu()
      .Sortable()
      .Groupable()
      .ToolBar(commands => { commands.Custom().Name("foo").Text("Perform Action").Action("PerformAction", "ViewPayrollEmployeeDetail"); })
      .Scrollable(scrollable => scrollable.Height(430))
      .Columns(col =>
      {
          col.Bound(x => x.CompanyId).Visible(false);
          col.Template(x => x.CompanyName).ClientTemplate(Html.ActionLink("#= CompanyName #>", "Update", "AppCompany", new { id = "#= CompanyId #", panel = 1 }, null).ToHtmlString()).Width(120);
      })
      .Pageable(pageable => pageable
          .ButtonCount(5)
          .Info(true))
      .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(25)
          .Read(read => read.Action("GetData", "EmployeeHistory").Data("sendAntiForgery")))

As you can see, I am trying to use CompanyName and CompanyId to render the ActionLink.

When the grid renders, I get this error in javascript:

Uncaught ReferenceError: companyid is not defined

CompanyId is in a nav property a couple of domain model levels down, but I have mapping set up with Deflattening so Kendo knows where to find it for sorting/grouping, etc.

The question is, am I doing this right, and how can I get this to work?  We use these kinds of links everywhere in our current grids, so getting this to work is very important for us.

Thanks!

Mike

[Alexander Popov]

Hi Mike,

In case the CompanyID field is at the root level of the Grid's model it should be rendered in the ActionLink. I tried to reproduce this behavior, but as you can see in this screencast - everything works as expected.
Could you please verify that CompanyID is indeed at the root level by running this in the browser's console after the Grid is populated: 

$("#grid").data("kendoGrid").dataSource.options.schema.model.fields

Regards,
Alexander Popov
Telerik

 

 

[Michael]

Thank you for getting back to me.

It looks like CompanyId is there:

Object {DetailId: Object, EmployeeSSN: Object, Number: Object, EmployeeName: Object, GrossAmount: Object…}AppCompanyPaymentDetailId: ObjectAppCompanyPaymentId: ObjectAppNoteId: ObjectCanDelete: ObjectCanEdit: ObjectCategory: ObjectCheckDate: ObjectCompanyId: Objecteditable: falseparse: function (e){return st.parseFloat(e)}type: "number"__proto__: ObjectCompanyName: Object

It looks like you are Binding the column, and then doing it as a Template for ProduceName.  I attempted the same, but to no avail.  I also noticed that ProductId is not a part of your grid Bound columns.  I removed my reference to CompanyId and still nothing.

Here is where company is called for in the VM (I did try removing the scaffoldcolumn attr as well):
[ScaffoldColumn(false)]
public long CompanyId
{
get
{
if (this.DomainModel.AppCompanyPaymentDetail.AppCompanyPayment != null &&
this.DomainModel.AppCompanyPaymentDetail.AppCompanyPayment.AppCompany != null)
{
return this.DomainModel.AppCompanyPaymentDetail.AppCompanyPayment.AppCompanyId;
}

return 0;
}
}

There is a mapping for CompanyId which I setup so I can filter/group/sort:

    KendoDBMapping.Add("CompanyId", "AppCompanyPaymentDetail.AppCompanyPayment.AppCompanyId");

It is possible I'm missing a js file?  I have the latest Q1 2014 update (on a Trial at the moment), and here are the files I have referenced:

<link href="<%: Url.Content("~/Content/Kendo/styles/kendo.common-bootstrap.min.css") %>" rel="Stylesheet"/>
    <link href="<%: Url.Content("~/Content/Kendo/styles/kendo.default.min.css") %>" rel="Stylesheet"/>
    <link href="<%: Url.Content("~/Content/Kendo/styles/kendo.blueopal.min.css") %>" rel="Stylesheet"/>
    <script src="<%: Url.Content("~/Scripts/JQuery/jquery.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/Kendo/kendo.all.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/Kendo/kendo.aspnetmvc.min.js") %>" type="text/javascript"></script>

[Michael]

If you could maybe zip up the solution you used in the screencast, I could compare it to mine.  

[Michael]

Ok, starting to understand what is going on here.  If I use just Id (instead of CompanyId), it works.  Id is part of the parent domain model object, but CompanyId is a in a child DM a couple of levels deep (DM.thing.thing.CompanyId)... which works fine for rendering the VM property and in spite of the mapping, (#= #) cannot find CompanyId.  So I think I just have to tinker with it and see what format it will accept, whether its a change in my VM or in the grid (#= #) syntax.

If you know of the fix, please share, otherwise I'll post what I find once I get it working.

Thanks again!

[Michael]

Nevermind on the nav property difference.  I have other properties that are part of the parent model, but I get the same js error.

This should be basic functionality, yet its a royal pain to get it to work.

I really think you need more in depth exmaples on your all of your demos, and not just vanilla ones.  Most of what us developers do is not just straight out of the box solutions.

[Michael]

Lol.... this does not even work:

col.Template(x => x.CompanyName).ClientTemplate(Html.ActionLink("#= CompanyName #", "Update", "AppCompany", new { id = "#= CompanyName #", panel = 1 }, null).ToHtmlString()).Width(120);

I'm referencing the same CompanyName in both the link text, and the idvalue, and it says it cannot find CompanyName.

A little help??  I'm losing my mind!!

[Alexander Popov]

Hello again Mike,

The code you shared below is perfectly valid and works as expected when I used it in our example project (located in the Kendo UI installation path\wrappers\aspnetmvc\Examples directory), so I am not sure what exactly is causing the error. Could you please provide a runnable sample project where the issue is observed? This would allow us to reproduce it locally and advise you further.

Regards,
Alexander Popov
Telerik

 

 

[Neil]

I get the same problem, it's not evaluating.. the "id" is from a text input bound to a viewmodel.
The viewmodel has a value..

 

[Peter Milchev]

Hello Neil,

The error shows that the engine is trying to evaluate the #grdChildItems#=id# expression which is not a correct one. If the #grdChildItems should be "an element with id grdChildItems" selector, then the first hash should be escaped as explained below: 

• https://docs.telerik.com/kendo-ui/framework/templates/overview#hash-literals - If your template includes a literal # character, which is not part of a binding expression and is not a script code marker, then you must escape that character or it causes a template compilation error. For example, this can happen if a # is used inside a hyperlink URL or a CSS color value. Literal # in JavaScript strings are escaped via \\\\#, while literal # in external HTML script templates are escaped via \\#.

• //#grdChildItems#=id#

If the issue persists, please share a simple runnable project or a dojo example replicating the issue in an official support ticket. That would allow us to investigate locally your exact scenario and help you more efficiently.

Regards,
Peter Milchev
Progress Telerik