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).
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> |