Questions on UI for ASP.NET AJAX Forum

5 answers

1.0K+ views

Drag and drop column in client side binding Radgrid

Hi,
I am binding radgrid in client side. i am assigned the Edit command column, Drag and Drop column in that grid. On Databinding the Edit Command column is visit but Drag and drop control is not visible. I need a support to over come this issue.

Thanks

Grid

answered on 23 Sep 2013

1 answer

137 views

How to resize Image Manager?

Hi,

We have upgraded to telerik RadEditor and client is unhappy about inability to resize middle panel in Image Manager so that they can see more folder/file icons. There is a handle that allows to drag a separator between folder tree and middle panel but they want to be able to drag everything, including control borders to increase control size (see screenshot). Is there a config setting or something that allows to do this?

Thanks!

Editor

answered on 23 Sep 2013

1 answer

127 views

Grid GridDateTimeColumn filter

We have a grid in the RadCombo and we are using a couple GridDateTimeColumns with filtering enabled. When the user clicks on the Date control to pull up the pop-up its behind the Grid and they can not select a date to filter on. Is there a z-order that needs set here?

Thanks!

<telerik:RadComboBox runat="server" ID="RadComboSubEvents" CheckBoxes="true" Width="98%">

<ItemTemplate>

<telerik:RadGrid runat="server" ID="RadGridSubEvents" OnNeedDataSource="RadGridSubEvents_NeedDataSource" AllowMultiRowSelection="true">

<MasterTableView NoMasterRecordsText="There are not any events created" AutoGenerateColumns="False" DataKeyNames="EventSubId, Name, StartDate, EndDate"

Width="100%" ClientDataKeyNames="EventSubId, Name, StartDate, EndDate" TableLayout="Fixed" AllowFilteringByColumn="true" >

<Columns>

<telerik:GridClientSelectColumn UniqueName="SelectColumn">

<HeaderStyle Width="25px" />

<ItemStyle Width="25px" />

</telerik:GridClientSelectColumn>

<telerik:GridBoundColumn HeaderText="EventSubId" DataField="EventSubId" UniqueName="EventSubId" Display="false" />

<telerik:GridBoundColumn HeaderText="Name" DataField="Name" UniqueName="Name" FilterControlWidth="250px">

<HeaderStyle Width="300px" />

<ItemStyle Width="300px" Wrap="true"

/>

</telerik:GridBoundColumn>

<telerik:GridDateTimeColumn HeaderText="Start Date" DataField="StartDate" UniqueName="StartDate" DataFormatString="{0:M/d/yyyy}" DataType="System.DateTime">

<HeaderStyle Width="75px" HorizontalAlign="Right" />

<ItemStyle Width="75px" Wrap="false" HorizontalAlign="Right" />

</telerik:GridDateTimeColumn>

<telerik:GridDateTimeColumn HeaderText="End Date" DataField="EndDate" UniqueName="EndDate" DataFormatString="{0:M/d/yyyy}" DataType="System.DateTime" >

<HeaderStyle Width="75px" HorizontalAlign="Right" />

<ItemStyle Width="75px" Wrap="false" HorizontalAlign="Right" />

</telerik:GridDateTimeColumn>

</Columns>

</MasterTableView>

<ClientSettings

<Selecting AllowRowSelect="true" UseClientSelectColumnOnly="true" />

</ClientSettings>

</telerik:RadGrid>

</ItemTemplate>

<Items>

<telerik:RadComboBoxItem runat="server" Text=" "></telerik:RadComboBoxItem>

</Items>

</telerik:RadComboBox>

ComboBox

answered on 23 Sep 2013

6 answers

238 views

RadHtmlChart in a RadWindow - can't load data

I've got a RadWindow contentTemplate with a RadGrid and RadHtmlChart in it and I'm having trouble loading the chart data. I need to grab some values from the page before the window loads. If I rebind the grid via ajax I can load the chart via a button on the window, but it won't work using the OnClientShow event of the RadWindow. If I don't load the RadGrid via ajax I can't refresh the chart at all with values from the page. Reading the documentation on the RadHtmlChart method loadData, I'm not sure what "Invokes a light callback to the server to obtain the RadHtmlChart data." means. Is this not a real ajax call.

Here's my code. All help is appreciated.

Thanks.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TestChart.ascx.cs"

Inherits="WebTechnologiesLLC.Calculators.Auto.TestChart" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<telerik:RadAjaxManager runat="server" ID="CUCalcsAjaxManager"

OnAjaxRequest="CUCalcsAjaxManager_AjaxRequest">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="CUCalcsAjaxManager">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="AmortizationRadGrid" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="CUCalcsMgrAjaxLoadingPanel" runat="server" Skin="Windows7"/>

<telerik:RadCodeBlock ID="RadCodeBlock" runat="server">

<script type="text/javascript">

function LoadAmortWindow() {

BindGrid();

RefreshChart();

}

function BindGrid() {

$find("<%= CUCalcsAjaxManager.ClientID %>").ajaxRequest("RebindAmortGrid");

}

function RefreshChart() {

var chart = $find("<%=AutoAffordRadChart.ClientID %>");

chart.loadData();

}

</script>

</telerik:RadCodeBlock>

<div id="mainBody" class="calcMainBodyDiv" style="float:left; width:675px">

<div id="amortizeDiv" class="calcOutputRow">

<button id="AmortizationButton" type="button">Amortization Schedule</button><br />

</div>

<div class="calcOutputRow">

<asp:TextBox ID="LoanAmtTB" runat="server" Text="10" />

</div>

<telerik:RadWindow ID="AmortizationRadWindow" runat="server" Title="Amortization Schedule"

Behaviors="Close, Move, Resize" OpenerElementID="AmortizationButton" Modal="true"

OnClientShow="LoadAmortWindow" OnClientBeforeShow="RefreshChart"

Width="600px" Height="600px" Skin="Windows7">

<ContentTemplate>

<div id="amortWindowDiv" runat="server" style="padding: 10px">

<div id="amortDiv">

<h1>Amortization Schedule</h1>

<div id="GridDiv">

<telerik:RadGrid ID="AmortizationRadGrid" runat="server"

ClientIDMode="AutoID" Skin="LegalTrak" EnableEmbeddedSkins="false"

AllowPaging="false" CssClass="calcAmortGrid"

OnNeedDataSource="AmortizationRadGrid_NeedDataSource"

AutoGenerateColumns="false" AlternatingItemStyle-BackColor="#E7EEF3" >

<ClientSettings>

<Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="350px" />

</ClientSettings

<MasterTableView CommandItemDisplay="None"

HeaderStyle-HorizontalAlign="Center"

ItemStyle-HorizontalAlign="Right"

AlternatingItemStyle-HorizontalAlign="Right"

FooterStyle-HorizontalAlign="Right"

FooterStyle-Font-Bold="true">

<NoRecordsTemplate>

<p style="text-align:center; font-weight:bold;">Enter your information and click "Calculate" to generate amortization schedule.</p>

</NoRecordsTemplate>

<Columns>

<telerik:GridBoundColumn HeaderText="Mth"

DataField="Month" />

<telerik:GridBoundColumn HeaderText="Payment"

DataField="Payment" DataFormatString="{0:C2}" />

<telerik:GridBoundColumn HeaderText="Balance"

DataField="Balance" DataFormatString="{0:C2}" />

<telerik:GridBoundColumn HeaderText="Interest"

DataField="MonthlyInterest" DataFormatString="{0:C2}" />

<telerik:GridBoundColumn HeaderText="Cummulative Interest"

DataField="CummulativeInterest" DataFormatString="{0:C2}" />

<telerik:GridBoundColumn HeaderText="Principal"

DataField="MonthlyPrincipal " DataFormatString="{0:C2}" />

<telerik:GridBoundColumn HeaderText="Cummulative Principal"

DataField="CummulativePrincipal" DataFormatString="{0:C2}" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

</div>

<div id="chartDiv">

<div id="amortizeDiv2" class="calcOutputRow">

<button id="ChartButton2" type="button" onclick="RefreshChart()">Chart Refresh</button>

</div>

<div style="display:inline-block;">

<telerik:RadHtmlChart runat="server" ID="AutoAffordRadChart" Width="450px"

InvokeLoadData="FromCode"

Transitions="true" Skin="Forest">

<Appearance>

<FillStyle BackgroundColor="White"></FillStyle>

</Appearance>

<ChartTitle Text="Auto Loan Costs" />

<PlotArea>

<Series>

<telerik:BarSeries DataFieldY="cost" Name="Costs">

<Appearance>

<FillStyle BackgroundColor="#f1ac4a" />

</Appearance>

<TooltipsAppearance DataFormatString="{0:C}" />

<LabelsAppearance DataFormatString="{0:C}" Position="Center" />

</telerik:BarSeries>

</Series>

<XAxis DataLabelsField="costName">

<MinorGridLines Visible="false"></MinorGridLines>

<MajorGridLines Visible="false"></MajorGridLines>

</XAxis>

<YAxis>

<TitleAppearance Text="Costs"></TitleAppearance>

<MinorGridLines Visible="false"></MinorGridLines>

</YAxis>

</PlotArea>

</telerik:RadHtmlChart>

</div>

</ContentTemplate>

</telerik:RadWindow>

</div>

Code Behind:

using System;

using System.Linq;

using Telerik.Web.UI;

using System.Data;

using WebTechnologiesLLC.Modules.Calculators;

namespace WebTechnologiesLLC.Calculators.Auto

{

public partial class TestChart : System.Web.UI.UserControl

{

protected void Page_Load(object sender, EventArgs e)

{

AutoAffordRadChart.DataSource = GetChartData();

}

protected void AmortizationRadGrid_NeedDataSource(object source, GridNeedDataSourceEventArgs e)

{

double rate = 4.5;

int term = 36;

double balance = 0;

double.TryParse(LoanAmtTB.Text, out balance);

AmortPayment amortSchedule = new AmortPayment();

AmortizationRadGrid.DataSource = amortSchedule.GetAmortizationSchedule(rate, balance, term);

}

public DataTable GetChartData()

{

double dpayment = 550;

double trade = 1000;

double title = 450;

double payment = 400;

double interest = 877.50;

double.TryParse(LoanAmtTB.Text, out dpayment);

DataTable costs = new DataTable("Cost");

costs.Columns.Add("costName");

costs.Columns.Add("cost");

costs.Rows.Add("Down Payment", dpayment);

costs.Rows.Add("Net Trade-In", trade);

costs.Rows.Add("Title", title);

costs.Rows.Add("Payment", payment);

costs.Rows.Add("Total Interest", interest);

DataSet ds = new DataSet("Costs");

ds.Tables.Add(costs);

return ds.Tables["Cost"];

}

protected void CUCalcsAjaxManager_AjaxRequest(object sender, AjaxRequestEventArgs e)

{

if (e.Argument == "RebindAmortGrid")

{

AmortizationRadGrid.Rebind();

}

Chart (Obsolete)

answered on 23 Sep 2013

5 answers

497 views

RadContextMenu items on client side: Adding separator

Hello. I have a RadContextMenu attached to a RadGrid. The issue is that the RadContextMenu is going to have different items in it based on the security level under which the user is signed in. I already have this working. I have an OnRowContextMenu event that calls a client side function wirtten in JavaScript. As you can see below, I am successfully adding items based on the user's security level. My question is that I want to add a separator between two menu items. The IsSeparator property works fine in the XML, but I can't get it working when I am adding the menu items on the client side.

function RowContextMenu(sender, eventArgs) {

var menu;

menu = $find("<%=RadMenu.ClientID %>"

); 



    // Set securityLevelLabel to be a hidden field set elsewhere, code deleted for clarity

// Add items to the context menu based on the security level of the user

if (securityLevelLabel.innerText == "view") {

// Look at next block for example

}

else if (securityLevelLabel.innerText == "normal") {

var menuItem = new Telerik.Web.UI.RadMenuItem();

menuItem.set_text("View Details");

menu.trackChanges();

menu.get_items().add(menuItem);

// ***** I WANT A SEPARATOR HERE **********

menuItem = new Telerik.Web.UI.RadMenuItem();

menuItem.set_text("Add");

menu.trackChanges();

menu.get_items().add(menuItem);

menu.commitChanges();

}

else

{

// Code deleted for clarity

}

This is what I want the context menu to look like:
View Details
----------------
Add

Thanks in advance for the help.

-------------------------------------------------------

ANOTHER QUESTION: Is there way to clear all the items out on the client side. As it stands now, every time I go into the function all the menu items are being added again and again, growing the list. On the server side, I can do: RadMenu.Items.Clear() but so far I have been unable to find a way to do this on the client side.

Grid

answered on 23 Sep 2013

2 answers

152 views

RadControlsAJAXCourseware - Getting Started section

Hello,

I have completed the Getting Started section and it seems to be running fine as instructed except the 3x5 image appears to be on new line after the RadToolbar. On Courseware, it showed 3x5 tucked neatly right under RadMenu and to the right of RadToolbar. I went through line by line to see if I had typos but none found. I could have overlooked something. I ran the demo and got the same results.

Tried on both Google Chrome Version 29.0.1547.66 m and IE10
VS 2010
Telerik 2013.2.717.40
.Net v4.0.30319

Images are provided to show the difference between mine and the tutorial.

Thanks for any help.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication3.Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Getting Started</title>

<style type="text/css" media="screen">

#content

{

background-image: url('images/3X5card.png');

height: 165px;

width: 500px;

margin-left: 75px;

vertical-align: top;

}

#tabs

{

margin-left: 75px;

width: 500px;

vertical-align: bottom;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<div>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadMenu1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadMenu1" UpdatePanelRenderMode="Inline" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<telerik:RadMenu ID="RadMenu1" runat="server" Skin="WebBlue" OnItemClick="RadMenu1_ItemClick"

Width="100%">

<CollapseAnimation Type="OutQuint" Duration="200" />

<Items>

<telerik:RadMenuItem runat="server" ImageUrl="~/images/EditInformationHS.png" Text="Edit">

<Items>

<telerik:RadMenuItem runat="server" ImageUrl="~/images/CutHS.png" Text="Cut">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" ImageUrl="~/images/CopyHS.png" Text="Copy">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" ImageUrl="~/images/PasteHS.png" Text="Paste">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" ImageUrl="~/images/PrintHS.png" Text="Print">

<Items>

<telerik:RadMenuItem runat="server" ImageUrl="~/images/PrintHS.png" Text="Print">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" ImageUrl="~/images/PrintPreviewHS.png" Text="Print Preview">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

<telerik:RadToolBar ID="RadToolBar1" runat="server" Orientation="Vertical" SingleClick="None"

Skin="WebBlue" Width="80px" OnButtonClick="RadToolBar1_ButtonClick">

<CollapseAnimation Type="OutQuint" Duration="200" />

<Items>

<telerik:RadToolBarDropDown runat="server" ImageUrl="~/images/EditInformationHS.png"

Text="Edit">

<Buttons>

<telerik:RadToolBarButton runat="server" ImageUrl="~/images/CutHS.png" Text="Cut">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" ImageUrl="~/images/CopyHS.png" Text="Copy">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" ImageUrl="~/images/PasteHS.png" Text="Paste">

</telerik:RadToolBarButton>

</Buttons>

</telerik:RadToolBarDropDown>

<telerik:RadToolBarSplitButton runat="server" ImageUrl="~/images/PrintHS.png" Text="Print">

<Buttons>

<telerik:RadToolBarButton runat="server" ImageUrl="~/images/PrintHS.png" Text="Print">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" ImageUrl="~/images/PrintPreviewHS.png" Text="Print Preview">

</telerik:RadToolBarButton>

</Buttons>

</telerik:RadToolBarSplitButton>

</Items>

</telerik:RadToolBar>

<div id="content" runat="server">

<asp:Label ID="lblContent" runat="server" Text="Label"></asp:Label>

</div>

<div id="tabs" runat="server">

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" OnTabClick="RadTabStrip1_TabClick"

Orientation="HorizontalBottom" SelectedIndex="0" Skin="WebBlue" Width="530px">

</telerik:RadTabStrip>

</div>

</form>

</body>

</html>

Documentation and Tutorials

answered on 23 Sep 2013

4 answers

308 views

Prevent Enter key from toggling checkbox

I would like to have a RadButton checkbox toggle by only the space bar and not the Enter key.

Is there an easy way to do this?

Thanks

Button

answered on 23 Sep 2013

3 answers

80 views

e.SourceDragNode is Nothing

Hi,

I'm using RadTreeView(Q2 2013 SP1) control with templated nodes. My aspx page is like that;

<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>

<telerik:RadTreeView ID="RadTreeView1" Runat="server" EnableDragAndDrop="True"
EnableDragAndDropBetweenNodes="True" OnNodeDrop="RadTreeView1_HandleDrop" EnableViewState="false">
<Nodes>
<telerik:RadTreeNode runat="server" Text="Genel Müdür A">
<Nodes>
<telerik:RadTreeNode runat="server" Text="Genel Müdür Yardımcısı A" >
<NodeTemplate>
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="isim"></asp:Label></td>
<td>
<telerik:RadTextBox ID="RadTextBox1" runat="server">
</telerik:RadTextBox></td>
</tr>
</table>
</NodeTemplate>
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="Genel Müdür B">
<Nodes>
<telerik:RadTreeNode runat="server" Text="Genel Müdür Yardımcısı B" >
<NodeTemplate>
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="isim"></asp:Label></td>
<td>
<telerik:RadTextBox ID="RadTextBox1" runat="server">
</telerik:RadTextBox></td>
</tr>
</table>
</NodeTemplate>
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeView>

</div>
</form>
</body>

and also aspx.vb is;

Protected Sub RadTreeView1_HandleDrop(ByVal sender As Object, ByVal e As RadTreeNodeDragDropEventArgs)
Dim sourceNode As RadTreeNode = e.SourceDragNode
Dim destNode As RadTreeNode = e.DestDragNode
Dim dropPosition As RadTreeViewDropPosition = e.DropPosition

If destNode IsNot Nothing Then
'drag&drop is performed between trees

'dropped node will be a sibling of the destination node
If sourceNode.TreeView.SelectedNodes.Count <= 1 Then
PerformDragAndDrop(dropPosition, sourceNode, destNode)
ElseIf sourceNode.TreeView.SelectedNodes.Count > 1 Then
For Each node As RadTreeNode In RadTreeView1.SelectedNodes
If Not node.IsAncestorOf(destNode) Then
PerformDragAndDrop(dropPosition, sourceNode, destNode)
End If
Next
End If

destNode.Expanded = True
sourceNode.TreeView.UnselectAllNodes()
RadTreeView1.DataBind()

End If
End Sub

Private Shared Sub PerformDragAndDrop(ByVal dropPosition As RadTreeViewDropPosition, ByVal sourceNode As RadTreeNode, ByVal destNode As RadTreeNode)
If sourceNode.Equals(destNode) OrElse sourceNode.IsAncestorOf(destNode) Then
Return
End If
sourceNode.Owner.Nodes.Remove(sourceNode)

Select Case dropPosition
Case RadTreeViewDropPosition.Over
' child
If Not sourceNode.IsAncestorOf(destNode) Then
destNode.Nodes.Add(sourceNode)
End If
Exit Select

Case RadTreeViewDropPosition.Above
' sibling - above
destNode.InsertBefore(sourceNode)
Exit Select

Case RadTreeViewDropPosition.Below
' sibling - below
destNode.InsertAfter(sourceNode)
Exit Select
End Select
End Sub

I'm trying to drag and drop templated nodes but in my first try it looses the template controls' values and at the second time i got the error message- e.SourceDragNode is Nothing.

please help..

TreeView

answered on 23 Sep 2013

2 answers

51 views

No RadProgressArea in IE<=9 when using custom httphandler

We are using the RadAsyncUpload with the RadProgressManager/RadProgressArea and a custom HttpHandler to handle the uploads. In IE10, Chrome, Firefox and others, everything works as it should. However on IE8, IE9 and probably others (6,7) the progress area is never displayed. Enabling chunk uploads solves the problem however it's not an option as we need to use the HttpHandler.

I included the markup for the RadAsyncUpload.

<telerik:RadAsyncUpload runat="server" MaxFileInputsCount="25" DisableChunkUpload="true" HttpHandlerUrl="~/Common/httpHandlers/UploadHandler.ashx" Skin="Office2010Blue" EnableFileInputSkinning="true" HideFileInput="True" InputSize="75" Width="720px" EnableInlineProgress="False" ID="rfUpload" DropZones="#dz" MultipleFileSelection="Automatic" OnClientFilesUploaded="ocfu" OnClientFileUploadRemoved="OnClientFileUploadRemoved" OnClientFileUploaded="onClientFileUploadedNorm" OnClientAdded="OnClientAdded" ChunkSize="0" />

AsyncUpload

answered on 23 Sep 2013

1 answer

49 views

Error while integrating telerik radeditor with sharepoint 2010

Hi ,
I want to integrate radeditor with sharepoint 2010 but getting error.
"Load control template file /_controltemplates/TelerikRadEditorText.ascx failed: Could not load file or assembly 'Telerik.Web.UI' or one of its dependencies. The system cannot find the file specified"

Thanks

Sharepoint Integration

answered on 23 Sep 2013