HeaderTemplate not working?

2 posts, 0 answers
  1. Leo
    Leo avatar
    20 posts
    Member since:
    Jan 2016

    Posted 05 Oct 2018 Link to this post

    Excellent Widget! Really appriciated, but somehow I can't seem to get the headertemplate working. I don't see it appear in the dropdown header. While i inspect the DOM with chrome  dev tools the 'HEADER' phrase is not found. It look's like this method does nothing. or am i mistaken?  And it would also be nice if the widget would have lambda selectors for allmost all property's. Most widget have these selectors, only using string selectors make it error prone (model change is not reflected in this string selector)

    @(Html.Kendo().MultiColumnComboBoxFor(m => m)
        .DataTextField("Afkorting")
        .DataValueField("idPersoneel")
        .Filter("contains")
        .FilterFields(new string[] { "Afkorting", "OpgemaakteNaam", "Team" })
        .Columns(columns =>
        {
            columns.Add().Field("Afkorting").Title("Afkorting").Width("50px");
            columns.Add().Field("OpgemaakteNaam").Title("Naam").Width("120px");
            columns.Add().Field("Team").Width("60");
            columns.Add().Field("Omvang").Width("50");
            columns.Add().Field("Resturen").Width("50");
        })
        .HeaderTemplate("HEADER")
        .FooterTemplate("Total \\#: instance.dataSource.total() \\# items found")
        .HtmlAttributes(new { style = "width:100%;" })
        .Height(500)
        .DataSource(ds =>
            {
                ds.Read(read => read.Action("Personeelsleden", "Personeel", new { Area = "Tabellen" }).Data("passPersoneel"));
                ds.Events(e => e.Error("DataSourceRequestErrorHandler"));
            }
        )
        .ToClientTemplate()
    )
  2. Patrick
    Admin
    Patrick avatar
    209 posts

    Posted 09 Oct 2018 Link to this post

    Hi Leo,

    First, thank you for the feedback pertaining to the Kendo UI MultiColumnComboBox!  

    Pertaining to your issue, here is one approach you can take to adding a header template to your MultiColumnComboBox:
    @(Html.Kendo().MultiColumnComboBox()
                  .Name("products")
                  .DataTextField("ProductName")
                  .DataValueField("ProductID")
                  .Columns(columns =>
                  {
                      columns.Add().Field("ProductName").Title("Name").Width("200px");
                      columns.Add().Field("ProductID").Title("ID").Width("200px");
                  })
                  .HeaderTemplate("<div id='myHeader'><h1>HEADER</h1></div>")
                  .Placeholder("Select Product")
                  .Filter("contains")
                  .AutoBind(false)
                  .DataSource(source => source
                        .Custom()
                        .Type("odata")
                        .ServerFiltering(true)
                        .Transport(transport => transport
                            .Read(read =>
                            {
                                read.Url("https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products");
                            })
                        )
                  )
    )

    Just like the Kendo UI DropDownList's headerTemplate, the header should be wrapped in an HTML tag when adding just a string/text.  

    I hope this information helps you with your application!  Thank you for choosing Telerik UI for ASP.NET MVC.

    Regards,
    Patrick
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top