Style filter textbox if text exists

10 posts, 0 answers
  1. Alex
    Alex avatar
    23 posts
    Member since:
    Dec 2012

    Posted 07 Mar 2013 Link to this post

    I have a radgrid with filters enabled. I want to draw attention to the filters by changing the background color of the textbox if text exists. So my pseudo code would be as follows:

    if textbox.text != null
    {
    textbox.backgroundcolor = red;
    }

    How do I programmatically target these textbox filters? I have three of them on my RadGrid: one for client name, employee name, and client number. Plus I would also like to lengthen with width of these textbox filters.

    Thanks,
    Alex
  2. MasterChiefMasterChef
    MasterChiefMasterChef avatar
    152 posts
    Member since:
    Jan 2013

    Posted 07 Mar 2013 Link to this post

    Hi Alex,

    You will need to understand some basics first. You will want to look at the documentation here for help  selecting text inside the filter text box:
    http://www.telerik.com/help/aspnet-ajax/grid-setting-filter-textbox-dimensions.html

    To select the radGrid's Filter text inputs for styling, you would select the classes like this:
    .RadGrid .rgFilterRow input
    {
           background-color: red;
    }

    You should be able to use these two bits of code to create what you are describing. Your description is very vague, so this should be a good place to start understanding how to select certain elements inside of Telerik RadControls.

    Good luck,
    Master Chief
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Alex
    Alex avatar
    23 posts
    Member since:
    Dec 2012

    Posted 07 Mar 2013 Link to this post

    I have attached a mock image of what I am wanting in regards to styling my textbox filter.
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 07 Mar 2013 Link to this post

    Hi,

    I guess you want to change the Color and width of the Filter TextBox after filtering. Please take a look into the following code snippet.

    C#:
    protected void Radgrid1_ItemCommand(object sender, Telerik.Web.UI.GridCommandEventArgs e)
    {  
            if (e.CommandName == RadGrid.FilterCommandName)
            {
                flag = true;             
                columnName = ((System.Web.UI.Pair)(e.CommandArgument)).Second.ToString();              
            }   
    }
    protected void Radgrid1_PreRender(object sender, EventArgs e)
    {
        if (flag)
        {         
            GridFilteringItem fil = (GridFilteringItem)Radgrid1.MasterTableView.GetItems(GridItemType.FilteringItem)[0];
            TextBox txt = (TextBox)fil[columnName].Controls[0];
            txt.BackColor = Color.Red;
            txt.Width = Unit.Pixel(100);
        }
    }

    Thanks,
    Shinu.
  6. Alex
    Alex avatar
    23 posts
    Member since:
    Dec 2012

    Posted 08 Mar 2013 Link to this post

    Shinu,
    I am sorry, but I don't understand. When I paste your code into my code-behind, I get a design-time error on the following:

    "flag" does not exist
    "columName" does not exist

    should I declare "flag" as a boolean?
    What about "columnName", what is it? is it a variable? Or do you want me to replace my actual column name with your text "columnName". So if my columns are named "Client_Name", "Client_Number", and "Billing_Atty", then swap out "columnName" for "Client_Name"?

    Sorry for my confusion.
    Thanks,
    Alex
  7. MasterChiefMasterChef
    MasterChiefMasterChef avatar
    152 posts
    Member since:
    Jan 2013

    Posted 08 Mar 2013 Link to this post

    flag is a boolean, since it is being set to 'true'. columnName is a string, since at the end of the declaration the function being called is .ToString();

    try declaring these two and seeing if the code provided by shinu helps solve your problem.

    Good luck,
    Master Chief
  8. Alex
    Alex avatar
    23 posts
    Member since:
    Dec 2012

    Posted 08 Mar 2013 Link to this post

    Alright, I placed this above my constructor.
    string columnName;
    Boolean flag;
    I built and ran the code without error, but my column filter textbox did not change. Where in Shinu's code are my column filter names bound to "columnName"? Is that why there are no changes? I haven't told the app what to change?
  9. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 11 Mar 2013 Link to this post

    Hi,

    I apologize for not giving the declaration of variables. You can add it as shown below.
    C#:
    bool flag = false;
    string columnName = "";

    Thanks,
    Shinu.
  10. Alex
    Alex avatar
    23 posts
    Member since:
    Dec 2012

    Posted 11 Mar 2013 Link to this post

    I am getting a design-time error stating "flag is assigned but never used".
  11. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 12 Mar 2013 Link to this post

    Hi,

    Unfortunately I cannot replicate the issue at my end. Here is the code that I tried which worked as expected.
    aspx:
    <telerik:RadGrid  ID="RadGrid1" AllowFilteringByColumn="true" OnPreRender="RadGrid1_PreRender" AutoGenerateColumns="false" runat="server" DataSourceID="SqlDataSource2"OnItemCommand="RadGrid1_ItemCommand" >
       <MasterTableView>
          <Columns>
            <telerik:GridBoundColumn DataField="OrderID" HeaderText="OrderID" UniqueName="OrderID"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="EmployeeID" UniqueName="EmployeeID"></telerik:GridBoundColumn>
          </Columns>
       </MasterTableView>
    </telerik:RadGrid>
    C#:
    bool flag = false;
    string columnName = "";
    protected void Radgrid1_ItemCommand(object sender, Telerik.Web.UI.GridCommandEventArgs e)
            if (e.CommandName == RadGrid.FilterCommandName)
            {
                flag = true;            
                columnName = ((System.Web.UI.Pair)(e.CommandArgument)).Second.ToString();             
            }  
    }
    protected void Radgrid1_PreRender(object sender, EventArgs e)
    {
        if (flag)
        {        
            GridFilteringItem fil = (GridFilteringItem)Radgrid1.MasterTableView.GetItems(GridItemType.FilteringItem)[0];
            TextBox txt = (TextBox)fil[columnName].Controls[0];
            txt.BackColor = Color.Red;
            txt.Width = Unit.Pixel(100);
        }
    }

    Thanks,
    Shinu
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017