RadComboBox in Grid EditForm Template

[Mike]

I have a grid on the bottom of a page with an AjaxLoadingPanel.  In the grid edit form template, I have a RadComboBox and in the grid's ItemDataBound even, I fill the combo box from a service call with a list of users (and if editing a record, pre-select the user).

However, when I add a new record, the AjaxSettings fire and the grid refreshes and the add/edit template is displayed.  Except no data is bound to the combo box.  If I remove the AjaxSettings, the whole page is refreshed when I add a new item, and data IS bound to the combo box.

Is there a trick to using the combo box in an edit form template with the loading panel?

[Maria Ilieva]

Hi Mike,

Please note that in this scenario the Ajax settings that need to be added are only adding the RadGrid control to update itself. If this is the seating you have and the issue still appear it will be best f you can share your page markup s well as related code behind so that we can revise them locally and advise you further.

Regards,
Maria Ilieva
Telerik

[Mike]

This is what I have on the page - and it doesn't work.  If I remove/comment out the Ajax Manager it does work - with a whole page refresh.

<telerik:RadAjaxManager runat="server" ID="radAjaxManager" EnableAJAX="True">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="radActionItems">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="radActionItems" LoadingPanelID="radLpActionItems" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<h1>Vehicle Safety Inspection</h1>
<div class="form-section">
    <table>
        <tr>
            <th style="width: 20%">Description</th>
            <th style="width: 15%"> </th>
            <th>Comment</th>
        </tr>
        <tr>
            <td class="left">All lighting clean and functional</td>
            <td class="left">
                <asp:RadioButtonList runat="server" ID="rblLighting" RepeatDirection="Horizontal" RepeatLayout="Flow" CssClass="noBorder" TextAlign="Right">
                    <asp:ListItem Value="True" Text="Yes"></asp:ListItem>
                    <asp:ListItem Value="False" Text="No"></asp:ListItem>
                    <asp:ListItem Value="" Text="N/A" Selected="True"></asp:ListItem>
                </asp:RadioButtonList>
            </td>
            <td class="left">
                <telerik:RadTextBox runat="server" ID="txtLightingComments" TextMode="MultiLine" Width="100%" Height="50px" EmptyMessage="Comments"></telerik:RadTextBox>
            </td>
        </tr>
        <tr>
            <td class="left">Flares or reflective triangles present</td>
            <td class="left">
                <asp:RadioButtonList runat="server" ID="rblFlares" RepeatDirection="Horizontal" RepeatLayout="Flow" CssClass="noBorder" TextAlign="Right">
                    <asp:ListItem Value="True" Text="Yes"></asp:ListItem>
                    <asp:ListItem Value="False" Text="No"></asp:ListItem>
                    <asp:ListItem Value="" Text="N/A" Selected="True"></asp:ListItem>
                </asp:RadioButtonList>
            </td>
            <td class="left">
                <telerik:RadTextBox runat="server" ID="txtFlaresComments" TextMode="MultiLine" Width="100%" Height="50px" EmptyMessage="Comments"></telerik:RadTextBox>
            </td>
        </tr>
        <!-- whole bunch of HTML omitted -->
        <tr>
            <th class="left" colspan="3">Additional Comments (including regular/preventative maintenance conducted)</th>
        </tr>
        <tr>
            <td class="left" colspan="3">
                <telerik:RadTextBox runat="server" ID="txtAdditionalComments" TextMode="MultiLine" Width="100%" Height="50px" EmptyMessage="Additional Comments"></telerik:RadTextBox>
            </td>
        </tr>
    </table>
</div>
<div style="padding-bottom: 5px;">
    <telerik:RadAjaxLoadingPanel runat="server" ID="radLpActionItems"></telerik:RadAjaxLoadingPanel>
    <telerik:RadGrid runat="server" ID="radActionItems" AutoGenerateColumns="False" AllowSorting="False" AllowFilteringByColumn="False" GridLines="Both" Width="99%"
        OnNeedDataSource="radActionItems_OnNeedDataSource" OnItemCommand="radActionItems_OnItemCommand" OnItemDataBound="radActionItems_OnItemDataBound"
        OnInsertCommand="radActionItems_OnInsertCommand" OnUpdateCommand="radActionItems_OnUpdateCommand" OnDeleteCommand="radActionItems_OnDeleteCommand">
        <ClientSettings AllowColumnsReorder="False" EnableRowHoverStyle="True" EnablePostBackOnRowClick="False">
            <Selecting AllowRowSelect="True"></Selecting>
            <Scrolling UseStaticHeaders="True"></Scrolling>
        </ClientSettings>
        <MasterTableView DataKeyNames="action_item_id" ClientDataKeyNames="action_item_id" AutoGenerateColumns="False" AllowMultiColumnSorting="True" EnableHeaderContextMenu="True"
            AllowFilteringByColumn="True" CommandItemDisplay="TopAndBottom" InsertItemPageIndexAction="ShowItemOnCurrentPage" Height="100%">
            <NoRecordsTemplate>No ActionItems.</NoRecordsTemplate>
            <CommandItemSettings ShowAddNewRecordButton="True" ShowCancelChangesButton="False" ShowSaveChangesButton="False" ShowRefreshButton="True" />
            <Columns>
                <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn">
                    <HeaderStyle Width="1%"></HeaderStyle>
                    <ItemStyle VerticalAlign="Top" HorizontalAlign="Left" Width="1%"></ItemStyle>
                </telerik:GridEditCommandColumn>
                <telerik:GridButtonColumn ConfirmText="Delete this item?" ConfirmDialogType="RadWindow" ConfirmTitle="Delete?" ButtonType="ImageButton"
                    CommandName="Delete" ConfirmDialogHeight="160px" ConfirmDialogWidth="250px" UniqueName="DeleteColumn">
                    <HeaderStyle Width="1%"></HeaderStyle>
                    <ItemStyle VerticalAlign="Top" Width="1%"></ItemStyle>
                </telerik:GridButtonColumn>
                <telerik:GridBoundColumn DataField="action_item_id" HeaderText="ID" Visible="False"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="action" HeaderText="Item/Task">
                    <HeaderStyle Width="50%"></HeaderStyle>
                    <ItemStyle VerticalAlign="Top" HorizontalAlign="Left"></ItemStyle>
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="assigned_to_name" HeaderText="Assigned To">
                    <HeaderStyle Width="20%"></HeaderStyle>
                    <ItemStyle VerticalAlign="Top" HorizontalAlign="Left"></ItemStyle>
                </telerik:GridBoundColumn>
                <telerik:GridDateTimeColumn DataField="due_date" HeaderText="Due Date">
                    <HeaderStyle Width="15%"></HeaderStyle>
                    <ItemStyle VerticalAlign="Top" HorizontalAlign="Left"></ItemStyle>
                </telerik:GridDateTimeColumn>
                <telerik:GridCheckBoxColumn DataField="inactive" HeaderText="Inactive">
                    <HeaderStyle Width="3%"></HeaderStyle>
                    </telerik:GridCheckBoxColumn>
            </Columns>
            <EditFormSettings EditFormType="Template">
                <FormTemplate>
                    <table class="editTable">
                        <tr>
                            <td class="left" style="width: 80px; -moz-min-width: 80px; -ms-min-width: 80px; -o-min-width: 80px; -webkit-min-width: 80px; min-width: 80px;">Assigned to:</td>
                            <td class="left">
                                <telerik:RadComboBox runat="server" ID="radAssignedTo" AllowCustomText="False" Filter="Contains" EmptyMessage="Assigned To"
                                    Width="25%" MaxHeight="500px" EnableVirtualScrolling="True"></telerik:RadComboBox>
                            </td>
                        </tr>
                        <tr>
                            <td class="left">Item/Task:</td>
                            <td class="left">
                                <telerik:RadTextBox runat="server" ID="radAction" TextMode="MultiLine" EmptyMessage="Item/Task" Width="50%"></telerik:RadTextBox>
                            </td>
                        </tr>
                        <tr>
                            <td class="left">Due Date:</td>
                            <td>
                                <telerik:RadDateTimePicker runat="server" ID="radDueDate" Width="25%">
                                    <Calendar>
                                        <SpecialDays>
                                            <telerik:RadCalendarDay Repeatable="Today">
                                                <ItemStyle BackColor="LightGray" Font-Bold="True" BorderStyle="Solid" BorderColor="Black" BorderWidth="1px"></ItemStyle>
                                            </telerik:RadCalendarDay>
                                        </SpecialDays>
                                    </Calendar>
                                    <TimeView Interval="00:30:00" Columns="5"></TimeView>
                                    <DateInput DisplayDateFormat="yyyy-MM-dd h:mm tt" DateFormat="yyyy-MM-dd h:mm tt" EmptyMessage="Due Date"></DateInput>
                                </telerik:RadDateTimePicker>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2"> </td>
                        </tr>
                        <tr>
                            <td class="left" colspan="2">
                                <telerik:RadButton runat="server" ID="radSubmit" Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'
                                    CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'>
                                </telerik:RadButton>
                                <telerik:RadButton runat="server" ID="radCancel" Text="Cancel" CommandName="Cancel" />
                            </td>
                        </tr>
                    </table>
                </FormTemplate>
            </EditFormSettings>
        </MasterTableView>
    </telerik:RadGrid>
</div>

 

 And in my code-behind, I have this:

private List<Action_Item> Actions
{
  get
  {
    if (ViewState[ActionItemsKey] == null)
    {
      ViewState[ActionItemsKey] = new List<Action_Item>();
    }
    return ViewState[ActionItemsKey] as List<Action_Item>;
  }
}

private int ActionId
{
  get
  {
    if (ViewState[ActionIdKey] == null)
    {
      ViewState[ActionIdKey] = -1;
    }
    return Convert.ToInt32(ViewState[ActionIdKey]);
  }
  set { ViewState[ActionIdKey] = value; }
}

protected void radActionItems_OnNeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
  var actions = ActionItem.GetFormActionItems(FormMasterId);
  actions.AddRange(Actions);
  radActionItems.DataSource = actions;
}

protected void radActionItems_OnItemCommand(object sender, GridCommandEventArgs e)
{
  var grid = sender as RadGrid;
  if (grid == null)
  {
    return;
  }
  var editColumn = grid.MasterTableView.GetColumn("EditCommandColumn") as GridEditCommandColumn;
  var deleteColumn = grid.MasterTableView.GetColumn("DeleteColumn") as GridButtonColumn;
  if (e.CommandName == RadGrid.InitInsertCommandName)
  {
    if (editColumn != null)
    {
      editColumn.Visible = false;
    }
    if (deleteColumn != null)
    {
      deleteColumn.Visible = false;
    }
  }
  else if (e.CommandName == RadGrid.RebindGridCommandName)
  {
    if (e.Item != null && e.Item.OwnerTableView != null && e.Item.OwnerTableView.IsItemInserted)
    {
      e.Canceled = true;
    }
  }
  else
  {
    if (editColumn != null && !editColumn.Visible)
    {
      editColumn.Visible = true;
    }
    if (deleteColumn != null && !deleteColumn.Visible)
    {
      deleteColumn.Visible = true;
    }
  }
}

protected void radActionItems_OnItemDataBound(object sender, GridItemEventArgs e)
{
  var item = e.Item as GridEditableItem;
  if (item == null)
  {
    return;
  }
  if (item.IsInEditMode)
  {
    var a = item.DataItem as Action_Item;  //returns null on new insert
    var cmb = item.FindControl("radAssignedTo") as RadComboBox;
    var act = item.FindControl("radAction") as RadTextBox;
    var due = item.FindControl("radDueDate") as RadDateTimePicker;
    if (a != null && cmb != null && act != null && due != null)
    {
      ListHelper.FillEmployees(cmb, a.assigned_to_id);
      act.Text = a.action;
      due.SelectedDate = a.due_date;
    }
    else
    {
      ListHelper.FillEmployees(cmb);
    }
  }
}

protected void radActionItems_OnInsertCommand(object sender, GridCommandEventArgs e)
{
  var item = e.Item as GridEditableItem;
  if (item == null)
  {
    return;
  }
  var ai = new Action_Item();
  var cmb = item.FindControl("radAssignedTo") as RadComboBox;
  var act = item.FindControl("radAction") as RadTextBox;
  var due = item.FindControl("radDueDate") as RadDateTimePicker;
  if (cmb != null && act != null && due != null)
  {
    ai.action_item_id = ActionId;
    if (!string.IsNullOrWhiteSpace(cmb.SelectedValue) && cmb.SelectedValue != "-1")
    {
      var userId = Convert.ToInt32(cmb.SelectedValue);
      var userClient = new UserServiceClient();
      var user = userClient.GetSecurityUserByUserID(userId);
      ai.assigned_to_id = userId;
      ai.assigned_to_name = user.full_name;
      ai.assigned_to_email = user.email_address;
    }
    else
    {
      ai.assigned_to_id = null;
      ai.assigned_to_name = null;
      ai.assigned_to_email = null;
    }
    ai.action = act.Text;
    ai.due_date = due.SelectedDate;
    cmb.ClearSelection();
    act.Text = "";
    due.Clear();
    Actions.Add(ai);
    ActionId--;
  }
  radActionItems.EditIndexes.Clear();
  radActionItems.Rebind();
}

protected void radActionItems_OnUpdateCommand(object sender, GridCommandEventArgs e)
{
  var item = e.Item as GridEditableItem;
  if (item == null)
  {
    return;
  }
  var key = Convert.ToInt32(item.GetDataKeyValue("action_item_id"));
  var index = Actions.FindIndex(i => i.action_item_id == key);
  var cmb = item.FindControl("radAssignedTo") as RadComboBox;
  var act = item.FindControl("radAction") as RadTextBox;
  var due = item.FindControl("radDueDate") as RadDateTimePicker;
  if (cmb != null && act != null && due != null)
  {
    var newAction = index >= 0 ? Actions[index] : ActionItem.GetActionItem(key);
    if (!string.IsNullOrWhiteSpace(cmb.SelectedValue) && cmb.SelectedValue != "-1")
    {
      var userId = Convert.ToInt32(cmb.SelectedValue);
      var userClient = new UserServiceClient();
      var user = userClient.GetSecurityUserByUserID(userId);
      newAction.assigned_to_id = userId;
      newAction.assigned_to_name = user.full_name;
      newAction.assigned_to_email = user.email_address;
    }
    else
    {
      newAction.assigned_to_id = null;
      newAction.assigned_to_name = null;
      newAction.assigned_to_email = null;
    }
    newAction.action = act.Text;
    newAction.due_date = due.SelectedDate;
    if (index >= 0)
    {
      Actions[index] = newAction;
    }
    else
    {
      ActionItem.Save(newAction);
    }
    radActionItems.EditIndexes.Clear();
    radActionItems.Rebind();
  }
}

protected void radActionItems_OnDeleteCommand(object sender, GridCommandEventArgs e)
{
  var item = e.Item as GridEditableItem;
  if (item == null)
  {
    return;
  }
  var key = Convert.ToInt32(item.GetDataKeyValue("action_item_id"));
  var index = Actions.FindIndex(i => i.action_item_id == key);
  if (index >= 0)
  {
    Actions.RemoveAt(index);
  }
  else
  {
    var a = ActionItem.GetActionItem(key);
    a.inactive = true;
    a.inactive_by = CurrentUser.Username;
    a.inactive_datetime = DateTime.Now;
    ActionItem.Save(a);
  }
  radActionItems.Rebind();
}

 

I'm wondering if maybe I'm doing something wrong?

 

[Maria Ilieva]

Hi Mike,

Note that the DataSource for the ComboBox should be applied in the ItemDataBound event as shown in the forum thread below:
http://www.telerik.com/forums/radcombobox-inside-radgrid-editform-template
Give this  try and see of it works.

Regards,
Maria Ilieva
Telerik

[Mike]

I forgot to include the code of the ListHelp object and method that's in the ItemDataBound event.

public static void FillEmployees(RadComboBox list, int? selectedId = null)
{
  var client = new UserServiceClient();
  var userList = client.GetSecurityUsers();

  list.ClearSelection();
  list.Items.Clear();
  list.Items.Add(new RadComboBoxItem("(Choose Employee)", "-1"));

  list.AppendDataBoundItems = true;
  list.DataSource = userList;
  list.DataValueField = "user_id";
  list.DataTextField = "full_name_last_first";
  list.DataBind();

  if (selectedId.HasValue && selectedId.Value > 0)
  {
    if (list.FindItemByValue(selectedId.Value.ToString()) != null)
    {
      list.FindItemByValue(selectedId.Value.ToString()).Selected = true;
    }
  }
}

I'll try moving the logic from ListHelper into the ItemDataBound event to see if that works. 

 

[Mike]

I moved my FillEmployees logic into the ItemDataBound grid event and it works.  Thanks!

[Maria Ilieva]

Hello,

I'm glad that the provided solution works for you. Do not hesitate to contact us back in case further assistance is needed.

Regards,
Maria Ilieva
Telerik