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

12 posts, 0 answers
  1. Herman Gouw
    Herman Gouw avatar
    100 posts
    Member since:
    Aug 2012

    Posted 23 Mar 2012 Link to this post

    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
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 23 Mar 2012 Link to this post

    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.
  3. Herman Gouw
    Herman Gouw avatar
    100 posts
    Member since:
    Aug 2012

    Posted 27 Mar 2012 Link to this post

    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
  4. Tsvetina
    Admin
    Tsvetina avatar
    2450 posts

    Posted 02 Apr 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Herman Gouw
    Herman Gouw avatar
    100 posts
    Member since:
    Aug 2012

    Posted 04 Jun 2012 Link to this post

    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
  6. Tsvetina
    Admin
    Tsvetina avatar
    2450 posts

    Posted 04 Jun 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  7. Herman Gouw
    Herman Gouw avatar
    100 posts
    Member since:
    Aug 2012

    Posted 26 Jun 2012 Link to this post

    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
  8. Tsvetina
    Admin
    Tsvetina avatar
    2450 posts

    Posted 27 Jun 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  9. Herman Gouw
    Herman Gouw avatar
    100 posts
    Member since:
    Aug 2012

    Posted 28 Jun 2012 Link to this post

    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
  10. Tsvetina
    Admin
    Tsvetina avatar
    2450 posts

    Posted 02 Jul 2012 Link to this post

    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!="&nbsp;")
              {
                   //use cell.Text
              }
            }
        }
    }


    Kind regards,
    Tsvetina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  11. Herman Gouw
    Herman Gouw avatar
    100 posts
    Member since:
    Aug 2012

    Posted 04 Jul 2012 Link to this post

    Thanks Tsvetina.

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

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

    Regards,
    Herman
  12. Tsvetina
    Admin
    Tsvetina avatar
    2450 posts

    Posted 06 Jul 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top