When I change the order of the items/rows in the grid using client side code, I would like to find the new order representation.
I used the MasterTableView.Items collection and I end up with the original order, as when I bind the grid with the data.
What is the correct collection property to iterate through to retrieve the current row order of the rearranged grid?
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
var _selectedRow;
function radgvAddress_RowSelected(sender, args) {
_selectedRow = $get(args.get_id());
}
function moveRowUp() {
if (_selectedRow && _selectedRow.sectionRowIndex > 0) {
swapRows(_selectedRow, _selectedRow.parentNode.rows[_selectedRow.sectionRowIndex - 1])
}
}
function moveRowDown() {
if (_selectedRow && _selectedRow.sectionRowIndex < _selectedRow.parentNode.rows.length - 1) {
swapRows(_selectedRow, _selectedRow.parentNode.rows[_selectedRow.sectionRowIndex + 1])
}
}
function serializeChanges(index1, index2) {
var reorderInput = document.getElementById("ReorderChanges");
if (reorderInput) {
reorderInput.value += index1 + "," + index2 + ";";
}
}
function swapRows(sourceRow, targetRow) {
for (var i = 0; i < sourceRow.cells.length; i++) {
var cellContent1 = targetRow.cells[i].innerHTML;
var cellContent2 = sourceRow.cells[i].innerHTML;
targetRow.cells[i].innerHTML = cellContent2;
sourceRow.cells[i].innerHTML = cellContent1;
}
$find("<%= radgvAddress.MasterTableView.ClientID %>").selectItem(targetRow);
serializeChanges(sourceRow.sectionRowIndex, targetRow.sectionRowIndex);
}
</script>
</telerik:RadScriptBlock>
<telerik:RadGrid ID="radgvAddress" runat="server" GridLines="None"
AllowPaging="True" PageSize="5" AutoGenerateColumns="False" Width="100%"
ShowStatusBar="true" AllowAutomaticDeletes="false" AllowAutomaticInserts="false"
AllowAutomaticUpdates="false" HorizontalAlign="NotSet" Skin="Vista"
OnDetailTableDataBind="radgvAddress_DetailTableDataBind"
OnInsertCommand="radgvAddress_InsertCommand"
OnNeedDataSource="radgvAddress_NeedDataSource"
OnUpdateCommand="radgvAddress_UpdateCommand"
OnDeleteCommand="radgvAddress_DeleteCommand"
OnItemDataBound="radgvAddress_ItemDatabound"
onselectedindexchanged="radgvAddress_SelectedIndexChanged">
<MasterTableView CommandItemDisplay="Top" ClientDataKeyNames="PatientAddressID" DataKeyNames="PatientAddressID" EditMode="PopUp">
<CommandItemTemplate>
<telerik:RadToolBar ID="RadToolBar1" OnButtonClick="RadToolBar1_ButtonClick" runat="server"
Skin="Vista" OnClientButtonClicking="onToolBarClientButtonClicking">
<Items>
<telerik:RadToolBarButton Text="Add" CommandName="InitInsert" Value="1" ImageUrl="~/Images/AddRecord.gif"
Visible='<%# !radgvAddress.MasterTableView.IsItemInserted %>'>
</telerik:RadToolBarButton>
<telerik:RadToolBarButton Text="Edit" Enabled="false" CommandName="EditSelected" Value="2" ImageUrl="~/Images/Edit.gif"
Visible='<%# radgvAddress.EditIndexes.Count == 0 %>'>
</telerik:RadToolBarButton>
<telerik:RadToolBarButton Text="Update" CausesValidation="false" CommandName="UpdateEdited" Value="3" ImageUrl="~/Images/Update.gif"
Visible='<%# radgvAddress.EditIndexes.Count > 0 %>'>
</telerik:RadToolBarButton>
<telerik:RadToolBarButton Text="Cancel" CausesValidation="false" CommandName="CancelAll" Value="4" ImageUrl="~/Images/Cancel.gif"
Visible='<%# radgvAddress.EditIndexes.Count > 0 || radgvAddress.MasterTableView.IsItemInserted %>'>
</telerik:RadToolBarButton>
<telerik:RadToolBarButton Text="Delete" Enabled="false" CausesValidation="false" CommandName="DeleteSelected" Value="5"
ImageUrl="~/Images/Delete.gif">
</telerik:RadToolBarButton>
<telerik:RadToolBarButton Visible="false" Text="ChangeStatus" CommandName="ChangeStatus" Value="6"
ImageUrl="~/Images/Edit.gif">
</telerik:RadToolBarButton>
<telerik:RadToolBarButton Text="Refresh" CausesValidation="false" CommandName="RebindGrid" Value="7" ImageUrl="~/Images/Refresh.gif">
</telerik:RadToolBarButton>
<telerik:RadToolBarButton Text="Save" CausesValidation="false" CommandName="RebindGrid" Value="8" ImageUrl="~/Images/Update.gif">
</telerik:RadToolBarButton>
</Items>
</telerik:RadToolBar>
</CommandItemTemplate>
<Columns>
<telerik:GridTemplateColumn UniqueName="SNo" HeaderText="S No">
<ItemTemplate>
<asp:Label ID="lblSno" runat="server" ></asp:Label>
</ItemTemplate>
<HeaderStyle Width="45px" />
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn HeaderText="AddressID">
<ItemTemplate>
<asp:Label ID="lblAddressID" runat="server" Text='<%#Bind("PatientAddressID") %>'></asp:Label>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn UniqueName="AddressLine" HeaderText="Address Line" DataField="Address1">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="Country" HeaderText="Country" DataField="CountryName">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="StateName" HeaderText="State" DataField="StateName">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="City" HeaderText="City" DataField="CityName">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="ZipCode" HeaderText="Zip Code" DataField="ZipCodeName">
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn HeaderText="Status">
<ItemTemplate>
<asp:Label ID="lblStatus" runat="server" Text='<%#Bind("Active") %>'></asp:Label>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
<EditFormSettings InsertCaption="Add new Address" CaptionFormatString="Edit Address"
CaptionDataField="PatientAddressID" PopUpSettings-Width="520" EditFormType="Template" PopUpSettings-Modal="true">
<FormTemplate>
<table id="Table1" cellspacing="1" cellpadding="1" class="popuptbl" width="520" border="0">
<td class="popregtxt">
Address Line1<span class="mandatory">*</span> :
</td>
<td class="popregcontrol">
<telerik:RadTextBox Width="160px" TabIndex="1" ID="radtxtAddress1" runat="server" Text='<%# Bind( "Address1") %>'>
</telerik:RadTextBox>
<br />
<asp:RequiredFieldValidator ID="rfvAddress1" runat="server" ControlToValidate="radtxtAddress1"
Display="Dynamic" ErrorMessage="Enter Address1" ValidationGroup="Address" CssClass="validationtxt" Font-Bold="false" SetFocusOnError="True">
</asp:RequiredFieldValidator>
</td>
<td class="popregtxt">
Address Line2<span class="mandatory"></span> :
</td>
<td class="popregcontrol">
<telerik:RadTextBox Width="160px" TabIndex="2" ID="radtxtAddress2" runat="server" Text='<%# Bind( "Address2") %>'>
</telerik:RadTextBox>
</td>
</tr>
<tr>
<td class="popregtxt">
Country<span class="mandatory">*</span> :
</td>
<td class="popregcontrol">
<telerik:RadComboBox ID="radcmbCountry" Width="160px" TabIndex="3" DataTextField="CountryName"
DataValueField="CountryID" DataSourceID="DsCountryClassSelect" AllowCustomText="false"
SelectedValue='<%# Bind("CountryID") %>' AutoCompleteSeparator="" CausesValidation="false" MarkFirstMatch="true" runat="server"
AutoPostBack="true" OnSelectedIndexChanged="radcmbCountry_SelectedIndexChanged">
<Items>
<telerik:RadComboBoxItem Text="--Select--" Value="-1" Selected="true" runat="server" />
</Items>
</telerik:RadComboBox>
<br />
<asp:RequiredFieldValidator ValidationGroup="Address" CssClass="validationtxt" ID="rfvCountry"
runat="server" ErrorMessage="Select a Country" InitialValue="--Select--" ControlToValidate="radcmbCountry"></asp:RequiredFieldValidator>
</td>
<td class="popregtxt">
State<span class="mandatory">*</span> :
</td>
<td class="popregcontrol">
<telerik:RadComboBox ID="radcmbState" runat="server" DataTextField="StateName" DataValueField="StateID"
TabIndex="4" AllowCustomText="false" AutoCompleteSeparator="" Width="160px" CausesValidation="false"
MarkFirstMatch="true" AutoPostBack="true" OnSelectedIndexChanged="radcmbState_SelectedIndexChanged">
<Items>
<telerik:RadComboBoxItem Text="--Select--" Value="-1" Selected="true" runat="server" />
</Items>
</telerik:RadComboBox>
<br />
<asp:RequiredFieldValidator ValidationGroup="Address" CssClass="validationtxt" ID="rfvState"
runat="server" ErrorMessage="Select a State" InitialValue="--Select--" ControlToValidate="radcmbState"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="popregtxt">
City<span class="mandatory">*</span> :
</td>
<td class="popregcontrol">
<telerik:RadComboBox ID="radcmbCity" Width="163px" AllowCustomText="false" runat="server"
DataTextField="CityName" DataValueField="CityID" CausesValidation="false" MarkFirstMatch="true" TabIndex="5"
AutoPostBack="true" OnSelectedIndexChanged="radcmbCity_SelectedIndexChanged" >
<Items>
<telerik:RadComboBoxItem Text="--Select--" Value="-1" runat="server" />
</Items>
</telerik:RadComboBox>
<br />
<asp:RequiredFieldValidator ValidationGroup="Address" CssClass="validationtxt" ID="rfvCity"
runat="server" ErrorMessage="Select a City" InitialValue="--Select--" ControlToValidate="radcmbCity"></asp:RequiredFieldValidator>
</td>
<td class="popregtxt">
ZipCode<span class="mandatory">*</span> :
</td>
<td class="popregcontrol">
<telerik:RadComboBox ID="radcmbZipCode" Width="163px" runat="server" DataTextField="ZipCodeName"
DataValueField="ZipCodeID" AllowCustomText="false" TabIndex="6" AutoCompleteSeparator=""
CausesValidation="false" MarkFirstMatch="true" >
<Items>
<telerik:RadComboBoxItem Text="--Select--" Value="-1" Selected="true" runat="server" />
</Items>
</telerik:RadComboBox>
<br />
<asp:RequiredFieldValidator ValidationGroup="Address" CssClass="validationtxt" ID="rfvZipCode"
runat="server" ErrorMessage="Select a ZipCode" InitialValue="--Select--" ControlToValidate="radcmbZipCode"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="popregtxt">
Status :
</td>
<td class="popregcontrol">
<telerik:RadComboBox ID="radcmbStatus" runat="server" Width="163px" TabIndex="7" SelectedValue='<%#Bind("Active") %>'>
<Items>
<telerik:RadComboBoxItem Text="Active" Value="True" />
<telerik:RadComboBoxItem Text="InActive" Value="False" />
</Items>
</telerik:RadComboBox>
</td>
</tr>
<tr>
<td>
</td><td></td></tr>
</table>
<table class="popbuttontbl">
<tr>
<td align="right">
<asp:Button ID="Button1" ValidationGroup="Address" TabIndex="10" Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'
runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'>
</asp:Button>
<asp:Button ID="Button2" TabIndex="11" Text="Cancel" runat="server" CausesValidation="False" CommandName="Cancel">
</asp:Button>
</td>
</tr>
</table>
</FormTemplate>
</EditFormSettings>
</MasterTableView>
<ClientSettings>
<%-- EnablePostBackOnRowClick="true"--%>
<Selecting AllowRowSelect="True" EnableDragToSelectRows="True" />
<ClientEvents OnRowSelected="radgvAddress_RowSelected"></ClientEvents>
</ClientSettings>
</telerik:RadGrid>
<html xmlns="http://www.w3.org/1999/xhtml" ><head id="Head1" runat="server"></head><body> <form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="True"> <Scripts> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" /> </Scripts></asp:ScriptManager> <script type="text/javascript"> window.$ = $telerik.$; $(document).ready(function() { var typeDelay = function(){ var timer = 0; return function(callback, ms){ clearTimeout (timer); timer = setTimeout(callback, ms); } }(); $("#query").keypress(function(){ // your ajax search here, with a 300 ms delay... typeDelay(function(){ alert('controls comes here.!'); }, 300); }); }); </script> <telerik:RadAjaxManager id="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1"> <ajaxsettings> <telerik:AjaxSetting AjaxControlID="RadAjaxPanel1"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1" /> </UpdatedControls> </telerik:AjaxSetting> </ajaxsettings></telerik:RadAjaxManager><telerik:RadAjaxLoadingPanel id="RadAjaxLoadingPanel1" Runat="server" Skin="Default" Width="100%"></telerik:RadAjaxLoadingPanel><telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Width="100%"> <asp:TextBox ID="query" MaxLength="100" runat="server" /> <asp:Button ID="btnSubmit" runat="server" Text="Search" /> </telerik:RadAjaxPanel> </form></body></html> Private Sub RadGridResellers_ItemCommand(ByVal source As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles RadGridResellers.ItemCommand If (e.CommandName = "RowClick") Then Dim GridItem As Telerik.Web.UI.GridDataItem = e.CommandSource Dim ResellerID As Short = GridItem.GetDataKeyValue("id")wState) ... more code ... End If End Sub
void SearchResults_ItemCreated(object sender, GridItemEventArgs e) { if(e.Item is GridDataItem) { GridDataItem item = e.Item as GridDataItem; ImageButton publishedImgButton = item["PublishButton"].Controls[0] as ImageButton; if (publishedImgButton != null) { RadScriptManager.GetCurrent(this.Page).RegisterPostBackControl(publishedImgButton); } } }<telerik:GridButtonColumn ItemStyle-HorizontalAlign="Center" HeaderText="Download PDF file" UniqueName="PublishButton" CommandName="GetPublished" ButtonType="ImageButton" ImageUrl="../../Images/Buttons/Small/document_down.png"> <ItemStyle HorizontalAlign="Center"></ItemStyle></telerik:GridButtonColumn>Hello,
My project use a form decorator in a user control to skin a checkboxlist. Here is the code of the .ascx page :
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="BOSSearch.ascx.cs" Inherits="UmbracoBOSControls.Controls.BOSSearch" %> <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> <%@ Register Src="BOSButton.ascx" TagName="BOSButton" TagPrefix="uc1" %> <telerik:RadFormDecorator runat="server" ID="rfdTopSearch" EnableEmbeddedSkins="false" Skin="TopSearch" /> <div id="TopSearchDetail"> <asp:CheckBoxList runat="server" ID="cbxListModules" RepeatColumns="1" RepeatDirection="Vertical"></asp:CheckBoxList> </div> Here is my css file used with the formdecorator :
/* Decorate <input type="checkbox" /> */.RadForm_TopSearch .rfdCheckboxUnchecked, .RadForm_TopSearch .rfdInputDisabled.rfdCheckboxUnchecked:hover { background: transparent url('FormDecorator/CheckBoxSprites.png') no-repeat 0 0; } .RadForm_TopSearch .rfdCheckboxUnchecked:hover { background: transparent url('FormDecorator/CheckBoxSprites.png') no-repeat 0 -200px; } .RadForm_TopSearch .rfdCheckboxChecked, .RadForm_TopSearch .rfdInputDisabled.rfdCheckboxChecked:hover { background: transparent url('FormDecorator/CheckBoxSprites.png') no-repeat 0 -420px; } .RadForm_TopSearch .rfdCheckboxChecked:hover { background: transparent url('FormDecorator/CheckBoxSprites.png') no-repeat 0 -640px; } .RadForm_TopSearch label { color:#FFFFFF; font-family:Arial; font-size:11px; text-indent:6px; }
The display of my checkbox list is OK in IE8 and Firefox 3.6. In Safari and Chrome I just see the label of my list of checkbox. Every images are not displayed... Could you help me to find what's wrong in my code ?