Filter Templates and Rad ListBox

[Bill]

I put several rad list boxes in filter templates on a grid.
When the grid becomes too wide for the page and adds scroll bars, the rad listboxes become fixed on the page and the grid scrolls horizontally under them...

[Bill]

I've found a work around - I set a width for the grid in this case Width="1800px" - then the scrolling works normally again.

[Bill]

For a listbox in a filter template in a radgrid - if the listbox has scroll bars, they do not follow the skin colors for the grid they are on.

[Tsvetoslav]

Hi Bill,

Scroll bars have always the default grey color for all controls - no skins are applied to them. Am I missing something in my understanding of the issue at hand?

Regards,
Tsvetoslav
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[Bill]

Ok - so they're going to the windows defaults... makes for some ugly color combinations...

What about the listbox in a filter template scrolling issue?

[Tsvetoslav]

Hi Bill,

Concerning the second problem, I tried to reproduce it in a sample of mine but to no success. Could you take a look at the attached sample and specify what's needed in order for the issue to be reproduced.

Regards,
Tsvetoslav
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[Bill]

        <telerik:RadGrid ID="rgEvaluations" runat="server" GridLines="None" AllowFilteringByColumn="True"
            Height="800px" AllowSorting="True" DataSourceID="sdsEvaluations" AutoGenerateColumns="False"
            Width="1800px" OnItemCreated="rgEvaluations_ItemCreated" OnPreRender="rgEvaluations_PreRender"
            OnItemDataBound="rgEvaluations_ItemDataBound" ShowGroupPanel="True">
            <ExportSettings HideStructureColumns="true" ExportOnlyData="true" IgnorePaging="true"
                OpenInNewWindow="true">
            </ExportSettings>
            <MasterTableView DataSourceID="sdsEvaluations" AllowMultiColumnSorting="True" CommandItemDisplay="Top"
                AllowAutomaticDeletes="false" AllowAutomaticInserts="false" AllowAutomaticUpdates="false">
                <CommandItemSettings ShowExportToWordButton="true" ShowExportToExcelButton="true"
                    ShowExportToPdfButton="true" AddNewRecordImageUrl="<..IMAGE w/ TRANSPARENCY..>"
                    AddNewRecordText="" />
                <RowIndicatorColumn>
                    <HeaderStyle Width="20px"></HeaderStyle>
                </RowIndicatorColumn>
                <ExpandCollapseColumn>
                    <HeaderStyle Width="20px"></HeaderStyle>
                </ExpandCollapseColumn>
                <Columns>
                    <telerik:GridTemplateColumn AllowFiltering="False" Groupable="False" HeaderText="Eval Form"
                        ShowSortIcon="False" UniqueName="EvalFormColumn" ConvertEmptyStringToNull="False">
                        <ItemTemplate>
                            <a href='editevaluation.asp?id=<%# Eval("ERGO_ID") %>&pos=<%#(Container.DataSetIndex+1) %>'>
                                <img src="../images/edit.gif" alt="Edit Evaluation" border="0" /></a>
                            <asp:Image ID="imgNewUpdate" runat="Server" ImageUrl="../images/spacer.gif"></asp:Image>
                        </ItemTemplate>
                        <HeaderStyle Wrap="True" HorizontalAlign="Center" VerticalAlign="Middle" Width="80px">
                        </HeaderStyle>
                        <ItemStyle Wrap="False" HorizontalAlign="Left"></ItemStyle>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn AllowFiltering="False" Groupable="False" HeaderText="Report"
                        ShowSortIcon="False" UniqueName="ReportColumn" HeaderStyle-Width="50" ItemStyle-HorizontalAlign="Center">
                        <ItemTemplate>
                            <a href='javascript:OpenPage("../reports/employee_rpt.asp?id=<%# Eval("ERGO_ID") %>&pos=<%#(Container.DataSetIndex+1) %>","Report");'>
                                <img src="../images/ico16/ico16_list2.gif" alt="Evaluation Report" border="0" /></a>
                        </ItemTemplate>
                        <HeaderStyle Wrap="True" HorizontalAlign="Center" VerticalAlign="Middle" Width="40px">
                        </HeaderStyle>
                        <ItemStyle Wrap="False"></ItemStyle>
                    </telerik:GridTemplateColumn>
                    <telerik:GridBoundColumn DataField="CUE_FLAG" HeaderText="CUE" SortExpression="CUE_FLAG"
                        UniqueName="CUE_FLAG" HeaderStyle-Width="75px" ItemStyle-Width="75px" ItemStyle-HorizontalAlign="Center">
                        <FilterTemplate>
                            <telerik:RadComboBox ID="rcbCUE" runat="server" Width="75px" OnClientSelectedIndexChanged="FilterOnCueFlag"
                                MarkFirstMatch="True" AllowCustomText="true" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("CUE_FLAG").CurrentFilterValue %>'>
                                <Items>
                                    <telerik:RadComboBoxItem runat="server" Selected="True" Text="All" />
                                    <telerik:RadComboBoxItem runat="server" Text="Cue" Value="Y" />
                                    <telerik:RadComboBoxItem runat="server" Text="Non-Cue" Value="N" />
                                </Items>
                            </telerik:RadComboBox>
                            <telerik:RadScriptBlock ID="rsb5" runat="server">

                                <script type="text/javascript">
                                    function FilterOnCueFlag(sender, args) {
                                        var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                        tableView.filter("CUE_FLAG", args.get_item().get_value(), "EqualTo");
                                    }
                                </script>

                            </telerik:RadScriptBlock>
                        </FilterTemplate>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn ReadOnly="True" UniqueName="SEVERITY_SCALE" DataField="SEVERITY_SCALE"
                        HeaderText="Pain Level" AllowFiltering="false" SortExpression="SEVERITY_SCALE"
                        Visible="True" HeaderStyle-Width="25px" ItemStyle-HorizontalAlign="Center">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ERGO_ID" DataType="System.Decimal" Visible="false"
                        HeaderText="ERGO_ID" SortExpression="ERGO_ID" UniqueName="ERGO_ID" ItemStyle-HorizontalAlign="Center">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="SUBJECTS_NAME" HeaderText="Subject's Name" SortExpression="SUBJECTS_NAME"
                        UniqueName="SUBJECTS_NAME" HeaderStyle-Width="125px" ItemStyle-Width="125px"
                        ItemStyle-HorizontalAlign="Center">
                        <FilterTemplate>
                            <telerik:RadComboBox ID="rcbEmployees" runat="server" Width="125px" DataSourceID="sdsEmployees"
                                EnableTextSelection="true" DataTextField="Subjects_Name" DataValueField="Subjects_Name"
                                AppendDataBoundItems="true" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("SUBJECTS_NAME").CurrentFilterValue %>'
                                OnClientSelectedIndexChanged="FilterOnSubjectsName" MarkFirstMatch="True" AllowCustomText="true">
                                <Items>
                                    <telerik:RadComboBoxItem Text="All" />
                                </Items>
                            </telerik:RadComboBox>
                            <telerik:RadScriptBlock ID="rsb1" runat="server">

                                <script type="text/javascript">
                                    function FilterOnSubjectsName(sender, args) {
                                        var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                        tableView.filter("SUBJECTS_NAME", args.get_item().get_value(), "EqualTo");
                                    }
                                </script>

                            </telerik:RadScriptBlock>
                        </FilterTemplate>
                        <HeaderStyle Width="125px"></HeaderStyle>
                        <ItemStyle Width="125px"></ItemStyle>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn AllowFiltering="False" DataField="Location" HeaderStyle-Width="65px"
                        HeaderText="Location" UniqueName="Location" ItemStyle-HorizontalAlign="Center">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn AllowFiltering="False" DataField="Phone" HeaderStyle-Width="35px"
                        HeaderText="Phone" UniqueName="Phone" ItemStyle-HorizontalAlign="Center">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="subjects_supervisor" HeaderText="Supervisor's Name"
                        ItemStyle-HorizontalAlign="Center" SortExpression="subjects_supervisor" UniqueName="subjects_supervisor"
                        HeaderStyle-Width="125px" ItemStyle-Width="125px">
                        <FilterTemplate>
                            <telerik:RadComboBox ID="rcbSupervisors" runat="server" DataTextField="Subjects_supervisor"
                                DataValueField="Subjects_supervisor" AllowCustomText="true" DataSourceID="sdsSupervisors"
                                MarkFirstMatch="true" Width="125px" AppendDataBoundItems="true" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("subjects_supervisor").CurrentFilterValue %>'
                                OnClientSelectedIndexChanged="FilterOnSupervisorsName">
                                <Items>
                                    <telerik:RadComboBoxItem Text="All" />
                                </Items>
                            </telerik:RadComboBox>
                            <telerik:RadScriptBlock ID="rsb3" runat="server">

                                <script type="text/javascript">
                                    function FilterOnSupervisorsName(sender, args) {
                                        var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                        tableView.filter("subjects_supervisor", args.get_item().get_value(), "EqualTo");
                                    }
                                </script>

                            </telerik:RadScriptBlock>
                        </FilterTemplate>
                        <HeaderStyle Width="125px"></HeaderStyle>
                        <ItemStyle Width="125px"></ItemStyle>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="DIVNAME" HeaderText="Division" SortExpression="DIVNAME"
                        UniqueName="DIVNAME" HeaderStyle-Width="220px" ItemStyle-Width="220px" ItemStyle-HorizontalAlign="Center">
                        <FilterTemplate>
                            <telerik:RadListBox ID="rlbDivision" Height="140px" runat="server" DataKeyField="divcode"
                                DataSortField="divname" DataSourceID="sdsDivisions" DataTextField="divname" DataValueField="divcode" AppendDataBoundItems="true"
                                AutoPostBack="true" CheckBoxes="true" Width="215px" OnClientItemChecked="DivCheckBoxChecked">
                                <Items>
                                    <telerik:RadListBoxItem Text="All" Value="Clear" />
                                </Items>
                            </telerik:RadListBox>
                            <telerik:RadScriptBlock runat="server">

                                <script type="text/javascript">
                                    function DivCheckBoxChecked(sender, args) {
                                        var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                        var listbox = $find('<%# ((GridItem)Container).FindControl("rlbDivision").ClientID  %>');
                                        var checked = listbox.get_checkedItems();
                                        var filterText = "";
                                        var filterType = "EqualTo";
                                        var checkedlist = ""
                                        for (var i = 0; i < checked.length; i++) {
                                            filterText += '"' + checked[i].get_text() + '"' + ",";
                                            checkedlist +=  checked[i].get_text() + ","
                                            if (checked[i].get_value() == "Clear") {
                                                filterType = "NoFilter";
                                                break;
                                            }
                                        }

                                        var filterList = removeLastComma(filterText);
                                        tableView.filter("DIVNAME", filterList, filterType);
                                        alert("DIVNAME" + " " + filterList + " " + filterType);


                                        $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("DIVNAME, " + removeLastComma(checkedlist));
                                    }
                                    function removeLastComma(str) {
                                        return str.replace(/,$/, "");
                                    }

                                </script>

                            </telerik:RadScriptBlock>
                        </FilterTemplate>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn ReadOnly="true" UniqueName="RequestBy" DataField="EVAL_REQUESTED_BY"
                        HeaderText="Requested By" SortExpression="EVAL_REQUESTED_BY" AllowFiltering="false"
                        AllowSorting="true" HeaderStyle-Width="100px" ItemStyle-HorizontalAlign="Center">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="EVAL_REQUEST_DATE" DataFormatString="{0:MM/dd/yyyy}"
                        DataType="System.DateTime" HeaderText="Request Date" ReadOnly="True" SortExpression="EVAL_REQUEST_DATE"
                        UniqueName="EVAL_REQUEST_DATE" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="100px"
                        ItemStyle-Width="100px">
                        <FilterTemplate>
                            <table style="width: 100px; height: 100px">
                                <tr>
                                    <td>
                                        <span class="style1">From:</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <telerik:RadDatePicker ID="rdpReqDateFrm" runat="server" AutoPostBack="True" Culture="English (United States)"
                                            Width="85px">
                                            <Calendar ID="Calendar1" runat="server" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False"
                                                ViewSelectorText="x">
                                            </Calendar>
                                            <DatePopupButton HoverImageUrl="" ImageUrl="" />
                                            <DateInput ID="DateInput1" runat="server" AutoPostBack="True" DateFormat="M/d/yyyy"
                                                DisplayDateFormat="M/d/yyyy" Height="20px">
                                            </DateInput>
                                        </telerik:RadDatePicker>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="style1">To:</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <telerik:RadDatePicker ID="rdpReqDateTo" runat="server" Calendar-CellAlign="Center"
                                            AutoPostBack="True" Culture="English (United States)" Width="85px">
                                            <Calendar ID="Calendar2" runat="server" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False"
                                                ViewSelectorText="x">
                                            </Calendar>
                                            <DatePopupButton HoverImageUrl="" ImageUrl="" />
                                            <DateInput ID="DateInput2" runat="server" AutoPostBack="True" DateFormat="M/d/yyyy"
                                                DisplayDateFormat="M/d/yyyy" Height="20px">
                                            </DateInput>
                                        </telerik:RadDatePicker>
                                    </td>
                                </tr>
                            </table>
                            <telerik:RadScriptBlock ID="rsbDates" runat="server">

                                <script type="text/javascript">

                                    function FromDateSelected(sender, args) {
                                        var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                        var ToPicker = $find('<%# ((GridItem)Container).FindControl("rdpReqDateTo").ClientID %>');

                                        var fromDate = FormatSelectedDate(sender);
                                        var toDate = FormatSelectedDate(ToPicker);

                                        tableView.filter("EVAL_REQUEST_DATE", fromDate + " " + toDate, "Between");

                                    }
                                    function ToDateSelected(sender, args) {
                                        var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                        var FromPicker = $find('<%# ((GridItem)Container).FindControl("rdpReqDateFrm").ClientID %>');

                                        var fromDate = FormatSelectedDate(FromPicker);
                                        var toDate = FormatSelectedDate(sender);

                                        tableView.filter("EVAL_REQUEST_DATE", fromDate + ", " + toDate, "Between");
                                    }
                                    function FormatSelectedDate(picker) {
                                        var date = picker.get_selectedDate();
                                        var dateInput = picker.get_dateInput();
                                        var formattedDate = dateInput.get_dateFormatInfo().FormatDate(date, dateInput.get_displayDateFormat());

                                        return formattedDate;
                                    }

                                </script>

                            </telerik:RadScriptBlock>
                        </FilterTemplate>
                        <HeaderStyle Width="100px"></HeaderStyle>
                        <ItemStyle HorizontalAlign="Center" Width="100px"></ItemStyle>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn ReadOnly="true" UniqueName="EvalDate" DataField="EVAL_DATE"
                        HeaderText="Eval Date" ItemStyle-HorizontalAlign="Center" SortExpression="EVAL_DATE"
                        AllowFiltering="false" AllowSorting="true" HeaderStyle-Width="70px" DataFormatString="{0:MM/dd/yyyy}">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn ReadOnly="true" UniqueName="COMPLETION_DATE" DataField="COMPLETION_DATE"
                        HeaderText="Completion Date" ItemStyle-HorizontalAlign="Center" SortExpression="COMPLETION_DATE"
                        AllowFiltering="false" AllowSorting="true" HeaderStyle-Width="70px" DataFormatString="{0:MM/dd/yyyy}">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="EVAL_REQUEST_REASON" HeaderText="Evaluation Reason"
                        SortExpression="EVAL_REQUEST_REASON" UniqueName="EVAL_REQUEST_REASON" HeaderStyle-Width="135px"
                        ItemStyle-Width="135px" ItemStyle-HorizontalAlign="Center">
                        <FilterTemplate>
                            <telerik:RadListBox ID="rlbEvalReasons" runat="server" DataKeyField="REASON_DESC"
                                DataSortField="REASON_DESC" DataSourceID="sdsEvalReasons" DataTextField="REASON_DESC"
                                DataValueField="REASON_DESC" AppendDataBoundItems="true" AutoPostBack="true"
                                CheckBoxes="true" Height="125px" OnClientItemChecked="EvalReasonCheckBoxClicked">
                                <Items>
                                    <telerik:RadListBoxItem Text="All" Value="Clear" />
                                </Items>
                            </telerik:RadListBox>
                            <telerik:RadScriptBlock runat="server">

                                <script type="text/javascript">
                                    function EvalReasonCheckBoxClicked(sender, args) {
                                        var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                        var listbox = $find('<%# ((GridItem)Container).FindControl("rlbEvalReasons").ClientID  %>');
                                        var checked = listbox.get_checkedItems();
                                        var filterText = "";
                                        var filterType = "EqualTo";
                                        for (var i = 0; i < checked.length; i++) {
                                            filterText += checked[i].get_text() + ",";
                                            if (checked[i].get_value() == "Clear") {
                                                filterType = "NoFilter";
                                                break;
                                            }
                                        }

                                        var filterList = removeLastComma(filterText);
                                        alert(filterList+" " + FilterType);

                                        tableView.filter("EVAL_REQUEST_REASON", filterList, filterType);

                                        $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("EVAL_REQUEST_REASON, " + filterList);
                                    }
                                    function removeLastComma(str) {
                                        return str.replace(/,$/, "");
                                    }
                                </script>

                            </telerik:RadScriptBlock>
                        </FilterTemplate>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ERGO_EVALUATOR" HeaderText="Evaluator's Name"
                        SortExpression="ERGO_EVALUATOR" UniqueName="ERGO_EVALUATOR" HeaderStyle-Width="125px"
                        ItemStyle-Width="125px" ItemStyle-HorizontalAlign="Center">
                        <FilterTemplate>
                            <telerik:RadComboBox ID="rcbEvaluators" runat="server" DataSourceID="sdsEvaluators"
                                DataValueField="ERGO_EVALUATOR" AllowCustomText="true" DataTextField="ERGO_EVALUATOR"
                                Width="125px" MarkFirstMatch="true" AppendDataBoundItems="true" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("ERGO_EVALUATOR").CurrentFilterValue %>'
                                OnClientSelectedIndexChanged="FilterOnEvaluator">
                                <Items>
                                    <telerik:RadComboBoxItem Text="All" />
                                </Items>
                            </telerik:RadComboBox>
                            <telerik:RadScriptBlock ID="rsb2" runat="server">

                                <script type="text/javascript">
                                    function FilterOnEvaluator(sender, args) {
                                        var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                        tableView.filter("ERGO_EVALUATOR", args.get_item().get_value(), "EqualTo");
                                    }
                                </script>

                            </telerik:RadScriptBlock>
                        </FilterTemplate>
                        <HeaderStyle Width="125px"></HeaderStyle>
                        <ItemStyle Width="125px"></ItemStyle>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="STATUS" HeaderText="Status" SortExpression="status"
                        ItemStyle-HorizontalAlign="Center" UniqueName="status" HeaderStyle-Width="125px"
                        ItemStyle-Width="125px">
                        <FilterTemplate>
                            <telerik:RadListBox ID="rlbStatuses" runat="server" DataKeyField="status" DataSortField="status"
                                DataSourceID="sdsStatuses" DataTextField="status" DataValueField="status" AutoPostBack="true"
                                CheckBoxes="true" Height="140px" AppendDataBoundItems="true">
                                <Items>
                                    <telerik:RadListBoxItem Text="All" Value="Clear" />
                                </Items>
                            </telerik:RadListBox>
                        </FilterTemplate>
                        <HeaderStyle Width="125px"></HeaderStyle>
                        <ItemStyle Width="125px"></ItemStyle>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn ReadOnly="True" UniqueName="NEW_UPDATE" DataField="NEW_UPDATE"
                        SortExpression="NEW_UPDATE" Visible="False">
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings AllowDragToGroup="True">
                <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" />
            </ClientSettings>
        </telerik:RadGrid>

I don't quite understand - if I remove the "1800px" from the grid width, it scrolls horizontally and the listboxes are fixed in place.
your examples - no matter what I do to it, the page doesn't scroll horizontally - it just truncates everything that won't fit on the page.

The listbox filters are not working on my example - having trouble with your tableview.filter...

[Tsvetoslav]

Hi Bill,

Could you upgrade to the latest build of the controls and see how the grid behaves.

Regards,
Tsvetoslav
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.