RadGrid expand after filter

6 posts, 0 answers
  1. Caio
    Caio avatar
    11 posts
    Member since:
    Jul 2013

    Posted 24 Sep 2013 Link to this post

    Hi, all!
    I have an RagGrid. To this grid, I use AllowFilteringByColumn = true and GroupByExpression to some columns. But, I need this RadGrid result, expand after a filter, without grouping.

    How make the RadGrid result expand after filter?

    My code.

    <script type="text/javascript">
            (function () {
                var demo = window.demo = {},
            autoCompleteBox,
            masterTableView;
     
                demo.GridCreated = function (sender, args) {
                    masterTableView = sender.get_masterTableView();
                }
     
                demo.AutoCompleteLoaded = function (sender, args) {
                    autoCompleteBox = sender;
                }
     
                demo.EntryAdded = function (sender, args) {
                    filterGrid();
                }
     
                demo.EntryRemoved = function (sender, args) {
                    filterGrid();
                }
     
                function filterGrid() {
                    if (!masterTableView || !autoCompleteBox) return;
                    var entries = autoCompleteBox.get_entries();
     
                    if (entries.get_count() === 0) {
                        masterTableView.expandAllGroups();
                        return;
                    }
     
                    masterTableView.collapseAllGroups();
                    $telerik.$(masterTableView.get_element()).find("td").filter(function () {
                        for (var i = 0; i < entries.get_count(); i++)
                            if ($(this).text().indexOf(entries.getEntry(i).get_text()) !== -1) return true;
     
                        return false;
                    }).closest(".rgRow, .rgAltRow").each(function () {
                        masterTableView.expandGroup(this);
                    });
                }
                window.pageLoad = function () {
                    $(masterTableView.get_element())
                .find(".rgGroupHeader td")
                .not(".rgGroupCol")
                .css("cursor", "pointer")
                .click(function () {
                    masterTableView.toggleGroup($(this).closest("tr")[0]);
                });
                }
            })();
        </script>


    <Telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server" AllowSorting="True"
                AllowPaging="False" AutoGenerateColumns="False" GridLines="None" AllowFilteringByColumn="true">
                <GroupingSettings CaseSensitive="false"></GroupingSettings>
                <MasterTableView Width="100%" GroupLoadMode="Client" TableLayout="Fixed" GroupsDefaultExpanded="false">
                    <GroupByExpressions>
                        <Telerik:GridGroupByExpression>
                            <SelectFields>
                                <Telerik:GridGroupByField FieldAlias="REGION" FieldName="REGION" HeaderText="REGION">
                                </Telerik:GridGroupByField>
                            </SelectFields>
                            <GroupByFields>
                                <Telerik:GridGroupByField FieldName="REGION"></Telerik:GridGroupByField>
                            </GroupByFields>
                        </Telerik:GridGroupByExpression>
                        <Telerik:GridGroupByExpression>
                            <SelectFields>
                                <Telerik:GridGroupByField FieldAlias="LOCATIONNAME" FieldName="LOCATIONNAME" HeaderText="LOCATION NAME">
                                </Telerik:GridGroupByField>
                            </SelectFields>
                            <GroupByFields>
                                <Telerik:GridGroupByField FieldAlias="LOCATIONNAME" FieldName="LOCATIONNAME"></Telerik:GridGroupByField>
                            </GroupByFields>
                        </Telerik:GridGroupByExpression>
                    </GroupByExpressions>
                    <Columns>
                        <Telerik:GridBoundColumn DataField="LOCATIONNAME" FilterControlAltText="Filter LOCATIONNAME column"
                            UniqueName="LOCATIONNAME">
                            <ItemStyle HorizontalAlign="Left" />
                        </Telerik:GridBoundColumn>
                        <Telerik:GridHyperLinkColumn DataNavigateUrlFields="IDSERVER" DataNavigateUrlFormatString="PathFolders.aspx?idServer={0}"
                            DataTextField="SERVERNAME" FilterControlAltText="Filter SERVERNAME column" UniqueName="column">
                            <ItemStyle HorizontalAlign="Left" />
                        </Telerik:GridHyperLinkColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings ReorderColumnsOnClient="True" AllowDragToGroup="True" AllowColumnsReorder="True">
                    <ClientEvents OnGridCreated="demo.GridCreated" />
                </ClientSettings>
                <GroupingSettings ShowUnGroupButton="true"></GroupingSettings>
            </Telerik:RadGrid>

  2. Kostadin
    Admin
    Kostadin avatar
    1708 posts

    Posted 27 Sep 2013 Link to this post

    Hi Caio,

    In order to remove the grouping you could clear the GroupByExpressions collection. Check out the following code snippet.
    RadGrid1.MasterTableView.GroupByExpressions.Clear();
    RadGrid1.Rebind();


    Regards,
    Kostadin
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Caio
    Caio avatar
    11 posts
    Member since:
    Jul 2013

    Posted 27 Sep 2013 Link to this post

    Tks, Kostadin.
    I'm trying but not work.

    Now, when I make an filter by "Contains" or any other, my RadGrid show in expand all false (or collapse).

    Below, screenshot example with Filter by Location contains "SAO PAULO".

    Exists some adjust in my function javascript, cs, html, whatever, to show this result in RadGrid expanded?

    (FilterByContains_CollapseAllTrue.jpg)

     and Below, screenshot example how I want show RadGrid result

    (FilterByContains_CollapseAllFalse.jpg)
  5. Kostadin
    Admin
    Kostadin avatar
    1708 posts

    Posted 02 Oct 2013 Link to this post

    Hello Caio,

    I am afraid I am not understanding your requirement completely. I got the impression that you are trying to remove the groups after filtering the grid. The provided images indicates that you want to keep the groups in expand state. If that is your requirement you could set GroupsDefaultExpanded to true. Check out the following code snippet.
    RadGrid1.MasterTableView.GroupsDefaultExpanded = true;

    Regards,
    Kostadin
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Caio
    Caio avatar
    11 posts
    Member since:
    Jul 2013

    Posted 02 Oct 2013 Link to this post

    Hi, Kostadin! Tks your support!!
    It works, but I have two problems.

    First, when I make filter, my button in RadGridView show without name. Below, I post my source code and html to RadGrid1 databind. Occurs just after filter event.

    <telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="True" AllowPaging="False"
                AutoGenerateColumns="False" GridLines="None" AllowFilteringByColumn="true">
                <GroupingSettings CaseSensitive="false"></GroupingSettings>
                <MasterTableView Width="100%" GroupLoadMode="Client" TableLayout="Fixed" GroupsDefaultExpanded="false">
                    <GroupByExpressions>
                        <telerik:GridGroupByExpression>
                            <SelectFields>
                                <telerik:GridGroupByField FieldAlias="Market" FieldName="Market" HeaderText="Market">
                                </telerik:GridGroupByField>
                            </SelectFields>
                            <GroupByFields>
                                <telerik:GridGroupByField FieldName="Market"></telerik:GridGroupByField>
                            </GroupByFields>
                        </telerik:GridGroupByExpression>
                    </GroupByExpressions>
                    <Columns>
                        <telerik:GridBoundColumn DataField="LocationName" FilterControlAltText="Filter LocationName column"
                            UniqueName="LocationName">
                            <ItemStyle HorizontalAlign="Left" />
                        </telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn AllowFiltering="false">
                            <ItemTemplate>
                                <asp:Button ID="btnAddNewFolder" runat="server" OnClick="btnAddNewFolder_OnClick"
                                    Font-Bold="true" Font-Size="12px" />
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings ReorderColumnsOnClient="True" AllowDragToGroup="True" AllowColumnsReorder="True">
                    <ClientEvents OnGridCreated="demo.GridCreated" />
                </ClientSettings>
                <GroupingSettings ShowUnGroupButton="true"></GroupingSettings>
            </telerik:RadGrid>


    public void CarregaGrid()
        {
            var listaRequest = new LocationFolders().ConsultLocations();
            if (listaRequest != null)
            {
                this.RadGrid1.DataSource = listaRequest;
                this.RadGrid1.DataBind();
            }
        }
     
        protected void Page_Load(object sender, EventArgs e)
        {
            if (Session["idioma"] == null)
            {
                string idioma = CultureInfo.CurrentCulture.TwoLetterISOLanguageName.ToString();
                Idioma.MudaCultura(idioma);
            }
     
            else if (Session["idioma"] != null)
            {
                string idioma = Session["idioma"].ToString();
                Idioma.MudaCultura(idioma);
            }
     
            if (!IsPostBack)
            {
                RadGrid1.Columns[1].HeaderText = Idioma.RetornaMensagem("location");
                RadGrid1.Columns[2].HeaderText = Idioma.RetornaMensagem("servername");
                CarregaGrid();
                RadGrid1.DataBind();
     
                foreach (GridDataItem row in RadGrid1.MasterTableView.Items)
                {
                    Button btnAddNewFolder = (Button)row.FindControl("btnAddNewFolder");
                    btnAddNewFolder.Text = Idioma.RetornaMensagem("btnAddNewFolder");
                }
            }
     
            else
            {
                RadGrid1.MasterTableView.GroupsDefaultExpanded = true;
                RadGrid1.Columns[1].HeaderText = Idioma.RetornaMensagem("location");
                RadGrid1.Columns[2].HeaderText = Idioma.RetornaMensagem("servername");
                CarregaGrid();
                foreach (GridDataItem row in RadGrid1.MasterTableView.Items)
                {
                    Button btnAddNewFolder = (Button)row.FindControl("btnAddNewFolder");
                    btnAddNewFolder.Text = Idioma.RetornaMensagem("btnAddNewFolder");
                }
     
            }
        }


    Second, how can I get the name of filter option that user choosed? For example, if filter option is "Contains" or "NoFilter".

    I'm clear?
    Tks for your suppor/attention.
  7. Kostadin
    Admin
    Kostadin avatar
    1708 posts

    Posted 07 Oct 2013 Link to this post

    Hello Caio,

    I noticed that you are using simple data binding into your project. Note that we strongly recommend usage of advanced data binding when a feature like filtering and grouping are used. In the aforementioned help articles you could check the advantage of the advanced data binding and how easily could be implement into your project. I believe this is the caused of your first issue. As to your second requirement you could hook OnItemCommand event handler and check whether the current command is filter. When filter command is executed you could get the e.CommandArgument value is a Pair object that holds the filter function name and the column's unique name. You could check out the following help topic which elaborates more on this matter.

    Regards,
    Kostadin
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017