Questions on UI for ASP.NET AJAX Forum

2 answers

76 views

ToolTip Not Refreshing After Initial Call

I've created a simple page with a RadGrid and a RadToolTipManager on it. What I'm trying to accomplish is very simple. Each row in the grid has an ID and GridImageColumn. When the image is clicked, the ID should display in the ToolTip window. The issue I'm experiencing is after the first ToolTip is displayed, all subsequent attempts to display ToolTips always display the first ToolTip that was displayed, not the ToolTip for the row clicked. So if 3 is clicked, I'd expect to see 3 in the ToolTip. If 2 is clicked, I'd expect to see 2 in the Tooltip and so on.

Here is a video recording displaying the behavior of the issue. If I refresh the page, I can start all over again.

http://screencast.com/t/4zuJtxgGGGUW

rttm.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="rttm.aspx.vb" Inherits="rttm" %>

<!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></title>

</head>

<body>

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

<div>

<telerik:RadScriptManager runat="server" ID="mgrJS" AsyncPostBackTimeout="600">

</telerik:RadScriptManager>

<telerik:RadGrid runat="server" ID="rg" AutoGenerateColumns="False" Width="620px" Skin="Web20">

<MasterTableView HierarchyLoadMode="ServerOnDemand" Width="620px" TableLayout="Auto" DataKeyNames="ID">

<Columns>

<telerik:GridBoundColumn HeaderText="ID" UniqueName="ID" DataField="ID">

</telerik:GridBoundColumn>

<telerik:GridImageColumn UniqueName="View" ImageUrl="App_Themes/BlueBT2009/Images/Inq.gif"></telerik:GridImageColumn>

</Columns>

</MasterTableView>

<FilterMenu EnableImageSprites="False">

</FilterMenu>

</telerik:RadGrid>

<telerik:RadToolTipManager ID="RadToolTipManager1" OffsetY="-1" HideEvent="Default"

Width="800px" Height="600px" runat="server" EnableShadow="true" RelativeTo="BrowserWindow"

Position="Center" OnAjaxUpdate="Load_ToolTip"

Modal="false" ContentScrolling="Auto" AutoCloseDelay="0" ShowEvent="OnClick" >

</telerik:RadToolTipManager>

</div>

</form>

</body>

</html>

rttm.aspx.vb

Partial Class rttm

Inherits System.Web.UI.Page

Protected Sub rg_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles rg.ItemDataBound

If e.Item.ItemType = GridItemType.Item OrElse e.Item.ItemType = GridItemType.AlternatingItem Then

Me.RadToolTipManager1.TargetControls.Add(TryCast(e.Item, GridDataItem)("View").ClientID, TryCast(e.Item, GridDataItem)("ID").Text, True)

End If

End Sub

Protected Sub rg_NeedDataSource(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles rg.NeedDataSource

Dim dt As New DataTable()

Dim col As New DataColumn("ID")

dt.Columns.Add(col)

Dim row As DataRow = dt.NewRow

row(0) = 1

dt.Rows.Add(row)

row = dt.NewRow

row(0) = 2

dt.Rows.Add(row)

row = dt.NewRow

row(0) = 3

dt.Rows.Add(row)

Me.rg.DataSource = dt

Session("rttm") = dt

End Sub

Protected Sub Load_ToolTip(ByVal sender As Object, ByVal args As ToolTipUpdateEventArgs)

Dim invoiceDetails() As String = args.Value.Split("_")

Dim toAdd As UserControl = LoadUserControl("rttmdetails.ascx", invoiceDetails)

args.UpdatePanel.ContentTemplateContainer.Controls.Add(toAdd)

args.UpdatePanel.Update()

End Sub

Private Function LoadUserControl(ByVal UserControlPath As String, ByVal ParamArray constructorParameters As Object()) As UserControl

Dim constParamTypes As New List(Of Type)()

For Each constParam As Object In constructorParameters

constParamTypes.Add(constParam.[GetType]())

Next

Dim ctl As UserControl = TryCast(Page.LoadControl(UserControlPath), UserControl)

Dim constructor As System.Reflection.ConstructorInfo = ctl.[GetType]().BaseType.GetConstructor(constParamTypes.ToArray())

If constructor Is Nothing Then

Throw New MemberAccessException("The requested constructor was not found on : " & ctl.[GetType]().BaseType.ToString())

Else

constructor.Invoke(ctl, constructorParameters)

End If

Return ctl

End Function

End Class

rttmDetails.aspx

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="rttmDetails.ascx.vb" Inherits="rttmDetails" %>

<telerik:RadGrid ID="rg" runat="server" AutoGenerateColumns="false" Skin="Web20" AllowMultiRowSelection="true">

<MasterTableView Name="details" DataKeyNames="ID">

<Columns>

<telerik:GridBoundColumn HeaderText="ID" UniqueName="ID" DataField="ID">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

rttmDetails.aspx.vb

Partial Class rttmDetails

Inherits System.Web.UI.UserControl

Private _id As String

Public Property Identity() As String

Get

Return (_id)

End Get

Set(ByVal value As String)

_id = value

End Set

End Property

Private _details As DataRow()

ReadOnly Property Details() As DataRow()

Get

Return _details

End Get

End Property

Public Sub New()

End Sub

Public Sub New(ByVal id As String)

Dim dt As DataTable = CType(Session("rttm"), DataTable)

_id = id

_details = dt.Select("ID=" & id)

End Sub

Protected Sub rgInvoice_NeedDataSource(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles rg.NeedDataSource

Me.rg.DataSource = Details

End Sub

End Class

I'm sure this is a common issue that should have an easy fix. I'm anxiously awaiting your answer.

Thanks,
Rob

ToolTip

answered on 30 Oct 2013

1 answer

123 views

Exporting RadOrgChart To PNG

Hi There,
I am looking to see if it is possible to export the radorgchart control to a png file using something along the lines of Inkscape. It is possible to do this with the radhtmlchart so i'm not sure if the same applies for this , can someone please advise?
Thanks,
Chris

OrgChart

answered on 30 Oct 2013

4 answers

129 views

how to add file filter option in javascript

<telerik:RadAsyncUpload ID="uplFilenameNew" runat="server">

</telerik:RadAsyncUpload>

how to add file filter option in javascript depending on combobox item (pdf,spreadsheet,text,jpeg)

thank you.

please help me.

AsyncUpload

answered on 30 Oct 2013

3 answers

96 views

How can I filter on key press but not on the filter button click?

My filters use AutoPostBackOnFilter=true to capture the [Enter] key, as shown here:

http://www.telerik.com/help/aspnet-ajax/grid-search-on-key-press.html

This is great for having a quick default filter option, but what about when I want to use a different filter option? What happens right now is essentially two filters to use one. To clarify, let's assume I have things set up so that [Enter] defaults to a "Contains" filter, and I do the following:

1. Enter some text into a filter text box.
2. Click the filter button, because I do not want to do a "Contains" filter. The grid posts because the filter text box has lost focus.
3. The filter drop down has disappeared, so I click it again. Now I can select the filtering option I want, e.g., "Between".

As you can see, I have to do to the default filter every time I want to do an alternative filter option. How can I avoid this?

Thanks.

Filter

answered on 30 Oct 2013

1 answer

96 views

Grid bottom border is missing in paging mode (2013 Q3)

I noticed that in new version of Telerik (2013 Q3), the bottom border is missing if the grid has more than one page.
Please take a look at the attached pic.

Thanks
Lamk.

Grid

answered on 30 Oct 2013

3 answers

102 views

Accessing RadComboBox with Watin

Hi,

I am attempting to build UI tests of aspx pages which use Telerik RadControls for ASP.NET Ajax. I found a great example of how to interact with the RadComboBox at http://haditeo.wordpress.com/category/watin/, but that deals with the Telerik controls from 2009 and doesn't seem to apply to newer versions as there is no _Dropdown

I am currently using version 2012.1.215.40 of Telerik RadControls for ASP.NET Ajax. How can I select a RadComboBox item with that version?

Thanks.

ComboBox

answered on 30 Oct 2013

5 answers

195 views

Is RadControls for ASP.NET AJAX available as a downloadable msi package ?

I signed up for RADControls ASP.NET AJAX trial a couple of weeks ago. At that time I downloaded the trail installers (msi) for Q2 release. Recently, when I was notified about Q3 upgrade being available, I downloaded the Q3 trial installer with the intent to upgrade to the latest release for my evaluation.

I find that the installer is a 3 MB download and invoking the installer starts the download. This is working very slow for me. Is it possible for me to download a full msi package and use it for upgrading my trial installation from Q2 2011 to Q3 2011.

Thanks,
Shreesh

Installer and VS Extensions

answered on 30 Oct 2013

2 answers

260 views

RadMenu - Remove rmSelected from menu item

Howdy all.

Here's my situation: I have an Image Only, Root Level only RadMenu. You click a button and a RadWindow pops up. This works.

One of the visual elements we're using to tie the RadWindow to the RadMenu option that opened it is with a little triangle made out of CSS manipulation. I have defined it here, using the :after tag.

.RadMenu .rmRootGroup .rmSelected:after

{

content: "";

position: absolute;

top: 0px;

left: 40px;

border-right: 15px solid red;

border-top: 15px solid transparent;

border-bottom: 15px solid transparent;

}

The problem is, I can't figure out how to remove the Selected status on the item to remove the triangle. It stays up until something else is selected.

One might say "But Amanda, you can just change the :after to :before and do it on the RadWindow, and that would fix the issue!", and you're right, it would... until the window gets adjusted because it's going off the screen. Then I need to either change the top and left for an element that's not really part of the DOM (becasue before and after make it 'pseduo'), OR! Make it part of the meun (as I don't care WHERE it is on the window's edge), and then let my Javascript place the window without fussing with the CSS.

The Javascript code I'm posting is being called from VB using the menuEmp.ItemCheck to send back the value of the window (in this case, EmpProj). So I go to VB, do my window creation mojo, register the script on start up so it runs when we're back, comes back and then comes into here.

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

<script type="text/javascript">

function MenuOpenWindow(windowTitle) {

var oWindow;

var offsetElementBounds;

var menu = $find("<%=menuEmp.ClientID%>");

var menuItem = menu.findItemByValue(windowTitle).get_element();

//Closes the last window opened

if (lastOpenedWindow) {

lastOpenedWindow.close();

lastOpenedWindow = null;

}

if (windowTitle == "EmpProj") {

if (lastWindowTitle != "EmpProj") {

oWindow = $find("<%=winEmpProj.ClientID%>");

oWindow.show();

if (oWindow.get_offsetElementID()) {

offsetElementBounds = $telerik.getBounds($get(oWindow.get_offsetElementID()));

var x = offsetElementBounds.x + (menuItem.offsetWidth / 3);

var y = menuItem.offsetTop + offsetElementBounds.y - (menuItem.offsetHeight / 3);

oWindow.moveTo(x, y);

}

lastOpenedWindow = oWindow;

lastWindowTitle = "EmpProj";

return false;

} else {

menuItem.set_selected(false);

lastWindowTitle = null;

}

</script>

</telerik:RadScriptBlock>

On the if (lastWindowTitle != "EmpProj")' else statement, I have the menuItem.set_selected(false);. According to http://www.telerik.com/help/aspnet-ajax/menu-radmenuitem-client-side.html, that should work, but I'm getting an error:

Microsoft JScript runtime error: Object doesn't support property or method 'set_selected'

And I've tried a couple of different ways, but I always end up with an error. What have I missed?

Menu

answered on 30 Oct 2013

0 answers

169 views

TabString not changing tab (RAZOR)

// ASP.NET MVC
Hello,

I have a problem with my tab, when I click on any other tab change this.
What's weird is that my tab works in the home page but not in another page "Parameter"
I just picked up the code on your site regarding tab.
I will put the screen and the code copies.

Thank you for your help

ParameterView:

@using System.Globalization

@using Telerik.Web.Mvc.UI

@{ Html.Telerik().TabStrip()

.Name("TabStrip")

.Items(tabstrip =>

{

tabstrip.Add()

.Text("ASP.NET MVC")

.ImageUrl("~/Content/Common/Icons/Suites/mvc.png")

.Content(@<text>

<ul>

<li>Pure ASP.NET MVC components</li>

<li>Completely Open Source</li>

<li>Exceptional Performance</li>

<li>Based on jQuery</li>

<li>Search Engine Optimized</li>

<li>Cross-browser support</li>

</ul>

</text>);

tabstrip.Add()

.Text("Silverlight")

.ImageUrl("~/Content/Common/Icons/Suites/sl.png")

.Content(@<text>

<ul>

<li>Built on Silverlight 3</li>

<li>RIA services support</li>

<li>Validation support</li>

<li>Out of browser support</li>

<li>The first commercial 3D chart</li>

<li>Free testing framework</li>

</ul>

</text>);

tabstrip.Add()

.Text("ASP.NET AJAX")

.ImageUrl("~/Content/Common/Icons/Suites/ajax.png")

.Content(@<text>

<ul>

<li>Built on top of Microsoft ASP.NET AJAX framework</li>

<li>Rich client-side capabilities; nearly identical client-side and server-side APIs</li>

<li>.NET 3.5 built-in support for LINQ, EntityDataSource, ADO.NET DataServices, WCF, etc</li>

<li>Performance optimization helper controls and HTTP compression</li>

<li>SharePoint and DotNetNuke Integration; ASP.NET MVC-ready</li>

<li>Wide cross-browser compatible and XHTML compliant</li>

</ul>

</text>);

tabstrip.Add()

.Text("OpenAccess ORM")

.ImageUrl("~/Content/Common/Icons/Suites/orm.png")

.Content(@<text>

<ul>

<li>Model First and Schema First approaches</li>

<li>Stored Procedures for Multiple Databases</li>

<li>Views for Multiple Databases</li>

<li>Generic Metadata Access and artificial fields API in the runtime</li>

<li>Support for Ado.Net Data Services and WCF</li>

<li>Support for LINQ, OQL, and SQL Languages</li>

</ul>

</text>);

tabstrip.Add()

.Text("Reporting")

.ImageUrl("~/Content/Common/Icons/Suites/rep.png")

.Content(@<text>

<ul>

<li>Excellent data presentation and analysis: Crosstabs, Charts, Tables, Lists</li>

<li>SubReports, Barcodes, Images, Shapes, and more</li>

<li>Revolutionary WYSIWYG design surface in Visual Studio</li>

<li>Easy conditional formatting, sorting, filtering, grouping</li>

<li>Powerful styling, data binging and data processing models</li>

<li>Significantly reduced development time through wizards and builders</li>

</ul>

</text>);

tabstrip.Add()

.Text("Sitefinity ASP.NET CMS")

.ImageUrl("~/Content/Common/Icons/Suites/sitefinity.png")

.Content(@<text>

<ul>

<li>Multi-lingual Content Integration</li>

<li>Workflow Engine</li>

<li>Document versioning</li>

<li>Permissions</li>

<li>Interface Localization</li>

<li>Wide cross-browser compatible and XHTML compliant</li>

</ul>

</text>);

})

.SelectedIndex(0)

.Render();

}

GridControler:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace WebRH2012.Controllers

{

using System.Linq;

using System.Web.Mvc;

using Models;

using System;

using Telerik.Web.Mvc.UI;

using Telerik.Web.Mvc;

using System.Data.Entity.Validation;

public partial class GridController : Controller

{

//[SourceCodeFile("EditableProduct (model)", "~/Models/EditableProduct.cs")]

//[SourceCodeFile("SessionProductRepository", "~/Models/SessionProductRepository.cs")]

//[SourceCodeFile("Date.ascx (editor)", "~/Views/Shared/EditorTemplates/Date.ascx")]

private readonly JSIEntities context = new JSIEntities();

public ActionResult ForeignKeyColumn()

{

return View(new GridModel(Statut.getAllStatut()));

}

[GridAction]

public ActionResult _ForeignKeyColumn()

{

return View(new GridModel(Statut.getAllStatut()));

}

[AcceptVerbs(HttpVerbs.Post)]

[GridAction]

public ActionResult _ForeignKeyColumnUpdateOrder(int id, int employeeId)

{

//var order = new ClientEditableOrder

//{

// OrderID = id,

// Employee = new NorthwindDataContext().Employees

// .Where(e => e.EmployeeID == employeeId)

// .Select(e => e.FirstName + " " + e.LastName).SingleOrDefault()

//};

//// Exclude "Employee" from the list of updated properties

//if (TryUpdateModel(order, null, null, new[] { "Employee" }))

//{

// SessionClientOrderRepository.Update(order);

//}

return View(new GridModel(Statut.getAllStatut()));

}

public ActionResult EditingAjax(GridEditMode? mode, GridButtonType? type, GridInsertRowPosition?

insertRowPosition)

{

ViewData["mode"] = mode ?? GridEditMode.InLine;

ViewData["type"] = type ?? GridButtonType.Text;

ViewData["insertRowPosition"] = insertRowPosition ?? GridInsertRowPosition.Top;

return View();

}

[GridAction]

public ActionResult _SelectAjaxEditing()

{

//return View(new GridModel(SessionProductRepository.All()));

return null;

}

//[AcceptVerbs(HttpVerbs.Post)]

//[CultureAwareAction]

//[GridAction]

//public ActionResult _SaveAjaxEditing(int id)

//{

// EditableProduct product = SessionProductRepository.One(p => p.ProductID == id);

// TryUpdateModel(product);

// SessionProductRepository.Update(product);

// return View(new GridModel(SessionProductRepository.All()));

//}

[AcceptVerbs(HttpVerbs.Post)]

//[CultureAwareAction]

[GridAction]

public ActionResult _InsertAjaxEditing(FormCollection form, string entityName, int id)

{

var result = new object();

var newObject = new object();

var model = new GridModel();

switch (entityName)

{

case "augmentations":

newObject = AUGMENTATIONS.FormCollectionToAugmentations(form, id);

//((AUGMENTATIONS)newObject).REF_CANDIDAT = id;

if (TryValidateModel((AUGMENTATIONS)newObject))

{

context.AUGMENTATIONS.Add(((AUGMENTATIONS)newObject));

context.SaveChanges();

}

model = new GridModel(CANDIDATS.getCandidatByID(id, context).getHistoAugmention());

break;

case "corange":

newObject = HISTO_MT_CARTE_ORANGE_CANDIDAT.FormCollectionToHistoMtCorange(form, id);

//((HISTO_MT_CARTE_ORANGE_CANDIDAT)newObject).REF_CANDIDAT = id;

if (TryValidateModel((HISTO_MT_CARTE_ORANGE_CANDIDAT)newObject))

{

context.HISTO_MT_CARTE_ORANGE_CANDIDAT.Add(((HISTO_MT_CARTE_ORANGE_CANDIDAT)newObject));

context.SaveChanges();

}

model = new GridModel(CANDIDATS.getCandidatByID(id, context).getHistoCorange());

break;

case "ndf":

newObject = CANDIDATS_NDF.FormCollectionToHistoMtCorange(form, id);

if (TryValidateModel((CANDIDATS_NDF)newObject))

{

context.CANDIDATS_NDF.Add(((CANDIDATS_NDF)newObject));

context.SaveChanges();

}

model = new GridModel(CANDIDATS.getCandidatByID(id, context).getHistoNdf());

break;

case "primes":

newObject = PRIMES.FormCollectionToHistoMtCorange(form, id);

if (TryValidateModel((PRIMES)newObject))

{

context.PRIMES.Add(((PRIMES)newObject));

context.SaveChanges();

}

model = new GridModel(CANDIDATS.getCandidatByID(id, context).getHistoPrime());

break;

}

return View(model);

//Create a new instance of the EditableProduct class.

//EditableProduct product = new EditableProduct();

//Perform model binding (fill the product properties and validate it).

//if (TryUpdateModel(product))

//{

// //The model is valid - insert the product.

// SessionProductRepository.Insert(product);

//}

////Rebind the grid

//return View(new GridModel(SessionProductRepository.All()));

}

//[AcceptVerbs(HttpVerbs.Post)]

//[GridAction]

//public ActionResult _DeleteAjaxEditing(int id)

//{

// //Find a customer with ProductID equal to the id action parameter

// EditableProduct product = SessionProductRepository.One(p => p.ProductID == id);

// if (product != null)

// {

// //Delete the record

// SessionProductRepository.Delete(product);

// }

// //Rebind the grid

// return View(new GridModel(SessionProductRepository.All()));

//}

}

Layout:

<!DOCTYPE html>

<html>

<head>

<title>Outil RH </title>

<meta http-equiv="X-UA-Compatible" content="IE=100" />

<meta http-equiv="Content-Type" content="text/html; CHARSET=UTF-8 " />

<link href="@Url.Content("../../Content/jquery.contextMenu.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("../../Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("../../Content/StyleGridView.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("../../Content/StyleRH.css")" rel="stylesheet" type="text/css" />

<script src="@Url.Content("../../Scripts/jquery-1.7.2.min.js")"></script>

@* <script src="@Url.Content("../../Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>*@

<script src="@Url.Content("../../Scripts/jquery.ui.core.js")" type="text/javascript"></script>

<script src="../../Scripts/jquery.ui.widget.js"></script>

<script src="@Url.Content("../../Scripts/jquery.ui.tabs.js")" type="text/javascript"></script>

<script src="@Url.Content("../../Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>

<script src="@Url.Content("../../Scripts/jquery.editable-1.3.3.js")" type="text/javascript"></script>

<script src="@Url.Content("../../Scripts/Script.js")" type="text/javascript"></script>

<script src="@Url.Content("../../Scripts/jquery.contextMenu.js")" type="text/javascript"></script>

<script src="@Url.Content("../../Scripts/jquery.validate.min.js")" type="text/javascript"></script>

<script src="@Url.Content("../../Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

<script src="@Url.Content("../../Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

<link href="@Url.Content("../../Content/2013.2.611/telerik.common.min.css")" rel="stylesheet" />

<link href="@Url.Content("../../Content/2013.2.611/telerik.vista.min.css")" rel="stylesheet" />

<link href="@Url.Content("../../Content/2013.2.611/telerik.rtl.min.css")" rel="stylesheet" />

<script type="text/javascript">

$(document).ready(function () {

if (window.location.search.length == 0) {

if ($("#All_Candidats").val() < 1)

$(".MenuInfo").hide("fast", function () { $(".MenuInfo").css("height", "0"); });

}

});

</script>

<base target="_self" />

</head>

<body>

<div id="Contenu">

@Html.Partial("header")

@RenderBody()

<div id="footer">

</div>

</body>

</html>

TabStrip

asked on 30 Oct 2013

5 answers

100 views

Drag-drop from TreeView

Hi,

I would like to drag an item from a RadtreeView and drop in on the RadScheduler.
How can I detect this on the server-side?

Which other server-side events can I use if I want to:
Edit, move, copy and delete an item?

Thanks,
Egbert

Scheduler

answered on 30 Oct 2013