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

10 posts, 0 answers
  1. whidbey boy
    whidbey boy avatar
    10 posts
    Member since:
    Jun 2010

    Posted 27 Oct 2010 Link to this post

    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

  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 28 Oct 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. whidbey boy
    whidbey boy avatar
    10 posts
    Member since:
    Jun 2010

    Posted 28 Oct 2010 Link to this post

    <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.

     

  5. Jen
    Jen avatar
    21 posts
    Member since:
    Oct 2008

    Posted 02 May 2011 Link to this post

    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?
  6. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 05 May 2011 Link to this post

    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

    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. Jen
    Jen avatar
    21 posts
    Member since:
    Oct 2008

    Posted 05 May 2011 Link to this post

    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....

    Snippet <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>

  8. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 11 May 2011 Link to this post

    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

    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.

  9. Jen
    Jen avatar
    21 posts
    Member since:
    Oct 2008

    Posted 11 May 2011 Link to this post

    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.
  10. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 16 May 2011 Link to this post

    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

    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.

  11. Jim
    Jim avatar
    15 posts
    Member since:
    Oct 2012

    Posted 09 Sep 2011 Link to this post

    Curious...
    What is the point of this in your code?
     else {
    items.getItem(0).set_checked(false);
    }
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017