MVC Grid Client Template with multiple input values

10 posts, 0 answers
  1. Michael
    Michael avatar
    9 posts
    Member since:
    Aug 2012

    Posted 25 Mar 2014 Link to this post

    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
  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1445 posts

    Posted 27 Mar 2014 Link to this post

    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
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  3. Michael
    Michael avatar
    9 posts
    Member since:
    Aug 2012

    Posted 27 Mar 2014 in reply to Alexander Popov Link to this post

    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>
  4. Michael
    Michael avatar
    9 posts
    Member since:
    Aug 2012

    Posted 27 Mar 2014 in reply to Michael Link to this post

    If you could maybe zip up the solution you used in the screencast, I could compare it to mine.  
  5. Michael
    Michael avatar
    9 posts
    Member since:
    Aug 2012

    Posted 27 Mar 2014 Link to this post

    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!
  6. Michael
    Michael avatar
    9 posts
    Member since:
    Aug 2012

    Posted 27 Mar 2014 Link to this post

    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.
  7. Michael
    Michael avatar
    9 posts
    Member since:
    Aug 2012

    Posted 27 Mar 2014 Link to this post

    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!!
  8. Alexander Popov
    Admin
    Alexander Popov avatar
    1445 posts

    Posted 31 Mar 2014 Link to this post

    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
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  9. Neil
    Neil avatar
    38 posts
    Member since:
    Dec 2019

    Posted 29 Jan 2020 in reply to Michael Link to this post

    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..

     

  10. Peter Milchev
    Admin
    Peter Milchev avatar
    911 posts

    Posted 31 Jan 2020 Link to this post

    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

    Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Back to Top