How to display background colour on RadNumericTextBox and RadGrid cell after a value is entered?

[Herman Gouw]

I am using RadControls for ASP.NET AJAX Q1 2012 in my current project.

I have a web page which has a RadNumericTextBox and a RadGrid.

The RadGrid has In Place edit mode and only accepts double value on each cell.

I need to do the following on the web page :
1. After the user enters a value on the RadNumericTextBox, display a background colour on the RadNumericTextBox depending on the value entered.
2. After the user enters a value on each RadGrid cell, display a background colour on the RadNumericTextBox depending on the  value entered.

The background colour needs to be displayed as soon as the value has been completely entered.

Can you please help me how to do this?

Thanks,
Herman

[Shinu]

Hi Herman,

1) Try the following code snippet to change the RadNumericTextBox background color after entering the value:

ASPX:

<telerik:RadNumericTextBox runat="server" ID="RadNumericTextBox1">
           <ClientEvents OnValueChanged="OnValueChanged" />
</telerik:RadNumericTextBox>

Java Script:

<script type="text/javascript">
       function OnValueChanged(sender, args) {
        sender.get_styles().EnabledStyle[0] += "background-color: Red;";
        sender.updateCssClass();
    }
</script>

2) The following code snippet shows how to change the background color of RadNumericTextBox based on the value entered in RadGrid edit form cell.
ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" DataSourceID="SqlDataSource1"
          OnItemDataBound="RadGrid1_ItemDataBound" AutoGenerateEditColumn="true">
          <MasterTableView DataKeyNames="EmployeeID" EditMode="InPlace">
              <Columns>
                  <telerik:GridBoundColumn HeaderText="EmployeeID" DataField="EmployeeID" UniqueName="EmployeeID">
                  </telerik:GridBoundColumn>
                  <telerik:GridBoundColumn HeaderText="FirstName" DataField="FirstName" UniqueName="FirstName">
                  </telerik:GridBoundColumn>
              </Columns>
          </MasterTableView>
          <ClientSettings Selecting-AllowRowSelect="true">
          </ClientSettings>
      </telerik:RadGrid>
      <telerik:RadNumericTextBox runat="server" ID="RadNumericTextBox1">
       </telerik:RadNumericTextBox>

C#:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
  {
     if (e.Item is GridEditableItem && e.Item.IsInEditMode)
      {
          GridEditableItem item = (GridEditableItem)e.Item;
          foreach (GridColumn col in RadGrid1.Columns)
          {
              if(col.ColumnType=="GridBoundColumn")
              {
              TextBox txtbox1 = (TextBox)item[col.UniqueName].Controls[0];
              txtbox1.Attributes.Add("onblur", "txtBlur(this);");
              }
          }
        }
  }

Java Script:

<script type="text/javascript">
    function txtBlur(sender) {
        RadNumericTextBox1 = $find("<%=RadNumericTextBox1.ClientID %>");
        if (sender.value == 'XX') //change the RadNumericTextBox background color based on the the value
        {
            RadNumericTextBox1.get_styles().EnabledStyle[0] += "background-color: Red;";
            RadNumericTextBox1.updateCssClass();
        }
        else {
            RadNumericTextBox1.get_styles().EnabledStyle[0] += "background-color: transparent;";
            RadNumericTextBox1.updateCssClass();
        }
   }
  </script>

Thanks,
Shinu.

[Herman Gouw]

Hi Shinu,

Thank you for your reply.

More information for question no. 2 as given below.

The RadGrid is declared as follows:

<telerik:RadGrid ID="rgLevels" CssClass="CustomGrid" AllowSorting="false" AutoGenerateColumns="false" GridLines="Vertical" OnItemCommand="rgLevels_ItemCommand" OnItemCreated="rgLevels_ItemCreated" OnItemDataBound="rgLevels_ItemDataBound" OnNeedDataSource="rgLevels_NeedDataSource" runat="server">
    <ClientSettings AllowKeyboardNavigation="true" EnablePostBackOnRowClick="true">
        <Scrolling UseStaticHeaders="true" />
        <Selecting AllowRowSelect="true" />
    </ClientSettings>
    <MasterTableView EditMode="InPlace" TableLayout="Fixed">
        <Columns>
            <telerik:GridNumericColumn DataField="CalendarYear"  NumericType="Number" DataType="System.Int32" HeaderStyle-Width="6%" ItemStyle-HorizontalAlign="Center" ReadOnly="true" UniqueName="CalendarYear" />
            <telerik:GridNumericColumn DataField="MinLevelJan"   NumericType="Number" DataFormatString="{0:##0.0}" DataType="System.Double" HeaderText="Jan Min" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="3%" ItemStyle-HorizontalAlign="Left" UniqueName="MinLevelJan" />
            <telerik:GridNumericColumn DataField="MaxLevelJan"   NumericType="Number" DataFormatString="{0:##0.0}" DataType="System.Double" HeaderText="Jan Max" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="3%" ItemStyle-HorizontalAlign="Left" UniqueName="MaxLevelJan" />
            <telerik:GridNumericColumn DataField="MinLevelFeb"   NumericType="Number" DataFormatString="{0:##0.0}" DataType="System.Double" HeaderText="Feb Min" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="3%" ItemStyle-HorizontalAlign="Left" UniqueName="MinLevelFeb" />
            <telerik:GridNumericColumn DataField="MaxLevelFeb"   NumericType="Number" DataFormatString="{0:##0.0}" DataType="System.Double" HeaderText="Feb Max" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="3%" ItemStyle-HorizontalAlign="Left" UniqueName="MaxLevelFeb" />
            <telerik:GridNumericColumn DataField="MinLevelMarch" NumericType="Number" DataFormatString="{0:##0.0}" DataType="System.Double" HeaderText="Mar Min" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="3%" ItemStyle-HorizontalAlign="Left" UniqueName="MinLevelMarch" />
            <telerik:GridNumericColumn DataField="MaxLevelMarch" NumericType="Number" DataFormatString="{0:##0.0}" DataType="System.Double" HeaderText="Mar Max" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="3%" ItemStyle-HorizontalAlign="Left" UniqueName="MaxLevelMarch" />
            <telerik:GridNumericColumn DataField="MinLevelApril" NumericType="Number" DataFormatString="{0:##0.0}" DataType="System.Double" HeaderText="Apr Min" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="3%" ItemStyle-HorizontalAlign="Left" UniqueName="MinLevelApril" />
            <telerik:GridNumericColumn DataField="MaxLevelApril" NumericType="Number" DataFormatString="{0:##0.0}" DataType="System.Double" HeaderText="Apr Max" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="3%" ItemStyle-HorizontalAlign="Left" UniqueName="MaxLevelApril" />
            <telerik:GridNumericColumn DataField="MinLevelMay"   NumericType="Number" DataFormatString="{0:##0.0}" DataType="System.Double" HeaderText="May Min" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="3%" ItemStyle-HorizontalAlign="Left" UniqueName="MinLevelMay" />
            <telerik:GridNumericColumn DataField="MaxLevelMay"   NumericType="Number" DataFormatString="{0:##0.0}" DataType="System.Double" HeaderText="May Max" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="3%" ItemStyle-HorizontalAlign="Left" UniqueName="MaxLevelMay" />
            <telerik:GridNumericColumn DataField="MinLevelJune"  NumericType="Number" DataFormatString="{0:##0.0}" DataType="System.Double" HeaderText="Jun Min" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="3%" ItemStyle-HorizontalAlign="Left" UniqueName="MinLevelJune" />
            <telerik:GridNumericColumn DataField="MaxLevelJune"  NumericType="Number" DataFormatString="{0:##0.0}" DataType="System.Double" HeaderText="Jun Max" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="3%" ItemStyle-HorizontalAlign="Left" UniqueName="MaxLevelJune" />
            <telerik:GridNumericColumn DataField="MinLevelJuly"  NumericType="Number" DataFormatString="{0:##0.0}" DataType="System.Double" HeaderText="Jul Min" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="3%" ItemStyle-HorizontalAlign="Left" UniqueName="MinLevelJuly" />
            <telerik:GridNumericColumn DataField="MaxLevelJuly"  NumericType="Number" DataFormatString="{0:##0.0}" DataType="System.Double" HeaderText="Jul Max" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="3%" ItemStyle-HorizontalAlign="Left" UniqueName="MaxLevelJuly" />
            <telerik:GridNumericColumn DataField="MinLevelAug"   NumericType="Number" DataFormatString="{0:##0.0}" DataType="System.Double" HeaderText="Aug Min" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="3%" ItemStyle-HorizontalAlign="Left" UniqueName="MinLevelAug" />
            <telerik:GridNumericColumn DataField="MaxLevelAug"   NumericType="Number" DataFormatString="{0:##0.0}" DataType="System.Double" HeaderText="Aug Max" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="3%" ItemStyle-HorizontalAlign="Left" UniqueName="MaxLevelAug" />
            <telerik:GridNumericColumn DataField="MinLevelSept"  NumericType="Number" DataFormatString="{0:##0.0}" DataType="System.Double" HeaderText="Sep Min" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="3%" ItemStyle-HorizontalAlign="Left" UniqueName="MinLevelSept" />
            <telerik:GridNumericColumn DataField="MaxLevelSept"  NumericType="Number" DataFormatString="{0:##0.0}" DataType="System.Double" HeaderText="Sep Max" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="3%" ItemStyle-HorizontalAlign="Left" UniqueName="MaxLevelSept" />
            <telerik:GridNumericColumn DataField="MinLevelOct"   NumericType="Number" DataFormatString="{0:##0.0}" DataType="System.Double" HeaderText="Oct Min" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="3%" ItemStyle-HorizontalAlign="Left" UniqueName="MinLevelOct" />
            <telerik:GridNumericColumn DataField="MaxLevelOct"   NumericType="Number" DataFormatString="{0:##0.0}" DataType="System.Double" HeaderText="Oct Max" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="3%" ItemStyle-HorizontalAlign="Left" UniqueName="MaxLevelOct" />
            <telerik:GridNumericColumn DataField="MinLevelNov"   NumericType="Number" DataFormatString="{0:##0.0}" DataType="System.Double" HeaderText="Nov Min" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="3%" ItemStyle-HorizontalAlign="Left" UniqueName="MinLevelNov" />
            <telerik:GridNumericColumn DataField="MaxLevelNov"   NumericType="Number" DataFormatString="{0:##0.0}" DataType="System.Double" HeaderText="Nov Max" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="3%" ItemStyle-HorizontalAlign="Left" UniqueName="MaxLevelNov" />
            <telerik:GridNumericColumn DataField="MinLevelDec"   NumericType="Number" DataFormatString="{0:##0.0}" DataType="System.Double" HeaderText="Dec Min" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="3%" ItemStyle-HorizontalAlign="Left" UniqueName="MinLevelDec" />
            <telerik:GridNumericColumn DataField="MaxLevelDec"   NumericType="Number" DataFormatString="{0:##0.0}" DataType="System.Double" HeaderText="Dec Max" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="3%" ItemStyle-HorizontalAlign="Left" UniqueName="MaxLevelDec" />
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

The ItemDataBound is written as follows:

protected void rgLevels_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem gridItem = e.Item as GridDataItem;
        for (int i = 0; i < 24; i++)
        {
            if ((bool)ReservoirLevels.Tables[WebConstants.Levels].Rows[gridItem.ItemIndex][ReservoirLevelItems[i] + WebConstants.ReadOnly])
            {
                if (e.Item.IsInEditMode)
                {
                    RadNumericTextBox numericTextBox = (RadNumericTextBox)gridItem[ReservoirLevelItems[i]].Controls[0];
                    numericTextBox.BackColor = Color.FromArgb(128, 128, 128);
                    numericTextBox.ForeColor = Color.FromArgb(128, 128, 128);
                    numericTextBox.Enabled = false;
                    numericTextBox.Attributes.Add("onblur", "txtBlur(this);");
                }
                else
                {
                    gridItem[ReservoirLevelItems[i]].BackColor = Color.FromArgb(128, 128, 128);
                    gridItem[ReservoirLevelItems[i]].ForeColor = Color.FromArgb(128, 128, 128);
                    gridItem[ReservoirLevelItems[i]].Enabled = false;
                }
            }
        }
    }
}

On the following line in the JavaScript function txtBlur:

var radNumericTextBox = $find("<%= RadNumericTextBox1.ClientID %>");

can you please tell me what I should replace RadNumericTextBox1 with ?

Regards,
Herman

[Tsvetina]

Hello Herman,

If your numeric textbox is inside the grid cell, try the following modification of the code:

protected void rgLevels_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem gridItem = e.Item as GridDataItem;
        for (int i = 0; i < 24; i++)
        {
            if ((bool)ReservoirLevels.Tables[WebConstants.Levels].Rows[gridItem.ItemIndex][ReservoirLevelItems[i] + WebConstants.ReadOnly])
            {
                if (e.Item.IsInEditMode)
                {
                    RadNumericTextBox numericTextBox = (RadNumericTextBox)gridItem[ReservoirLevelItems[i]].Controls[0];
                    numericTextBox.BackColor = Color.FromArgb(128, 128, 128);
                    numericTextBox.ForeColor = Color.FromArgb(128, 128, 128);
                    numericTextBox.Enabled = false;
                    numericTextBox.ClientEvents.OnBlur = "txtBlur";
                }
                else
                {
                    gridItem[ReservoirLevelItems[i]].BackColor = Color.FromArgb(128, 128, 128);
                    gridItem[ReservoirLevelItems[i]].ForeColor = Color.FromArgb(128, 128, 128);
                    gridItem[ReservoirLevelItems[i]].Enabled = false;
                }
            }
        }
    }
}

function txtBlur(sender, args){
    var radNumericTextBox = sender;
}

I hope this helps.

Kind regards,
Tsvetina
the Telerik team

[Herman Gouw]

Thanks Tsvetina  for the reply.

I was working on another project in the last 2 months.

I am now back at this project.

I tried the following for testing but no popup box is displayed:

function txtBlur(sender, args) {
    alert("Hello");
}

Can anybody please help?

Thanks,
Herman

[Tsvetina]

Hello Herman,

Would it be possible that you post the latest code, related to this problem? Have you debugged it to confirm that the line where the OnBlur event is attached is hit? Also, you can try the same logic in ItemCreated to see if there is a difference.

All the best,
Tsvetina
the Telerik team

[Herman Gouw]

Hi Tsvetina,

The event works fine after I tried the same logic in ItemCreated.

The latest source code is available on http://www.sendspace.com/file/1c8t86
In the source code the RadGrid behaves as follows:
1. To go to edit mode, click on a grid row.
2. When the user edits a grid cell, and
a. the user clears the value on the grid cell then the original value will be restored.
b. the user enters a new value on the grid cell and if the difference between the original value and the new value is more than 10% then the background of the grid cell will be displayed red colour.

When I have a row on the RadGrid in edit mode, by clicking a button (somewhere on the form outside the grid) I would like to set that row into view mode and get the new values of the row?
Can you please tell me how to set the edit mode row into view mode and get the values of each grid cell from the OnClick event of the button?

Thanks,
Herman

[Tsvetina]

Hi Herman,

You can put the item in view mode with the following code:

RadGrid1.EditIndexes.Clear();
RadGrid1.Rebind();

Then, on PreRender, access the edited item (you can keep its index in Session) and get the needed data:

protected void radGrid_ItemCommand(object sender, GridCommandEventArgs e)
{
    if (e.CommandName == "RowClick")
    {
        GridDataItem gridDataItem = (GridDataItem)e.Item;
        gridDataItem.Edit = true;
        gridDataItem.Selected = true;
        Session["EditedItemIndex"] = gridDataItem.ItemIndex;
        this.radGrid.Rebind();

    }
}

protected void Button1_Click(object sender, EventArgs e)
{
    Session["EditedItemIndex"] = null;
    radGrid.EditIndexes.Clear();
    radGrid.Rebind();
}

protected void RadGrid1_PreRender(object sender, EventArgs e)
{
    if (Session["EditedItemIndex"] != null)
    {
        GridDataItem item = radGrid.MasterTableView.Items[Convert.ToInt32(Session["EditedItemIndex"])];
        //access item data
    }
}

All the best,
Tsvetina
the Telerik team

[Herman Gouw]

Thank you for your reply, Tsvetina.

Can you please show me to access each cell in RadGrid1_PreRender below?

protected void RadGrid1_PreRender(object sender, EventArgs e)
{
    if (Session["EditedItemIndex"] != null)
    {
        GridDataItem item = radGrid.MasterTableView.Items[Convert.ToInt32(Session["EditedItemIndex"])];
        //  Access the value from each cell
    }
}

Regards,
Herman

[Tsvetina]

Hello Herman,

It would be the same way as you would access data in ItemDataBound:

protected void RadGrid1_PreRender(object sender, EventArgs e)
{
    if (Session["EditedItemIndex"] != null)
    {
        GridDataItem item = radGrid.MasterTableView.Items[Convert.ToInt32(Session["EditedItemIndex"])];
        string name = item["Name"].Text; //for bound column with UniqueName="Name"
        string address = (item.FindControl("addressLbl") as Label).Text; //for template column ItemTemplate controls
    }
}

Or if you want to do this using a loop (for bound columns only):

protected void RadGrid1_PreRender(object sender, EventArgs e)
{
    if (Session["EditedItemIndex"] != null)
    {
        GridDataItem item = radGrid.MasterTableView.Items[Convert.ToInt32(Session["EditedItemIndex"])];
        foreach(TableCell cell in item.Cells)
        {
          if(cell.Text!="" && cell.Text!=" ")
          {
               //use cell.Text
          }
        }
    }
}

Kind regards,
Tsvetina
the Telerik team

[Herman Gouw]

Thanks Tsvetina.

I tried your sample below but it gave me the characters " " instead of the value entered.

The latest source code is available on http://www.sendspace.com/file/ecm595

Regards,
Herman

[Tsvetina]

Hi Herman,

I checked your attachment but could see no code for the PreRender event. Can you double check and see if this is the latest version? Also, you could consider opening a formal support ticket where you can attach your project directly to the current message and get shorter response time (just make sure you link to this forum thread, so we have it in mind when looking at your case).

Regards,
Tsvetina
the Telerik team