[Solved] Problem accessing cell backColor

[Milan Gurung]

Hi,

Here is the scenario -

On RadGrid, user can click on cell and changes background color of the cell from nothing to "Green" .  Any help is highly appreciated..

Javascript code..

  <script type="text/jscript">

               /*

               It enables click functionality on the grid CELL..

               */

               function CellClick(index, uniqueName) {

                   var grid = $find("<%=gridWord.ClientID %>");

                   var MasterTable = grid.get_masterTableView();

                   var row = MasterTable.get_dataItems()[index];

                   var cell = MasterTable.getCellByColumnUniqueName(row, uniqueName);

                   var celltext = cell.innerHTML;

                   if (cell.style.backgroundColor == "green") {

                       cell.style.backgroundColor = "";

                   }

                   else {

                       cell.style.backgroundColor = "green";

                   }

                   

               }   

        </script>

code behind snippet -

protected void gridWord_ItemDataBound(object sender, GridItemEventArgs e)

        {

            //This bit enables JavaScript Click Event..

            if (e.Item is GridDataItem)

            {

                foreach (GridColumn col in gridWord.MasterTableView.RenderColumns)

                {

                    GridDataItem dataItem = (GridDataItem)e.Item;

                    dataItem[col.UniqueName].Attributes.Add("onclick", "CellClick('" + dataItem.ItemIndex + "','" + col.UniqueName + "');");

                }

            } 

        }

 protected void btnSubmit_Click(object sender, EventArgs e)

        {

                foreach (GridDataItem item in gridWord.MasterTableView.Items)

                {

   //Hard -code to get the BackColor of the cell..

                    TableCell cell = item["1"];

                    lblError.Text = cell.BackColor.Name;

                }

        }

cell.BackColor.Name always returns 0 even when the cell has "Green" background color.

FYI, RadGrid has only one ROW with multiple Columns.

Many thanks.

Milan G

[Shinu]

Hi Milan,

When setting style for elements from client side, it may not persist on postback. So to overcome this you should probably save the style setting using a HiddenField or so. And then access the HiddenFirld and retrieve the value from server. Give a try with the code below and see whether it suits your need.

aspx:

<asp:HiddenField ID="HiddenField1" runat="server" />

javascript:

   function pageLoad() {
        var hf = document.getElementById("HiddenField1");
        hf.value = "";
    }
    function CellClick(index, uniqueName) {
        var grid = $find("<%=RadGrid1.ClientID %>");
        var MasterTable = grid.get_masterTableView();
        var row = MasterTable.get_dataItems()[index];
        var cell = MasterTable.getCellByColumnUniqueName(row, uniqueName);
        var celltext = cell.innerHTML;

        var hf = document.getElementById("HiddenField1");

        if (cell.style.backgroundColor == "green") {
            cell.style.backgroundColor = "";
            hf.value = "";
        }
        else {
            cell.style.backgroundColor = "green";
            hf.value = "green";
        }
    }

cs:

protected void Button3_Click(object sender, EventArgs e)
    {
        GridDataItem item = (GridDataItem)RadGrid1.MasterTableView.Items[0];
        if (HiddenField1.Value.ToString() == "green")
        {
            Label2.Text = "Green";
        }
        else
        {
            Label2.Text = "White";
        }
    }

-Shinu.

[Milan Gurung]

Hi Shinu,

Thanks for the code. Unfortunately it is not solving what I wanted - Let me try to be more precise -

Scenario - Each cell of the RadGrid contains alphabets of the English "WORD" the user entered - E.g. if the user enters a word "Telerik" - grid will have a single row with 7 cells filled with each alphabets -

T E  L E  R  I  K

Now, we allow user to click on each cell - clicking on the cell will change the back color to green and reverses to nothing if clicked twice on the same cell. Upon clicking "submit" button I need to track which cells that have "green" background.

Any hint is very much appreciated.

Many thanks.

Milan G

[Iana Tsolova]

Hi Milan,

In order to achieve your goal, you can try looping through all grid rows on the client. You can get them using the get_dataItems() client-side method. Then you can loop through the row cells as Shinu suggested or traverse the row html element child nodes.

Let me know if this helps.

Kind regards,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.