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

RadPanelBar in RadView - Click

1 Answer 61 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Ron H
Top achievements
Rank 1
Ron H asked on 08 Jan 2016, 03:15 PM

I have a RadView and I add data and controls to it. There is a checkbox and two labels.  I also add in a Rad Panel to allow for collapse/expand of a RadEditor.  All seems to work, except the click event.  I need two clicks to expand the RadPanelItem (once it seems to get focus and then the second to open) This only happens once - after that a single click expands and then a single click collapses the RadPanel.  Also the down arrow disappears.

How can I stop the initial two click requirement?

example asp

<asp:WizardStep ID="wsoptionQuestions" StepType="Step" Title="option Questions"
    runat="server">
    <h3 style="background-color: #4D85AC;">
        <asp:Literal ID="litoptionQuestionsTitle" runat="server">option Questions</asp:Literal></h3>
    <p class="instructionBlue">
        <asp:Literal ID="litoptionQuestionsInstructions" runat="server">You may want to collect option.</asp:Literal></p>
    <div class="selectAll">
        <asp:LinkButton ID="lboptionQuestionSelectAll" CausesValidation="false" ToolTip="Click here to select all option questions"
            runat="server">Select All</asp:LinkButton> | <asp:LinkButton ID="lboptionQuestionClearAll"
                CausesValidation="false" ToolTip="Click here to unselect all option questions"
                runat="server">Clear All</asp:LinkButton>
    </div>
    <telerik:RadListView ID="lvoptionQuestions" DataKeyNames="optionQuestionID"
        ItemPlaceholderID="itemPlaceHolder" runat="server">
        <LayoutTemplate>
            <fieldset>
                <asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
            </fieldset>
        </LayoutTemplate>
        <ItemTemplate>
            <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Telerik" Width="100%" ExpandMode="FullExpandedItem">
                <Items>
                    <telerik:RadPanelItem ID="RadPanelItem" runat="server" Enabled="True">
                        <Items>
                            <telerik:RadPanelItem ID="RadPanelItemItem" runat="server" />
                        </Items>
                        <ItemTemplate>
                            <div class="module" style="width: 100%; float: left">
                                <asp:Table ID="tbloptionQuestion" CellPadding="0" CellSpacing="0" CssClass="formTable"
                                    runat="server">
                                    <asp:TableRow CssClass="formRow">
                                        <asp:TableCell CssClass="formPrompt" Style="width: 4%">
                                            <asp:CheckBox ID="cboptionQuestionSelected" ToolTip="Check this box to select this option question"
                                                OnCheckedChanged="cboptionQuestion_CheckedChanged" runat="server" />
                                        </asp:TableCell>
                                        <asp:TableCell CssClass="formPrompt" Style="width: 4%">
                                            <asp:Label ID="lbloptionQuestionOrder" runat="server"></asp:Label>
                                        </asp:TableCell>
                                        <asp:TableCell CssClass="formValue" Style="width: 90%">
                                            <asp:Label ID="lbloptionQuestion" runat="server"></asp:Label><asp:Label ID="lbloptionQuestionDisabled"
                                                Enabled="false" Text="<br />This question is not available for this location."
                                                Visible="false" runat="server"></asp:Label>
                                        </asp:TableCell>
                                    </asp:TableRow>
                                </asp:Table>
                                <!-- Empty template to suppress global template -->
                            </div>
                        </ItemTemplate>
                    </telerik:RadPanelItem>
                </Items>
                <ItemTemplate>
                    <div class="module" style="width: 100%; float: left">
                        <asp:HiddenField ID="hfoptionQuestionName" runat="server" Value='<%#Eval("optionQuestionShort")%>' />
                        <asp:Table ID="tbloptionQuestionDisclaimer" CellPadding="0" CellSpacing="0"
                            CssClass="formTable" runat="server">
                            <asp:TableRow CssClass="formRowShaded">
                                <asp:TableCell Style="width: 99%" ColumnSpan="3">
                                    <p class="instructionBlue">
                                        <asp:Literal ID="litoptionQuestionDisclaimer" runat="server">If you have selected any option.</asp:Literal>
                                        <asp:Literal ID="litoptionQuestionDisclaimerDefault" runat="server">Click on the
                            DEFAULT button to import the default text for this disclaimer.</asp:Literal>
                                    </p>
                                </asp:TableCell>
                            </asp:TableRow>
                            <asp:TableRow CssClass="formRowShaded">
                                <asp:TableCell Style="width: 99%" ColumnSpan="3">
                                    <strong>
                                        <asp:Literal ID="litoptionDisclaimerPrompt" runat="server">option Disclaimer</asp:Literal>:</strong>
                                    <asp:CustomValidator ID="cvoptionDisclaimer" ControlToValidate="tboptionDisclaimer"
                                        CssClass="error" Display="Dynamic" ErrorMessage="<br />You have selected option questions. You must also provide a disclaimer."
                                        ForeColor="" SetFocusOnError="true" ValidateEmptyText="true" runat="server"></asp:CustomValidator>
                                    <telerik:RadEditor ID="radoptionDisclaimer" AutoResizeHeight="false" BorderColor="#4D85AC"
                                        BorderStyle="Solid" BorderWidth="1px" ContentAreaCssFile="~/app_themes/editor.css"
                                        EditModes="Design" ExternalDialogsPath="~/RadEditorDialogs/EditorDialogs/" EnableEmbeddedSkins="true"
                                        Height="180px" StripFormattingOptions="ConvertWordLists,Css,MSWordNoMargins,Span"
                                        Skin="Metro" Width="99%" runat="server" OnClientLoad="OnClientLoad">
                                        <CssFiles>
                                            <telerik:EditorCssFile Value="~/app_themes/editor.css" />
                                        </CssFiles>
                                        <Tools>
                                            <telerik:EditorToolGroup Tag="AppearanceToolbar">
                                                <telerik:EditorDropDown Name="FormatBlock" Text="Normal">
                                                </telerik:EditorDropDown>
                                                <telerik:EditorDropDown Name="FontName" Text="Font">
                                                </telerik:EditorDropDown>
                                                <telerik:EditorDropDown Name="RealFontSize" Text="Size">
                                                </telerik:EditorDropDown>
                                                <telerik:EditorTool Name="StripAll" />
                                            </telerik:EditorToolGroup>
                                            <telerik:EditorToolGroup Tag="ColorToolbar">
                                                <telerik:EditorSplitButton Name="ForeColor" Text="Color">
                                                </telerik:EditorSplitButton>
                                                <telerik:EditorSplitButton Name="BackColor" Text="Background">
                                                </telerik:EditorSplitButton>
                                            </telerik:EditorToolGroup>
                                            <telerik:EditorToolGroup Tag="LinkToolbar">
                                                <telerik:EditorTool Name="LinkManager" Text="Change Link" />
                                            </telerik:EditorToolGroup>
                                            <telerik:EditorToolGroup Tag="AlignmentToolbar">
                                                <telerik:EditorTool Name="JustifyLeft" />
                                                <telerik:EditorTool Name="JustifyCenter" />
                                                <telerik:EditorTool Name="JustifyRight" />
                                                <telerik:EditorTool Name="JustifyFull" />
                                            </telerik:EditorToolGroup>
                                            <telerik:EditorToolGroup Tag="IndentToolbar">
                                                <telerik:EditorTool Name="Indent" />
                                                <telerik:EditorTool Name="Outdent" />
                                            </telerik:EditorToolGroup>
                                            <telerik:EditorToolGroup Tag="ListToolbar">
                                                <telerik:EditorTool Name="InsertOrderedList" />
                                                <telerik:EditorTool Name="InsertUnorderedList" />
                                            </telerik:EditorToolGroup>
                                            <telerik:EditorToolGroup Tag="LineToolbar">
                                                <telerik:EditorTool Name="InsertHorizontalRule" />
                                            </telerik:EditorToolGroup>
                                            <telerik:EditorToolGroup Tag="FormatToolbar">
                                                <telerik:EditorSeparator />
                                                <telerik:EditorTool Name="Bold" ShortCut="CTRL+B / CMD+B" />
                                                <telerik:EditorTool Name="Italic" ShortCut="CTRL+I / CMD+I" />
                                                <telerik:EditorTool Name="Underline" ShortCut="CTRL+U / CMD+U" />
                                                <telerik:EditorTool Name="StrikeThrough" />
                                                <telerik:EditorSeparator />
                                                <telerik:EditorTool Name="Superscript" />
                                                <telerik:EditorTool Name="Subscript" />
                                            </telerik:EditorToolGroup>
                                            <telerik:EditorToolGroup Tag="ClipboardToolbar">
                                                <telerik:EditorTool Name="SelectAll" ShortCut="CTRL+A / CMD+A" />
                                                <telerik:EditorTool Name="Cut" ShortCut="CTRL+X / CMD+X" />
                                                <telerik:EditorTool Name="Copy" ShortCut="CTRL+C / CMD+C" />
                                                <telerik:EditorTool Name="Paste" ShortCut="CTRL+V / CMD+V" />
                                            </telerik:EditorToolGroup>
                                            <telerik:EditorToolGroup Tag="UndoToolbar">
                                                <telerik:EditorSplitButton Name="Undo">
                                                </telerik:EditorSplitButton>
                                                <telerik:EditorSplitButton Name="Redo">
                                                </telerik:EditorSplitButton>
                                            </telerik:EditorToolGroup>
                                            <telerik:EditorToolGroup Tag="PrintToolbar">
                                                <telerik:EditorTool Name="Print" ShortCut="CTRL+P / CMD+P" />
                                            </telerik:EditorToolGroup>
                                        </Tools>
                                    </telerik:RadEditor>
                                    <asp:Panel ID="pnloptionDisclaimerDefault" CssClass="formPanel" Visible="false"
                                        runat="server">
                                        <asp:Button ID="btnoptionDefault" CausesValidation="false" Text="Default" ToolTip="Click here to import the default option disclaimer"
                                            OnClick="btnoptionDefault_Click" runat="server" />
                                        <asp:Label ID="lbloptionDisclaimerDefault" Visible="false" runat="server"></asp:Label>
                                    </asp:Panel>
                                </asp:TableCell>
                            </asp:TableRow>
                        </asp:Table>
                    </div>
                </ItemTemplate>
            </telerik:RadPanelBar>
        </ItemTemplate>
        <AlternatingItemTemplate>
            <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Telerik" Width="100%" ExpandMode="FullExpandedItem">
                <Items>
                    <telerik:RadPanelItem ID="RadPanelItem" runat="server" Enabled="True">
                        <Items>
                            <telerik:RadPanelItem ID="RadPanelItemItem" runat="server" />
                        </Items>
                        <ItemTemplate>
                            <div class="module" style="width: 100%; float: left">
                                <asp:Table ID="tbloptionQuestion" CellPadding="0" CellSpacing="0" CssClass="formTable"
                                    runat="server">
                                    <asp:TableRow CssClass="formRow">
                                        <asp:TableCell CssClass="formPrompt" Style="width: 5%">
                                            <asp:CheckBox ID="cboptionQuestionSelected" ToolTip="Check this box to select this option question"
                                                OnCheckedChanged="cboptionQuestion_CheckedChanged" runat="server" />
                                        </asp:TableCell>
                                        <asp:TableCell CssClass="formPrompt" Style="width: 5%">
                                            <asp:Label ID="lbloptionQuestionOrder" runat="server"></asp:Label>
                                        </asp:TableCell>
                                        <asp:TableCell CssClass="formValue" Style="width: 90%">
                                            <asp:Label ID="lbloptionQuestion" runat="server"></asp:Label>
                                            <asp:Label ID="lbloptionQuestionDisabled" Enabled="false" Text="<br />This question is not available for this location."
                                                Visible="false" runat="server"></asp:Label>
                                        </asp:TableCell>
                                    </asp:TableRow>
                                </asp:Table>
                            </div>
                        </ItemTemplate>
                    </telerik:RadPanelItem>
                </Items>
                <ItemTemplate>
                    <div class="module" style="width: 100%; float: left">
                        <asp:HiddenField ID="hfoptionQuestionName" runat="server" />
                        <asp:Table ID="tbloptionQuestionDisclaimer" CellPadding="0" CellSpacing="0"
                            CssClass="formTable" runat="server">
                            <asp:TableRow CssClass="formRowShaded">
                                <asp:TableCell Style="width: 99%" ColumnSpan="3">
                                    <p class="instructionBlue">
                                        <asp:Literal ID="litoptionQuestionDisclaimer" runat="server">If you have selected any options. </asp:Literal>
                                        <asp:Literal ID="litoptionQuestionDisclaimerDefault" runat="server">Click on the
                                DEFAULT button to import the default text for this disclaimer.</asp:Literal>
                                    </p>
                                </asp:TableCell>
                            </asp:TableRow>
                            <asp:TableRow CssClass="formRowShaded">
                                <asp:TableCell Style="width: 99%" ColumnSpan="3">
                                    <strong>
                                        <asp:Literal ID="litoptionDisclaimerPrompt" runat="server">option Disclaimer</asp:Literal>:</strong>
                                    <asp:CustomValidator ID="cvoptionDisclaimer" ControlToValidate="tboptionDisclaimer"
                                        CssClass="error" Display="Dynamic" ErrorMessage="<br />You have selected option questions. You must also provide a disclaimer."
                                        ForeColor="" SetFocusOnError="true" ValidateEmptyText="true" runat="server"></asp:CustomValidator>
                                    <telerik:RadEditor ID="radoptionDisclaimer" AutoResizeHeight="false" BorderColor="#4D85AC"
                                        BorderStyle="Solid" BorderWidth="1px" ContentAreaCssFile="~/app_themes/editor.css"
                                        EditModes="Design" ExternalDialogsPath="~/RadEditorDialogs/EditorDialogs/" EnableEmbeddedSkins="true"
                                        Height="180px" StripFormattingOptions="ConvertWordLists,Css,MSWordNoMargins,Span"
                                        Skin="Metro" Width="99%" runat="server" OnClientLoad="OnClientLoad">
                                        <CssFiles>
                                            <telerik:EditorCssFile Value="~/app_themes/editor.css" />
                                        </CssFiles>
                                        <Tools>
                                            <telerik:EditorToolGroup Tag="AppearanceToolbar">
                                                <telerik:EditorDropDown Name="FormatBlock" Text="Normal">
                                                </telerik:EditorDropDown>
                                                <telerik:EditorDropDown Name="FontName" Text="Font">
                                                </telerik:EditorDropDown>
                                                <telerik:EditorDropDown Name="RealFontSize" Text="Size">
                                                </telerik:EditorDropDown>
                                                <telerik:EditorTool Name="StripAll" />
                                            </telerik:EditorToolGroup>
                                            <telerik:EditorToolGroup Tag="ColorToolbar">
                                                <telerik:EditorSplitButton Name="ForeColor" Text="Color">
                                                </telerik:EditorSplitButton>
                                                <telerik:EditorSplitButton Name="BackColor" Text="Background">
                                                </telerik:EditorSplitButton>
                                            </telerik:EditorToolGroup>
                                            <telerik:EditorToolGroup Tag="LinkToolbar">
                                                <telerik:EditorTool Name="LinkManager" Text="Change Link" />
                                            </telerik:EditorToolGroup>
                                            <telerik:EditorToolGroup Tag="AlignmentToolbar">
                                                <telerik:EditorTool Name="JustifyLeft" />
                                                <telerik:EditorTool Name="JustifyCenter" />
                                                <telerik:EditorTool Name="JustifyRight" />
                                                <telerik:EditorTool Name="JustifyFull" />
                                            </telerik:EditorToolGroup>
                                            <telerik:EditorToolGroup Tag="IndentToolbar">
                                                <telerik:EditorTool Name="Indent" />
                                                <telerik:EditorTool Name="Outdent" />
                                            </telerik:EditorToolGroup>
                                            <telerik:EditorToolGroup Tag="ListToolbar">
                                                <telerik:EditorTool Name="InsertOrderedList" />
                                                <telerik:EditorTool Name="InsertUnorderedList" />
                                            </telerik:EditorToolGroup>
                                            <telerik:EditorToolGroup Tag="LineToolbar">
                                                <telerik:EditorTool Name="InsertHorizontalRule" />
                                            </telerik:EditorToolGroup>
                                            <telerik:EditorToolGroup Tag="FormatToolbar">
                                                <telerik:EditorSeparator />
                                                <telerik:EditorTool Name="Bold" ShortCut="CTRL+B / CMD+B" />
                                                <telerik:EditorTool Name="Italic" ShortCut="CTRL+I / CMD+I" />
                                                <telerik:EditorTool Name="Underline" ShortCut="CTRL+U / CMD+U" />
                                                <telerik:EditorTool Name="StrikeThrough" />
                                                <telerik:EditorSeparator />
                                                <telerik:EditorTool Name="Superscript" />
                                                <telerik:EditorTool Name="Subscript" />
                                            </telerik:EditorToolGroup>
                                            <telerik:EditorToolGroup Tag="ClipboardToolbar">
                                                <telerik:EditorTool Name="SelectAll" ShortCut="CTRL+A / CMD+A" />
                                                <telerik:EditorTool Name="Cut" ShortCut="CTRL+X / CMD+X" />
                                                <telerik:EditorTool Name="Copy" ShortCut="CTRL+C / CMD+C" />
                                                <telerik:EditorTool Name="Paste" ShortCut="CTRL+V / CMD+V" />
                                            </telerik:EditorToolGroup>
                                            <telerik:EditorToolGroup Tag="UndoToolbar">
                                                <telerik:EditorSplitButton Name="Undo">
                                                </telerik:EditorSplitButton>
                                                <telerik:EditorSplitButton Name="Redo">
                                                </telerik:EditorSplitButton>
                                            </telerik:EditorToolGroup>
                                            <telerik:EditorToolGroup Tag="PrintToolbar">
                                                <telerik:EditorTool Name="Print" ShortCut="CTRL+P / CMD+P" />
                                            </telerik:EditorToolGroup>
                                        </Tools>
                                    </telerik:RadEditor>
                                    <asp:Panel ID="pnloptionDisclaimerDefault" CssClass="formPanel" Visible="false"
                                        runat="server">
                                        <asp:Button ID="btnoptionDefault" CausesValidation="false" Text="Default" ToolTip="Click here to import the default option disclaimer"
                                            OnClick="btnoptionDefault_Click" runat="server" />
                                        <asp:Label ID="lbloptionDisclaimerDefault" Visible="false" runat="server"></asp:Label>
                                    </asp:Panel>
                                </asp:TableCell>
                            </asp:TableRow>
                        </asp:Table>
                    </div>
                </ItemTemplate>
            </telerik:RadPanelBar>
        </AlternatingItemTemplate>
    </telerik:RadListView>
</asp:WizardStep>

 

 

1 Answer, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 13 Jan 2016, 11:30 AM
Hi Ron,

We have reviewed the RadListView and RadpanelBar example you have sent. In the attached file you will find sample page based on it. The difference between this and your code is that we have removed all the event handlers and some of the validations. We have also placed the entire code in an asp:Wizard control and have loaded some sample DataTable as DataContext of the RadListView.

Could you, please modify the attached page, so it demonstrates the described behavior? Then you can post it here, or open a ticket in our Ticketing system, where you could send us the entire page. This will help us troubleshot the problem and help you more accurately to solve it.

I am looking forward to hearing from you.

Regards,
Veselin Tsvetanov
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
PanelBar
Asked by
Ron H
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Share this question
or