This is a migrated thread and some comments may be shown as answers.

Update other controls clientside when row is selected

12 Answers 248 Views

Grid

This is a migrated thread and some comments may be shown as answers.

12 Answers, 1 is accepted

answered on 22 Dec 2008, 09:09 AM

Hello Imran,

You can achieve your purpose either client or server-side as per your requirements.

Client-side:
In this case you need to enable client-side row selection. Then you can handle the OnRowSelected client event of the grid and use the grid client-side API to extract the values of each cell of the selected row. Find more on how to access grid cells and rows in the below articles:
http://www.telerik.com/help/aspnet-ajax/grdextractkeyvaluesclientside.html
http://www.telerik.com/help/aspnet-ajax/grid_getcellbycolumnuniquename.html
http://www.telerik.com/help/aspnet-ajax/grdgettingcellvaluesforselectedrowsclientside.html

Having the desired value, use the RadInput and RadComboBox client-side API to set it to them:
http://www.telerik.com/help/aspnet-ajax/input_clientsidebasics.html
http://www.telerik.com/help/aspnet-ajax/combo_clientsidebasics.html

Server-side:
For this approach you need to enable server-side selection and handle the row selection on the server. Basically the idea is the same as with the client side but here you should use the server-side API of the controls. Additionally, you can ajaxify, with RadAjax for instance, to prevent the whole page from reloading. Find more about the server side method you can use:
http://www.telerik.com/help/aspnet-ajax/grdselectingrowwithselectbutton_server.html
http://www.telerik.com/help/aspnet-ajax/grdselectingrowwithcheckbox_server.html
http://www.telerik.com/help/aspnet-ajax/grdaccessingcellsandrows.html

Give it a try and let me know if any questions arise.

Regards,
Iana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

answered on 29 Dec 2008, 11:06 AM

Iana,

Thanks for the reply. Unfortunately I'm still struggling to update my controls based on the selected row of the grid. I now think this needs to be done server side as a SQL procedure runs to retrieve data for a particular record. Here is an example of what is returned:

Name - Disneyland Paris
BookingTransactionID - 2984
Description - Component
TransactionType - Net Cost
GBPNet - 51.88
CurrencyNet - 51.88
TransactionDate - 2008-12-20 15:59:53.753
CurrencyName - GBP
SupplierReference
UserName - jan.zaluski
SupplierDetailsID - 11

This is the code I'm running on SelectedIndexChanged event of the grid:

protected void radgridNetCosts_SelectedIndexChanged(object sender, EventArgs e)
    {
        GridDataItem selectedRow = radgridNetCosts.SelectedItems[0] as GridDataItem;
        if (selectedRow != null)
        {
            //Retrieve ID of selected record
            Int32 BookingTransactionID = Convert.ToInt32(selectedRow["BookingTransactionID"].Text);

            //Store in the control which contains the index of the record currently being edited
            txtRowEditing.Text = selectedRow["BookingTransactionID"].Text;

            //Query the table using the ID as a parameter

            //Create new connection
            SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["myCS"].ConnectionString);

            //Open the connection
            myConnection.Open();

            //Create a new command
            SqlCommand myCommand = new System.Data.SqlClient.SqlCommand();

            //Set CommandType property
            myCommand.CommandType = CommandType.StoredProcedure;

            myCommand.CommandText = "GetBookingTransactionCosts";

            myCommand.Parameters.Add(new SqlParameter("BookingTransactionID", BookingTransactionID));
            myCommand.Parameters.Add(new SqlParameter("BookingDocumentID", txtBookingDocumentID.Text));

            //Tell the command which connection to use
            myCommand.Connection = myConnection;

            // Declare and execute the reader
            SqlDataReader myReader = myCommand.ExecuteReader();

            //If the storedprocedure returns any values then the hasrows property will be true.
            if (myReader.HasRows)
            {
                //Read through each of the values returned by the storedprocedure.
                while (myReader.Read())
                {
                    //Populate the fields
                    //Find the supplier in the dropdownlist
                    Telerik.WebControls.RadComboBoxItem selectedItem = this.cboSupplier.FindItemByValue(myReader["SupplierDetailsID"].ToString());
                    selectedItem.Selected = true;
                    cboSupplier.Text = cboSupplier.SelectedItem.Text;
                    TextBox1.Text = cboSupplier.SelectedItem.Text;

                    //Find the transaction type in the dropdownlist
                    selectedItem = this.cboTransactionType.FindItemByText(myReader["TransactionType"].ToString());
                    selectedItem.Selected = true;
                    selectedItem.Text = cboTransactionType.SelectedItem.Text;
                    //cboTransactionType.Text =

                    //Find the description in the dropdownlist
                    selectedItem = this.cboDescription.FindItemByText(myReader["Description"].ToString());
                    selectedItem.Selected = true;
                    cboDescription.Text = cboDescription.SelectedItem.Text;

                    cboSupplier.SelectedValue = myReader["SupplierDetailsID"].ToString();

                    SupplierRef.Text = myReader["SupplierReference"].ToString();
                    Net.Text = myReader["GBPNet"].ToString();
                }
            }

            //Close the reader
            myReader.Close();

            //Close the connection
            myConnection.Close();

        }
    }

When I step through the code, the values for the controls are correct (ie Net.text = 51.88) but the control doesn't update when the code has finished running.

Any ideas?
Thanks.

answered on 07 Jan 2009, 01:26 PM

Hello Imran,

Thank you for sending your code.

Could you please try disabling the grid ajax and ajaxify the grid and the outside controls using RadAjaxManager as suggested below:

    
            <rad:RadGrid ID="radgridNetCosts" runat="server" EnableAJAX="false">  
        
            ...  
        
            </rad:RadGrid> 
        
            <rad:RadAjaxManager ID="RadAjaxManager1" runat="server">  
        
                <AjaxSettings> 
        
                    <rad:AjaxSetting AjaxControlID="radgridNetCosts">  
        
                        <UpdatedControls> 
        
                            <rad:AjaxUpdatedControl ControlID="radgridNetCosts" /> 
        
                            <rad:AjaxUpdatedControl ControlID="txtRowEditing" /> 
        
                            <rad:AjaxUpdatedControl ControlID="cboSupplier" /> 
        
                            <rad:AjaxUpdatedControl ControlID="TextBox1" /> 
        
                            <rad:AjaxUpdatedControl ControlID="cboDescription" /> 
        
                            <rad:AjaxUpdatedControl ControlID="cboSupplier" /> 
        
                            <rad:AjaxUpdatedControl ControlID="SupplierRef" /> 
        
                            <rad:AjaxUpdatedControl ControlID="Net" /> 
        
                        </UpdatedControls> 
        
                    </rad:AjaxSetting> 
        
                </AjaxSettings> 
        
            </rad:RadAjaxManager>

Let me know if this helps.

Greetings,
Iana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

answered on 13 Jan 2009, 10:19 AM

Iana,

It's not possible for me to send you a working example due to time constraints on this project. What I'm trying to do now is follow the instructions on this page: http://www.telerik.com/help/aspnet/grid/grduseajaxtoupdateoutsidecontrols.html

protected void CheckedChanged(object sender, System.EventArgs e)
    {
        GridDataItem clickedItem = (GridDataItem)(sender as RadioButton).NamingContainer;
        int index = clickedItem.ItemIndex;

        foreach (GridItem item in radgridNetCosts.MasterTableView.Items)
        {
            if (item.ItemIndex != index && item is GridDataItem)
            {
                GridDataItem nonActive = item as GridDataItem;
                (nonActive.FindControl("RadioButton1") as RadioButton).Checked = false;
            }
        }

        //Outside control - for label outside of Telerik RadGrid
        LiteralControl ctrl1 = new LiteralControl(String.Format("<script type='text/javascript'>document.getElementById('{0}').innerHTML = '{1}';</script>", Net.ClientID, clickedItem["GBPNet"].Text));

        //You should add the LiteralControl to the Controls collection of RadGrid in order to make it work with Telerik RadGrid AJAX
        radgridNetCosts.Controls.Add(ctrl1);
    }

However, when I look inside my clickedItem (eg. clickedItem["GBPNet"].Text or clickedItem["Description"].Text), the column values are always empty ("") and the contents of the controls reflect this. The declaration of the grid os the same as I sent in an earlier post.

Any ideas?
Thanks.

answered on 21 Jan 2009, 11:40 AM

Hi Imran,

To extract the values from template columns with binding expressions set directly in their item templates, you need to reference the respective DataBoundLiteralControl inside the item template as follows:

(clickedItem["GBPNet"].Controls[0] as DataBoundLiteralControl).Text
(clickedItem["Description"].Controls[0] as DataBoundLiteralControl).Text

clickedItem["<ColumnName>"].Text will be valid syntax for GridBoundColumns only. General guidelines about how to access cells (and their content) in RadGrid you can see from this help article.

Furthermore, as recommended by my colleague Iana, if you would like to update controls outside of RadGrid for ASP.NET with ajax request, it is better to disable the built-in ajax for the grid and ajaxify the controls that needs to be updated using RadAjaxManager.

Kind regards,
Sebastian
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.