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

HeaderTemplate not working?

1 Answer 373 Views
MultiColumnComboBox
This is a migrated thread and some comments may be shown as answers.
Leo
Top achievements
Rank 1
Leo asked on 05 Oct 2018, 06:32 PM
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()
)

1 Answer, 1 is accepted

Sort by
0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 09 Oct 2018, 03:29 PM
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.
Tags
MultiColumnComboBox
Asked by
Leo
Top achievements
Rank 1
Answers by
Patrick | Technical Support Engineer, Senior
Telerik team
Share this question
or