Check All/Uncheck All in RAdListBox for control created dynamically.

[whidbey boy]

Hello,

I am using RadListBox. I am creating the control at run time and all the properties are set at run-time. CheckBox property is set to true.

Items in the checked list box are loaded at run time. We have also added a default "All" item at 0th index in the RadListBox.

When user clicks on "All", we want all the items in the list to be checked.
If the user unchecks-"All", all the items should be unchecked
If the user unchecks any other item in the list, then that item and "All" should be unchecked.

How do we implement the above scenarios?

Regards,
Whidbey boy

[Shinu]

Hello,


Make use of clilent side api to accomplish the functionality. The following links would be of help in this.
Client-side Basics
RadListBoxItem client API
RadListBox client API


-Shinu.

[whidbey boy]

<telerik:RadCodeBlock runat="server" ID="rdCodeBlock">

        <script language="javascript" type="text/javascript">
         function OnClientItemChecked(sender, eventArgs)
         {
            var lstBoxControl;
            lstBoxControl = $find(sender.get_id());
            var items = lstBoxControl.get_items();
            if(eventArgs.get_item().get_index() == 0)
            {
                var firstIndex = eventArgs.get_item().get_checked();
                for(var i=0;i<lstBoxControl.get_items().get_count();i++)
                {

                    items.getItem(i).set_checked(firstIndex);
                }
            }
            else
            {
                   items.getItem(0).set_checked(false);
            }
         }
        </script>

    </telerik:RadCodeBlock>

We were using this on static Listbox. The only additional thing that I had to do was to attach the event

lstBox.OnClientItemChecked = OnClientItemChecked; from server side code.

 

 

Thanks.

 

[Jen]

We are using this code for a list box inside of the edit form of a grid.  Everything works good, except when running the site in ie 9.   Once an item is selected in the list then the list box is not scrollable.  Any ideas why?

[Dimitar Terziev]

Hi Jen,

Regarding your event handler function, my suggestion is to change it as show below:

    function OnClientItemChecked(sender, eventArgs) {

        var items = sender.get_items();
        if (eventArgs.get_item().get_index() == 0) {
            var firstIndex = eventArgs.get_item().get_checked();
            for (var i = 0; i < sender.get_items().get_count(); i++) {

                items.getItem(i).set_checked(firstIndex);
            }
        }
        else {
            items.getItem(0).set_checked(false);
        }
    }
</script>

You don't have to reference the RadListBox using the $find since you already have a reference provided as an input parameter, meaning the "sender".

I've tried to reproduce the issue with the RadListBox not being scrollable, but to no avail. Please check this video showing the result of my test.

Please change your event handler function implementation as show above and check whether this issue still persists.

Best wishes,
Dimitar Terziev
the Telerik team

[Jen]

I tried your suggestion and I get a javascript error.  Your video does not show a rad list box inside of the edit form of a rad grid, which I stated is how my page is set up.  Here is my current mark up....

<telerik:RadCodeBlock  runat="server"  ID="rdCodeBlock">
        <script language="javascript" type="text/javascript">
            function OnClientItemChecked(sender, eventArgs) {
                var lstBoxControl;
                lstBoxControl = $find(sender.get_id());
                var items = lstBoxControl.get_items();
                if (eventArgs.get_item().get_index() == 0) {
                    var firstIndex = eventArgs.get_item().get_checked();
                    for (var i = 0; i < lstBoxControl.get_items().get_count(); i++) {

                        items.getItem(i).set_checked(firstIndex);
                    }
                }
                else {
                    items.getItem(0).set_checked(false);
                }
            }
        </script>
    </telerik:RadCodeBlock>
<h1>Company News</h1>
<telerik:RadGrid ID="RadGridCompanyNews" runat="server" ShowStatusBar="True"
            AllowFilteringByColumn="True" AllowSorting="True" AutoGenerateColumns="False"
            AllowAutomaticInserts="false" AllowAutomaticUpdates="false" GroupingSettings-CaseSensitive="false"  
            GridLines="None" ShowGroupPanel="False"
            OnPreRender="RadGridCompanyNews_PreRender"
            OnNeedDataSource="RadGridCompanyNews_NeedDataSource"
            OnItemCommand="RadGridCompanyNews_ItemCommand"
            OnItemDataBound="RadGridCompanyNews_ItemDataBound"
            OnDetailTableDataBind="RadGridCompanyNews_DetailTableDataBind"
            OnItemCreated="RadGridCompanyNews_ItemCreated"
            OnExcelExportCellFormatting="RadGridCompanyNews_ExcelExportCellFormatting">
        <HeaderContextMenu EnableTheming="True">
            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
        </HeaderContextMenu>
         <ExportSettings  IgnorePaging="true" ExportOnlyData="true" OpenInNewWindow="true">
            <Pdf PageLeftMargin="1mm" PageRightMargin="1mm"  />
        </ExportSettings>
        <MasterTableView CommandItemDisplay="Top" DataKeyNames="NewsID" CommandItemSettings-AddNewRecordText="Add Company News"
            EditMode="EditForms" AllowMultiColumnSorting="True" TableLayout="Auto" Width="100%" Name="News"
            CommandItemSettings-ShowExportToPdfButton="true"
            CommandItemSettings-ShowExportToExcelButton="true"
            CommandItemSettings-ShowExportToWordButton="true">
            <ExpandCollapseColumn>
                <ItemStyle Width="15px"></ItemStyle>
                <HeaderStyle Width="15px"></HeaderStyle>
            </ExpandCollapseColumn>
            <Columns>
                <telerik:GridBoundColumn DataField="Title" HeaderText="Title" UniqueName="Title">
                    <ItemStyle Width="200px" />
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Description" HeaderText="Description" UniqueName="Description">
                    <ItemStyle Width="200px" />
                </telerik:GridBoundColumn>
                 <telerik:GridDateTimeColumn DataField="StartDate" HeaderText="Start Date"
                    UniqueName="StartDate" DataFormatString="{0:d}" PickerType="DatePicker" >
                </telerik:GridDateTimeColumn>
                <telerik:GridDateTimeColumn DataField="EndDate" HeaderText="End Date"
                    UniqueName="EndDate" DataFormatString="{0:d}" PickerType="DatePicker">
                </telerik:GridDateTimeColumn>
                <telerik:GridEditCommandColumn UniqueName="EditCommandColumn">
                        <ItemStyle HorizontalAlign="Center" Width="25px" />
                        <HeaderStyle Width="25px" />
                </telerik:GridEditCommandColumn>                
             </Columns>
             <DetailTables>
                <telerik:GridTableView DataKeyNames="CompanyID" Name="Companies"
                        HierarchyLoadMode="ServerOnDemand" Width="100%">
                        <Columns>
                            <telerik:GridBoundColumn DataField="Name" HeaderText="Company Name" UniqueName="Name">
                            </telerik:GridBoundColumn>
                        </Columns>
                        <NoRecordsTemplate>
                            No Companies
                        </NoRecordsTemplate>
                    </telerik:GridTableView>
                
             </DetailTables>
            <EditFormSettings
                    ColumnNumber="2"
                    EditFormType="Template"
                    CaptionDataField="Name"
                    CaptionFormatString="Edit {0}">
                 <FormStyle BackColor="#fffeed"  />               
                 <FormTemplate>
                    <div class="tableLike">
                        <ul>
                            <li>
                                <asp:ValidationSummary ID="ValidationSummaryNews" runat="server" ValidationGroup="News" CssClass="error" />
                            </li>
                            <li>
                                Company:<span class="requiredFldInd">*</span>
                            </li>
                            <li>
                                <telerik:RadListBox  ID="RadListBoxCompanies" runat="server" CheckBoxes="true" Width="350px" Height="200px"
                                    DataTextField="Name" DataValueField="CompanyID" OnClientItemChecked="OnClientItemChecked">
                                </telerik:RadListBox>
                            </li>
                            <li>
                                Title:
                            </li>
                            <li>
                                <asp:TextBox ID="TextboxTitle" runat="server" Width="250px" Text='<%#Eval("Title") %>'></asp:TextBox>
                            </li>
                            <li>
                                News:<span class="requiredFldInd">*</span>
                            </li>
                            <li>
                                <telerik:RadEditor ID="RadEditorDescription" runat="server" ToolsWidth="450px" Height="250px" Width="450px"
                                    EditModes="Design" ToolbarMode="ShowOnFocus"
                                    ToolsFile="~/App_Data/BasicTools.xml"
                                    ContentAreaCssFile="~/App_Themes/EditorContentAreaStyles.css"
                                    ContentFilters="FixUlBoldItalic, MozEmStrong, ConvertFontToSpan, ConvertToXhtml, FixEnclosingP">
                                    </telerik:RadEditor>
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidatorDescription" runat="server"
                                                            ControlToValidate="RadEditorDescription" ErrorMessage="News is required"
                                                            ValidationGroup="News">*</asp:RequiredFieldValidator>
                            </li>
                            <li>
                                Start Date:<span class="requiredFldInd">*</span>
                            </li>
                            <li>
                                    <telerik:RadDatePicker ID="RadDatePickerStartDate" runat="server"
                                    Culture="English (United States)"
                                    MinDate="1/1/1900"
                                    SharedCalendarID="RadCalendarShared" ZIndex="10000"
                                    DBSelectedDate='<%#Eval("StartDate") %>'>                       
                                    <DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton>
                                </telerik:RadDatePicker>
                                <telerik:RadCalendar
                                        runat="server" ID="RadCalendarShared"
                                        CultureInfo="English (United States)"
                                        EnableEmbeddedSkins="false"
                                        ShowRowHeaders="false" />   
                                <asp:RequiredFieldValidator ID="RequiredFieldValidatorStateStartDate" runat="server"
                                                            ValidationGroup="News"
                                                            ControlToValidate="RadDatePickerStartDate"                                                   
                                                            ErrorMessage="Start Date is required"
                                                            ToolTip="Start Date is required">*
                                </asp:RequiredFieldValidator>                           
                            </li>
                            <li>
                                End Date:
                            </li>
                            <li>
                                <telerik:RadDatePicker ID="RadDatePickerEndDate" runat="server"
                                        Culture="English (United States)"
                                        SharedCalendarID="RadCalendarShared" MinDate="1/1/1900"
                                        DBSelectedDate='<%#Eval("EndDate")%>' ZIndex="10000" >                   
                                        <DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton>
                                </telerik:RadDatePicker>
                            </li>
                            <li>
                                <asp:Button ID="ButtonNewsSave" runat="server"
                                            Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'
                                            CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'
                                            ValidationGroup="News">
                                    </asp:Button>&nbsp;
                                    <asp:Button ID="ButtonNewsCancel" Text="Cancel" runat="server" CausesValidation="False" CommandName="Cancel">
                                 </asp:Button>
                            </li>
                        </ul>
                    </div>
                    </FormTemplate>
             </EditFormSettings>
        </MasterTableView>
        <ClientSettings AllowDragToGroup="False">
            <Scrolling AllowScroll="False" UseStaticHeaders="True"  />
            <Selecting AllowRowSelect="False" />
        </ClientSettings>
        <FilterMenu EnableTheming="True">
            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
        </FilterMenu>
     </telerik:RadGrid>

[Dimitar Terziev]

Hi Jen,

Could you specify what is the javascript error that you receive when using the implementation of the event handler function suggested earlier.

From what you have provided it seems that you are not using the implementation I've suggested. Do you receive the javascript error with the current implementation or not?

I've examined the mark up provided and there seems to be no obvious reason why the RadListBox is not scrollable. Please specify which is the exact version of the controls you are using?

Greetings,
Dimitar Terziev
the Telerik team

[Jen]

I did implement your suggestion and was able to get past the javascript errors.  However, it does not fix the fact that the rad list box is not scrollable when it is inside of a rad grid form template.  I am using version 2011.1.419.40 of the controls.  If you are not able to help me with this issue, please let me know and I will open a support ticket.

[Dimitar Terziev]

Hello Jen,

In order to speed up the troubleshooting process, please open a support ticket and provide us with a runnable sample project, so we could examine the issue locally.

Regards,
Dimitar Terziev
the Telerik team

[Larry]

Curious...
What is the point of this in your code?
 else {

items.getItem(0).set_checked(false);

}