我有ASP Repeater，其中每个项目由ItemTemplate定义，以包含几个标签和RadListBox。 RadListBox中的项目由第二个ItemTemplate定义。
我需要能够在任何2个RadListBox之间拖放项目，并使服务器端的DataSources相应地更新。
因为我需要允许在Repeater中的任何2个RadListBox之间拖动，所以我不能像大多数示例那样设置TransferToID。
我已将这2页用作实施指南。
网络表单页面摘录（aspx）
<telerik:RadScriptBlock runat="server">
<script type="text/javascript">
function lbTeamDragStart(sender, args) {
var objType = args.get_sourceItem().get_text();
console.log('Drag Start -> ' + objType);
}
function lbTeamDragging(sender, args) {
var objType = args.get_sourceItem().get_text();
console.log('Dragging -> ' + objType);
}
function lbTeamDropped(sender, args) {
var objType = args.get_sourceItem().get_text();
console.log('Dropped -> ' + objType);
transferManager.performTransfer(sender, args);
}
(function ($) {
transferManager = function () { }
transferManager.performTransfer = function (sender, args) {
var destinationItemIndex = this._getDestinationIndex(args);
var destinationListBox = this._getDestinationListBox(args);
if (destinationListBox == null)
return;
var reorderIndex = args.get_dropPosition() == 0 ?
destinationItemIndex : destinationItemIndex + 1;
var items = args.get_sourceItems();
sender.trackChanges();
destinationListBox.trackChanges();
this._transfer(items, destinationListBox, reorderIndex);
sender.commitChanges();
destinationListBox.commitChanges();
}
transferManager._transfer = function (items, destination, reorderIndex) {
$.each(items, function (index, item) {
item.unselect();
destination.trackChanges();
destination.get_items().insert(reorderIndex, item);
destination.commitChanges();
//var ajaxManager = $find("<%= this.RadAjaxManagerClientId %>");
//ajaxManager.ajaxRequestWithTarget('<%= rptrTeams.UniqueID %>', '');
console.log('transferManager._transfer -> ' + item.get_text());
});
}
transferManager._getDestinationIndex = function (args) {
var destinationItem = args.get_destinationItem();
if (destinationItem)
return destinationItem.get_index();
return 0;
}
transferManager._getDestinationListBox = function (args) {
var destinationItem = args.get_destinationItem();
if (destinationItem) {
var id = destinationItem.get_listBox().get_id();
return $find(id);
}
var parent = $(args.get_htmlElement()).parent();
if (parent.is(".RadListBox")) {
var id = parent[0].id;
return $find(id);
}
else if (parent.is(".rlbGroup")) {
var id = parent[0].parentNode.id;
return $find(id);
}
return null;
}
})($telerik.$);
</script>
</telerik:RadScriptBlock>
<asp:Repeater ID="rptrTeams" runat="server" OnItemDataBound="rptrTeams_ItemDataBound">
<ItemTemplate>
<div class="well form-horizontal span3" >
<div class="row TeamDesignerTeamBox" >
<div class="TeamDesignerTeamHeaderBox">
<div class="TeamDesignerTeamName"><%# DataBinder.Eval(Container.DataItem, "Name") %></div>
<div class="TeamDesignerMemberCount">Members: <%# DataBinder.Eval(Container.DataItem, "TeamDesignerProjectTeamMembers.Count") %></div>
</div>
<telerik:RadListBox runat="server" OnItemDataBound="rlbTeam_ItemDataBound"
AllowTransfer="true" AllowReorder="true" EnableDragAndDrop="true"
AutoPostBackOnTransfer="true" OnTransferred="rlbTeam_Transferred"
AutoPostBackOnReorder="false"
ButtonSettings-ShowTransferAll="false" ButtonSettings-ShowTransfer="false" ButtonSettings-ShowReorder =" false"
OnClientDragStart="lbTeamDragStart" OnClientDragging="lbTeamDragging" OnClientDropped="lbTeamDropped"
CssClass="TeamDesignerMemberBox" BorderWidth="0px" BorderStyle="None">
<ItemTemplate>
<div>
<div class="TeamDesignerMemberName" style="font-size: 12px !important;"><%# DataBinder.Eval(Container.DataItem, "DisplayName") %></div>
<div class="TeamDesignerMemberDetails" style="font-size: 12px !important;"><%# DataBinder.Eval(Container.DataItem, "MemberLogin.Student.Gender") %>
<% if (SortByBirthCountry) { %><img class="TeamDesignerFlagIcon" src='/eZone/Images/Flags/<%# DataBinder.Eval(Container.DataItem, "BirthCountryImageFileName") %>' alt="<%#DataBinder.Eval(Container.DataItem, "BirthCountry") %>"> <% } %>
<% if (SortByCitizenship) { %> <img class="TeamDesignerFlagIcon" src='/eZone/Images/Flags/<%# DataBinder.Eval(Container.DataItem, "CitzenshipImageFileName") %>' alt="<%#DataBinder.Eval(Container.DataItem, "Citzenship") %>"> <% } %>
</div><br />
</div>
</ItemTemplate>
</telerik:RadListBox>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
CodeBehind（aspx.cs）
TeamDesignerProject _TeamDesignerProject = null;
emTeamDesigner _EMTeamDesigner = null;
public string RadAjaxManagerClientId
{
get
{
var ram = this.Master.Master.FindControl("ram");
return (ram != null) ? ram.ClientID : string.Empty;
}
}
public bool SortByCitizenship
{
get
{
return true;
}
}
public bool SortByBirthCountry
{
get
{
return true;
}
}
protected void Page_Load(object sender, EventArgs e)
{
if (_TeamDesignerProject == null)
{
_TeamDesignerProject = SessionWrapper.TeamDesigner.TeamDesignerProject;
}
if (_EMTeamDesigner == null)
{
_EMTeamDesigner = SessionWrapper.TeamDesigner.EMTeamDesigner;
}
if (Page.IsPostBack == false)
{
DisplayResults();
}
}
protected void btnRevert_Click(object sender, EventArgs e)
{
//Revert all the team members to what they were prior to any user drag/drop changes
_TeamDesignerProject = SessionWrapper.TeamDesigner.TeamDesignerProject;
rptrTeams.DataSource = _TeamDesignerProject.TeamDesignerProjectTeams;
rptrTeams.DataBind();
}
protected void rptrTeams_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
//Dive into the RepeaterItems and ensure the DataSources for each Items RadListBox is set to the members for that team
rttmMembers.TargetControls.Clear();
foreach (var repeaterItem in rptrTeams.Controls)
{
if (repeaterItem is RepeaterItem)
{
foreach (var ctrl in ((RepeaterItem)repeaterItem).Controls)
{
if (ctrl is RadListBox)
{
if (((RepeaterItem)repeaterItem).DataItem is TeamDesignerProjectTeam)
{
var team = (TeamDesignerProjectTeam)((RepeaterItem)repeaterItem).DataItem;
var listTeamMembers = team.TeamDesignerProjectTeamMembers;
if (listTeamMembers != null)
{
//((RadListBox)ctrl).ID = string.Format("rlbTeam_{0}", team.Id.ToString());
((RadListBox)ctrl).DataSource = listTeamMembers;
((RadListBox)ctrl).DataValueField = "MemberId";
((RadListBox)ctrl).DataTextField = "DisplayName";
((RadListBox)ctrl).DataBind();
}
}
break;
}
}
}
}
}
private void DisplayResults()
{
if (_TeamDesignerProject != null)
{
lblProjectName.Text = _TeamDesignerProject.Name;
lblProjectDescription.Text = _TeamDesignerProject.Description;
rptrTeams.DataSource = _TeamDesignerProject.TeamDesignerProjectTeams;
rptrTeams.DataBind();
}
}
protected void rlbTeam_Transferred(object sender, RadListBoxTransferredEventArgs e)
{
var temp = "transferring?";
foreach (var item in e.Items)
{
//Databind the item in order to evaluate the databinding expressions from the template
item.DataBind();
}
}
我现在的体验
RadListBox中将其删除，并且根本不会添加到目标RadListBox。RadListBox.OnTransfer设置处理程序永远不会触发，无论其他设置如何问题
在UI渲染完成后，如何正确保持两个RadListBox的DataSource同步？