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

Close filter text boxes when editing

6 Answers 90 Views

Grid

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

6 Answers, 1 is accepted

answered on 04 Sep 2008, 03:15 PM

Hello Laura,

You can use the client-side API of the RadGrid to show and hide the filter items at the top of each column. Simply call the hideFilterItem() function and the showFilterItem() function on the MasterTableView client-side object to hide and show the filter items, respectively. Here is a quick example demonstrating how to do this:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
                <title>Untitled Page</title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> 
        
                    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"> 
        
                        <script type="text/javascript"> 
        
                            function HideFilter() { 
        
                                var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView(); 
        
                                masterTable.hideFilterItem() 
        
                            } 
        
                            function ShowFilter() { 
        
                                var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView(); 
        
                                masterTable.showFilterItem() 
        
                            } 
        
                            function RadGridCommand(sender, args) { 
        
                                var commandName = args.get_commandName(); 
        
                                if (commandName == "Edit") { 
        
                                    HideFilter(); 
        
                                } 
        
                                else { 
        
                                    ShowFilter(); 
        
                                } 
        
                            } 
        
                        </script> 
        
                    </telerik:RadScriptBlock> 
        
                    <telerik:RadGrid ID="RadGrid1" runat="server"  
        
                        AllowFilteringByColumn="True" 
        
                        AutoGenerateColumns="false" 
        
                        AutoGenerateEditColumn="True"  
        
                        OnNeedDataSource="RadGrid1_NeedDataSource"> 
        
                        <MasterTableView> 
        
                            <Columns> 
        
                                <telerik:GridBoundColumn DataField="Name" /> 
        
                                <telerik:GridBoundColumn DataField="Address" /> 
        
                                <telerik:GridBoundColumn DataField="City" /> 
        
                                <telerik:GridBoundColumn DataField="State" /> 
        
                                <telerik:GridBoundColumn DataField="Zip" /> 
        
                            </Columns> 
        
                        </MasterTableView> 
        
                        <ClientSettings> 
        
                            <ClientEvents OnCommand="RadGridCommand" /> 
        
                        </ClientSettings> 
        
                    </telerik:RadGrid> 
        
                </form> 
        
            </body> 
        
            </html>

I hope this was helpful. If you have further questions, feel free to ask.

Sincerely,
Kevin Babcock

answered on 04 Sep 2008, 03:19 PM

Hello Laura,

You can hide your filtering item in RadGrid's PreRender event, if there is an edited or inserted item:

    
            void RadGrid1_PreRender(object sender, EventArgs e) 
        
            { 
        
                if (RadGrid1.EditItems.Count > 0 || RadGrid1.MasterTableView.IsItemInserted) 
        
                { 
        
                    RadGrid1.MasterTableView.GetItems(GridItemType.FilteringItem)[0].Visible = false; 
        
                } 
        
            }

The above code checks if there are items in edit mode, or if there is a newly inserted item, and if true, finds the filtering item and hides it.

Kind regards,
Veli
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

answered on 04 Sep 2008, 04:42 PM

Thanks both Kevin and Veli. It just goes to show you there is usually more
than one solution to a question, as they both worked.

Wonder if either of you can help me with a related question:

Inside my grid with id radgrid1, I have embedded another grid using
gridtemplatecolumn and edititemtemplate. Here is a snippet of the code:

<telerik:GridTemplateColumn EditFormHeaderTextFormat="{0}" >
     <EditItemTemplate>
                <telerik:RadGrid ID="RadGrid2" runat="server" AutoGenerateColumns="False"
                             DataSourceID="CCContactsForAProvider" GridLines="None" Skin="Office2007"
                             AllowAutomaticInserts="True" AllowAutomaticUpdates="True" AllowFilteringByColumn="true"
                             ShowStatusBar="True" .....

.....
    </EditItemTemplate>
</telerik:GridTemplateColumn>

Now, when I go to edit the embedded grid in VS2008 by clicking on <telerik:radgrid>
it does not show up in the property explorer. The gridtemplatecolumn properties show up,
but not the radgrid properties of the embedded grid.
Also, you know how you can access radGrid1 in the javascript and prerender solutions
above? I cannot access the id of the embedded grid (radGrid2). I assume the 2 problems
I am having are related, but do not know how to fix this.

If you have any suggestions, I'd appreciate it. Thanks!!

Laura

answered on 04 Sep 2008, 07:25 PM

Laura,

You are correct - the nested RadGrid properties are not displayed in the Properties toolbox when clicking on it in Visual Studio's Source View. However, if you go to Design View and click on the parent RadGrid, you can get to these properties by opening up the smart menu (click on the little arrow in the top, right-hand corner of the control) and selected the last menu item, Edit Templates. You will enter the Edit Template Mode of the RadGrid, and can select the template you'd like to edit (in the case of your example, it would be the EditItemTemplate for that column). You should now see the RadGrid in your template and can select it and choose its properties from the Properties toolbox.

With regards to referencing the nested RadGrid on the client or server, you will not be able to without using the FindControl() method. However, in both mine and Veli's examples you could use the 'sender' parameter passed into the client-/server-side method, which holds a reference to the RadGrid you want. Here is an example that extends my client-side example from before:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
                <title>Untitled Page</title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> 
        
                    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"> 
        
                        <script type="text/javascript"> 
        
                            function RadGridCommand(sender, args) { 
        
                                // You can get a reference to a RadGrid on your page by using $find() 
        
                                var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView(); 
        
                                var commandName = args.get_commandName(); 
        
                                if (commandName == "Edit") { 
        
                                    masterTable.hideFilterItem() 
        
                                } 
        
                                else { 
        
                                    masterTable.showFilterItem() 
        
                                } 
        
                            } 
        
                            function NestedRadGridCommand(sender, args) { 
        
                                // You also get a reference to the RadGrid which caused the event to be raised 
        
                                // with the first argument passed to the function (sender)  
        
                                var masterTable = sender.get_masterTableView(); 
        
                                var commandName = args.get_commandName(); 
        
                                if (commandName == "Edit") { 
        
                                    masterTable.hideFilterItem() 
        
                                } 
        
                                else { 
        
                                    masterTable.showFilterItem() 
        
                                } 
        
                            } 
        
                        </script> 
        
                    </telerik:RadScriptBlock> 
        
                    <telerik:RadGrid ID="RadGrid1" runat="server"  
        
                        AllowFilteringByColumn="True" 
        
                        AutoGenerateColumns="false" 
        
                        AutoGenerateEditColumn="True"  
        
                        OnNeedDataSource="RadGrid1_NeedDataSource"> 
        
                        <MasterTableView> 
        
                            <Columns> 
        
                                <telerik:GridBoundColumn DataField="Name" /> 
        
                                <telerik:GridBoundColumn DataField="Address" /> 
        
                                <telerik:GridBoundColumn DataField="City" /> 
        
                                <telerik:GridBoundColumn DataField="State" /> 
        
                                <telerik:GridBoundColumn DataField="Zip" /> 
        
                                <telerik:GridTemplateColumn> 
        
                                    <EditItemTemplate> 
        
                                        <telerik:RadGrid ID="RadGrid2" runat="server" 
        
                                            AutoGenerateColumns="false" 
        
                                            AllowFilteringByColumn="true" 
        
                                            AutoGenerateEditColumn="True"  
        
                                            OnNeedDataSource="RadGrid2_NeedDataSource"> 
        
                                            <MasterTableView> 
        
                                                <Columns> 
        
                                                    <telerik:GridBoundColumn DataField="Name" /> 
        
                                                    <telerik:GridBoundColumn DataField="Address" /> 
        
                                                    <telerik:GridBoundColumn DataField="City" /> 
        
                                                    <telerik:GridBoundColumn DataField="State" /> 
        
                                                    <telerik:GridBoundColumn DataField="Zip" /> 
        
                                                </Columns> 
        
                                            </MasterTableView> 
        
                                            <ClientSettings> 
        
                                                <ClientEvents OnCommand="NestedRadGridCommand" /> 
        
                                            </ClientSettings> 
        
                                        </telerik:RadGrid> 
        
                                    </EditItemTemplate> 
        
                                </telerik:GridTemplateColumn> 
        
                            </Columns> 
        
                        </MasterTableView> 
        
                        <ClientSettings> 
        
                            <ClientEvents OnCommand="RadGridCommand" /> 
        
                        </ClientSettings> 
        
                    </telerik:RadGrid> 
        
                </form> 
        
            </body> 
        
            </html>

I hope this helped solve your problem.

Sincerely,
Kevin Babcock

answered on 09 Sep 2008, 03:36 PM

I appreciated you help and hope you can help me with a problems
(hopefully the last in this thread) I am having with hiding the filtering...
Here is what I did:

As you remember, I am fudging a hierarchy design by embedding
a child grid(which I define) inside a parent grid.

When I edit or insert in the main grid(provider) it hides fine.
When I edit in the embedded grid(contact), it hides, but when I try to insert a new
record in the embedded grid, it does not hide. BUT, If I am inserting
a new provider(parent) record, and attempt to insert a contact record in a
new provider record, it DOES hide.

So the only place it doesnt hide is when inserting a new embedded record
inside an existing provider record.

I have to use both the C# code given to me by Veli, and the aspx code given
to me by Kevin. I am only using the c# code for the provider table,
but when I do not use the both the c# and javascript for the
contacts table, then it does not hide on insert or edit.

Here is my code:

aspx:
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
             <script type="text/javascript">

                 function RadGridCommand(sender, args) {
                     // You can get a reference to a RadGrid on your page by using $find()
                     var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                     var commandName = args.get_commandName();
                      if (commandName == "Edit") {
                       // masterTable.hideFilterItem()
                     }
                     else {
                       // masterTable.showFilterItem()
                     }
                 }

                 function NestedRadGridCommand(sender, args) {
                     // You also get a reference to the RadGrid which caused the event to be raised
                     // with the first argument passed to the function (sender)
                     var masterTable = sender.get_masterTableView();
                     var commandName = args.get_commandName();
                     if ((commandName == "Edit") ) {
                         masterTable.hideFilterItem()
                     }
                     else {
                         masterTable.showFilterItem()
                     }
                 }
             </script>
         </telerik:RadScriptBlock>

.......
</Columns>
                           <EditFormSettings ColumnNumber="4">
                          <EditColumn ButtonType="ImageButton" EditFormColumnIndex="3"
                                HeaderButtonType="TextButton" InsertText="Insert new contact">
                          </EditColumn>
                        </EditFormSettings>
                          <PagerStyle AlwaysVisible="True" />
                         </MasterTableView>
                         <ClientSettings>
                            <ClientEvents OnCommand="NestedRadGridCommand" />
                         </ClientSettings>
                        </telerik:RadGrid>
                       </EditItemTemplate>
                     </telerik:GridTemplateColumn>

C#:
for the provider(parent) table:
protected void RadGrid1_PreRender(object sender, EventArgs e)
    {

        //Hide filtering when editing or inserting

       if (RadGrid1.EditItems.Count > 0 || RadGrid1.MasterTableView.IsItemInserted)
        {
           RadGrid1.MasterTableView.GetItems(GridItemType.FilteringItem)[0].Visible = false;
        }

    }

for the contacts(embedded) table:

    protected void RadGrid2_PreRender(object sender, EventArgs e)
    {

        RadGrid contactsGrid = (sender as RadGrid);
        //hide filtering when editing or inserting
        if (contactsGrid.EditItems.Count > 0 || contactsGrid.MasterTableView.IsItemInserted)
        {
            contactsGrid.MasterTableView.GetItems(GridItemType.FilteringItem)[0].Visible = false;
        }

        CCContactsForAProvider.SelectCommand = "SELECT DISTINCT CONTACTS.contact_id, CONTACTS.contact_type_id, CONTACTS.contact_name, CONTACTS.attn, CONTACTS.PO_box, CONTACTS.street_address1, CONTACTS.street_address2, CONTACTS.block, CONTACTS.city, CONTACTS.state_province, CONTACTS.zip_code, CONTACTS.primary_phone, CONTACTS.secondary_phone, CONTACTS.tertiary_phone, CONTACTS.country_cd, CONTACTS.region, CONTACTS.primary_fax, CONTACTS.secondary_fax, CONTACTS.primary_email, CONTACTS.secondary_email, CONTACTS.mobile_phone, PROVIDER_CONTACTS.contact_id AS Expr1, PROVIDER_CONTACTS.provider_id, PROVIDERS.provider_id AS Expr2 FROM CONTACTS INNER JOIN PROVIDER_CONTACTS ON CONTACTS.contact_id = PROVIDER_CONTACTS.contact_id AND CONTACTS.contact_id = PROVIDER_CONTACTS.contact_id INNER JOIN PROVIDERS ON PROVIDER_CONTACTS.provider_id = PROVIDERS.provider_id WHERE (PROVIDER_CONTACTS.provider_id = " + TextBoxProviderId.Text + ")";

    }