Close filter text boxes when editing

7 posts, 0 answers
  1. Laura
    Laura avatar
    131 posts
    Member since:
    Aug 2008

    Posted 04 Sep 2008 Link to this post

    How would I hide the filter text boxes when editing or inserting?
    These textboxes make it confusing for the user as to where to enter data.

    Thanks,
    Laura
  2. Kevin Babcock
    Kevin Babcock avatar
    189 posts
    Member since:
    Mar 2007

    Posted 04 Sep 2008 Link to this post

    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:

    1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
    2  
    3 <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    4  
    5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    6  
    7 <html xmlns="http://www.w3.org/1999/xhtml"
    8 <head runat="server"
    9     <title>Untitled Page</title> 
    10 </head> 
    11 <body> 
    12     <form id="form1" runat="server"
    13         <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> 
    14              
    15         <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"
    16             <script type="text/javascript"
    17                 function HideFilter() { 
    18                     var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView(); 
    19                     masterTable.hideFilterItem() 
    20                 } 
    21  
    22                 function ShowFilter() { 
    23                     var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView(); 
    24                     masterTable.showFilterItem() 
    25                 } 
    26                  
    27                 function RadGridCommand(sender, args) { 
    28                     var commandName = args.get_commandName(); 
    29                     if (commandName == "Edit") { 
    30                         HideFilter(); 
    31                     } 
    32                     else { 
    33                         ShowFilter(); 
    34                     } 
    35                 } 
    36             </script> 
    37         </telerik:RadScriptBlock> 
    38  
    39         <telerik:RadGrid ID="RadGrid1" runat="server"  
    40             AllowFilteringByColumn="True" 
    41             AutoGenerateColumns="false" 
    42             AutoGenerateEditColumn="True"  
    43             OnNeedDataSource="RadGrid1_NeedDataSource"
    44             <MasterTableView> 
    45                 <Columns> 
    46                     <telerik:GridBoundColumn DataField="Name" /> 
    47                     <telerik:GridBoundColumn DataField="Address" /> 
    48                     <telerik:GridBoundColumn DataField="City" /> 
    49                     <telerik:GridBoundColumn DataField="State" /> 
    50                     <telerik:GridBoundColumn DataField="Zip" /> 
    51                 </Columns> 
    52             </MasterTableView> 
    53             <ClientSettings> 
    54                 <ClientEvents OnCommand="RadGridCommand" /> 
    55             </ClientSettings> 
    56         </telerik:RadGrid> 
    57     </form> 
    58 </body> 
    59 </html> 
    60  

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

    Sincerely,
    Kevin Babcock
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 04 Sep 2008 Link to this post

    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.
  5. Laura
    Laura avatar
    131 posts
    Member since:
    Aug 2008

    Posted 04 Sep 2008 Link to this post

    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




  6. Kevin Babcock
    Kevin Babcock avatar
    189 posts
    Member since:
    Mar 2007

    Posted 04 Sep 2008 Link to this post

    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:

    1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
    2  
    3 <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    4  
    5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    6  
    7 <html xmlns="http://www.w3.org/1999/xhtml"
    8 <head runat="server"
    9     <title>Untitled Page</title> 
    10 </head> 
    11 <body> 
    12     <form id="form1" runat="server"
    13         <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> 
    14              
    15         <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"
    16             <script type="text/javascript"
    17                 function RadGridCommand(sender, args) { 
    18                     // You can get a reference to a RadGrid on your page by using $find() 
    19                     var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView(); 
    20                     var commandName = args.get_commandName(); 
    21                     if (commandName == "Edit") { 
    22                         masterTable.hideFilterItem() 
    23                     } 
    24                     else { 
    25                         masterTable.showFilterItem() 
    26                     } 
    27                 } 
    28  
    29                 function NestedRadGridCommand(sender, args) { 
    30                     // You also get a reference to the RadGrid which caused the event to be raised 
    31                     // with the first argument passed to the function (sender)  
    32                     var masterTable = sender.get_masterTableView(); 
    33                     var commandName = args.get_commandName(); 
    34                     if (commandName == "Edit") { 
    35                         masterTable.hideFilterItem() 
    36                     } 
    37                     else { 
    38                         masterTable.showFilterItem() 
    39                     } 
    40                 } 
    41             </script> 
    42         </telerik:RadScriptBlock> 
    43  
    44         <telerik:RadGrid ID="RadGrid1" runat="server"  
    45             AllowFilteringByColumn="True" 
    46             AutoGenerateColumns="false" 
    47             AutoGenerateEditColumn="True"  
    48             OnNeedDataSource="RadGrid1_NeedDataSource"
    49             <MasterTableView> 
    50                 <Columns> 
    51                     <telerik:GridBoundColumn DataField="Name" /> 
    52                     <telerik:GridBoundColumn DataField="Address" /> 
    53                     <telerik:GridBoundColumn DataField="City" /> 
    54                     <telerik:GridBoundColumn DataField="State" /> 
    55                     <telerik:GridBoundColumn DataField="Zip" /> 
    56                     <telerik:GridTemplateColumn> 
    57                         <EditItemTemplate> 
    58                             <telerik:RadGrid ID="RadGrid2" runat="server" 
    59                                 AutoGenerateColumns="false" 
    60                                 AllowFilteringByColumn="true" 
    61                                 AutoGenerateEditColumn="True"  
    62                                 OnNeedDataSource="RadGrid2_NeedDataSource"
    63                                 <MasterTableView> 
    64                                     <Columns> 
    65                                         <telerik:GridBoundColumn DataField="Name" /> 
    66                                         <telerik:GridBoundColumn DataField="Address" /> 
    67                                         <telerik:GridBoundColumn DataField="City" /> 
    68                                         <telerik:GridBoundColumn DataField="State" /> 
    69                                         <telerik:GridBoundColumn DataField="Zip" /> 
    70                                     </Columns> 
    71                                 </MasterTableView> 
    72                                 <ClientSettings> 
    73                                     <ClientEvents OnCommand="NestedRadGridCommand" /> 
    74                                 </ClientSettings> 
    75                             </telerik:RadGrid> 
    76                         </EditItemTemplate> 
    77                     </telerik:GridTemplateColumn> 
    78                 </Columns> 
    79             </MasterTableView> 
    80             <ClientSettings> 
    81                 <ClientEvents OnCommand="RadGridCommand" /> 
    82             </ClientSettings> 
    83         </telerik:RadGrid> 
    84     </form> 
    85 </body> 
    86 </html> 
    87  


    I hope this helped solve your problem.

    Sincerely,
    Kevin Babcock
  7. Laura
    Laura avatar
    131 posts
    Member since:
    Aug 2008

    Posted 04 Sep 2008 Link to this post

    Thank you Kevin. Your explanation really clears things up for me.
  8. Laura
    Laura avatar
    131 posts
    Member since:
    Aug 2008

    Posted 09 Sep 2008 Link to this post

    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 + ")";

        } 
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017