List box with drag drop loosing attribute values

[Devendra]

Hi

I have three rad listboxes with drag and drop feature. In each list box have Items with image associated to click event call a pupup window page. I have also added some attributes to each item. Eevrything works fine, only problem i am facing is when i drag and drop any item from one list box to another the dragged item is loosing its attributes and associated click event with it.

I tried comibination of several properties on listboxes control but no luck.

<

 

telerik:RadListBox ID="PageHierarchies" runat="server" Width="200px" Height="200px"

 

 

        TransferToID="ColumnHierarchies" AllowReorder="true" AutoPostBackOnReorder="false"

 

 

        AllowTransfer="true" AutoPostBackOnTransfer="false" EnableDragAndDrop="true"

 

 

        AutoPostBack="false" OnClientDragging="DraggingItem"  OnClientTransferred="ItemTransferrd" AllowAutomaticUpdates="true" EnableViewState="true" PersistClientChanges=true >

 

 

    <ButtonSettings ShowReorder="false" ShowTransfer="false" ShowTransferAll="false" />

 

 

</telerik:RadListBox>

Javascipt code to add attributes (higlighted in italic bold)

 

<

 

script type="text/javascript">

 

 

 

 

 

//<![CDATA[

 

 

 

 

 

 

var columnHirachcy;

 

 

var rowHirachcy;

 

 

var pageHirachcy;

 

 

var dimname;

 

 

var dimID;

 

 

var infosetname;

 

 

var strParms;

 

 

 

function

 

pageLoad(sender)

 

{

 

 

 

var listboxItem;

 

 

var membersCount;

 

 

var items;

 

 

var objJson;

 

 

columnHirachcy = $find(

"<%= ColumnHierarchies.ClientID %>");

 

rowHirachcy = $find(

"<%= RowHierarchies.ClientID %>");

 

pageHirachcy = $find(

"<%= PageHierarchies.ClientID %>");

 

 

objJson=window.top.GetIFrame().document[

'report1_json'];

 

 

//Column Hiraarchy

 

 

 

 

infosetname=objJson[0].name;

 

 

var infosetObj = window.top.getInfoSetByName(infosetname);

 

 

 

for(axisIndex=0;axisIndex<=2;axisIndex++)

 

{

 

switch(axisIndex)

 

{

 

case 0:

 

items=columnHirachcy;

 

break;

 

 

case 1:

 

items=rowHirachcy;

 

break;

 

 

case 2:

 

items=pageHirachcy;

 

break;

 

}

 

var dimCollection = infosetObj['axis' + axisIndex];

 

 

for(i=0;i<dimCollection.length;i++)

 

{

dimID = dimCollection[i].uname;

dimName = dimCollection[i].name;

 

membersCount =window.top.getMembersCount(infosetname,dimName,axisIndex,i);

 

var listboxItem =new Telerik.Web.UI.RadListBoxItem();

 

listboxItem.set_text(dimName +

"[" + membersCount + "]");

 

listboxItem.set_value(dimID);

listboxItem.set_selected(

false);

 

listboxItem.set_imageUrl(

"../Images/Filter.gif");

 

items.trackChanges();

items.get_items().add(listboxItem);

items.getItem(i).get_imageElement().setAttribute(

"alt",dimName);

 

items.getItem(i).get_imageElement().setAttribute(

"infosetName",infosetname);

 

items.getItem(i).get_imageElement().setAttribute(

"dimName",dimName);

 

items.getItem(i).get_imageElement().setAttribute(

"dimID",dimID);

 

items.getItem(i).get_imageElement().setAttribute(

"PivotingMode","Full");

 

items.getItem(i).get_imageElement().setAttribute(

"Hirarchy",listboxItem);

 

 

 

 

 

 

 

 

items.getItem(i).get_imageElement().onclick=

function(){

 

 

window.top.openSelectorForPivoting(

this.getAttribute('infosetName'),this.getAttribute('dimName'),this.getAttribute('dimID'),this.getAttribute('PivotingMode'),this.getAttribute('Hirarchy'));

 

 

};

 

 

 

 

 

items.commitChanges();

}

}

 

 

return false;

 

 

}

[Genady Sergeev]

Hello Devendra,

Items losing their attributes when being drag&dropped seems to e a bug in RadListBox. I've logged it into our bug-tracking system and we will fix it for the next week's latest internal build. More information on how to obtain the latest internal build can be found here.

As for the click event, how do you attach it? By default, all RadListBox events are for the RadListBox, not for the items. By design, when a given item is transferred to another RadListBox they will receive the events attached on the latter RadListBox. Not on the source.

Greetings,
Genady Sergeev
the Telerik team

[Jules]

I am having a similar problem with version 2012.1.215.40. I have two RadListBoxes, one is databound. Attributes are added in the ItemDataBound event. Users drag items from this box into the second box. I am trying to validate the items in the second box in client side script based on the values of particular attributes.

var listbox = $find("<%= firstListBox.ClientID %>");
listbox.get_items().forEach(function(item) {
  var liItem = item.get_element();
  var attribute = liItem.getAttribute("Commutable");
  alert(attribute);
});

It just returns null.

Any suggestions?

[Bozhidar]

Hello Julia,

I've answered your support ticket, but I'll explain the reason behind this issue here as well, so that other people can see the solution.

When working with custom attributes, you have to use the attributes stored inside the client object of the ListBoxItem, instead of the html attributes. In other words, here's how the correct code should look like:

listbox.get_items().forEach(function(item) {
    var attribute = item.get_attributes().getAttribute("Commutable");
    alert(attribute);
});

 
Kind regards,
Bozhidar
the Telerik team

[Garry]

Bozhidar
This is not working for me with latest Telerik RadListBox.
I set the attributes on the server:

For Each formTab As CFormDesignerTab In fd.FormTabList(sPageName)
            Dim item As New Telerik.Web.UI.RadListBoxItem(formTab.Caption)
            item.ImageUrl = formTab.ImageURL
            item.Attributes.Add("ID", formTab.ID)
            lst.Items.Add(item)
Next

And in my Javascript, I access the attributes as follows:

for (var i = 0; i < iCount; i++)
{
     var attributes = item.get_attributes();
     var sTabID = attributes.getAttribute["ID"];
     var attribute = item.get_attributes().getAttribute("ID");
}

But the attributes are always 'undefined'.

[Bozhidar]

Hello Garry,

We found out that the problem actually did exist, but was only reproducible when the TransferMode of the listbox was set to Copy. The issue has now been resolved and you can get the fixed version in the upcoming Service Pack, which should come out in two weeks.

Regards,
Bozhidar
the Telerik team