This is a migrated thread and some comments may be shown as answers.

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

6 Answers 352 Views
Grid
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 13 Nov 2014, 12:44 AM
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?


6 Answers, 1 is accepted

Sort by
0
Kostadin
Telerik team
answered on 17 Nov 2014, 03:41 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
John
Top achievements
Rank 1
answered on 18 Nov 2014, 06:33 PM
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.
0
Kostadin
Telerik team
answered on 21 Nov 2014, 08:39 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Tim
Top achievements
Rank 1
answered on 15 Mar 2018, 07:10 PM

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> 

0
Tim
Top achievements
Rank 1
answered on 15 Mar 2018, 07:15 PM

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> 

0
Eyup
Telerik team
answered on 20 Mar 2018, 02:00 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
John
Top achievements
Rank 1
Answers by
Kostadin
Telerik team
John
Top achievements
Rank 1
Tim
Top achievements
Rank 1
Eyup
Telerik team
Share this question
or