RadGrid, JQuery, and Edit Form Templates

7 posts, 0 answers
  1. Mark Gallucci
    Mark Gallucci avatar
    11 posts
    Member since:
    May 2010

    Posted 04 May 2011 Link to this post

    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.
  2. Martin
    Admin
    Martin avatar
    811 posts

    Posted 10 May 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mark Gallucci
    Mark Gallucci avatar
    11 posts
    Member since:
    May 2010

    Posted 12 May 2011 Link to this post

    Thanks for the help.  This appears to have done the trick.
  5. Mark Gallucci
    Mark Gallucci avatar
    11 posts
    Member since:
    May 2010

    Posted 18 May 2011 Link to this post

    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?
  6. Martin
    Admin
    Martin avatar
    811 posts

    Posted 24 May 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  7. Mark Gallucci
    Mark Gallucci avatar
    11 posts
    Member since:
    May 2010

    Posted 24 May 2011 Link to this post

    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));
            }
        }            
    }

  8. Martin
    Admin
    Martin avatar
    811 posts

    Posted 30 May 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017