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

[Herman Gouw]

Hi Tsvetina,

I've been trying to reply to you on the following topic

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

but I always got a server error.

Regards,
Herman

[Herman Gouw]

Hi Tsvetina,

This is my reply to the topic How to display background colour on RadNumericTextBox and RadGrid cell after a value is entered?

I copied the original topic here because I am unable to reply it there for some reasons.

After I moved the same logic in ItemCreated, it works (i.e. the event handler OnBlur is executed).

I have further question though.

I have uploaded the test program on the internet and it is available here WebGrid.zip

The test program requires Visual Studio 2010 and Telerik RadControls for ASP.NET AJAX Q2 2011.

To enter the edit mode you need to double click on a grid row.

Can you please tell me how to get the value of the grid cell value on the JavaScript functions txtFocus and txtBlur?

I tried using "radNumericTextBox.value" or "sender.value", but it gives undefined value.

Regards,
Herman

[Herman Gouw]

Hi,

Can someone please pass this to topic to Tsvetina?

This is in regards to the original topic in http://www.telerik.com/community/forums/aspnet-ajax/general-discussions/how-to-display-background-colour-on-radnumerictextbox-and-radgrid-cell-after-a-value-is-entered.aspx

I copied it here because I am unable to reply her in the original topic (I always got a server error).

The test program is available on

http://www.speedyshare.com/fV2Kt/Web.Apps.RadGrid.zip

or 

http://www.sendspace.com/file/a9elbu

I am unable to proceed with my project until I get an answer to my question from her,

Thanks,
Herman

[Herman Gouw]

Hi,

My question is how can I get the value of the cell in JavaScript functions txtFocus and txtBlur?

Thanks,
Herman

[Richard]

Herman,

I downloaded and modified the JavaScript on the RadGrid.aspx page in your provided demo. This works for me as shown in this video: http://screencast.com/t/x8VUbd3Vz

<script language="javascript" type="text/javascript">
    function defaultValue(sender, args) {
        if (!args.get_newValue()) {
            args.set_newValue("10");
        }
    }
    function txtFocus(sender, args) {
        var radNumericTextBox = sender;
        alert("txtFocus event: " + radNumericTextBox.get_value());
    }
    function txtBlur(sender, args) {
        var radNumericTextBox = sender;
        alert("txtBlur event: " + radNumericTextBox.get_value());
    }
</script>

Hope this helps!

[Herman Gouw]

Hi,

Thank you very much for the answers.

I have uploaded the updated test program on http://www.sendspace.com/file/1c8t86

The latest JavaScript functions are as follows:

function onFocus(sender, args) {
    var radNumericTextBox = sender;
    if (radNumericTextBox.origValue == null) {
        radNumericTextBox.origValue = radNumericTextBox.get_value()
    }
}
function onValueChanging(sender, args) {
    var radNumericTextBox = sender;
    if (!args.get_newValue()) {
        args.set_newValue(radNumericTextBox.origValue);
    }
    else {
        var difference = radNumericTextBox.get_value() - radNumericTextBox.origValue;
        if ((Math.abs(difference) / radNumericTextBox.origValue) > 0.1) {
            radNumericTextBox.get_styles().EnabledStyle[0] += "background-color:red;";
            radNumericTextBox.updateCssClass();
        }
        else {
            radNumericTextBox.get_styles().EnabledStyle[0] += "background-color:transparent;";
            radNumericTextBox.updateCssClass();
        }
    }
}

I have further questions as shown below.

In the project I need to implement the following on the RadGrid :
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.

They both work fine ... but the red background colour will disappear when the user edits another row.

Can you please tell how to make the red background colour stay even if the user edits another row?

I would like to store the value 10% as a config parameter in file web.config to be read by the C# code behind into a variable.

How can I pass a value read from web.config and use it inside a JavaScript function?

Regards,
Herman

[Herman Gouw]

Just want to clarify my 2nd question "How can I pass a value read from web.config and use it inside a JavaScript function?".

I know how to read a parameter value (in web.config) from the C# code behind but I don't know how to pass/use the value inside a JavaScript function.

Thanks,
Herman

[Vasil]

Hello Herman,

You could use ASP Inline tags in your markup, including in the JavaScript that is defined in your page (but not for this in external .js files). Here is some good article about the ASP Inline tags with links to MSDN for each of them. You can use the <%= ... %> or <%$ %> to get values from the web config or from function in your code behind.  Check this forum for an example: Using ASP inline tags in JavaScript.

I hope this helps.

All the best,
Vasil
the Telerik team

[Herman Gouw]

Thank you for the answer to my 2nd question. Can someone please help me with my 1st question below?

In my current project I need to implement the following on the RadGrid :

The user can edit a row on a grid by double clicking the corresponding grid row.

When the user enters a new value on the grid cell, and if the difference between the new value and the original value is more than 10% then the grid cell will be displayed with red background colour.

I have managed to implement this but the red background colour will disappear when the user edits another row.

Can you please show me how to make the red background colour stay even when the user edits another row?

The test program is available on http://www.sendspace.com/file/1c8t86

The Javascript functions used in the program are as follows:

function onFocus(sender, args) {
    var radNumericTextBox = sender;
    if (radNumericTextBox.origValue == null) {
        radNumericTextBox.origValue = radNumericTextBox.get_value()
    }
}
function onValueChanging(sender, args) {
    var radNumericTextBox = sender;
    if (!args.get_newValue()) {
        args.set_newValue(radNumericTextBox.origValue);
    }
    else {
        var difference = radNumericTextBox.get_value() - radNumericTextBox.origValue;
        if ((Math.abs(difference) / radNumericTextBox.origValue) > 0.1) {
            radNumericTextBox.get_styles().EnabledStyle[0] += "background-color:red;";
            radNumericTextBox.updateCssClass();
        }
        else {
            radNumericTextBox.get_styles().EnabledStyle[0] += "background-color:transparent;";
            radNumericTextBox.updateCssClass();
        }
    }
}

[Herman Gouw]

Can someone please help me with the problem I have right now?

Thanks,
Herman

[Vasil]

Hello Herman,

When the user clicks another row, the last row goes out of edit mode. And after the rebind, in view mode there is no TextBox, so in this case which element should have red background?

Regards,
Vasil
the Telerik team

[Herman Gouw]

Hi Vasil,

Basically, the same part of the row whose background colour has been changed to red when it was in edit mode.

Regards,
Herman

[Herman Gouw]

Hi Vasil,

Basically, any cells on the grid row which were displayed as red during the edit mode, should stay red when another grid row is turned into edit mode.

Regards,
Herman 

[Vasil]

Hello,

You will need to colorize these cells from the code-behind on ItemDataBound event of the grid. However to note which items have to be colored in red, you need first on ItemCommand of the grid to store the wrong items in the session ServerSide.
This will mean that first you need to check server side if the new value in the TextBox over 10% different from the old one. To know this, you can store in hidden field the original value, or retrieve it from the database on ItemCommand of the grid.

You could do a ClientSide approach that could even be easier. When colorize an cell, store in some array or other collection the ID-s of the row and column of this cell. Then after the postback (use Ajax to update only the grid , or store the array in a hidden field to persist it), find this cells and color them again.

Kind regards,
Vasil
the Telerik team

[Herman Gouw]

Hi Vasil,

Thanks for the reply.

For your suggested clientside solution:
RE: When colorize an cell, store in some array or other collection the ID-s of the row and column of this cell. Then after the postback (use Ajax to update only the grid , or store the array in a hidden field to persist it), find this cells and color them again. Can you please provide with any samples for this?

Regards,
Herman

[Vasil]

Hello,

Here is an example:

<script type="text/javascript">

    var elementsToStyleCollection = [];

    function onValueChanging(sender, args)
    {
        //......
        radNumericTextBox.get_styles().EnabledStyle[0] += "background-color:red;";
        radNumericTextBox.updateCssClass();

        elementsToStyleCollection[elementsToStyleCollection.length] = radNumericTextBox.parentNode.id;
        ///.....
    }

    function pageLoad()
    {
        for(var i = 0 ; i < elementsToStyleCollection.length ; i++)
        {
            $get(elementsToStyleCollection[i]).style.background="red";
        }
    }

</script>

All the best,
Vasil
the Telerik team