RadComboBox in Grid EditForm Template

7 posts, 1 answers
  1. Mike
    Mike avatar
    76 posts
    Member since:
    Mar 2013

    Posted 18 Nov 2015 Link to this post

    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?

  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 23 Nov 2015 Link to this post

    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
    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 Feedback Portal and vote to affect the priority of the items
  3. Mike
    Mike avatar
    76 posts
    Member since:
    Mar 2013

    Posted 23 Nov 2015 in reply to Maria Ilieva Link to this post

    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?

     

  4. Answer
    Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 26 Nov 2015 Link to this post

    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
    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 Feedback Portal and vote to affect the priority of the items
  5. Mike
    Mike avatar
    76 posts
    Member since:
    Mar 2013

    Posted 26 Nov 2015 in reply to Maria Ilieva Link to this post

    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. 

     

  6. Mike
    Mike avatar
    76 posts
    Member since:
    Mar 2013

    Posted 26 Nov 2015 in reply to Mike Link to this post

    I moved my FillEmployees logic into the ItemDataBound grid event and it works.  Thanks!
  7. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 27 Nov 2015 Link to this post

    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
    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 Feedback Portal and vote to affect the priority of the items
Back to Top