Update other controls clientside when row is selected

[W]

Hi All,

I have a grid that is databound server-side. This is what I want to happen when a row is selected:

I have 3 radCombo boxes (supplier, transaction, description) and 2 rad textboxes (supplier ref., net) elsewhere on the page and a grid that has corresponding columns.

I want to be able to update the combo boxes and text boxes with values that are in the corresponding columns in the selected row.

I presume I need to do this client side but I'm not sure what would be the best approach.

Can anyone help,
Thanks.

[Iana Tsolova]

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.

[W]

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.

[Iana Tsolova]

Hi Imran,

I went through your code and it looks fine to me. However, I suggest that you send me the grid declaration, or better the whole page declaration so I could find the cause of the issue.

I assume that your grid is ajaxifyied and the same time it is not set that the grid should update the controls outside it via ajax. Find more information here.

All the best,
Iana
the Telerik team

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

[W]

Hi Iana,

Thanks for your help with this but I'm still not getting anywhere. Here is the .aspx page and the .aspx.cs page for this problem.

Hope you can help!
Thanks.

[Iana Tsolova]

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.

[W]

Iana,

Thanks for the reply. I've un-ajaxified the grid and added the RadAjaxManager as suggested but the grid now doesn't do anything! As per the code I sent I'm using GroupByExpressions but when I try to expand a group nothing happens. I've double-checked the AjaxControlID in the AjaxManager to make sure it's correct and it is. I've taken the grouping out so the grid just displays the rows returned from the datasource but when I click 'Select' nothing happens either. The 'SelectedIndexChanged' event is still firing however.

Hope you can help.
Thanks.

[Iana Tsolova]

Hi Imran,

Can you isolate the issue into a runnable sample and send it through formal support ticket to me? Thus I could investigate it in depth and provide a proper solution for you?

Thank you for your cooperation in advance.

Greetings,
Iana
the Telerik team

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

[W]

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.

[Iana Tsolova]

Hello Imran,

Can you try using if you would receive same result if you use GridBoundColumns instead of GridTemplateColumns?

Do let me know of the result.

Regards,
Iana
the Telerik team

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

[W]

Iana,

Apologies for my late reply. The result is the same with GridBoundColumns. I'm running out of ideas with this!

Any other suggestions?
Thanks.

[W]

Iana,

I have fixed this issue - it seems the Telerik numeric textbox I was using can't be updated using the method described here. I've had to change the columns to databound columns (thanks!) but I've had to replace the telerik controls I want updating to normal .NET ones.

Is there any reason why this can't be achieved with Telerik controls?

Thanks again for all your time and suggestions.

[Sebastian]

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.