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

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

4 Answers 94 Views
Grid
This is a migrated thread and some comments may be shown as answers.
jgill
Top achievements
Rank 1
jgill asked on 12 Jun 2010, 09:34 PM
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> 

4 Answers, 1 is accepted

Sort by
0
jgill
Top achievements
Rank 1
answered on 12 Jun 2010, 09:35 PM
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.
0
Tsvetina
Telerik team
answered on 16 Jun 2010, 03:33 PM
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.
0
jgill
Top achievements
Rank 1
answered on 18 Jun 2010, 02:00 AM
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.


0
jgill
Top achievements
Rank 1
answered on 18 Jun 2010, 02:15 AM
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.
Tags
Grid
Asked by
jgill
Top achievements
Rank 1
Answers by
jgill
Top achievements
Rank 1
Tsvetina
Telerik team
Share this question
or