Combining ItemTemplates and IsSeparator Items

9 posts, 0 answers
  1. Shaun Peet
    Shaun Peet avatar
    571 posts
    Member since:
    Aug 2004

    Posted 15 Dec 2010 Link to this post

    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?
  2. Shaun Peet
    Shaun Peet avatar
    571 posts
    Member since:
    Aug 2004

    Posted 15 Dec 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 21 Dec 2010 Link to this post

    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
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  5. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 21 Dec 2010 Link to this post

    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.
  6. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 21 Dec 2010 Link to this post

    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
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  7. Shaun Peet
    Shaun Peet avatar
    571 posts
    Member since:
    Aug 2004

    Posted 21 Dec 2010 Link to this post

    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.
  8. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 21 Dec 2010 Link to this post

    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.
  9. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 22 Dec 2010 Link to this post

    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
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  10. Shaun Peet
    Shaun Peet avatar
    571 posts
    Member since:
    Aug 2004

    Posted 22 Dec 2010 Link to this post

    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.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>
    <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>
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017