Style filter textbox if text exists

[Alex]

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

[MasterChiefMasterChef]

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

[Alex]

I have attached a mock image of what I am wanting in regards to styling my textbox filter.

[Shinu]

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.

[Alex]

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

[MasterChiefMasterChef]

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

[Alex]

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?

[Shinu]

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.

[Alex]

I am getting a design-time error stating "flag is assigned but never used".

[Shinu]

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