Batch Edit - Linking Comboboxes

[Brad]

I coudln't really come up with a good title for this, so bear with me as I describe what I'm trying to do.

We have a RadGrid setup to use Batch Edit. Each of the columns uses a GridTemplateColumn with a RadComboBox in the EditItemTemplate. The issue is that we want to filter the remaining comoboxes based on what was entered in a previous one. So lets say the first combobox is jobs, and the second one employees.  By default both show all jobs and employees, however if someone picked a Job I then need to rebind the Employees comobo and filter it so it only shows Employees assigned to that Job.

Just the same we have another scenario where there's a combobox in one column and a description in the next.  If the user changes the selected item in the dropdown we want to update the description column to match what was selected in the first column.

I'm assuming this has to be done in JavaScript as it would need to be done client side.  I just can't find any info on how I would do that or if it's even possible.

Thanks in advance.

[Maria Ilieva]

Hello Brad,

When implementing related drop downs in a batch editing grid one should populate the secondary combo using client-side binding. This is needed because if a postback occurs while the user edits the data its changes will be lost. That said you can populate the related combo by calling a web service or executing a callback.

In attachments you can find a sample website that populates the RadComboBox by subscribing to its OnItemsRequested event. Note that in the concrete example uses dummy data but the logic can be modified in such a manner so that a SQL database is used.

Regards,
Maria Ilieva
Telerik

 

 

[Brad]

Thanks, I will take a look and see if I can get that working.

Any idea on the other part?  I've almost got it working but not 100%.  It retrieves the value from the one combobox and then when it goes to get the other control it returns null unless the user has already clicked that row and the control has been created.  Any tips on how I can access it without the user having to click it?

Basically I have two rows set up like this:
                        <telerik:GridTemplateColumn HeaderText="Code" HeaderStyle-Width="150px" UniqueName="Code_ID" DataField="Code_ID" DefaultInsertValue="">
                            <ItemTemplate>
                                <%# Eval("Code_ID")%>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <telerik:RadComboBox ID="arcboCodes" runat="server" DropDownAutoWidth="Enabled"
                                EnableLoadOnDemand="True" Filter="Contains" ShowDropDownOnTextboxClick="False"
                                HighlightTemplatedItems="False" ShowMoreResultsBox="True" MarkFirstMatch="False"
                                EnableTextSelection="False"  ItemsPerRequest="10"
                                Sort="Ascending" Width="125px" SelectionOnFocus="SelectAll" MaxLength="40" 
                                DataSourceID="odsCodes" DataTextField="Code_ID" DataValueField="Code_ID"
                                OnClientSelectedIndexChanged="setCode"

                                    />
                            </EditItemTemplate>
                        </telerik:GridTemplateColumn>


Then at the top of the page I have this javascript function:

        function setCode(sender, eventArgs) {
            //  Get selected item
            var item = eventArgs.get_item();

            //  Get current row
            var grid = $find("<%= rgCodes.ClientID %>");
            var master = grid.get_masterTableView();
            var getRow = master.get_selectedItems()[0]
            var row = master.get_dataItems()[getRow._itemIndex];
 
            //  Find both combos and sync them
            var rcboCode = row.findControl("arcboCodes");
            var rcboCodeDesc = row.findControl("arcboCodesDesc");

            // This will end up being null unless the user has selected that cell and the control has been drawn
            if (rcboCodeDesc != null) {
                var rcbiCodeDesc = rcboCodeDesc.findItemByValue(item.get_value());

                // Even when it gets this far the select() seems to fail
                if(rcbiCodeDesc != null) rcbiCodeDesc.select();
            }
 
            if (rcboCodeDesc != null) {
                var rcbiCodeDesc = rcboCode.findItemByValue(item.get_value());
                if (rcbiCodeDesc != null) rcbiCode.select();
            }
        }


Thank you

[Brad]

Slight mistake in my above code, the last check should be if rcboCode != null.  Messed that up when trimming down the code into a more simple example.

[Maria Ilieva]

Hello Brad,

Try modifying the code below:

//  Find both combos and sync them
            var rcboCode = row.findControl("arcboCodes");
            var rcboCodeDesc = row.findControl("arcboCodesDesc");

to look like this:

//  Find both combos and sync them

var rcboCode = $telerik.findControl(document,"arcboCodes");
var rcboCodeDesc = $telerik.findControl(document, "arcboCodesDesc");

 
and see if this helps.

Regards,
Maria Ilieva
Telerik

 

 

[Brad]

Thanks, I was able to get it working but I had to do the first control with row.findControl and the other with $telerik.findControl.

There were a few other snags too.  First the dropdown had to be configured to not load on demand and the editType had to be changed from cell to row or else the combobox didn't seem to exist yet. I also fund using OnClientDropDownClosed worked better than OnClientSelectedIndex changed as the latter got me stuck in an infinite loop where as one control updated the other it fired the event again.

[Brad]

I'm not sure if it's best to open a new thread for this or post it here, but now the issue I'm having is I only get the edit and cancel buttons and no matter what I do there insert button will not appear.  I've tried toggling automatic inserts and adding methods for onItemInserted as well as onInsertCommand but it has no effect.  The only thing I can think of that might impact this is that I am using an ObjectDataSource rather than a SQL Data source.

Any idea what could be causing that?

Thanks again

[Brad]

Finally got around to implementing the first solution you posted.  It works... kind of.  It seems it only works if I set EditType="Cell", if I set it to "Row" then it opens a blank dropdown and then when I close it you see the correct contents show for half a second before it closes.  Since the other solution I posted requires that I have it set to EditType="Row" changing it to cell is not an option.  Is there no way to get that feature to work with row edit?

[Angel Petrov]

Hello Brad,

In attachments you can find a sample web site that illustrates a possible realization of the scenario when row editing is used. Please examine the sample implementation, give the illustrated approach a try and let us know if additional questions arise.

Regards,
Angel Petrov
Telerik

 

 

[Brad]

Thanks, I've implemented this code and it is kind of working but seems very quirky.

I'm still experiencing an issue when I click the second dropdown I see it flicker or flash with the data I want then the dropdown is cleared out.  When I click out of the dropdown I see the items repopulate again just as it snaps shut.  This is what was happening with entry set to cell only.

On top of that if I don't select anything it clears my selection when I click off the control. I want that selection to persist as if a user accidentally clicks the dropdown then click off of it they will lose the data entered.

Thank you

[Maria Ilieva]

Hi Brad,

We are currently working on a new code library that should cover your requirements and presents related combo box controls with Batch editing. I will send you the project as soon as it is ready so that you can test it on your end.

Regards,
Maria Ilieva
Telerik

 

 

[Konstantin Dikov]

Hi Brad,

A new Code Library for related RadComboBox controls in Batch Editing is now available. You can find the project with detailed information in the following link:

• Batch Editing Extensions - Related RadComboBoxes and Batch Validation

Best Regards,
Konstantin Dikov
Telerik

 

 

[Brad]

Thanks, I just read over the link you provided however there was one glaring issue:

You should also have in mind that RelatedComboBoxesManager will work only with Cell edit mode.

I specifically satated above that it was already working with Cell edit but did not want to work with Row edit, which is what I thought you were working on a solution to. Unfortunately Cell edit is not an option for us due to some other important functionality which relies on Row edit.

[Konstantin Dikov]

Hello Brad,

Indeed, the Code Library is designed to work with Cell editing only. Implementing this with Row edit will require a huge amount of custom code and it will get out of the idea behind such RelatedComboBoxManager, where the main purpose should be to make the integration as easy as possible. As you have found out yourself, handling this manually is an extremely difficult task and there are too many scenarios to handle.

Nevertheless, I will investigate the possibility for handling Row editing with the RelatedComboBoxManager and if such modification could be implemented, I will update the code and will get back to you.


Regards,
Konstantin Dikov
Telerik