[Solved] Trying to recreate ComboBox Checkbox Template

[Fred]

Ok I'm trying to do something similar to the Demo http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/templates/defaultcs.aspx

Where you select a checkbox, and the javascript loops through the treeview nodes, and finds what it appears to be matching ID's that match the checkboxes you selected.

I'm having problems re-creating this with my data.

Table 1:

StateID

Description

Table 2:

CreditTypeID

Description

Table 3:

StateToCreditTypeID

StateID

CreditTypeID

Joined Select Statement from all three tables gives me:

Table 4:

StateToCreditTypeID

StateID

StateDescription

CreditTypeID

CreditTypeDescription

So when I bind my treeview I get repeats because some states go to more then one CreditType

First issue, was I don't have a parent node in the treeview, so I commented out that part of the JS.

It sorta of works, except I have 3 CreditTypes, but some of then apply to more the one state, so I have 9 repeated CreditTypes in the treeview. 

How can I limit my list to the three CreditTypes I actually have, but still allow the checkboxes to show/hide which ones apply?

There a way to do this on server side instead?

                    <telerik:RadComboBox ID="RadComboBox1" runat="server" EmptyMessage="All Types" HighlightTemplatedItems="true"
                        AllowCustomText="true" Width="240px" OnClientDropDownClosed="onDropDownClosing">
                        <ItemTemplate>
                            <div onclick="StopPropagation(event)" class="combo-item-template">
                                <asp:CheckBox runat="server" ID="chk1" Checked="true" onclick="onCheckBoxClick(this)"/>
                                <asp:Label runat="server" ID="Label1" AssociatedControlID="chk1">
                                    <%# Eval("Description") %>
                                </asp:Label>
                            </div>
                        </ItemTemplate>
                    </telerik:RadComboBox>


                    <telerik:RadComboBox ID="RadComboBox2" Width="240px" Height="300px"
                        AllowCustomText="true" EmptyMessage="Showing all Credit Types" OnClientDropDownClosing="OnClientDropDownClosingHandler"
                        runat="server">
                        <ItemTemplate>
                            <div onclick="StopPropagation(event)">
                                <telerik:RadTreeView ID="RadTreeView1" runat="server"
                                    OnClientNodeClicking="OnClientNodeClickingHandler">
                                    <DataBindings>
                                        <telerik:RadTreeNodeBinding Depth="0" Category="Credit Type" />
                                    </DataBindings>
                                </telerik:RadTreeView>
                            </div>
                        </ItemTemplate>
                        <Items>
                            <telerik:RadComboBoxItem />
                        </Items>
                    </telerik:RadComboBox>

            <asp:LinkButton ID="Button1" runat="server" Text="Select" />
           <p />
           <asp:Label runat="server" ID="SelectedTypeLabel" /><br />
           <asp:Label runat="server" ID="SelectedCarLabel" />

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            'RadComboBox1.DataBind()
            LoadStateFilter()
            LoadCreditTypeFilter()
        End If
    End Sub



    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        'holds the text of the checked items
        Dim checkedText As String = String.Empty
        For Each item As RadComboBoxItem In RadComboBox1.Items
            Dim chk As CheckBox = DirectCast(item.FindControl("chk1"), CheckBox)
            If chk.Checked Then
                checkedText += item.Text + ", "
            End If
        Next
        SelectedTypeLabel.Text = checkedText.Trim().TrimEnd(","c)

        'find the treeview
        Dim tree As RadTreeView = DirectCast(RadComboBox2.Items(0).FindControl("RadTreeView1"), RadTreeView)
        If tree.SelectedNode IsNot Nothing Then
            SelectedCarLabel.Text = tree.SelectedNode.Text
        End If
    End Sub

    Private Sub LoadStateFilter()

        Dim oState As New LextrovertBrain.State(Utility.AppConnString)

        RadComboBox1.DataSource = oState.List
        RadComboBox1.DataTextField = "Description"
        RadComboBox1.DataValueField = "StateID"
        RadComboBox1.DataBind()
        'RadComboBox1.Items.Insert(0, New RadComboBoxItem("- Select States -"))
        oState = Nothing

        'Throw New NotImplementedException()
    End Sub

    Protected Sub LoadCreditTypeFilter()

        'Dim oCreditType As New LextrovertBrain.CreditType(Utility.AppConnString)
        Dim oStateToCreditType As New LextrovertBrain.StateToCreditType(Utility.AppConnString)

        Dim radTV As RadTreeView = DirectCast(RadComboBox2.Items(0).FindControl("RadTreeView1"), RadTreeView)

        radTV.DataSource = oStateToCreditType.List(True)
        radTV.DataTextField = "CreditTypeDescription"
        radTV.DataValueField = "StateID"
        radTV.DataFieldID = "CreditTypeID"
        'radTV.DataFieldParentID = "CreditTypeID"
        radTV.DataBind()
        'RadComboBox2.DataSource = oCreditType.List
        'RadComboBox2.DataTextField = "Description"
        'RadComboBox2.DataValueField = "CreditTypeID"
        'RadComboBox2.DataBind()
        'RadComboBox2.Items.Insert(0, New RadComboBoxItem("- Select Credit Types -"))
        oStateToCreditType = Nothing

    End Sub

[Fred]

Or maybe I want to limit my second treeview dropdown based on what's selected in the first.

If all states are selected I want to only show the ones that work with all states.

Seems that requires more logic then just looping through the tree and getting a matching value.

i was looking at server side ondemand loading, but not sure what event to fire after the combobox1 is closed to databind the treeview.  Seems like I might need to do it client side and then do a dopostback call or something.

[Fred]

Ok I think I found a way to do what I want.

New Question is, on combobox ItemsRequested, after the request event fire, it doesn't fire anymore. Is there a way to reset the box so it fires again?  The items load based on what's selected in a previous combox box, but if you go back to the first and change it and go back to this one, it doesn't re-fire the itemsrequested event.

[Fred]

Ok figured everything out I needed to figure out so far...

Except for one thing.

If you check the checkboxes in the first combobox, the code behind doesn't recognize them checked or unchecked. They are all True or all False if I take off the initial checked=true property.

So I never get just the boxes checked. It's as if clicking on them doesn't really set the value.

    Protected Sub RadComboBox2_ItemsRequested(ByVal o As Object, ByVal e As Telerik.Web.UI.RadComboBoxItemsRequestedEventArgs) Handles RadComboBox2.ItemsRequested

        Dim StateIDs As String = "0"

        For Each Item As RadComboBoxItem In RadComboBox1.Items
            Dim chk1 As CheckBox = TryCast(Item.FindControl("chk1"), CheckBox)
            If chk1 IsNot Nothing Then
                If chk1.Checked Then
                    StateIDs &= "," & Item.Value
                End If
            End If
        Next

        LoadCreditTypes(StateIDs)
    End Sub

[Veselin Vasilev]

Hi Fred,

This is because of the nature of the callbacks. You need to subscribe to the OnClientItemsRequesting event of the second combo and get the checked items from the first combo in a string. Then assign this string to the context object which later can be accessed in the ItemsRequested server event of the second combo.

Sincerely yours,
Veselin Vasilev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.