RadGrid, JQuery, and Edit Form Templates

[Mark Gallucci]

I'm using a RadGrid with an edit form template and I'm trying to replicate the Related ComboBoxes example within this template.  Implementing the example outside of the template was simple enough, but now I'm having difficulty working within the edit form template.  Specifically, I'm having trouble drilling down (via JQuery) and obtaining references to the pair of comboboxes for the item currently being editted.  Any insight on how to go about doing this?

Here are my scripts:

<script type="text/javascript">

    // This part needs to change
    function pageLoad() {
        unitsCombo = $find("<%= Unit_ComboBox.ClientID %>");
        groupsCombo = $find("<%= Group_ComboBox.ClientID %>");
    }

    function PopulateGroups(combo, eventArgs) {
        var item = eventArgs.get_item();
        groupsCombo.set_text("Loading...");

        if (item.get_index() > 0) {
            groupsCombo.requestItems(item.get_value(), false);
        }
        else {
            groupsCombo.set_text(" ");
            groupsCombo.clearItems();
        }
    }

    function ItemsPopulated(combo, eventArgs) {
        if (combo.get_items().get_count() > 0) {
            combo.set_text(combo.get_items().getItem(0).get_text());
            combo.get_items().getItem(0).highlight();
        }
        combo.showDropDown();
    }
</script>

Here is the RadGrid:

<telerik:RadGrid ID="OrganizerItemDisplay_Grid"
        runat="server"
        BorderStyle="None"
        Skin="Black"
        OnNeedDataSource="OrganizerItemDisplay_Grid_NeedDataSource"
        OnItemDataBound="OrganizerItemDisplay_Grid_ItemDataBound">
        <MasterTableView
            AllowPaging="false"
            AllowSorting="false"
            AutoGenerateColumns="false"
            EditFormSettings-EditFormType="Template"
            PagerStyle-Visible="true"
            CommandItemDisplay="Top"
            CommandItemSettings-AddNewRecordText="Add New Organizer"
            CommandItemSettings-ShowAddNewRecordButton="true">
            <NoRecordsTemplate>
                <div style="margin:0 auto; padding: 5px; width:100%">
                    <asp:Label ID="NoRecords_Label" runat="server" Text="There are no organizers on record." />
                </div>
            </NoRecordsTemplate>
            <EditFormSettings>
                <FormTemplate>
                    <ul>
                        <li>
                            <asp:Label runat="server" ID="Name_Label" AssociatedControlID="Name_TextBox" Text="Name" />
                            <telerik:RadTextBox runat="server" ID="Name_TextBox" Width="200px" />
                        </li>
                        <li>
                            <asp:Label runat="server" ID="NetId_Label" AssociatedControlID="NetId_TextBox" Text="NetID" />
                            <telerik:RadTextBox runat="server" ID="NetId_TextBox" Width="200px" />
                        </li>
                        <li>
                            <asp:Label runat="server" ID="Phone_Label" AssociatedControlID="Phone_TextBox" Text="Phone" />
                            <telerik:RadTextBox runat="server" ID="Phone_TextBox" Width="200px" />
                        </li>
                        <li>
                            <asp:Label runat="server" ID="Role_Label" AssociatedControlID="Role_ComboBox" Text="Role" />
                            <telerik:RadComboBox ID="Role_ComboBox"
                                runat="server"
                                OnItemDataBound="Role_ComboBox_ItemDataBound"
                                Width="204px" />
                        </li>
                        <li>
                            <asp:Label runat="server" ID="Unit_Label" AssociatedControlID="Unit_ComboBox" Text="Unit" />
                            <telerik:RadComboBox ID="Unit_ComboBox"
                                runat="server"
                                OnClientSelectedIndexChanging="PopulateGroups"
                                OnItemsRequested="Unit_ComboBox_ItemsRequested"
                                OnItemDataBound="Unit_ComboBox_ItemDataBound"
                                Width="204px" />
                        </li>
                        <li>
                            <asp:Label runat="server" ID="Group_Label" AssociatedControlID="Group_ComboBox" Text="Group" />
                            <telerik:RadComboBox ID="Group_ComboBox"
                                runat="server"
                                OnClientItemsRequested="ItemsPopulated"
                                OnItemsRequested="Group_ComboBox_ItemsRequested"
                                OnItemDataBound="Group_ComboBox_ItemDataBound"
                                Width="204px" />
                        </li>
                        <li>
                            <asp:Label runat="server" ID="Email_Label" AssociatedControlID="Email_TextBox" Text="Email" />
                            <telerik:RadTextBox runat="server" ID="Email_TextBox" Width="200px" />
                        </li>
                    </ul>
                    <asp:Button ID="ViewProgram_UpdateAudience_Button" Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>' runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>' />
                    <asp:Button ID="CancelEdit_Button" Text="Cancel" runat="server" CausesValidation="False" CommandName="Cancel" />
                </FormTemplate>
            </EditFormSettings>
            <Columns>
                <telerik:GridBoundColumn DataField="NAME" HeaderText="Name" UniqueName="Name" />
                <telerik:GridBoundColumn DataField="ORGANIZERROLE" HeaderText="Role" UniqueName="Role" />
                <telerik:GridBoundColumn DataField="ORGANIZERGROUP" HeaderText="Group" UniqueName="Group" />
                <telerik:GridButtonColumn
                    ConfirmTitle="Remove Organizer"
                    ConfirmText="Are you sure you want to remove this organizer?"
                    ConfirmDialogType="RadWindow"
                    ButtonType="ImageButton"
                    ImageUrl="~/Common/Images/Toolbar/toolbar_delete_small.gif"
                    Text="Remove Organizer"
                    CommandName="DELETE"
                    UniqueName="DeleteCommandColumn" />
                <telerik:GridEditCommandColumn
                    ButtonType="ImageButton"
                    UniqueName="EditCommandColumn" />
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>

All of this is placed within an .ascx file.

[Martin]

Hello Mark Gallucci,

You can use the combo's OnLClientLoad event to set its client object to the required variables:

Markup:

<telerik:RadComboBox ID="Unit_ComboBox" runat="server" OnClientLoad="Unit_ComboBox_Load" ... />
<telerik:RadComboBox ID="Group_ComboBox" runat="server" OnClientLoad="Group_ComboBox_Load" ... />

Javascript:

function Group_ComboBox_Load(sender, args)
{
    groupsCombo = sender;
}
function Unit_ComboBox_Load(sender, args)
{
    unitsCombo = sender;
}

I hope this helps

Kind regards,
Martin
the Telerik team

[Mark Gallucci]

Thanks for the help.  This appears to have done the trick.

[Mark Gallucci]

I've run into another issue with related combo boxes.  I have a radgrid with a custom edit template.  The template has a series of controls, two of which are related combo boxes.  The second of these combo boxes, the "Group" combo box, is populated based on the selection made in the "Unit" combo box.  The items populate fine; however, no matter what item I select in the "Group" combo box, the server still thinks I'm on the default "--Select Group--" item, which has a blank value.

Scripts:

<script type="text/javascript">
    var groupsCombo;
    function InitializeGroupsCombo(sender) {
        groupsCombo = sender;
    }

    function PopulateGroups(combo, eventArgs) {
        var item = eventArgs.get_item();
        groupsCombo.set_text("Loading...");

        if (item.get_index() > 0) {

            groupsCombo.requestItems(item.get_value(), false);
        }
        else {
            groupsCombo.set_text(" ");
            groupsCombo.clearItems();
        }
    }

    function GroupsPopulated(combo, eventArgs) {
        if (combo.get_items().get_count() > 0) {

            combo.set_text(combo.get_items().getItem(0).get_text());
            combo.get_items().getItem(0).highlight();
            combo.get_items().getItem(0).select();
        }
        combo.showDropDown();
    }

</script>

Template:

<EditFormSettings>
                <FormTemplate>
                    <ul>
                        <li>
                            <asp:Label ID="Name_Label" runat="server"  AssociatedControlID="Name_TextBox" Text="Name" />
                            <telerik:RadTextBox ID="Name_TextBox"
                                runat="server"
                                Width="200px"
                                TabIndex="1" />
                        </li>
                        <li>
                            <asp:Label  ID="NetId_Label" runat="server" AssociatedControlID="NetId_TextBox" Text="NetID" />
                            <telerik:RadTextBox ID="NetId_TextBox"
                                runat="server"
                                Width="200px"
                                TabIndex="2" />
                        </li>
                        <li>
                            <asp:Label ID="Phone_Label" runat="server" AssociatedControlID="Phone_TextBox" Text="Phone" />
                            <telerik:RadTextBox ID="Phone_TextBox"
                                runat="server"
                                Width="200px"
                                TabIndex="3" />
                        </li>
                        <li>
                            <asp:Label ID="Role_Label" runat="server"  AssociatedControlID="Role_ComboBox" Text="Role" />
                            <telerik:RadComboBox ID="Role_ComboBox"
                                runat="server"
                                OnItemDataBound="Role_ComboBox_ItemDataBound"
                                Width="204px"
                                TabIndex="4" />
                        </li>
                        <li>
                            <asp:Label ID="Unit_Label" runat="server" AssociatedControlID="Unit_ComboBox" Text="Unit" />
                            <telerik:RadComboBox ID="Unit_ComboBox"
                                runat="server"
                                OnClientSelectedIndexChanging="PopulateGroups"
                                OnItemsRequested="Unit_ComboBox_ItemsRequested"
                                OnItemDataBound="Unit_ComboBox_ItemDataBound"
                                Width="204px"
                                TabIndex="5" />
                        </li>
                        <li>
                            <asp:Label ID="Group_Label" runat="server" AssociatedControlID="Group_ComboBox" Text="Group" />
                            <telerik:RadComboBox ID="Group_ComboBox"
                                runat="server"
                                OnClientItemsRequested="GroupsPopulated"
                                OnItemsRequested="Group_ComboBox_ItemsRequested"
                                OnItemDataBound="Group_ComboBox_ItemDataBound"
                                OnClientLoad="InitializeGroupsCombo"
                                Width="204px"
                                TabIndex="6" />
                        </li>
                        <li>
                            <asp:Label ID="Email_Label" runat="server"  AssociatedControlID="Email_TextBox" Text="Email" />
                            <telerik:RadTextBox ID="Email_TextBox"
                                runat="server"
                                Width="200px"
                                TabIndex="7" />
                        </li>
                    </ul>
                    <asp:Button ID="Update_Button"
                        runat="server"
                        Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'
                        CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'
                        TabIndex="8"/>
                    <asp:Button ID="Cancel_Button"
                        runat="server"
                        Text="Cancel"
                        CausesValidation="False"
                        CommandName="Cancel"
                        TabIndex="9" />
                </FormTemplate>
            </EditFormSettings>

Code-Behind for the Insert Command

protected void ControlItemDisplay_Grid_InsertCommand(object sender, Telerik.Web.UI.GridCommandEventArgs e)
        {
            //Get reference to edit form templace controls
            RadTextBox nameField = (RadTextBox)e.Item.FindControl("Name_TextBox");
            RadTextBox netIDField = (RadTextBox)e.Item.FindControl("NetId_TextBox");
            RadTextBox phoneField = (RadTextBox)e.Item.FindControl("Phone_TextBox");
            RadComboBox roleField = (RadComboBox)e.Item.FindControl("Role_ComboBox");
            RadComboBox unitField = (RadComboBox)e.Item.FindControl("Unit_ComboBox");
            RadComboBox groupField = (RadComboBox)e.Item.FindControl("Group_ComboBox");
            RadTextBox emailField = (RadTextBox)e.Item.FindControl("Email_TextBox");

            RadGrid organizerGrid = (RadGrid)sender;
            //Program program = ProgramFactory.Fetch(ProgramID);

            if (Program != null)
            {
                //Create a new organizer
                Organizer organizer = OrganizerFactory.Create();

                //throw new Exception("Unit: " + unitField.SelectedValue.ToString() + ", Group: " + groupField.SelectedValue.ToString());

                organizer.OrganizerType = Organizer.OrganizerTypes.Program;
                organizer.Name = nameField.Text.Trim();
                organizer.NetID = netIDField.Text.Trim();
                organizer.Phone = phoneField.Text.Trim();
                organizer.OrganizerRoleID = int.Parse(roleField.SelectedValue);
                organizer.OrganizerGroupID = int.Parse(groupField.SelectedValue);
                organizer.Email = emailField.Text.Trim();

                //Make sure the organizer is savable before adding it to the list
                if (organizer.IsSavable)
                {
                    //Fetch the selected role
                    OrganizerRole organizerRole = OrganizerRole.Fetch(int.Parse(roleField.SelectedValue));

                    //Check to see if the role is primary
                    if (organizerRole.IsPrimary)
                    {
                        organizer.IsPrimary = true;
                    }
                    else
                    {
                        organizer.IsPrimary = false;
                    }

                    //Add the new organizer
                    Program.OrganizerList.Add(organizer);
                }
            }
        }

The "SelectedValue" for the "groupField" always returns as a blank value since that's the value of the default selection, which is "--Select Group--"  I'm having difficulty forcing the combobox to actually return the value selected by the user.  Is there something I'm leaving out?

[Martin]

Hello Mark Gallucci,

I have tried to reproduce the issue locally, but without success. Based on your code, I have built a sample project that works as expected on my side. Please review it and let me know whether I miss something.

Best wishes,
Martin
the Telerik team

[Mark Gallucci]

Your sample code does not fully encapsulate what I'm trying to accomplish, but that's likely because I didn't provide enough code.  The items populated in the group dropdown depend on what's selected on the unit dropdown.  In your sample, the two dropdowns are simply populated, and selecting an item in the first just causes the second to display its full list of items.  Allow me to show how I am populating my two dropdowns.

Code:

protected void Unit_ComboBox_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)
{
    PopulateOrganizerUnitList(sender, true);
}
protected void Unit_ComboBox_ItemDataBound(object sender, RadComboBoxItemEventArgs e)
{
    DataRowView dataSourceRow = (DataRowView)e.Item.DataItem;

    string unitName = dataSourceRow.Row["Name"].ToString();
    string groupId = dataSourceRow.Row["DepartmentUnitId"].ToString();
    e.Item.Text = unitName;
    e.Item.Value = groupId;
}
protected void Group_ComboBox_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)
{
    PopulateOrganizerGroupList(sender, e.Text, true);
}
protected void Group_ComboBox_ItemDataBound(object sender, RadComboBoxItemEventArgs e)
{
    //DataRowView dataSourceRow = (DataRowView)e.Item.DataItem;
    //string groupName = dataSourceRow.Row["Name"].ToString();
    //string groupId = dataSourceRow.Row["OrganizerGroupId"].ToString();
    //e.Item.Text = groupName;
    //e.Item.Value = groupId;
}
protected void PopulateOrganizerUnitList(object sender, bool activeOnly)
{
    //RadComboBox unitComboBox = Unit_ComboBox;
    RadComboBox unitComboBox = (RadComboBox)sender;
    DataTable unitList = DepartmentUnit.Catalog(activeOnly);
    unitComboBox.DataSource = unitList;
    unitComboBox.DataBind();
    //Insert default item
    unitComboBox.Items.Insert(0, new RadComboBoxItem("--Select Unit--"));
}
protected void PopulateOrganizerGroupList(object sender, string unitId, bool activeOnly)
{
    //RadComboBox groupComboBox = Group_ComboBox;
    RadComboBox groupComboBox = (RadComboBox)sender;
    DataTable groupList = OrganizerGroup.Catalog(activeOnly);

    //Clear out the combo box
    groupComboBox.Items.Clear();
    //Insert default item
    groupComboBox.Items.Insert(0, new RadComboBoxItem("--Select Group--"));
    foreach (DataRow groupRow in groupList.Rows)
    {
        if ((int)groupRow["DepartmentUnitId"] == Convert.ToInt32(unitId))
        {
            string groupName = groupRow["Name"].ToString();
            string groupId = groupRow["OrganizerGroupId"].ToString();
            groupComboBox.Items.Add(new RadComboBoxItem(groupName, groupId));
        }
    }
}

[Martin]

Hello Mark Gallucci,

Thank you for the additional code.

Although I am still missing the data source that you bind your combo boxes to, I tried to replicate the problem by replacing it with dummy data tables. The sample still works as expected on my side even after applying the code from your last post. Please review the attached modified project and let me know how it goes on your side.

Regards,
Martin
the Telerik team