Questions on UI for ASP.NET AJAX Forum

6 answers

205 views

Hi,

I'm trying to do drag and drop between 2 treeview using example at http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/draganddropnodes/defaultvb.aspx

However, I do not want the item to be removed from the first tree view.

1. I removed the server side event and both my treeviews are as following:

<telerik:RadTreeView ID="radTV_pages" Font-Size="Large" runat="server" EnableDragAndDrop="True"

OnClientNodeDropping="onNodeDropping" OnClientNodeDragging="onNodeDragging" MultipleSelect="true"

EnableDragAndDropBetweenNodes="true">

</telerik:RadTreeView>

<telerik:RadTreeView ID="radTV_Menu" Font-Size="Large" runat="server" EnableDragAndDrop="True"

OnClientNodeDropping="onNodeDropping" OnClientNodeDragging="onNodeDragging" MultipleSelect="true"

EnableDragAndDropBetweenNodes="true">

</telerik:RadTreeView>

2. As for the client script, I modified as following (remove grid related code and comment "sourceNode.get_parent().get_nodes().remove(sourceNode);"):

<script>

(function () {

var demo = window.demo = window.demo || {};

//demo.checkbox = document.getElementById('<%'= ChbClientSide.ClientID %>');

//function isMouseOverGrid(target) {

// parentNode = target;

// while (parentNode !== null) {

// if (parentNode.id === demo.grid.get_id()) {

// return parentNode;

// }

// parentNode = parentNode.parentNode;

// }

// return null;

//}

function dropOnHtmlElement(args) {

if (droppedOnInput(args))

return;

if (droppedOnGrid(args))

return;

}

function droppedOnGrid(args) {

var target = args.get_htmlElement();

while (target) {

if (target.id === demo.grid.get_id()) {

args.set_htmlElement(target);

return;

}

target = target.parentNode;

}

args.set_cancel(true);

}

function droppedOnInput(args) {

var target = args.get_htmlElement();

if (target.tagName === "INPUT") {

target.style.cursor = "default";

target.value = args.get_sourceNode().get_text();

args.set_cancel(true);

return true;

}

function dropOnTree(args) {

var text = "";

if (args.get_sourceNodes().length) {

var i;

for (i = 0; i < args.get_sourceNodes().length; i++) {

var node = args.get_sourceNodes()[i];

text = text + ', ' + node.get_text();

}

function clientSideEdit(sender, args) {

var destinationNode = args.get_destNode();

if (destinationNode) {

firstTreeView = demo.firstTreeView;

secondTreeView = demo.secondTreeView;

firstTreeView.trackChanges();

secondTreeView.trackChanges();

var sourceNodes = args.get_sourceNodes();

var dropPosition = args.get_dropPosition();

//Needed to preserve the order of the dragged items

if (dropPosition == "below") {

for (var i = sourceNodes.length - 1; i >= 0; i--) {

var sourceNode = sourceNodes[i];

//huisheng - do not remove source

//sourceNode.get_parent().get_nodes().remove(sourceNode);

insertAfter(destinationNode, sourceNode);

}

else {

for (var j = 0; j < sourceNodes.length; j++) {

sourceNode = sourceNodes[j];

//huisheng - do not remove source

//sourceNode.get_parent().get_nodes().remove(sourceNode);

if (dropPosition == "over")

destinationNode.get_nodes().add(sourceNode);

if (dropPosition == "above")

insertBefore(destinationNode, sourceNode);

}

destinationNode.set_expanded(true);

firstTreeView.commitChanges();

secondTreeView.commitChanges();

}

function insertBefore(destinationNode, sourceNode) {

var destinationParent = destinationNode.get_parent();

var index = destinationParent.get_nodes().indexOf(destinationNode);

destinationParent.get_nodes().insert(index, sourceNode);

}

function insertAfter(destinationNode, sourceNode) {

var destinationParent = destinationNode.get_parent();

var index = destinationParent.get_nodes().indexOf(destinationNode);

destinationParent.get_nodes().insert(index + 1, sourceNode);

}

window.onNodeDragging = function (sender, args) {

var target = args.get_htmlElement();

if (!target) return;

if (target.tagName == "INPUT") {

target.style.cursor = "hand";

}

//var grid = isMouseOverGrid(target)

//if (grid) {

// grid.style.cursor = "hand";

//}

};

window.onNodeDropping = function (sender, args) {

var dest = args.get_destNode();

if (dest) {

//var clientSide = demo.checkbox.checked;

var clientSide = true;

if (clientSide) {

clientSideEdit(sender, args);

args.set_cancel(true);

return;

}

dropOnTree(args);

}

else {

dropOnHtmlElement(args);

}

};

}());

/* <![CDATA[ */

Sys.Application.add_load(function () {

// demo.grid = $find("<%'= RadGrid1.ClientID %>");

demo.firstTreeView = $find('<%=radTV_pages.ClientID%>');

demo.secondTreeView = $find('<%= radTV_Menu.ClientID%>');

//demo.checkbox = document.getElementById('<%'= ChbClientSide.ClientID %>');

});

/* ]]> */

</script>

3. However, the source node is still removed. How can I make the source target to remain?

Thanks.

TreeView

answered on 10 Nov 2015

1 answer

78 views

Header template fails with embedded code

Hi,

If I set a header with static text it shows fine but as soon as I use embedded code (eg. below) then no header is displayed.

<HeaderTemplate>

<div class="rlvHeader"><%= funcs.Translate("Staff") %></div>

</HeaderTemplate>

ListBox

answered on 10 Nov 2015

3 answers

231 views

DataBinding issue in RadComboBox through WebService

When we binding the data through web service in RadComboBox, web service method is not calling and data is not binding.

These are my following Code :

.aspx :

<telerik:RadComboBox runat="server"
ID="RadComboBox1"
Skin="Default"
Height="200px"
Width="200px"
DropDownWidth="200px"
ShowMoreResultsBox="true"
EnableVirtualScrolling="true"
ChangeTextOnKeyBoardNavigation="false"
OnClientItemsRequesting="OnClientItemsRequesting"
OnClientItemsRequested="OnClientItemsRequested"
OnClientDropDownOpening="OnClientDropDownOpening"
EnableLoadOnDemand="true">
<HeaderTemplate>
<ul style="list-style: none">
<li>
<span class="column" style="width: 50px;">ClientID</span>
<span class="column" style="width: 50px;">Company</span>
<span class="column" style="width: 50px;">City</span>

</li>
</ul>
</HeaderTemplate>
<WebServiceSettings Method="GetClientNames" Path="BindComboboxService.asmx" />
</telerik:RadComboBox>

.asmx :

[WebMethod]
public RadComboBoxData GetClientNames(RadComboBoxContext context)
{

DataTable data = objProjectBL.PopulateClientCombo();
List<RadComboBoxItemData> result = new List<RadComboBoxItemData>(context.NumberOfItems);
RadComboBoxData comboData = new RadComboBoxData();
try
{

int itemsPerRequest = 10;
int itemOffset = context.NumberOfItems;
int endOffset = itemOffset + itemsPerRequest;
if (endOffset > data.Rows.Count)
{
endOffset = data.Rows.Count;
}
if (endOffset == data.Rows.Count)
{
comboData.EndOfItems = true;
}
else
{
comboData.EndOfItems = false;
}
result = new List<RadComboBoxItemData>(endOffset - itemOffset);
for (int i = itemOffset; i < endOffset; i++)
{
RadComboBoxItemData itemData = new RadComboBoxItemData();
itemData.Text = data.Rows[i]["ClientID"].ToString();
itemData.Value = data.Rows[i]["ClientID"].ToString();
itemData.Attributes["Company"] = data.Rows[i]["Company"].ToString();
itemData.Attributes["City"] = data.Rows[i]["City"].ToString();
result.Add(itemData);
}

if (data.Rows.Count > 0)
{
comboData.Message = String.Format("Items <b>1</b>-<b>{0}</b> out of <b>{1}</b>", endOffset.ToString(), data.Rows.Count.ToString());
}
else
{
comboData.Message = "No matches";
}
}
catch (Exception e)
{
comboData.Message = e.Message;
}

comboData.Items = result.ToArray();
return comboData;
}

ComboBox

answered on 10 Nov 2015

1 answer

87 views

Export To Docx

Hi,

Been at this for ages and read as much as I can. Also tried the code library sample.

Text only, no problem, it works - but if there is an image in the editor I get 'Value cannot be null. Parameter name: data'

I've tried the absolute image path, + adding the alt tag but still no joy I'm afraid..

Please can you help.

Cheers,

Jon

Editor

answered on 10 Nov 2015

2 answers

57 views

Issue in Radeditor IE

I dont whats name for this issue, please help me ..

what must i do to change property of image in radeditor into behind the radeditor when i scroll the content into top/down in Internet Explorer

Thanks before ..

Editor

answered on 10 Nov 2015

2 answers

66 views

'<%# Bind("MyProperty")>' in code-server

Hi telerik team.

My purpose is create a column that have a combo as a editor, and when user choose the item in combo box, it send both ID and Code back to the server to bind to datacontext of the row.

To do dat, I have a Template column in Markup code:

<telerik:GridTemplateColumn>

<ItemTemplate>

<asp:Label Text='<%# Bind('Code')%> runat="server" ID=Label1></asp:Label>

</ItemTemplate>

<EditItemTemplate>

<telerik:RadComboBox runat="server"

ID="col_Editor"

SelectedValue='<%# Bind("ID")%>'

Text='<%# Bind("Code")%>'

DataTextField="Code"

DataValueField="ID"></telerik:RadComboBox>

</EditItemTemplate>

</telerik:GridTemplateColumn>

It work fine. But now, i want to wrap this into 1 class call "MyComboboxColumn" and the problem is i can not find the way to make a '<%# Bind("")>' tag in the behind code.

My class look like:

Public Class MyComboboxColumn

Inherits GridTemplateColumn

Public Property DataTextField As String

Public Property DataValueField As String

Public Overrides Sub PrepareCell(cell As TableCell, item As GridItem)

If TypeOf item Is GridDataItem AndAlso TypeOf item Is MyEntity Then

Dim ent = CType(item.DataItem, MyEntity)

Dim displayText = ent.GetValueByPropertyName(DataTextField)

If Not item.IsInEditMode Then

cell.Text = displayText

Else

Dim combo As RadComboBox = cell.FindControl(Me.UniqueName & "_Editor")

combo.Text = displayText

combo.SelectedValue = ent.GetValueByPropertName(DataValueField)

End If

MyBase.PrepareCell(cell, item)

End If

End Sub

Protected Overrides Function CreateDefaultColumnEditor() As IGridColumnEditor

Return New MyComboboxColumn_Editor(Me)

End Function

End Class

Public Class MyComboboxColumn_Editor

Inherits GridTemplateColumnEditor

Public Property Owner As MyComboboxColumn

Public Sub New(_owner As MyComboboxColumn)

Owner = _owner

End Sub

Protected Overrides Sub AddControlsToContainer()

Dim combo As New RadComboBox

With combo

.ID = Owner.UniqueName & "_Editor"

.DataSource = MyDataSource()

.DataValueField = Owner.DataValueField

.DataTextField = Owner.DataTextField

.DataBind()

End With

HtmlContainerControl.Controls.Add(combo)

End Sub

End Class

I can send the value and text to the editor. But i do not know how to send back from editor to the container.

Please help me,

Thank you.

Grid

answered on 10 Nov 2015

2 answers

186 views

ToolTip hide on event not working as expected

http://demos.telerik.com/aspnet-ajax/tooltip/examples/hideevent/defaultcs.aspx

"Hide on event :Default - hides when mouse is out of the target element" is not working as expected

if you leave the mouse pointer on top of the target and don't move your mouse at all, the tooltip will close after few seconds. Expected behavior would be that the tooltip stays visible until you actually move mouse out of the target element. I tested this with IE, Chrome and Firefox with similar results.

ToolTip

answered on 09 Nov 2015

1 answer

123 views

Issue with Drawing Tools of Image Editor

We are using Telerik AJAX UI control version "2015.3.930.45" in our project. We are using Telerik Image editor in our application and we are facing some issue with the Image Editor Drawing Tool. And these problems are reproducible on the demo URL http://demos.telerik.com/aspnet-ajax/imageeditor/examples/overview/defaultcs.aspx as well.

Problem Number 1: When we draw the Rectangle/Circle etc. after Zooming the image from 100% to 200% then the overlay points which are used to move the object shown as displaced. FYI, the functionality is working fine if user draw without zoom.

Here is the screen shot for your reference attached named: ImageEditorIssue.PNG

Problem Number 2: We are unable to understand the significance of the "Transform" text which is displayed along with the “Apply” button. If this text don't have any significance then let us know how to remove it from the UI.

Please help us out to resolve this problem.

Regards,

Abhishek Goel

ImageEditor

answered on 09 Nov 2015

1 answer

83 views

Aspx Page having radajaxpanel resize issue In RadWindow

Hi,

I have an aspx page which I am showing in a radwindow using navigate url. Now, the issue is the window is not auto sizing correctly, still there are scroll bars, both horizntal and vertical.

1. The solution for this is just wrap the aspx page in a div tag and the autosize will work perfectly fine. like this

<form>

<div>

whole page content

</div>

</form>

But after doing this, the page on postback losts all the controls view and the window is left with only the title. Nothing on form after postback and window resizes to just the title bar.

Page is working perfectly fine if I dont wrap it in the <div> tags and autosize does not work.

Any suggestions?

Thanks in advance,

Jawwad

Window

answered on 09 Nov 2015

3 answers

100 views

Issue with RadToolTipManager's OnAjaxUpdate

I am having an issue where RadToolTipManager does not come up in Chrome on IOS. Nothing happens when I click on a button that triggers the action for displaying the tool tip.

I have the following in my markup page:

<telerik:RadToolTipManager runat="server" ID="RadToolTipManager1" ShowEvent="OnClick"
RelativeTo="BrowserWindow" Position="BottomLeft" Width="600px" Height="300px"
Animation="Resize" HideEvent="LeaveTargetAndToolTip" Skin="Default" OnAjaxUpdate="OnAjaxUpdate"
RenderInPageRoot="true" ManualClose="true" Modal="false">
</telerik:RadToolTipManager>

In code behind, I have this:

private void UpdateToolTip(string elementID, UpdatePanel panel)
{
try
{
Control ctrl = Page.LoadControl("../UserControls/PriceBreak.ascx");
panel.ContentTemplateContainer.Controls.Add(ctrl);

...

....

}

Thank you,

Alex

ToolTip

answered on 09 Nov 2015