How to set cell value on client?

[Rusty]

Hello,
I need to set some radgrid cell values client-side, via javascript.  Then at postback I need to access those values.  Currently I'm setting the cell's innerHTML property, which displays correctly in the grid.  However, at postback all the cell values revert to " ".  At postback, I am not re-binding the grid.  
Thanks!
-rusty

Here's how I set values on the client-side:

// For all selected rows, set the cell value.
function rgSetSelectedRowValue(rg, columnName, val) {
    var table = rg.get_masterTableView();
    var selectedRows = table.get_selectedItems();
    for (var i = 0; i < selectedRows.length; i++) {
        var row = selectedRows[i];
        var cell = table.getCellByColumnUniqueName(row, columnName);
        cell.innerHTML = val;
    }
}

Here's how I access values server-side:

// loop on grid rows
foreach (GridDataItem item in RadGrid1.MasterTableView.Items) {
string foo = item["ReplacementID"].Text;
string bar = item["comment"].Text;
...
}

[Jayesh Goyani]

Hello,

function AccessOnclient() { 

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

                if (grid) { 

                    var MasterTable = grid.get_masterTableView(); 

                    var Rows = MasterTable.get_dataItems(); 

                    for (var i = 0; i < Rows.length; i++) { 

                        var row = Rows[i]; 

                        // Method1 

                        var getCellText_1 = row.get_element().cells[0].innerHTML; 

                        // Method2 

                        var getCellText_2 = row.get_cell("ReplacementID").innerHTML; 

                        // Method3 

                        var getCellText_2 = row.get_cell("ReplacementID").getElementsByTagName("span")[0].innerHTML; //this code also work for Checkboxcolunm, hyperlinkcolumn...etc 

                    } 

                } 

               


            }

For more info please check below link
http://jayeshgoyani.blogspot.in/2012/07/access-radgrid-on-client.html

Thanks,
Jayesh Goyani

[Rusty]

Thanks Jayesh, but my problem lies with SET values, not GET values.  I want to SET a grid cell value on the client, and then have that value available on the server at postback.  When I set innerHTML, the value is lost at postback.
-r
 

[Shinu]

Hi,

You cannot get the values that are changed in the client side from server side because of postback. One suggestion is that you can set the value to a hiddenfield as the cell value in client side and access it in server side as shown below.
JS:

function rgSetSelectedRowValue(rg, columnName, val) {
    var table = rg.get_masterTableView();
    var selectedRows = table.get_selectedItems();
    for (var i = 0; i < selectedRows.length; i++) {
        var row = selectedRows[i];
        var cell = table.getCellByColumnUniqueName(row, columnName);
        cell.innerHTML = val;
       var hidden = document.getElementById("HiddenField1");
            hidden.value = cell.innerHTML;
    }
}

C#:

protected void Button1_Click(object sender, EventArgs e)
    {
        foreach (GridDataItem item in RadGrid1.SelectedItems)
        {
        string cellvalue= HiddenField1.Value;
        }
}

Thanks,
Shinu

[Jesse]

"You cannot get the values that are changed in the client side"

 

Cannot set or cannot get? Please clarify. I need to adjust date time stamps based on a clients location. Is there a way to this?

[Rumen]

Here is an example of how to access and set the RadGrid cell values on the client-side:

ASPX

<script>
    function pageLoad() {
        var grid = $find("<%= GV_SystemMonitor.ClientID %>");

        if (grid) {
            var MasterTable = grid.get_masterTableView();
            var Rows = MasterTable.get_dataItems();
            for (var i = 0; i < Rows.length; i++) {
                var row = Rows[i];
                var cell = MasterTable.getCellByColumnUniqueName(row, "OrderDate");  // Get the cell for the OrderDate column - see https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/client-side-programming/gridtableview-object/methods/getcellbycolumnuniquename

                if (cell) {  // Check if the cell was found
                    var timestamp = cell.innerHTML;  // Get the timestamp from the cell
                    var updatedTimestamp = datetimeConverter(new Date(timestamp));  // Convert the timestamp
                    cell.innerHTML = updatedTimestamp.toLocaleString();  // Update the cell with the new timestamp
                }
            }
        }
    }

    function datetimeConverter(date) {
        var n = date.getTimezoneOffset();
        var x = n / 60;
        date.setHours(date.getHours() - x);
        return date;
    }
</script>
<telerik:RadGrid ID="GV_SystemMonitor" runat="server" AllowPaging="True" Width="800px" OnNeedDataSource="RadGrid1_NeedDataSource">
    <MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID">
        <Columns>
            <telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
                FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
                ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
            </telerik:GridBoundColumn>
            <telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
                FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
                SortExpression="OrderDate" UniqueName="OrderDate">
            </telerik:GridDateTimeColumn>
            <telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
                FilterControlAltText="Filter Freight column" HeaderText="Freight"
                SortExpression="Freight" UniqueName="Freight">
            </telerik:GridNumericColumn>
            <telerik:GridBoundColumn DataField="ShipName"
                FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
                SortExpression="ShipName" UniqueName="ShipName">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ShipCountry"
                FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
                SortExpression="ShipCountry" UniqueName="ShipCountry">
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

 

ASPX.CS

 

    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        (sender as Telerik.Web.UI.RadGrid).DataSource = OrdersTable(); 
    }

    private DataTable OrdersTable()
    {
        DataTable dt = new DataTable();

        dt.Columns.Add(new DataColumn("OrderID", typeof(int)));
        dt.Columns.Add(new DataColumn("OrderDate", typeof(DateTime)));
        dt.Columns.Add(new DataColumn("Freight", typeof(decimal)));
        dt.Columns.Add(new DataColumn("ShipName", typeof(string)));
        dt.Columns.Add(new DataColumn("ShipCountry", typeof(string)));

        dt.PrimaryKey = new DataColumn[] { dt.Columns["OrderID"] };

        for (int i = 0; i < 70; i++)
        {
            int index = i + 1;

            DataRow row = dt.NewRow();

            row["OrderID"] = index;
            row["OrderDate"] = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 0, 0, 0).AddHours(index);
            row["Freight"] = index * 0.1 + index * 0.01;
            row["ShipName"] = "Name " + index;
            row["ShipCountry"] = "Country " + index;

            dt.Rows.Add(row);
        }

        return dt;
    }

 

You can also check these resources:

• Accessing Grid Cells, Cell Values and Raw DataKey Values Client-Side
• Getting Cell Values for Selected Rows Client-side

[Rusty]

Thanks for your reply, Shinu.  I am aware of the possibility of using hidden fields, however I am storing a LOT of stuff in the grid cells, so the hidden field method is rather messy.  

In the past, I've used another 3rd-party grid that supported "unbound columns", which could be populated on the client, then accessed server-side after a postback.  It looks like this is not possible with RadGrids.  

My current solution is to use the grid to store my data, and then handle it all client-side without doing a postback.  Took a bit of refactoring but it's working now.

-rd

[Abitar]

Hello,

How can I get the DataKeyValue of the row when I click on a button inside the RadGrid ?

 

[Abitar]

using javascript

[Jayesh Goyani]

Hello,

Please look into this.

Thanks, Jayesh Goyani

[Abitar]

Thank you Jayesh .

[satish]

Hi Rusty,

I am also in the same boat. I have switched from other 3rd party control that supported "unbound columns", which could be populated on the client, then accessed server-side after a postback.  I am trying to set the RadGrid cell values from client side and accessing the same from server side . But after postback value disappears.

My client side code :

 function GetSelectedItem(arg) {
                if (arg!=null | arg!=undefined) 
                {
                    var grid = $find("<%=RadGridRoyaltyMapping.ClientID %>");
                    var MasterTable = grid.get_masterTableView();
                    var selectedRows = MasterTable.get_selectedItems();
                    for (var i = 0; i < selectedRows.length; i++) {
                        var row = selectedRows[i];
                        var sPart = arg.split('|');   
                        var cell = MasterTable.getCellByColumnUniqueName(row, "ID_ITEM");
                        cell.innerHTML = sPart[0];
                        var cell2 = MasterTable.getCellByColumnUniqueName(row, "EXPECTED_VALUE");
                        cell2.innerHTML = sPart[1];

                    }
                }
            }

 

 

Server side code  :

 protected void btnApply_Click(object sender, EventArgs e)
        {
            foreach (GridDataItem item in RadGridRoyaltyMapping.Items)
            {
                string idItem = item["ID_ITEM"].Text.ToString();
                string idExpectedValue = item["EXPECTED_VALUE"].Text.ToString();
            }
        }

If you found a solution, Please share it.