Questions on UI for ASP.NET AJAX Forum

2 answers

216 views

Scrolling prevents selection of list items

I have a radwindow, inside of which is a div with overflow-y:scroll. Inside the div is a radlistbox. The idea is to allow
scrolling to the bottom of the sometimes long list of items to be checked and unchecked in the listbox. Upon page load if
you don’t scroll the listbox, the checkboxes work and I am able to check and uncheck items in the list. However, if I
scroll, to view more items, I cannot check any checkboxes because the radlistbox first scrolls to the top, and then ignores
the click attempt. I have tried autopostback=false, and causesvalidation=false with no success. How do I work around this?

NOTE: This “feature” only exists in IE. In Firefox, I can check and uncheck regardless of the position of the scroll.

There was another post about this a year ago, but it was never properly addressed:
http://www.telerik.com/forums/list-box-scrolling-to-top-when-checkbox=true

(IIS 7.5, Windows Server 2012, VS 2012, C#, ASP.NET, Telerik runtime version 4.0.30319, IE11, Firefox 45.0)

ListBox

answered on 22 Mar 2016

5 answers

65 views

Upgraded Scheduler - Day # not showing in MonthView

I'm new to Telerik controls. I've inherited an ASP.NET project and downloaded the latest controls last week, and went through the upgrade wizard in Visual Studio 2015 (the previous developer had used a 2013 version).

Just about everything works on my development computer as it works on our production site, but one thing that got broken is that in the Month View I no longer see the Day # in the left corner of each box (i.e. today is March 16, so I would expect to see "16" as link to that day).

Here's the MonthView tag on the .aspx page:

Besides the ShowDateHeaders setting, where else might I have to look for rendering the day number?

Scheduler

answered on 22 Mar 2016

0 answers

235 views

Styling changes in MetroTouch skin in Lightweight RenderMode for RadPanelBar, introduced with Q1 2016.1.225 SP1 release

Along with our long-term vision to achieve visual consistency among the build-in skins of our controls, the MetroTouch skin for RadPanelBar in Lightweight RenderMode has been improved with the Q1 2016.1.225 SP1 release.

The changes implemented are as follows:

The foreground color of the items has been changed to darker gray;
The padding of items has been changed;
The indent of items has been changed;
Additional animated selection of items has been added, using CSS rules;

In addition to the above, the predefined font for almost all skins has been removed.

In some cases, these changes could result in undesired change of look and feel of the RadPanelBar. In order to revert back the styling of the control to its MetroTouch look from before the Q1 2016.1.225 SP1 release, one could apply the following CSS rules:

html .RadPanelBar_MetroTouch {

color: #767676;

font-size: 16px;

}

html .RadPanelBar_MetroTouch .rpLink {

padding: 0 16px;

}

html .RadPanelBar_MetroTouch .rpGroup .rpLink {

padding-top: 4px;

padding-bottom: 4px;

border: 1px solid transparent;

}

html .RadPanelBar_MetroTouch .rpRootLink {

color: inherit;

padding-top: 5px;

padding-bottom: 4px;

font-size: 1.375em;

line-height: 2em;

}

html .RadPanelBar_MetroTouch .rpLevel1 .rpLink {

line-height: 1.25em;

}

html .RadPanelBar .rpLevel2 .rpLink {

padding-left: 2em;

}

html .RadPanelBar .rpLevel3 .rpLink {

padding-left: 3em;

}

html .RadPanelBar_MetroTouch .rpLink .rpHovered {

background-color: transparent;

border-color: transparent;

}

Styling changes in Metro and MetroTouch skins in Lightweight RenderMode for RadMenu, introduced with Q1 2016.1.225 SP1 release

PanelBar

asked on 22 Mar 2016

2 answers

228 views

Problem with dynamically added controls, postback and AJAX

I have a page for which the ASPX consists of an empty RadMultiPage, plus a RadAjaxManager. The RadMultiPage has a PageViewCreated handler, and the form has an asp:Timer which fires every 15 seconds to provide an auto-refresh. The RadAjaxManager has ajax settings for the Timer object to update a label, a hidden field and the RadMultiPage.

In the Page_Load, within if (!IsPostBack) {}, I create a new RadTab + RadPageView for each page of my display. In turn, when the page loads, all of the controls within each page are generated via C# code based on database information. The controls include replicated blocks, and in each block there are a pair of ImageButtons (Plus, Minus) which are to update a value within the block.

When I create each of the two ImageButtons and the associated Label which contains the affected value, I add a handler into my code-behind, and I use RadAjaxManagerForm.AjaxSettings.AddAjaxSetting(<ImageButton>,<Label>). I also save an Attribute to each button with the ID of the Label control so I can find it in the button Handler.

The handler used an Attribute on the 'sender' (ImageButton) to find the ID of the associated Label to be updated, and I tried two ways -- to save the Label control in a Dictionary<string,Label> in the PageViewCreated handler, and by using sender.Parent.Parent, etc to navigate through the tree to find the Label. Both had the same result.

So, this sort of works for me, I can load the page, and I can click the plus/minus buttons and see the value change in the control associated with the buttons. After a full page refresh, I can click Plus/Minus button and see a result in the Label. I also see my value updated in the database, so it's functioned correclty so far.

The weird part is that when the page auto-refreshes. all of the control blocks *except* the one I used Plus/Minus buttons on -- are updated to the value from the DB. If I change all values, then they all reflect the new values except the one I clicked on. If I then do a full page refresh, all values update correctly, and after that, will reflect the values from the DB normally.

So it appears that by finding the Label control in my button handler and updating it's Text, this control is now somehow locked into the ajax responses as some floating object and the underlying PageCreated handler doesn't seem to affect what the browser shows for that control. If I *don't* update the Label in my button handler but instead wait for the page refresh, the Label will update from the database as I'd like -- but the user is confused because it takes as long as 15 seconds for the change to show.

So, what am I doing wrong here? I could try to create a stand-alone sample but it might take hours to extract, so first I'm hoping someone sees my error outright.

Ajax

answered on 22 Mar 2016

1 answer

124 views

Responsive page layout for Schuler

Hi

I have seen the responsive nature of the Scheduler control and it seems to behave exactly how I want it.

My design however needs some responsive behaviour around the interface.

I want to have a calendar control on the left to select a date for the scheduler, and a top menu bar.

What needs to happen is my menu bar collapse to 'Hamburgers' and the left handed calendar control collapse to its icon.

Is this approach possible with the page layout controls.

Andy

PageLayout

answered on 22 Mar 2016

1 answer

168 views

ListView Filtering Always Returns No results

I have not been able to figure out why I am not getting the filter results I am expecting. In fact I always get no results.

When the page first loads all the data is displayed as expected.

When I enter as search query and click the Search button the RadListView control refreshes with no results. I see the spinner so I know it posted back via AJAX.

I debug the C# code and I can confirm that the search query value is passed to the BuildExpression for the filter. No errors or exceptions are thrown.

If I submit an empty query it should just Clear the Filter and all results should show, but that does not happen.

The datasource is a List<DeviceSearchResult>.

Any ideas?

Here is my markup:

<asp:Panel ID="pnlSearchView" runat="server" Visible="True">

<h1>Search View</h1>

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="txtDeviceSearchQuerySubmit">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="lvDeviceSearchResults" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<asp:TextBox ID="txtDeviceSearchQuery" runat="server"></asp:TextBox>

<asp:Button ID="txtDeviceSearchQuerySubmit" runat="server" OnClick="txtDeviceSearchQuerySubmit_OnClick" Text="SEARCH"/>

<telerik:RadListView ID="lvDeviceSearchResults" RenderMode="Lightweight" runat="server"

OnNeedDataSource="lvDeviceSearchResults_NeedDataSource"

ItemPlaceholderID="phDeviceSearchResult">

<LayoutTemplate>

<asp:PlaceHolder ID="phDeviceSearchResult" runat="server"></asp:PlaceHolder>

</LayoutTemplate>

<ItemTemplate>

<%# ShowGroupRow(Eval("DeviceManufacturer").ToString())=="yes"

? "<div class=\"manufacturer\"><strong>"+Eval("DeviceManufacturer")+"</strong></div>"

: "" %>

<div>- <%# Eval("DeviceName") %> | <%# Eval("DevicePackage") %> | <%# Eval("DevicePin") %></div>

<asp:ListView ID="lvDeviceSearchResultAdapters" runat="server" ItemPlaceholderID="phDeviceSearchResultAdapters" DataSource='<%# Eval("DeviceAdapters") %>'>

<LayoutTemplate>

<ul><asp:PlaceHolder ID="phDeviceSearchResultAdapters" runat="server"/></ul>

</LayoutTemplate>

<ItemTemplate>

<li><%# Container.DataItem.ToString() %></li>

</ItemTemplate>

</asp:ListView>

</ItemTemplate>

</telerik:RadListView>

</asp:Panel>

Here is my C#:

protected void lvDeviceSearchResults_NeedDataSource(object sender, RadListViewNeedDataSourceEventArgs e)

{

lvDeviceSearchResults.DataSource = TempDeviceSearchResults.OrderBy(d => d.DeviceManufacturer).ThenBy(d =>d.DeviceName);

}

protected void txtDeviceSearchQuerySubmit_OnClick(object sender, EventArgs e)

{

lvDeviceSearchResults.FilterExpressions.Clear();

var query = txtDeviceSearchQuery.Text.Trim();

if (!string.IsNullOrEmpty(query))

{

lvDeviceSearchResults.FilterExpressions.BuildExpression(ex => ex

.Contains("DeviceName", query)

);

}

lvDeviceSearchResults.Rebind();

}

ListView

answered on 22 Mar 2016

14 answers

204 views

[Solved] SelectedDate returns null

Hi,

after the last update (2013.1.403.40) we noticed a changed behaviour on the RadDateTimePicker component. If the user does not tab out from the component or goes to another input field before he does a callback the SelectedDate is null.

I'm pasting in a test project

Best regards

Robert

ASPX

<%@ 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>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<%--For VS2008 replace RadScriptManager with ScriptManager--%>

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

</script>

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

</telerik:RadAjaxManager>

<div>

Instructions. Change time of the RadDateTimePicker component and press the TEST button.

</div>

<div>

<telerik:RadDateTimePicker ID="rdtpTimeStamp" runat="server">

</telerik:RadDateTimePicker>

<hr />

<telerik:RadTabStrip ID="tsFunctionMenu" runat="server" OnTabClick="tsFunctionMenu_TabClick"

SkinID="FunctionMenuSkin">

</telerik:RadTabStrip>

<hr />

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

<hr />

</div>

</form>

</body>

</html>

CS

using System;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Configuration;

using System.Web.Security;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using Telerik.Web.UI;

public partial class Default : System.Web.UI.Page

{

protected void Page_Init(object sender, EventArgs e)

{

RadTab tab = new RadTab("TEST", "TEST");

tsFunctionMenu.Tabs.Add(tab);

}

protected void Page_Load(object sender, EventArgs e)

{

Add("<hr>");

Add("Page_Load");

Add(String.Format("Date: {0}", rdtpTimeStamp.SelectedDate));

if (!IsPostBack)

{

rdtpTimeStamp.SelectedDate = DateTime.Now;

}

protected void tsFunctionMenu_TabClick(object sender, RadTabStripEventArgs e)

{

RadTabStrip ts = (RadTabStrip)sender;

ts.SelectedIndex = -1;

string cmd = e.Tab.Value;

Add(String.Format("TabClick: {0}", cmd));

}

protected void Add(string text)

{

Label1.Text += "<br>" + text;

}

protected void Add(string text, object o)

{

Add(String.Format(text, o));

}

Calendar

answered on 22 Mar 2016

2 answers

191 views

Why Itemdatabound firing twice in radgrid using vb.net

Hi telerik,

Strucked in getting resoluation, itemdatabound in radgrid firing twice in vb.net.

Thanks,

Lokesh

Grid

answered on 22 Mar 2016

8 answers

481 views

Pivot grid Row Field Width

Hi,
In my Pivot table i want to set the width for each column of row Filed.

I set the column width like this.

<telerik:PivotGridRowField DataField="Maintype" Caption="" CellStyle-Width="60px" >

</telerik:PivotGridRowField>

<telerik:PivotGridRowField DataField="subtype" Caption="" CellStyle-Width="60px" >

</telerik:PivotGridRowField>

<telerik:PivotGridRowField DataField="Listtype" Caption="" CellStyle-Width="110px" >

</telerik:PivotGridRowField>

but i found some stange result as the width for each column is in irregular form.
means first column width set to second column and last column with is not changing
Please check the attached image for details.

I dont want to use the RowHeaderCellStyle widh ,because this will set the same width for all the row field column.

I want to set the Individual column width of rowfield.

PivotGrid

answered on 22 Mar 2016

1 answer

195 views

Change column order for columns created in design

Hi,

I'm interested in changing the order of the columns at runt-time for columns created in design-view. I have tried in Grid_PreRender but it doesn't work

Also, is it possible mix dynamically created columns with columns created in design?

Thanks,

catalin

Grid

answered on 22 Mar 2016