Questions on UI for ASP.NET AJAX Forum

2 answers

216 views

[Solved] RadTab sometimes not associated with the correct PageView when closing tabs client side

Hello,

I'm noticing some unexpected behavior when closing and selecting a tab using the client side javascript. First, here's the code for my page:

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

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

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

</head>

<body>

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

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

//Put your JavaScript code here.

//This will hold a counter which will help us create unique IDs for elements

var uniquePgVwIDCounter = 0;

function addtab() {

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

var multiPage1 = $find("<%= mainPageMultiPageCtrl.ClientID %>");

var tab = new Telerik.Web.UI.RadTab();

//Get the count of tabs so that we can use it as part of the tab name.

//Since we haven't added the new tab yet, we need to add one to the

//current tab count.

tab.set_text("Root RadTab" + (tabStrip1.get_tabs().get_count() + 1));

//Add the tab to the tab strip.

tabStrip1.get_tabs().add(tab);

//Stash the paths for the icons here so we can reuse them.

var blackCloseBtnPath = "<%= Page.ResolveUrl("~/images/Close.gif") %>";

var redCloseBtnPath = "<%= Page.ResolveUrl("~/images/Red-X-with-box.gif") %>";

//Store a reference to the jQuery object so that we can use it below.

var jTabElm = $(tab.get_innerWrapElement());

//Create a close button element. Attach a hover function to change the close

//icon on mouseover and mouseout and attach a click function to handle the

//closing of the tab.

var closeBtn = $("<img alt=\"Close this tab\" src=" + blackCloseBtnPath + " />")

.hover(

function() {

$(this).attr("src", redCloseBtnPath);

},

function() {

$(this).attr("src", blackCloseBtnPath);

}

).click(

function(e){

//Use the closure of this function to capture the

//reference to the newly created tab so that we can

//work with it easily below.

//Grab a reference to the tab that should be selected

//after this one is closed.

var tabToSelect = tab.get_nextTab();

if (!tabToSelect){

tabToSelect = tab.get_previousTab();

}

//Grab a reference to the tab's PageView so that we can

//remove it below.

var pvToRemove = tab.get_pageView();

//Remove the tab

tabStrip1.get_tabs().remove(tab);

//Select the next tab

if (tabToSelect){

tabToSelect.select();

}

//Remove the tab's PageView

multiPage1.get_pageViews().remove(pvToRemove);

//Cancel the event bubbling.

if(e){

e.cancelBubble = true;

if(e.stopPropagation){

e.stopPropagation();

}

).appendTo(jTabElm);

//Create a new PageView for this tab to hold its content.

var pageView = new Telerik.Web.UI.RadPageView();

multiPage1.get_pageViews().add(pageView);

//Check to see if this page view's ID exists yet. If it does,

//increment our unique ID counter and try again.

var newPageViewID = tab.get_text() + "_" + uniquePgVwIDCounter;

while(multiPage1.findPageViewByID(newPageViewID)){

uniquePgVwIDCounter++;

newPageViewID = tab.get_text() + "_" + uniquePgVwIDCounter;

}

pageView.set_id(newPageViewID);

pageView.get_element().innerHTML = "<iframe src=\"Content_1.aspx\" frameborder=\"0\"></iframe>";

//Associate the new PageView with the new tab.

tab.set_pageViewID(pageView.get_id());

//Select the tab since we just opened it

tab.select();

//Increment our unique ID counter

uniquePgVwIDCounter++;

}

</script>

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

</telerik:RadAjaxManager>

<div>

<telerik:RadMenu ID="topRadMenu" runat="server" ResolvedRenderMode="Classic">

<Items>

<telerik:RadMenuItem runat="server" Text="Root RadMenuItem1">

<Items>

<telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Root RadMenuItem2">

<Items>

<telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Root RadMenuItem3">

<Items>

<telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Root RadMenuItem4">

<Items>

<telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

<div>

<telerik:RadTabStrip ID="mainTabStrip" runat="server"

MultiPageID="mainPageMultiPageCtrl">

<Tabs>

<telerik:RadTab runat="server" Selected="true" Text="Root RadTab1"

PageViewID="mainTabPageView"></telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="mainPageMultiPageCtrl" runat="server"

SelectedIndex="0" Width="100%">

<telerik:RadPageView ID="mainTabPageView" runat="server" Height="100%">

<iframe src="Main.aspx" class="KRFrame" frameborder="0"></iframe>

</telerik:RadPageView>

</telerik:RadMultiPage>

<input id="Button1" type="button" value="Add Tab" onclick="addtab()" />

<input id="SubmitBtn" type="submit" value="Submit" />

</div>

</form>

</body>

</html>

This produces a page that looks somewhat like image1.png after adding some tabs. Note, in the code behind of the Content_1.aspx page, I just have static text and a label populated by DateTime.Now.

The strange thing that's happening is when I close a tab that's not the selected tab, the PageView doesn't always get hidden correctly. Other times it does. For example, looking at image1.png, let's say that I've got Root RadTab5 selected and I close Root RadTab2. Root RadTab3 will correctly get selected but, if I then select Root RadTab5 with the mouse, it will have Root RadTab3's PageView as well as its own. This is illustrated in image2.png which shows Root RadTab3 after closing Root RadTab2 and then image3.png which shows Root RadTab5 after selecting it with the mouse.

This is happening because the PageView isn't getting its css classes changed properly as can be seen in image4.png.

If I then click Root RadTab3 and then click back on Root RadTab5, everything seems to get back "in sync" and the PageViews display correctly again, as can be seen in image5.png.

I've been trying all sorts of things to get this resolved. For instance, I've tried hiding the PageView, unselecting it, etc. but none of those resolve the problem. The only thing that fixes the problem is not removing the page view and just leaving it in the RadMultiPage. Because I'm manually assigning PageViewIDs to tabs, those PageViews never display again but they continue to build up in the HTML.

Oh, one other weird thing is that this problem only seems to happen when I am on a tab and close a tab 2 or more in front of it (or when selected index is n and the closed tab index is < n-3). For example, Let's say I have tabs 1, 2, 3, 4, and 5 open. If I am on tab 5 (at index n = 4) and I close tab 2 (at index n-3 = 1), the problem happens. On the other hand, if I'm on tab 5 (at index n = 4) and I close tab 3 (at index n-2 = 2), no problem occurs. Alternatively, let's say I have tabs 1, 2, 3, 4, 5, and 6 open. If I am on tab 6 (at index n = 5) and I close either tab 2 (at index n-4 = 1) or tab 3 (and index n-3 = 2), the problem occurs. If I close tab 4 (at index n-2 = 2), no problem.

Am I doing something wrong or is this a weird bug? I've been trying to get this figured out but I just can't seem to crack this. Any help would be much appreciated.

Regards,
John

TabStrip

answered on 19 Jan 2016

1 answer

91 views

CustomText Not Working If Listing Item is Selected

I have a ComboBox control on a page that displays a list of cities:

<telerik:RadComboBox ID="radHomeCity" EnableLoadOnDemand="true" MarkFirstMatch="true" AllowCustomText="true" TabIndex="135" runat="server">
<WebServiceSettings Path="~/webservices/contact.asmx" Method="GetCities" />
</telerik:RadComboBox>

Within the combo box is a city called Maynard. The problem is when someone wants to enter a city called May, Maynard is selected. Do you all have any ideas on what to do?

ComboBox

answered on 18 Jan 2016

3 answers

80 views

RadScehduler After Ajax Postabck

Iam using Telerik RadScheduler,I Added other types of appointments like activities,serviceCalls...
Appointments Such as Activites and ServiceCalls are opened in an Add Edit Popup,so when i am closing the add edit
popup am doing an ajax postback inorder to refresh the radscheduler.After This ajax Postback i am not able anymore to
delete my activities and serviceCalls with a Confirmation Message and i get a javascript error(TypeError: $telerik.$.modal is not a function)

Scheduler

answered on 18 Jan 2016

11 answers

2.9K+ views

Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength

Hi,
I am using Grid - Virtualization. But when I try to load huge data getting an error "Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property." where as also I am using "OnNeedDataSource"

I have app.21K rows and 135+ columns.
As per my requirement I need to create Grid columns at run time as don't know how many columns and rows we be there as query output.
I have also used below code in my config file but don't get any success
<system.web.extensions>
<scripting>
<webServices>
<jsonSerialization maxJsonLength="2147483647" />
</webServices>
</scripting>
</system.web.extensions>

Attaching source code files.
Can any body help me out in this.
Thanks

Grid

answered on 18 Jan 2016

3 answers

71 views

"Check Spelling" Text Not Localized

Hey..

When I'm using the localization feature of RadEditor, almost all the things are getting localized or there are fields in the resource files to change their value for particular language. But "Check Spelling" Text is not getting localized, and there is also no field mentioned for it in the Resource files. Please provide me the solution for this as it is very important for us.

Thanks in advance,

Editor

answered on 18 Jan 2016

1 answer

147 views

Error using Stored Procedure as source which contains a left or substring command

Hi,
I'm using for the Grid a stored Procedure with a parameter as the source.
This stored Procedure works fine. but when i open the "configuration wizard" and i insert the value in context window "Refresh data source schema" i'm getting the error "unable to receive schema. ensure that the Connection string and Selectcommand property are valid. invalid length parameter passed to the LEFT or SUBSTRING function"
When i run the page it woks fine! in case that i need to configure a hierarchical grid i like to open the wizard where i get the error :-(
this is my code:

aspx page:
***********************************************
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

<div>
</div>
<div class="demo-container no-bg">
</div>
<div id="AlertDIV" runat="server" class="AlertBOX">
<table>
<tr>
<td>
<asp:SqlDataSource ID="mnv" runat="server" ConnectionString="<%$ ConnectionStrings:connBTDashboard %>" SelectCommand="sp_Playground" SelectCommandType="StoredProcedure">
<SelectParameters>
<asp:Parameter DefaultValue="1" Name="dfg" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="mnv" GroupPanelPosition="Top">
<GroupingSettings CollapseAllTooltip="Collapse all groups"></GroupingSettings>
<MasterTableView DataSourceID="mnv">
</MasterTableView>
</telerik:RadGrid>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
***********************************************
ALTER proc [dbo].[sp_Playground]
@dfg int
as

Declare @Cols varchar(max)= ''

DECLARE @SQL varchar(max)

select @Cols += '['+ [col_Name]+'],'from [dbo].[tbl_Conf_MultiNAV] where col_Group = @dfg

Set @COLS = left(@COLS,len(@COLS)-1)

select @Cols as Value

--********************************
--call of SP in Management Studio => works fine
--********************************
exec [sp_Playground] 1

as a remark ... this code in my test to rebuild this error i have in another project ;-)

i'm using .net 4.0 and UI Version 2015.3.1111.40

does anybody had that problem already ?

thanks a lot
cheers
Dennis

Grid

answered on 18 Jan 2016

1 answer

175 views

Need OnClientTabSelected to Fire even when already selected

Hi,

I have a tabstrip with 2 levels of tabs - the main/root tabs and child tabs.

All tabs are dynamically built at runtime using client side code and web service calls.

See the attached screenshot for an example.

When the user clicks on the main tab, an associated diagram is displayed.

When the user clicks on a child tab, a sub-diagram is displayed.

This all works fine.

However, if a child tab has been selected (causing a sub-diagram to be displayed) and the user wants to go back to the main diagram, if they click on the main tab at this point no event is raised (since the main tab is already selected).

Is there anyway to force an event (preferably OnClientTabSelected) when the user clicks on an already selected main tab?

My thanks in advance for any advice.

Jim

TabStrip

answered on 18 Jan 2016

9 answers

177 views

AccessKey and IE11

I have recently updated my browser to IE 11 and I have the latest version of the AJAX controls. It appears that your keyboard support for TabStrip no longer works in IE 11. I went to your demo and it appears not to work there either. http://demos.telerik.com/aspnet-ajax/tabstrip/examples/functionality/keyboardsupport/defaultcs.aspx

Thank you for looking into this.

John

TabStrip

answered on 18 Jan 2016

1 answer

80 views

show content

Hi,

How can i display content only on selected ending item(when item has no other sub items) and how can i check this WITHOUT postback at each selected node? Thanks!

TreeView

answered on 18 Jan 2016

10 answers

355 views

[Solved] Fire a pop up from displayed image

Hi

I'm using the image gallery as per this example http://demos.telerik.com/aspnet-ajax/image-gallery/examples/overview/defaultcs.aspx

i.e. no thumbnails just shows an image with the Prev / Next buttons.

What I want to do is on click the image is open the image in a pop up window - I want to use this lightbox control http://lokeshdhakar.com/projects/lightbox2/

How would I attach the mark-up to the displayed image in image gallery.

This is the mark-up required by the control:

OR can you do what I need to do with your controls.

Andy

ImageGallery