[Solved] Weird behaviors found while implementing cascading GridDropDownColumn

[Sunggoo Im]

Hi,

 

My name is Sunggoo and I found these weird behaviors while using GridDropDownColumns to implement RadGrid edit form with cascading dropdowns.

 

Like many others, I followed Grid / Accessing Cells and Rows demo and other forum threads, and was successful to get really close to my goal.

However, I discovered the following erroneous behaviors which I think are some kinds of bug:

 

1. Cascading dropdown on the last row item isn’t reactive. This problem is also found on the demo linked above. Since all other (same column) dropdowns on non-last rows work perfectly fine, this is definitely a bug.
2. When entering edit mode, the preset selected item of the cascading dropdown is ignored and, instead, first item in the dropdown is selected. This problem is not found in the demo; please refer to my code when analyzing.
3. This is more like an extended error of error# 2. When entering edit mode on the first row item, not only its cascading dropdown, but cascading dropdowns of off other rows are also reset.

C# code-behind:

public partial class WSSummary : System.Web.UI.Page
    {
        public static String ConnString = "Data Source=CHINABERRY\\SQLEXPRESS;Initial Catalog=TestGridview;Integrated Security=True";

        public static DataTable GetRelatedRecords(string query)
        {
            SqlConnection conn = new SqlConnection(ConnString);
            SqlDataAdapter adapter = new SqlDataAdapter();
            adapter.SelectCommand = new SqlCommand(query, conn);

            DataTable myDataTable = new DataTable();

            conn.Open();

            try
            {
                adapter.Fill(myDataTable);
            }
            finally
            {
                conn.Close();
            }

            return myDataTable;
        }

        protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
        {
            SqlConnection conn = new SqlConnection(ConnString);
            SqlDataAdapter adapter = new SqlDataAdapter();
            adapter.SelectCommand = new SqlCommand("SELECT Date, Client, CostElementName, ServicePackage, Description, BillingNumber, Hours, Rate, Status FROM [WSItem]", conn);

            DataSet myDataSet = new DataSet();

            conn.Open();
            try
            {
                adapter.Fill(myDataSet, "WSItems");
                adapter.SelectCommand = new SqlCommand("SELECT Client FROM [Client]", conn);
                adapter.Fill(myDataSet, "Clients");
                adapter.SelectCommand = new SqlCommand("SELECT CostElementName FROM [CostElementName]", conn);
                adapter.Fill(myDataSet, "CostElementNames");
                adapter.SelectCommand = new SqlCommand("SELECT ServicePackage FROM [tblServicePackage]", conn);
                adapter.Fill(myDataSet, "ServicePackages");
            }
            finally
            {
                conn.Close();
            }

            RadGrid1.DataSource = myDataSet;
        }

        protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
        {
            if (e.Item is GridEditableItem && e.Item.IsInEditMode)
            {
                // reference the edited grid item
                GridEditableItem editedItem = e.Item as GridEditableItem;
                GridEditManager editMan = editedItem.EditManager;

                RadComboBox clientColumn = editedItem["ClientColumn"].Controls[0] as RadComboBox;

                // reference the column editor which holds the CostElementName dropdown list instance in the edit form
                GridDropDownColumnEditor costElementNameEditor = editMan.GetColumnEditor("CostElementNameColumn") as GridDropDownColumnEditor;

                DataTable tempCENtable = GetRelatedRecords("SELECT CostElementName FROM [CostElementName] WHERE Client = '" + clientColumn.SelectedValue + "'");

                costElementNameEditor.DataSource = tempCENtable;
                costElementNameEditor.DataBind();

                // reference the column editor which holds the CostElementName dropdown list instance in the edit form
                GridDropDownColumnEditor servicePackageEditor = editMan.GetColumnEditor("ServicePackageColumn") as GridDropDownColumnEditor;

                DataTable tempSPtable = GetRelatedRecords("SELECT ServicePackage FROM [tblServicePackage] WHERE Client = '" + clientColumn.SelectedValue + "'");

                servicePackageEditor.DataSource = tempSPtable;
                servicePackageEditor.DataBind();
            }
        }

        protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
        {
            if (e.Item is GridEditableItem && e.Item.IsInEditMode)
            {
                GridEditableItem editedItem = e.Item as GridEditableItem;

                RadComboBox clientColumn = editedItem["ClientColumn"].Controls[0] as RadComboBox;

                // add SelectedIndexChanged event handler to Client dropdown list column
                clientColumn.AutoPostBack = true;
                clientColumn.SelectedIndexChanged += new RadComboBoxSelectedIndexChangedEventHandler(ClientComboBoxControl_SelectedIndexChanged);
            }
        }

        protected void ClientComboBoxControl_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
        {
            //first reference the edited grid item through the NamingContainer attribute
            GridEditableItem editedItem = (sender as RadComboBox).NamingContainer as GridEditableItem;

            //the dropdown list will be the first control in the Controls collection of the corresponding cell
            //for custom edit forms (WebUserControl/FormTemplate) you can find the column editor with the FindControl(controlId) method
            RadComboBox ddlCENList = editedItem["CostElementNameColumn"].Controls[0] as RadComboBox;

            // change the data source for ContactTitle with custom code here
            DataTable tempCENtable = GetRelatedRecords("SELECT CostElementName FROM [CostElementName] WHERE Client = '" + (editedItem["ClientColumn"].Controls[0] as RadComboBox).SelectedValue + "'");
            ddlCENList.DataSource = tempCENtable;
            ddlCENList.DataBind();

            //the dropdown list will be the first control in the Controls collection of the corresponding cell
            //for custom edit forms (WebUserControl/FormTemplate) you can find the column editor with the FindControl(controlId) method
            RadComboBox ddlSPList = editedItem["ServicePackageColumn"].Controls[0] as RadComboBox;

            // change the data source for ContactTitle with custom code here
            DataTable tempSPtable = GetRelatedRecords("SELECT ServicePackage FROM [tblServicePackage] WHERE Client = '" + (editedItem["ClientColumn"].Controls[0] as RadComboBox).SelectedValue + "'");
            ddlSPList.DataSource = tempSPtable;
            ddlSPList.DataBind();
        }
}

.aspx:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            var hasChanges, inputs, dropdowns, editedRow;

            function RowClick(sender, eventArgs) {

            }

            function RowDblClick(sender, eventArgs) {
                sender.get_masterTableView().editItem(eventArgs.get_itemIndexHierarchical());
            }

            function GridCommand(sender, eventArgs) {
                if (eventArgs.get_commandName() != "Edit") {
                    editedRow = null;
                }
            }

            function GridCreated(sender, eventArgs) {
                var gridElement = sender.get_element();
                var elementsToUse = [];
                inputs = gridElement.getElementsByTagName("input");
                for (var i = 0; i < inputs.length; i++) {
                    var lowerType = inputs[i].type.toLowerCase();
                    if (lowerType == "hidden" || lowerType == "button") {
                        continue;
                    }

                    Array.add(elementsToUse, inputs[i]);
                    inputs[i].onchange = TrackChanges;
                }

                dropdowns = gridElement.getElementsByTagName("select");
                for (var i = 0; i < dropdowns.length; i++) {
                    dropdowns[i].onchange = TrackChanges;
                }

                //setTimeout(function() { if (elementsToUse[0]) elementsToUse[0].focus(); }, 100);
            }

            function TrackChanges(e) {
                hasChanges = true;
            }
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Skin="Windows7"
        OnNeedDataSource="RadGrid1_NeedDataSource"
        OnItemCreated="RadGrid1_ItemCreated"
        OnItemDataBound="RadGrid1_ItemDataBound"
        GridLines="None">
        <PagerStyle Mode="NextPrevAndNumeric" />
        <MasterTableView ShowHeadersWhenNoRecords="true"
            GridLines="Vertical" AutoGenerateColumns="false" EditMode="InPlace">
            <Columns>
                <telerik:GridDateTimeColumn UniqueName="DateColumn" PickerType="DatePicker"
                    HeaderText="Date" DataField="Date">
                    <ItemStyle Width="100px" />
                </telerik:GridDateTimeColumn>
                <telerik:GridDropDownColumn UniqueName="ClientColumn" DataField="Client"
                    ListTextField="Client" ListValueField="Client" ListDataMember="Clients"
                    HeaderText="Client" DropDownControlType="RadComboBox">
                    <ItemStyle Width="150px" />
                </telerik:GridDropDownColumn>
                <telerik:GridDropDownColumn UniqueName="CostElementNameColumn" DataField="CostElementName"
                    ListTextField="CostElementName" ListValueField="CostElementName" ListDataMember="CostElementNames"
                    HeaderText="Cost Element Name" DropDownControlType="RadComboBox">
                    <ItemStyle Width="200px" />
                </telerik:GridDropDownColumn>
                <telerik:GridDropDownColumn UniqueName="ServicePackageColumn" DataField="ServicePackage"
                    ListTextField="ServicePackage" ListValueField="ServicePackage" ListDataMember="ServicePackages"
                    HeaderText="Service or Package" DropDownControlType="RadComboBox">
                    <ItemStyle Width="200px" />
                </telerik:GridDropDownColumn>
                <telerik:GridBoundColumn UniqueName="DescriptionColumn" DataField="Description"
                    HeaderText="Description" AllowSorting="false">
                    <ItemStyle Width="200px" Height="3em" />
                </telerik:GridBoundColumn>

                <telerik:GridBoundColumn UniqueName="BillingNumberColumn" DataField="BillingNumber"
                    HeaderText="Billing #">
                    <ItemStyle Width="100px" />
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn UniqueName="HoursColumn" DataField="Hours"
                    HeaderText="Hours">
                    <ItemStyle Width="50px" />
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn UniqueName="RateColumn" DataField="Rate"
                    HeaderText="Rate">
                    <ItemStyle Width="50px" />
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn UniqueName="Status" DataField="Status"
                    HeaderText="Status" SortExpression="Status">
                </telerik:GridBoundColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings EnableRowHoverStyle="true" AllowColumnsReorder="True"
            ReorderColumnsOnClient="True">
            <Selecting AllowRowSelect="True" />
            <ClientEvents OnRowClick="RowClick" OnRowDblClick="RowDblClick"
                OnGridCreated="GridCreated" OnCommand="GridCommand" />
        </ClientSettings>
    </telerik:RadGrid>
    <telerik:RadAjaxManager runat="server">
        <ajaxsettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </ajaxsettings>
    </telerik:RadAjaxManager>

Here are some additional information:

• By selecting Client, both Cost Element Name and Service or Package columns should cascade
• Since there are different sets of Cost Element Name and Service/Package lists for each client selected

I spent many hours to error# 2 and 3. Because my code isn’t much different from the demo, I though it might be caused by some unknown bugs. Please take a look at my code and help me out.

 

Thank you,

 

Sunggoo.

[Pavlina]

Hello,

For more information about how to achieve the desired functionality, please take a look at these help articles:
Customize/Configure GridDropDownColumn
Automatic Operations
Insert/Update/Delete at database level with queries

Kind regards,
Pavlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Sunggoo Im]

 

 

Thanks for the help, Pavlina.

 

But, those links you suggested did not help.

What I want to implement is cascading dropdowns which is pretty much the same function that Telerik team had already implemented in this example. However, you’ll notice that the last row’s dropdowns aren’t working if you try yourself following the link above.

From my understanding and observation, by selecting different ‘OrderID’ from the upper dropdown, the ‘Quantities in stock’ dropdown content needs to be updated. All other rows work perfectly fine whereas the last row seems inoperative.

Please take another look at this problem. I’d spent enough days to be dragged and I need your help desperately.

Thanks,

Sunggoo.

[Pavlina]

Hello,

Basically the purpose of this demo is to show how to access cells and rows in grid, rather than update. However I will notify our developers to take a look at it.

Thank you for your feedback.

Best wishes,
Pavlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.