RadGrid Batch Mode, RadComboBox with CheckBoxes, and Pre-Select Values upon Edit

[John]

I have a RadGrid with EditMode="Batch".  It has a template column.  In this column (in the EditItemTemplate) is a RadComboBox with CheckBoxes="True".  

<telerik:RadGrid ID="RadGrid1" runat="server" CellSpacing="0" GridLines="None"
    AllowMultiRowEdit="True"
    AutoGenerateColumns="False" AllowAutomaticInserts="False" AllowAutomaticUpdates="False"
    OnNeedDataSource="GridNeedDataSource"
    OnPreRender="GridPreRender">
    <MasterTableView AllowSorting="True" EditMode="Batch">
        <Columns>
            <telerik:GridBoundColumn DataField="Id" HeaderText="Id" UniqueName="IdColumn" Display="False" ReadOnly="True">
            </telerik:GridBoundColumn>
            <telerik:GridTemplateColumn HeaderText="Test Values" UniqueName="TestValuesColumn" ItemStyle-Width="400px">
                <EditItemTemplate>
                    <telerik:RadComboBox runat="server" ID="TestValuesComboBox" DropDownAutoWidth="Enabled"
                        HighlightTemplatedItems="True" CheckBoxes="True" EnableCheckAllItemsCheckBox="True">
                    </telerik:RadComboBox>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
        <BatchEditingSettings OpenEditingEvent="DblClick" />
    </MasterTableView>
</telerik:RadGrid>

protected void GridPreRender(object sender, EventArgs e)
{
    RadGrid grid = sender as RadGrid;
    if (grid != null)
    {
        GridTableView masterTable = grid.MasterTableView;

        var editor = masterTable.GetBatchEditorContainer("TestValuesColumn");
        var comboBox = (RadComboBox)editor.FindControl("TestValuesComboBox");
        comboBox.Items.Clear();

        for (int i = 1; i <= 10; i++)
        {
            RadComboBoxItem item = new RadComboBoxItem();
            item.Text = i.ToString();
            item.Value = i.ToString();

            comboBox.Items.Add(item);
            item.DataBind();
        }
    }
}

What I need to do is pre-check the values that have been previously saved.  I realize that there is really only "one" editor for the entire column, so I was wondering if there was some javascript (handling the BatchEditOpening maybe?) that could run through a comma separated list contained in a hidden field or something, and check the appropriate values when opening the cell for editing?  I set the contents of the RadComboBox in the grid's PreRender event, so it's only done once.

Perhaps another option is to have the RadComboBox set with EnableLoadOnDemand="true" and handle the OnItemsRequested to reload and select the data, after it handles the OnClientDropDownOpening="ClearComboBox" with the following code:

function ClearComboBox(sender, args) {
    if (sender.get_items().get_count() == 0) {
        return;
    }
    else {
        sender.clearItems();
        sender.requestItems("parameter", true);
    }
}

The trouble with option #2 is that I'm not sure how to get any values for that particular row to set up in code-behind.  So I don't know how to get the data from the database for that record.  Also, this will make a call to the database every time they open the ComboBox.

Any thoughts?

[Kostadin]

Hello John,

A possible solution is to get the RadComboBox client object when the batch editor is opened. This way you can get all check items and you can iterate through them and get the text or the value of each one. Please check out the following code snippet.
Mark-up:

<ClientSettings>
    <ClientEvents OnBatchEditOpened="OnBatchEditOpened" />
</ClientSettings>

JavaScript:

<script type="text/javascript">

    function OnBatchEditOpened(sender, args) {
        var combo = $telerik.findControl(args.get_cell(), "TestValuesComboBox");
        var checkedItems = combo.get_checkedItems();
    }
</script>

Regards,
Kostadin
Telerik

 

 

[John]

Perhaps I wasn't clear in my question.  The data for the column is a string of values.  These values will appear in the combo box.  For example, the combo box contains the values "1" through "10".  The data for the first row is "4,7".  On the second row, the value is 2,3,9".

How do I check the items in the combo box that are in the data?  I need 4 and 7 checked when the combo box opens in the first row, but 2, 3 and 9 checked when the second row's combo box is opened.

[Kostadin]

Hi John,

In this case you need to hook OnBatchEditGetCellValue, OnBatchEditSetCellValue, OnBatchEditGetEditorValue and OnBatchEditSetEditorValue events. When hooking those event you can get the value of the cell and then set it to the editor. I would recommend you to check out the Handling advanced templates section from the following help article which elaborates more on such scenarios. Please give it a try and let me know about the result.

Regards,
Kostadin
Telerik

 

 

[Tim]

Kostadin / Telerik Admin,

    (Grid Batch Edit Mode) Please post a code example showing exactly how to populate the RadComboBox so that checkboxes are checked automatically based on datasource both in the <ItemTemplate> and in the <EditItemTemplate> 

   <telerik:GridTemplateColumn
    UniqueName="Pizza Topping"
    HeaderText="Pizza Topping">
    <ItemTemplate>
     <telerik:RadComboBox
      runat="server"
      ID="ComboBox_PizzaTopping"
      CheckBoxes="true"
      DataCheckedField="IsActive"
      DataTextField="Name"
      DataValueField="PizzaToppingID"
         DataSource='<%# Eval("PizzaToppings") %>' >
     </telerik:RadComboBox>
    </ItemTemplate>

    <EditItemTemplate>
     <telerik:RadComboBox
      runat="server"
      ID="Edit_ComboBox_PizzaToppings"
      CheckBoxes="true" 
      DataTextField="Name"
      DataValueField="PizzaToppingID"
         DataSourceID="PizzaToppingDataSource">
     </telerik:RadComboBox>
    </EditItemTemplate>
   </telerik:GridTemplateColumn> 

[Tim]

Kostadin/Telerik Admin

(In Grid Batch Edit Mode) Please post an example showing exactly how to populate a RadComboBox with checkboxes checked based on the datasource. 

   <telerik:GridTemplateColumn
    UniqueName="PizzaToppings"
    HeaderText="Pizza Toppings">
    <ItemTemplate>
     <telerik:RadComboBox
      runat="server"
      ID="ComboBox_PizzaToppings"
      CheckBoxes="true"
      DataCheckedField="IsActive"
      DataTextField="Name"
      DataValueField="PizzaToppingID"
         DataSource='<%# Eval("PizzaToppings") %>' >
     </telerik:RadComboBox>
    </ItemTemplate>
    <EditItemTemplate>
     <telerik:RadComboBox
      runat="server"
      ID="Edit_ComboBox_PizzaTopping"
      CheckBoxes="true" 
      DataTextField="Name"
      DataValueField="PizzaToppingID"
         DataSourceID="PizzaToppingDataSource">
      
     </telerik:RadComboBox>
    </EditItemTemplate>
   </telerik:GridTemplateColumn> 

[Eyup]

Hello Tim,

Using the RadComboBox is not supported with Batch editing. It has some features which are not compatible with Batch editing. Generally, the RadDropDownList is more suitable:
http://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/batch-editing/defaultcs.aspx

You can also check the explanation provided here:
http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/rows/accessing-cells-and-rows#accessing-controls-in-batch-edit-mode

For a RadComboBox with CheckBoxes, I suggest that you use the InPlace edit mode instead, which resembles Batch editing:
https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/data-editing/edit-mode/in-place

And if you implement AJAX, you will have a client-side like performance.

I am also sending 2 sample websites, which can prove helpful to you.

I hope this will prove helpful.

Regards,
Eyup
Progress Telerik