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

[Solved] Batch editing using usercontrol with cascading radcomboboxes

3 Answers 144 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ioish
Top achievements
Rank 1
Ioish asked on 11 Jul 2013, 06:02 PM
Hi,

I've set up a grid with Batch editing enabled and in one of the columns (TemplateColumn) I use a usercontrol as and editor. This usercontrol contains three cascading comboboxes with the following definition:

<table class="layout">
    <tr>
        <td>
          <telerik:RadComboBox ID="Family" runat="server" Width="150" EmptyMessage="Família"
                EnableLoadOnDemand="True" ShowMoreResultsBox="true"  EnableVirtualScrolling="true"
                OnItemsRequested="FamilyItemsRequested" AutoPostBack="True">
            </telerik:RadComboBox>
        </td>
        <td>
           <telerik:RadComboBox ID="Genus" runat="server" Width="150"  EmptyMessage="Género"
                EnableLoadOnDemand="True" ShowMoreResultsBox="true" EnableVirtualScrolling="true"
                OnItemsRequested="GenusItemsRequested" AutoPostBack="True">
            </telerik:RadComboBox>
        </td>
        <td>
            <telerik:RadComboBox ID="Species" runat="server" Width="150" EmptyMessage="Espécie"
                EnableLoadOnDemand="True" ShowMoreResultsBox="true" EnableVirtualScrolling="true"
                OnItemsRequested="SpeciesItemsRequested" AutoPostBack="True">
            </telerik:RadComboBox>
        </td>
    </tr>
</table>
<asp:HiddenField ID="SelectedTaxonId" runat="server" />
<asp:HiddenField ID="SelectedTaxonName" runat="server" />

Besides that the control contains an ajaxmanager proxy:
   <telerik:RadAjaxManagerProxy ID="ajaxProx" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Family">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Genus" UpdatePanelCssClass="" />
                    <telerik:AjaxUpdatedControl ControlID="Species" UpdatePanelCssClass="" />
                    <telerik:AjaxUpdatedControl ControlID="SelectedTaxonId"
                        UpdatePanelCssClass="" />
                    <telerik:AjaxUpdatedControl ControlID="SelectedTaxonName"
                        UpdatePanelCssClass="" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="Genus">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Species" UpdatePanelCssClass="" />
                    <telerik:AjaxUpdatedControl ControlID="SelectedTaxonId"
                        UpdatePanelCssClass="" />
                    <telerik:AjaxUpdatedControl ControlID="SelectedTaxonName"
                        UpdatePanelCssClass="" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="Species">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="SelectedTaxonId"
                        UpdatePanelCssClass="" />
                    <telerik:AjaxUpdatedControl ControlID="SelectedTaxonName"
                        UpdatePanelCssClass="" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
</telerik:RadAjaxManagerProxy>

When testing this control on a form, not in a grid, in works fine, even when putting hundreds of them on one page.

However as soon as I put this control in a grid, weird things start to happen:

First selecting an item of the Family Combobox works fine, all events are events are fired correctly
When selecting an item of the next combo (Genus), for some reason a SelectedIndexChanged event is fired for the Family combo while it is not clicked or changed in anyway. Random javascript errors apear as well, but I cannot reproduce those and in another grid, selecting an item from the Family combox will hide the usercontrol, not letting me choose an item from Genus or Especies. All in all, the behaviour becomes very erratic.

When using the control in an ItemTemplate it works fine, however it causes the page to be very unresponsive when using a grid of 100 rows

Any ideas what might be going wrong? Or an example of how to accomplish what I'm trying to do? Thanks in advance for any help!

Ioish



3 Answers, 1 is accepted

Sort by
0
Angel Petrov
Telerik team
answered on 16 Jul 2013, 01:53 PM
Hello Ioish,

When multiple controls are placed inside the EditItemTemplate RadGrid can not determine the right control from which to extract the value used for editing. In such scenarios you should handle things manually as explained in this help article. As for firing the SelectedIndexChanged I would like you to elaborate more. Is the edit cell being changed before firing? By following the suggestion given in the help article you should be able to resolve the problem.

Regards,
Angel Petrov
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Ioish
Top achievements
Rank 1
answered on 16 Jul 2013, 06:44 PM
Hi Angel,

Tahnks for your answer! The editing cell is indeed changed (one of the comboboxes in the usercontrol is changed), which very likely causes the spurious event. In the documentation I could not find an example on how to deal with usercontrols in this case. The desired funcionality would be:

ItemTemplate:
Label control
HiddenField control

EditItemTemplate
Usercontrol as described in my first post

1) Click on cell -> grid show the user control
2) user selects item from the first combo (using load on demand)
3) user selects item from the second combo. This combo is filtered using the selected item from the first combo. (using load on demand) (optional)
4) user selects item from the third combo This combo is filtered using the selected item from the first combo.
(using load on demand)  (optional)
5) user clicks outside the cell -> grid hides the usercontrol, and updates the label and hidden field in the ItemTemplate, using respectively the  SelectedTaxonName and  SelectedTaxonId fields (filled in by the usercontrol everytime one of the comboboxes changes)

I'm aware that for steps 1 and 5 to work I need to user the client side events as described in the page you pointed out, but is that the only thing I'll have to take care of or are there more changes necessary?

Thanks!

Ioish




0
Angel Petrov
Telerik team
answered on 19 Jul 2013, 01:52 PM
Hi Ioish,

As far as I understand the scenario I do not see any additional steps that one must perform in order to implement it. The main point here is subscribing to the events listed in the help article, obtaining a reference(client-side) to the controls inside the user control and setting the values according to the requirements. If however you experience additional problems I would like to ask you to send us a project which demonstrates the scenario so we could provide a more precise answer.

Regards,
Angel Petrov
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Grid
Asked by
Ioish
Top achievements
Rank 1
Answers by
Angel Petrov
Telerik team
Ioish
Top achievements
Rank 1
Share this question
or