Questions on UI for ASP.NET AJAX Forum

1 answer

388 views

[Solved] RadDropdownlist and RadCombobox

Hi,

I am new to Telerik Controls. Can anybody help me to point out how the RadCombobox differ from RadDropDownlist or both are more or less the same thing?. I am a bit confused regarding the usage of both.

Thanks.

DropDownList

answered on 26 Feb 2013

4 answers

265 views

AsycUpload using DropZone in usercontrol fires OnClientFileUploaded for each control

So, a bit complicated and I'm guessing there's an issue with my JavaScript so any help would be appreciated.

Here's my code:

Master Page

function pageLoad() {

if (!Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {

$(".dropzone h5").hide();

$(".dropzone p").hide();

$(".dropzone").removeClass("dropzone");

}

else {

$(document).bind({ "drop": function (e) { e.preventDefault(); } });

$(".dropzone").each(function (index) {

$(this).bind({ "dragenter": function (e) { dragEnterHandler(e, $(this)); } })

.bind({ "dragleave": function (e) { dragLeaveHandler(e, $(this)); } })

.bind({ "drop": function (e) { dropHandler(e, $(this)); } });

});

}

ASPX

<%@ Register Src="~/admin/widgets/assetmanager.ascx" TagPrefix="uc" TagName="AssetManager" %>

<uc:AssetManager runat="server" ID="Slides" />

<uc:AssetManager runat="server" ID="Boxes" />

ASCX

<telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">

<script type="text/javascript">

//.Master file needs: function pageLoad() { loadAsync() }

//Utils.js - loadAsync(), dropHandler(), dragEnterHandler(), dragLeaveHandler()

function fileUploaded<%= AsyncUpload1.ClientID %>(sender, args) {

alert("fileUploaded<%= AsyncUpload1.ClientID %>");

$(".invalid.msg" + <%= AsyncUpload1.ClientID %>).hide();

$find("<%=RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest("RebindAssets<%= AsyncUpload1.ClientID %>");

$telerik.$(".invalid.msg" + <%= AsyncUpload1.ClientID %>).html("");

sender.deleteFileInputAt(0);

}

function validationFailed<%= AsyncUpload1.ClientID %>(sender, args) {

alert("validationFailed<%= AsyncUpload1.ClientID %>");

$(".invalid.msg" + <%= AsyncUpload1.ClientID %>).show();

$(".invalid.msg" + <%= AsyncUpload1.ClientID %>).html("Sorry, you are trying to upload an invalid type of file.");

if ($(".filetypes").text() != "") {

var types = $(".filetypes").text().replace("(", "").replace(")", "");

$(".invalid.msg" + <%= AsyncUpload1.ClientID %>).append(" You can upload the following types of file: " + types + ".");

}

sender.deleteFileInputAt(0);

}

</script>

<script type="text/javascript">

//Telerik.Web.UI.RadAsyncUpload.Modules.Flash.isAvailable = function () { return false; };

Telerik.Web.UI.RadAsyncUpload.Modules.Silverlight.isAvailable = function () { return false; };

</script>

</telerik:RadScriptBlock>

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

<span class="msg error invalid msg<%= AsyncUpload1.ClientID %>" style="display:none;"></span>

</telerik:RadCodeBlock>

<div id="pnlDropZone" runat="server" class="dropzone dr{0}">

<h5>To upload, drop files here</h5>

<p>or</p>

<telerik:RadAsyncUpload runat="server" ID="AsyncUpload1" MultipleFileSelection="Automatic" MaxFileSize="52428800" Localization-Select="Select Files" DropZones=".dropzone" />

</div>

ASCX.VB

Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load

Dim manager As RadAjaxManager = RadAjaxManager.GetCurrent(Page)

AddHandler manager.AjaxRequest, AddressOf assets_AjaxRequest

manager.AjaxSettings.AddAjaxSetting(manager, AsyncUpload1)

manager.AjaxSettings.AddAjaxSetting(manager, ddlMoveTo)

If Not IsPostBack Then

AsyncUpload1.TargetFolder = "~/Images"

AsyncUpload1.OnClientFileUploaded = "fileUploaded" & AsyncUpload1.ClientID

AsyncUpload1.OnClientValidationFailed = "validationFailed" & AsyncUpload1.ClientID

pnlDropZone.Attributes("class") = pnlDropZone.Attributes("class").Replace("{0}", AsyncUpload1.ClientID)

End If

End Sub

Protected Sub AsyncUpload1_FileUploaded(sender As Object, e As Telerik.Web.UI.FileUploadedEventArgs) Handles AsyncUpload1.FileUploaded

e.File.SaveAs(HttpContext.Current.Server.MapPath("~/images/" & e.File.FileName))

'Add to database

End Sub

CSS

.dropzone

{

text-align:center;

padding:15px;

border:dashed 5px #c0c0c0;

}

.dropzone h5

{

margin:0;

}

.dropzone .RadUpload

{

margin:5px auto 0;

text-align:center;

}

.dropzone .RadUpload li

{

list-style:none;

}

.dropzone .RadUpload input.ruFakeInput

{

display: none;

}

My problem is that when I drag a file to the DropZone for either of the controls, both 'fileUploaded' functions are called and the file is uploaded twice. If I drag to the actual AsyncControl itself, everything works fine and the file is only uploaded once.

Help!?

Tony.

AsyncUpload

answered on 25 Feb 2013

2 answers

426 views

controlling direction of dropdown

How do you control the direction of the dropdown for the RadComboBox. Presently I have several comboboxes on a form, each one opens in a different direction, some open scrolling up, others open scrolling down. I want them all to display down.

ComboBox

answered on 25 Feb 2013

1 answer

137 views

Custom Filter on Image column yields exception: is neither a DataColumn nor a DataRelation for table DefaultView.

My image column:

<telerik:GridImageColumn DataImageUrlFields="Stage" UniqueName="Stage" DataImageUrlFormatString="Images/{0}.png" ImageAlign="Middle" HeaderText="Step"

AllowFiltering="true" ShowFilterIcon="False" AutoPostBackOnFilter="True" ShowSortIcon="False">

<HeaderStyle Width="80px" Font-Bold="true" />

<ItemStyle Width="80px" />

<FilterTemplate>

<telerik:RadComboBox ID="StageFilter" runat="server" HighlightTemplatedItems="True" OnClientSelectedIndexChanged="RTAStepFilterChanged"

SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("Stage").CurrentFilterValue %>' Width="51px" DropDownWidth="69px" ShowSortIcon="False">

<ItemTemplate>

<div><img src='<%# DataBinder.Eval(Container, "ImageUrl") %>' alt="" /></div>

</ItemTemplate>

<Items>

<telerik:RadComboBoxItem Text="" Value="" ImageUrl="Images/nofilter.png" />

<telerik:RadComboBoxItem Text="1" Value="1" ImageUrl="Images/1.png" />

<telerik:RadComboBoxItem Text="2" Value="2" ImageUrl="Images/2.png" />

<telerik:RadComboBoxItem Text="3" Value="3" ImageUrl="Images/3.png" />

<telerik:RadComboBoxItem Text="4" Value="4" ImageUrl="Images/4.png" />

<telerik:RadComboBoxItem Text="5" Value="5" ImageUrl="Images/5.png" />

<telerik:RadComboBoxItem Text="6" Value="6" ImageUrl="Images/6.png" />

<telerik:RadComboBoxItem Text="7" Value="7" ImageUrl="Images/7.png" />

<telerik:RadComboBoxItem Text="8" Value="8" ImageUrl="Images/8.png" />

<telerik:RadComboBoxItem Text="X" Value="0" ImageUrl="Images/cancel.png" />

</Items>

</telerik:RadComboBox>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript">

function RTAStepFilterChanged(sender, args) {

var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");

var filterValue = args.get_item().get_value();

tableView.filter("Stage", filterValue, Telerik.Web.UI.GridFilterFunction.Contains);

}

</script>

</telerik:RadScriptBlock>

</FilterTemplate>

</telerik:GridImageColumn>

Server Error in '/' Application.

is neither a DataColumn nor a DataRelation for table DefaultView.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.ArgumentException: is neither a DataColumn nor a DataRelation for table DefaultView.

Source Error:

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

Stack Trace:

[ArgumentException: is neither a DataColumn nor a DataRelation for table DefaultView.]
System.Data.DataRowView.get_Item(String property) +1338062
lambda_method(Closure , DataRowView ) +59
System.Linq.WhereEnumerableIterator`1.MoveNext() +139
System.Linq.Enumerable.Count(IEnumerable`1 source) +4083557
lambda_method(Closure ) +265
System.Linq.EnumerableExecutor`1.Execute() +94
System.Linq.EnumerableExecutor`1.ExecuteBoxed() +23
System.Linq.EnumerableQuery`1.System.Linq.IQueryProvider.Execute(Expression expression) +94
Telerik.Web.UI.GridDynamicQueryable.Count(IQueryable source) +313
Telerik.Web.UI.GridDataTableFromEnumerable.FillData35() +4445
Telerik.Web.UI.GridDataTableFromEnumerable.FillData() +1078
Telerik.Web.UI.GridResolveEnumerable.Initialize() +58
Telerik.Web.UI.GridResolveEnumerable.EnsureInitialized() +45
Telerik.Web.UI.GridResolveEnumerable.get_DataTable() +36
Telerik.Web.UI.GridEnumerableFromDataView..ctor(GridTableView owner, DataView dataView, Boolean autoGenerateColumns, GridColumnCollection presentColumns, String[] additionalField, Boolean retrieveAllFields, Boolean enableSplitHeaderText) +244
Telerik.Web.UI.GridDataSourceHelper.CreateGridEnumerable(GridTableView owner, IEnumerable enumerable, Boolean caseSensitive, Boolean autoGenerateColumns, GridColumnCollection presentColumns, String[] additionalField, Boolean retrieveAllFields, Boolean enableSplitHeaderText) +109
Telerik.Web.UI.GridDataSourceHelper.GetResolvedDataSource(GridTableView owner, Object dataSource, String dataMember, Boolean caseSensitive, Boolean autoGenerateColumns, GridColumnCollection presentColumns, String[] additionalField, Boolean retrieveAllFields, Boolean enableSplitHeaderText) +755
Telerik.Web.UI.GridTableView.get_ResolvedDataSource() +257
Telerik.Web.UI.GridTableView.CreateControlHierarchy(Boolean useDataSource) +727
Telerik.Web.UI.GridTableView.CreateChildControls(IEnumerable dataSource, Boolean useDataSource) +1286
System.Web.UI.WebControls.CompositeDataBoundControl.PerformDataBinding(IEnumerable data) +67
System.Web.UI.WebControls.DataBoundControl.OnDataSourceViewSelectCallback(IEnumerable data) +123
System.Web.UI.DataSourceView.Select(DataSourceSelectArguments arguments, DataSourceViewSelectCallback callback) +33
System.Web.UI.WebControls.DataBoundControl.PerformSelect() +138
Telerik.Web.UI.GridTableView.PerformSelect() +38
System.Web.UI.WebControls.BaseDataBoundControl.DataBind() +30
Telerik.Web.UI.GridTableView.DataBind() +387
Telerik.Web.UI.GridTableView.Rebind() +108
Telerik.Web.UI.GridFilterCommandEventArgs.ExecuteCommand(Object source) +1018
Telerik.Web.UI.RadGrid.OnBubbleEvent(Object source, EventArgs e) +205
System.Web.UI.Control.RaiseBubbleEvent(Object source, EventArgs args) +37
Telerik.Web.UI.GridItem.OnBubbleEvent(Object source, EventArgs e) +71
System.Web.UI.Control.RaiseBubbleEvent(Object source, EventArgs args) +37
Telerik.Web.UI.GridItem.OnBubbleEvent(Object source, EventArgs e) +147
Telerik.Web.UI.GridItem.FireCommandEvent(String commandName, Object commandArgument) +88
Telerik.Web.UI.RadGrid.RaisePostBackEvent(String eventArgument) +12205
System.Web.UI.Page.RaisePostBackEvent(IPostBackEventHandler sourceControl, String eventArgument) +13
System.Web.UI.Page.RaisePostBackEvent(NameValueCollection postData) +9642898
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1724

Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.18033

I am not sure what I am doing wrong here. Is this even possible? My Data Source is an SQLDataSource and it is used a stored procedure. The column is populated and images are displayed.

Grid

answered on 25 Feb 2013

4 answers

365 views

Add client side validator to RadGrid

Hi,

I am trying to add required field validation to 2 fields Tag and Description. When user clicks New or Edit, the EditMode is set to popup. Inside the popup, the user needs to populate the Tag and Description input boxes. If both or one is empty/null, then I want to display a message to the user that Tag/Description is a required field, much like the behavior of RequiredFieldValidator. I have found numerous server side examples but no client side examples to accomplish this.

Any and all suggestions are welcomed.

Thanks in advance...

<telerik:RadGrid ID="RadGridTagDetail" runat="server" AllowAutomaticDeletes="True"

AllowAutomaticInserts="True" AllowAutomaticUpdates="True"

AllowFilteringByColumn="True" AllowPaging="True"

DataSourceID="ObjectDataSourceTags" GridLines="None"

style="margin-left: 13px" Width="50%" AutoGenerateColumns="False"

onitemdeleted="TagDetail_ItemDeleted" oniteminserted="TagDetail_ItemInserted"

onitemupdated="TagDetail_ItemUpdated">

<HeaderContextMenu EnableAutoScroll="True"></HeaderContextMenu>

<ClientSettings AllowRowsDragDrop="True">

<Selecting AllowRowSelect="True" EnableDragToSelectRows="False" />

<Scrolling AllowScroll="True" UseStaticHeaders="True" />

</ClientSettings>

<MasterTableView CommandItemDisplay="Bottom"

DataSourceID="ObjectDataSourceTags" DataKeyNames="Id" EditMode="PopUp">

<CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>

<Columns>

<telerik:GridBoundColumn DataField="Id" HeaderText="Tag" SortExpression="Id"

UniqueName="Id">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Descr" HeaderText="Description"

SortExpression="Descr" UniqueName="Descr">

</telerik:GridBoundColumn>

</Columns>

<EditFormSettings InsertCaption="Add new Tag" PopUpSettings-Modal="false"/>

<CommandItemTemplate>

<telerik:RadToolBar ID="RadToolBarTags" Runat="server"

OnClientButtonClicking="RadToolBarTags_OnClientButtonClicking"

onbuttonclick="RadToolBarTags_ButtonClick">

<Items>

<telerik:RadToolBarButton runat="server" CommandName="InitInsert" Text="New">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" CommandName="EditSelected" Text="Edit">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" CommandName="DeleteSelected" Text="Delete">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" IsSeparator="true">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" Text="Close" Value="close">

</telerik:RadToolBarButton>

</Items>

</telerik:RadToolBar>

</CommandItemTemplate>

</MasterTableView>

</telerik:RadGrid>

Grid

answered on 25 Feb 2013

1 answer

119 views

Need to disable, or clear editor, on past right click menu option

I have a radeditor that is enabled with the only option being allow toggle to full screen mode. I have the the onkeydown event programmed in javascript to return if a key is pressed so that the editor will not allow for typing. The editor must be enabled. The problem I have is that if a user cuts text from one window and right clicks on the radeditor and chooses "paste" text will be pasted into the radeditor. I am trying to make the enabled radeditor act as if the text area is disabled. How can I prevent the right click "paste" from inserting text into the radeditor?

Thanks,

Steve Holdorf

Editor

answered on 25 Feb 2013

1 answer

286 views

FindItemByValue client-side not working

<telerik:RadComboBox ID="rcbVendor" AutoPostBack="true" ValueType="System.Int32" DataValueField = "VendorNumber" DataTextField = "VendorName" width="280px" runat="server" />

this snippet doesn't work

var rntbOrderCode = $find('<%=rntbOrderCode.ClientID %>');

if (rcbVendor != null) {

rcbiVendor = rcbVendor.findItemByValue(VendorNumber);

if (rcbiVendor == null)

{

alert (VendorNumber);

}

else

{

rcbiVendor.select();

}

it finds the combo box - and there is something in VendorNumber
but it doesn't select

the routine is on the select of a datagrid - and I have the Ajax manager coded as such

<telerik:RadAjaxManager ID="raManager" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="rcbVendor">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rgItems" />

<telerik:AjaxUpdatedControl ControlID="rcbVendor" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="rgItems">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rgItems" />

<telerik:AjaxUpdatedControl ControlID="rcbVendor" />

<telerik:AjaxUpdatedControl ControlID="rntbOrderCode" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

it should work, right?

ComboBox

answered on 25 Feb 2013

1 answer

70 views

Template Demo - Deleting Tabs not working??

Hi,

I have taken the template demo whichuses an icon on the Tab to handle Tab deletions. On the face of it this seems to work perfectly as the Tabs disappear as expected. But, strange things start happening if you start dynamically adding new tabs.

I have a menu (actually a Toolbar) that when an option is selected it dynamically creates a new tab and page view. Now this works without any problem whatsoever. I have also used the template Tabstrip example to allow the Tab to be removed by displaying the red cross on the tab. That to works - click the cross and the tab disappears.

However, If I add say 4 tabs and then delete 2 I am left with 2 (correct) BUT if I now add another Tab the 2 Tabs that were deleted reappear! In fact, if you trace through the code you see straight away when adding the last Tab that the item count is 4 when it should be 2.

Can anyone explain this? Look, I'm no expert on Client side versus server side by any stretch of the imagination but it looks like there may be something there. The delete is taking place client side and the insert on the server side.

Also, I have a Skin Chooser in the toolbar and the moment I select a new skin the page is refreshed and all the deleted Tabs reappear!
I'm trying to create a BI reporting system and it would be really nice to allow the user to open multiple reports or dashboards in a Tab like fashion. This means they can switch between 2 reports easily and not have toopen multiple sessions.

I have also looked at the Windows control which is really nice but might have some limitations.

Thanks

Campbell

TabStrip

answered on 25 Feb 2013

7 answers

444 views

RadGrid, UserControl and Server Side Validation

I have a RadGrid popping up a UserControl for Edit and Insert which works great, except that I need to do some server side validation on the UserControl prior to having it disappear and the InsertCommand event firing.

Problem is, when I implement code in the btnOk_Click event it seems to screw things up.

Can anyone point me in the right direction on this one?

Thanks.

Grid

answered on 25 Feb 2013

3 answers

185 views

set_cancel(true); does not cancel ClientContextMenuShowing event for Node in RadTreeView

set_cancel(true); does not cancel ClientContextMenuShowing event.
Right click on the Node4 still shows default RadTreeView menu that has "Open", "Open in New Tab", etc
Also all the nodes of RadTreeView are created dynamically by loading XML.
Telerik.Web.UI.dll version is 2010.2.713.35

MyPage.aspx has

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="MyPage.aspx.vb" MasterPageFile="~/MyBase.master" Inherits="MyNamespace.MyPage" %>
<script type="text/javascript">
function ClientContextMenuShowing(sender, eventArgs) {
        var node = eventArgs.get_node();

        if ((node.get_text() == "Node4")) {
            eventArgs.set_cancel(true);    // default context menu still displays
            alert("After set_cancel for " + node.get_text()); // displayed
        }
    }
</script>
<AjaxSettings>
   <telerik:AjaxSetting AjaxControlID="Timer1">
      <UpdatedControls>
         <telerik:AjaxUpdatedControl ControlID="menu1" />
      </UpdatedControls>
   </telerik:AjaxSetting>
<asp:timer id="Timer1" runat="server" interval="300000">
</asp:timer>

MyBase.master has
<td width="100%" valign="top">
   <div id="Div1" style="display:none;">
      <telerik:RadTreeView ID="menu1" EnableEmbeddedSkins="false" runat="server" Width="220px" ShowLineImages="false"    style="display:inline-block; overflow: hidden">
      </telerik:RadTreeView>
   </div>
</td>

MyPage.aspx.vb has
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
   If Not Page.IsPostBack Then
      Timer1Tick(sender, e)
   End If
End Sub

Protected Sub Timer1Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles Timer1.Tick
LoadMyMenu()
End Sub

Private Sub LoadMyMenu()
      Dim objMenu As Telerik.Web.UI.RadTreeView = CType(m.GetMasterMenu(), Telerik.Web.UI.RadTreeView)
      Dim objUIService As New UIService(objUserSession)
      Dim objMenuData = objUIService.GetMenus(0)
      Dim XMLMenuItem = objMenuData.Item(0)
      objMenu.LoadXml(XMLMenuItem.XMLMenu.ToString)
      objMenu.Width = "220

‘This line works: objMenu.Nodes.FindNodeByText("Node1").Nodes.FindNodeByText("Node2").Nodes.FindNodeByText("Node3").Nodes.FindNo deByText("Node4").Text = "Node4”

‘This line does Not cancel default context menu:
objMenu.Nodes.FindNodeByText("Node1").Nodes.FindNodeByText("Node2").Nodes.FindNodeByText("Node3").Nodes.FindNodeByText("Node4"). EnableContextMenu = False
‘This, together with ClientContextMenuShowing() java script function ()se above does Not cancel default context menu also:
objMenu.OnClientContextMenuShowing = "ClientContextMenuShowing"

End Sub

So, how to cancel default context menu in my case for a particular node or set of nodes. Thank you

TreeView

answered on 25 Feb 2013