Combining ItemTemplates and IsSeparator Items

[Shaun Peet]

I'm trying to bind data to the combobox using my own ITemplate and then insert new items as separators to simulate grouping of the items in the list.  My tests so far have indicated that while it is possible to add a separator to the list of items after databinding, the text of the inserted item does not show.  What I'd like the list of items to look like is something like:

* Separator Item (With Text Showing)
* Templated Item
* Templated Item
* Separator Item (With Text Showing)
* Templated Item
* Templated Item
* Templated Item

I've got a bunch of client-side events hooked in - all of which work great - which is why I figured it would be easiest to add separator items since they can't be clicked.  But without the text in the separator item the groups don't make sense.  Any ideas?

[Shaun Peet]

I've found a work-around (although it seems more like a hack to me).  What I've done is added an attribute to the separator item, and then added script on the client to execute upon page load to loop through all the items in the combobox, and if an item is a separator, then use get_element() to set the innerHTML of the item to the value of the attribute:

function set_separators(rcb) {
  for (var i = 0; i < rcb.get_items().get_count(); i++) {
    var item = rcb.get_items().getItem(i);
    if (item.get_isSeparator()) {
      var txt = item.get_attributes().getAttribute("GroupName");
     item.get_element().innerHTML = txt;
    }
  }
}

That seems quick hack-ish.  The fact that the text of a separator item isn't showing up seems more like a bug than anything else.  Viewing the source after loading the page, the separator item is rendered as <li class="rcbItem rcbSeparator rcbTemplate"></li>.  So it's not trying to apply a template, but it's also not setting the text either.

[Kalina]

Hello Shaun Peet,

When you add the separator item after databinding - the template that you use will not be applied to it.
The templates are applied at databinding.
I can see that you have found a client-side solution to this issue.
Maybe if you explain your implementation in more details and send me a simplified project to illustrate it - I will be able to suggest another approach to overcome this obstacle.

Best wishes,
Kalina
the Telerik team

[Cori]

Hello Kalina,

What I believe he is trying to do is something similar the optgroup available to the standard HTML select tag. When you add an optgroup, the items contained within are group under it, but its text is not selectable. It's something I don't the think the standard asp:DropDownList can do, but it would be cool to have a grouping feature for the RadComboBox to achieve these kinds of scenarios.

I hope that's a good explanation of what Shaun is trying to do.

[Simon]

Hi Cori,

Thank you for your input.

RadComboBox supports 'separator' Items which act in the same way as the optgroup element. However, in Shaun's case, the text of the separator does not render - what is rendered is the content of the ItemTemplate. So, one can call the DataBind method of that separator Item to apply its template.

What we can do is to always render the Text property of separators, even in cases an ItemTemplate is specified (the latter will be applied only to normal Items). However some users may expect just the other way around.

What do you think should happen with a separator Item when ItemTemplate is defined?

All the best,
Simon
the Telerik team

[Shaun Peet]

Well since the text property probably isn't used when using templates and databinding, it's likely that anyone trying to explicity set the text on a non-databound item like a separator *does* want it to show.

So my vote is to show the text.

[Cori]

I would agree with Shaun about showing the Text property for a separator, but to accomodate for those that don't want it to show I think you should add another template, SeparatorTemplate, which would handle the rendering of the separators. That way it can show whatever property they want.

[Simon]

Hello again,

@Shaun Actually the Text property can be used during data binding with the DataBinder.Eva.(Container, "Text") expression. Some people use it along with Custom Attributes. Still showing the Text property to separator Items is normal and not doing so when defining an ItemTemplate is a mistake.

So, Cori's suggestion here comes into place and this is actually the thing we were thinking about as well. We will introduce the SeperatorTemplate property in the future.

Regards, Simon
the Telerik team

[Shaun Peet]

Just in case anyone is interested, here's a self-contained sample page to play with:

<%@ Page Language="VB" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

  Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs)
    RadComboBox1.ItemTemplate = New ComboItemTemplate()
  End Sub

  Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
    ' Load some dummy data
    RadComboBox1.DataSource = LoadDummyData()
    RadComboBox1.DataBind()
    ' Insert some separators
    For i As Integer = 0 To 2
      Dim separator As New RadComboBoxItem("Group #" & i & " Name")
      separator.IsSeparator = True
      RadComboBox1.Items.Insert(i * 4, separator)
    Next
  End Sub

  Private Function LoadDummyData() As List(Of BindableObject)
    LoadDummyData = New List(Of BindableObject)
    For i As Integer = 0 To 10
      Dim obj As New BindableObject
      obj.ID = i
      obj.IconUrl = "http://www.telerik.com/libraries/banners/end_to_end_solution_diagram.sflb"
      obj.Title = "Title For Item " & i
      obj.Description = "This is the description for the item with a number of " & i & ".  Hello World!"
      LoadDummyData.Add(obj)
    Next
  End Function

  Public Class BindableObject
    Public Property ID As Integer
    Public Property IconUrl As String
    Public Property Title As String
    Public Property Description As String
  End Class

  Public Class ComboItemTemplate
    Implements ITemplate

    Public Sub InstantiateIn(ByVal container As System.Web.UI.Control) Implements System.Web.UI.ITemplate.InstantiateIn
      Dim lit As New Literal
      lit.EnableViewState = False
      AddHandler lit.DataBinding, AddressOf BindItem
      container.Controls.Add(lit)
    End Sub

    Private Sub BindItem(ByVal sender As Object, ByVal e As EventArgs)
      Dim lit As Literal = CType(sender, Literal)
      Dim ctr As RadComboBoxItem = CType(lit.NamingContainer, RadComboBoxItem)
      Dim obj As BindableObject = CType(ctr.DataItem, BindableObject)
      Dim sb As New StringBuilder
      sb.Append("<img src=""" & obj.IconUrl & """ alt=""Page Type Preview"" style=""float:left; height:40px; width: 40px; margin: 4px;"" />")
      sb.Append("<h3>" & obj.Title & "</h3>")
      sb.Append(obj.Description)
      lit.Text = sb.ToString
      sb = Nothing
    End Sub
  End Class

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
</head>
<body>
  <form id="form1" runat="server">
  <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
  </telerik:RadScriptManager>
  <div>
    <telerik:RadComboBox ID="RadComboBox1" runat="server" HighlightTemplatedItems="true" Width="180px" DropDownWidth="600px" Height="400px" DataTextField="Title" DataValueField="ID">
    </telerik:RadComboBox>
  </div>
  </form>
</body>
</html>

[Roger]

Hello

There is no SeparatorTemplate yet, and I guess it will be never be implemented, right? Or is there an open change request?

I was hoping that DataBinder.Eval(Container, "Text") would work for separator items, however, as mentioned before the ItemTemplate is only called for databound items.

So, the only way is currently using the hack with Javascript by Shaun?

Thanks,

Roger

[Peter Milchev]

Hello Roger,

You can check the following HowTo article that shows how you can achieve the "Grouping appearance":

• https://docs.telerik.com/devtools/aspnet-ajax/controls/combobox/how-to/grouping-items 

Then, you can use CSS to further customize the appearance of the regular items (.rcbItem) or separators (.rcbSeparator).

Regards,
Peter Milchev
Progress Telerik