How can I get "client edit with batch server update" example to work with RadComboBoxes?

[jgill]

Hello,
I am having trouble getting the "Client Edit With Batch Server Update" sample, http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/clienteditbatchupdates/defaultcs.aspx, to adapt to working with dropdowns that are actually templated RadComboboxes.  This is likely because the RadCombobox is rendered in a div and the templates are rendered as a table.

When the RadGrid renders it is displaying the GridTemplateColumn, but none of the values are visible in the templated column.  I can select a value (the text does not display until I select it).

           function ShowColumnEditor() {
                editedCell = this;

                //hide text and show column editor in the edited cell
                var cellText = this.getElementsByTagName("span")[0];
                cellText.style.display = "none";

                //display the span which wrapps the hidden checkbox editor
                if (this.getElementsByTagName("span")[1]) {
                    this.getElementsByTagName("span")[1].style.display = "";
                }

               //TODO: Ask about this, cannot get to work.

                if (this.getElementsByTagName("div")[0]) {
                    this.getElementsByTagName("div")[0].style.display = "";
                }

                var colEditor = this.getElementsByTagName("input")[0] || this.getElementsByTagName("select")[0];
                //if the column editor is a form decorated select dropdown, show it instead of the original
                if (colEditor.className == "rfdRealInput" && colEditor.tagName.toLowerCase() == "select") colEditor = Telerik.Web.UI.RadFormDecorator.getDecoratedElement(colEditor);
                colEditor.style.display = "";
                colEditor.focus();
            }
            function StoreEditedItemId(editCell) {
                //get edited row key value and add it to the array which holds them
                var gridRow = $find(editCell.parentNode.id);
                var rowKeyValue = gridRow.getDataKeyValue("FieldName");
                Array.add(editedItemsIds, rowKeyValue);
            }
            function HideEditor(editCell, editorType) {
                //get reference to the label in the edited cell
                var lbl = editCell.getElementsByTagName("span")[0];

                switch (editorType) {
                    case "textbox":
                        var txtBox = editCell.getElementsByTagName("input")[0];
                        if (lbl.innerHTML != txtBox.value) {
                            lbl.innerHTML = txtBox.value;
                            editCell.style.border = "1px dashed";

                            StoreEditedItemId(editCell);
                        }
                        txtBox.style.display = "none";
                        break;
                    case "checkbox":
                        var chkBox = editCell.getElementsByTagName("input")[0];
                        if (lbl.innerHTML.toLowerCase() != chkBox.checked.toString()) {
                            lbl.innerHTML = chkBox.checked;
                            editedCell.style.border = "1px dashed";

                            StoreEditedItemId(editCell);
                        }
                        chkBox.style.display = "none";
                        editCell.getElementsByTagName("span")[1].style.display = "none";
                        break;
                    case "dropdown":
                        var ddl = editCell.getElementsByTagName("select")[0];
                        var selectedValue = ddl.options[ddl.selectedIndex].value;
                        if (lbl.innerHTML != selectedValue) {
                            lbl.innerHTML = selectedValue;
                            editCell.style.border = "1px dashed";

                            StoreEditedItemId(editCell);
                        }
                        //if the form decorator was enabled, hide the decorated dropdown instead of the original.
                        if (ddl.className == "rfdRealInput") ddl = Telerik.Web.UI.RadFormDecorator.getDecoratedElement(ddl);
                        ddl.style.display = "none";
                    case "radcombo":
                        //TODO:  Ask Telerik about this, tried to add this to get the templated RadCombobox value
                        var ddlWrapper = editCell.getElementsByTagName("div")[0];
                        var ddl = editCell.getElementsByTagName("input")[0];
                        if (lbl.innerHTML != ddl.value) {
                            lbl.innerHTML = ddl.value;
                            editCell.style.border = "1px dashed";

                            StoreEditedItemId(editCell);
                        }
                        ddlWrapper.style.display = "none";
                    default:
                        break;
                }
                lbl.style.display = "inline";
            }

<telerik:GridTemplateColumn UniqueName="AccountID" SortExpression="AccountID" HeaderText="Account" ConvertEmptyStringToNull="true">
                    <ItemTemplate>
                             <asp:Label ID="lblAccountID" runat="server" Text='<%# Eval("AccountID") %>' />
                                                    <telerik:radcombobox id="cboAccountID" runat="server"
                        Width="305px" Height="200px"
                        EnableVirtualScrolling="true"
                        HighlightTemplatedItems="true"
                        EnableLoadOnDemand="true"
                        DataValueField="AccountID"
                        OnItemsRequested="cboAccountID_ItemsRequested"

                        >
                        <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                        <HeaderTemplate>
                                    <table style="width: 275px" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td style="width: 20%;">
                                                AccountID</td>
                                            <td style="width: 80%">
                                                Account Alias</td>
                                            <td style="width: 20%">
                                                Is Active?</td>
                                        </tr>
                                    </table>
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <table style="width: 275px" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td style="width: 20%;">
                                                <%#DataBinder.Eval(Container, "Attributes['AccountID']")%>
                                            </td>
                                            <td style="width: 80%;">
                                                <%#DataBinder.Eval(Container, "Attributes['AccountAliasc']")%>
                                            </td>
                                            <td style="width: 20%;">
                                                <%# DataBinder.Eval(Container, "Attributes['IsActive']")%>
                                            </td>
                                        </tr>
                                    </table>
                                </ItemTemplate>
                        </telerik:radcombobox>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>

[jgill]

The JavaScript is not hiding and showing the templated RadCombobox correctly and obtaining the selected value.  I am sure that others will have this issue where they want/need to use the templated RadCombobox in a batch update scenario like this.

[Tsvetina]

Hello Jonathan,

I just provided a solution to this problem in this forum thread. Check it out and see if it works for you.

Kind regards,
Tsvetina
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[jgill]

Hello Tsvetina,
This is working, except the items in my Radcombobox are strangely transparent/blank still.  I see some mention of it here: http://www.telerik.com/community/forums/aspnet-ajax/combobox/radcombobox-items-disappearing-after-postback.aspx.

[jgill]

I found the issue.  I needed to call  item.DataBind() in the ItemsRequested event.  I found this because the templated item's values were not rendering correctly when i viewed the source.