Questions on UI for ASP.NET AJAX Forum

2 answers

285 views

Iterate through expanded grid groups only?

I am working with a grid that utilizes about 3 levels of nested grouping. On page load, some of the grid groups are expanded or contracted based on criteria. I am interested in iterating through the grid and only grabbing a collection of rows that are currently visible due to the groups that are currently expanded. Is this possible?

Grid

answered on 09 Jan 2013

1 answer

160 views

Remove -webkit-scrollbar-button:horizontal:decrement

Hi

I want to remove all style -webkit-scrollbar-button:horizontal:decrement from base style sheet.

I am really angry with the scrollbar style.

Because these css are too bad. How can I do this? Or can I build a dll myself? Please let me know.

Thanks.

FormDecorator

answered on 09 Jan 2013

1 answer

288 views

Close radwindows with button without postback

Hi guys,
i've created this radwinodw on my webpage:

<telerik:RadWindow ID="RadWindowChangepwd" runat="server" ShowContentDuringLoad="false" Width="360px"

Height="220px" Title="Cambio password" Behaviors="None" Modal="True" Behavior="None"

Font-Names="Verdana" Font-Size="Small" IconUrl="/image/iconlogo.png" VisibleStatusbar="False"

Skin="Simple" ReloadOnShow="True">

<ContentTemplate>

<div class="Divchangepwd">

<div class="Divchangepwd1">

<telerik:RadAjaxPanel ID="RadAjaxPanelpwd" runat="server">

<table style="width:100%;">

<tr>

<td colspan="2" style="padding-left: 10px; padding-top: 10px">

<telerik:RadTextBox ID="Txtpwdnow" Runat="server" Label=" Password attuale:"

LabelWidth="110px" MaxLength="20" TextMode="Password" Width="300px">

</telerik:RadTextBox>

</td>

</tr>

<tr>

<td colspan="2" style="padding-left: 10px">

<telerik:RadTextBox ID="Txtpwdnew" Runat="server" Label="Nuova password:"

LabelWidth="110px" MaxLength="20" TextMode="Password" Width="300px">

</telerik:RadTextBox>

</td>

</tr>

<tr>

<td colspan="2" style="padding-left: 10px">

<telerik:RadTextBox ID="Txtpwdnewconf" Runat="server"

Label="Conferma password:" LabelWidth="110px" MaxLength="20"

TextMode="Password" Width="300px" AutoPostBack="False">

</telerik:RadTextBox>

</td>

</tr>

<tr>

<td colspan="2" style="padding-left: 10px; padding-top:15px">

</td>

</tr>

<tr>

<td align="center">

<asp:ImageButton ID="Imgbtnconfermapwd" runat="server" ImageUrl="~/Image/conferma.png" OnClientClick="return CallNotification()" />

</td>

<td align="center">

<asp:ImageButton ID="ImgBtnClosepwd" runat="server" ImageUrl="~/Image/esci1.png" />

</td>

</tr>

</table>

</telerik:RadAjaxPanel>

</div>

</ContentTemplate>

</telerik:RadWindow>

when i press the imagebutton "imgBtnclosepwd" star the postback. Is possibile with javascript code close the radwindows without postback? I usede this code too but there's erro when close radwindow:

function GetRadWindow() {

var oWindow = null;

if (window.radWindow) oWindow = window.radWindow;

else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;

return oWindow;

}

function Close() {

GetRadWindow().close();

}

Bye

Window

answered on 09 Jan 2013

1 answer

70 views

Radwindow Minimize Issue

When the minimize button is clicked, the title bar is getting visible on the top of the active window...Is there any solution to hide title bar?
(See attachment).

Window

answered on 09 Jan 2013

1 answer

61 views

Telerik Rad Window Position in IE10

Telerik Rad window is not display in the center of the screen in Internet Explore10 what the solution pleause help me out....

Window

answered on 09 Jan 2013

1 answer

203 views

ListView and RadDatapager not working

My Listview and RadDatapager is not working. I am doing development in sitefinity. It is a Control (ASCX Page)
Searching for events. Search is working fine. I am stuck on two things, Datapager and the first result is always expanded in Radlistview.

I am showing my results using this example
http://demos.telerik.com/aspnet-ajax/listview/examples/appearancestyling/customlayouts/defaultcs.aspx

I implemented the telerik:RadDataPager. The Pager works fine for the first set of records. When i click NEXT no records are displayed and the RadDataPager also disappears. I tried to Rebind the Listview in PreRender but still it is not working.

My second question is When ever the results come back the first result is always expanded. Which i don't want. I know you can control this in RadGrid with the Expandable column(RadGrid.ExpandCollapseCommandName).
I am not able to do it in Radlistview.

Here is my Code

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Events.ascx.cs" Inherits="SitefinityWebApp.UserControls.Events" %>

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

<head>

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

<script type="text/javascript">

function pageLoad(sender, args) {

var productsTable = $get("products");

var firstRow;

if (productsTable.tBodies) {

firstRow = productsTable.tBodies[0].rows[0];

}

else {

firstRow = productsTable.rows[0];

}

var expandImg = firstRow.cells[0].getElementsByTagName("IMG")[0];

if (expandImg.src.indexOf("Plus") > -1) {

toggleOrderDetails(expandImg);

}

function toggleOrderDetails(sender) {

var thisRow = sender.parentNode.parentNode;

var nextRow = getNextRowSibling(thisRow);

if (nextRow && nextRow.className == "orders") {

if (nextRow.style.display == "none") {

nextRow.style.display = "";

sender.src = sender.src.replace("Plus", "Minus");

thisRow.className = "expanded";

}

else {

nextRow.style.display = "none";

sender.src = sender.src.replace("Minus", "Plus");

thisRow.className = "";

}

function getNextRowSibling(row) {

var ret = row;

do {

ret = ret.nextSibling;

} while (ret && ret.tagName != "TR");

return ret;

}

</script>

</telerik:RadCodeBlock>

<style type="text/css">

.wrapper

{

width: 608px;

border: 1px solid #5D8CC9;

font-family: "segoe ui" ,arial,sans-serif;

font-size: 12px;

line-height: 16px;

}

.products

{

empty-cells: show;

table-layout: fixed;

border-collapse: collapse;

width: 100%;

}

.products th

{

background-color: #C3D8F1;

padding: 5px;

border-bottom: 1px solid #5D8CC9;

color: #00156E;

text-align: left;

width: 130px;

}

.products td

{

border: 1px solid #D0D7E5;

border-style: none none solid none;

padding: 4px 7px 3px 7px;

}

.products th.expand, .products td.expand

{

width: 20px;

padding: 0 0 0 3px;

}

.products tr td.expand

{

border-color: #ECF4FF;

}

.products tr.expanded td, .orders td.expand

{

background-color: #ECF4FF;

}

.products tr td.expand img

{

cursor: pointer;

}

.orders td

{

padding: 0;

width: auto;

}

.orders table

{

table-layout: fixed;

border-collapse: collapse;

width: 100%;

}

.orders table td

{

width: 130px;

padding: 4px 7px 3px 7px;

padding: 3px 3px 3px 7px;

}

.orders table tr:last-child td

{

border-bottom: none;

}

</style>

</head>

<body>

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

<telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All"

EnableRoundedCorners="false" />

<div style="width: 610px;">

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

<AjaxSettings>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Black">

</telerik:RadAjaxLoadingPanel>

<div>

<table>

<tr>

<td>

Location

</td>

<td>

Event Type

</td>

<td>

Start Date

</td>

<td>

End Date

</td>

</tr>

<tr>

<td>

<telerik:RadListBox ID="citySelector" runat="server">

</telerik:RadListBox>

</td>

<td>

<telerik:RadListBox ID="tagSelector" runat="server">

</telerik:RadListBox>

</td>

<td>

<telerik:RadDatePicker ID="RadDatePicker1" runat="server">

<Calendar ID="Calendar1" runat="server" EnableKeyboardNavigation="true">

</Calendar>

<DateInput ID="DateInput2" ToolTip="Date input" runat="server">

</DateInput>

</telerik:RadDatePicker>

</td>

<td>

<telerik:RadDatePicker ID="RadDatePicker2" runat="server">

<Calendar ID="Calendar2" runat="server" EnableKeyboardNavigation="true" />

<DateInput ID="DateInput1" ToolTip="Date input" runat="server" />

</telerik:RadDatePicker>

<telerik:RadButton ID="Submit" runat="server" Text="Search" OnClick="Submit_Click" />

</td>

</tr>

</table>

<br />

<telerik:RadListView ID="RadListView1" runat="server" ItemPlaceholderID="ProductTitlePlaceHolder" OnPreRender="Pager_Pre" OnPagePropertiesChanging="listItems_PagePropertiesChanging"

AllowPaging="True">

<LayoutTemplate>

<fieldset style="width: 900px">

<legend>Events</legend>

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

</fieldset>

<asp:Panel ID="HierarchyPanel" runat="server" CssClass="wrapper">

<table id="products" class="products">

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr id="ProductTitlePlaceHolder" runat="server">

</tr>

</tbody>

</table>

</asp:Panel>

<table cellpadding="0" cellspacing="0" width="100%;" style="clear: both;">

<tr>

<td>

<telerik:RadDataPager ID="RadDataPager1" runat="server" PagedControlID="RadListView1" OnPreRender="Pager_Pre"

PageSize="2" Visible='<%# Container.PageCount != 1%>'>

<Fields>

<telerik:RadDataPagerButtonField FieldType="FirstPrev" />

<telerik:RadDataPagerButtonField FieldType="Numeric" PageButtonCount="5" />

<telerik:RadDataPagerButtonField FieldType="NextLast" />

<telerik:RadDataPagerTemplatePageField>

<PagerTemplate>

<div style="float: right">

<b>Items

<asp:Label runat="server" ID="CurrentPageLabel" Text="<%# Container.Owner.StartRowIndex+1%>" />

to

<asp:Label runat="server" ID="TotalPagesLabel"

Text="<%# Container.Owner.TotalRowCount > (Container.Owner.StartRowIndex+Container.Owner.PageSize) ? Container.Owner.StartRowIndex+Container.Owner.PageSize : Container.Owner.TotalRowCount %>" />

of

<asp:Label runat="server" ID="TotalItemsLabel" Text="<%# Container.Owner.TotalRowCount%>" />

<br />

</b>

</div>

</PagerTemplate>

</telerik:RadDataPagerTemplatePageField>

</Fields>

</telerik:RadDataPager><br /><br />

</td>

</tr>

</table>

</LayoutTemplate>

<ItemTemplate>

<tr>

<td class="expand">

<img src="../Images/Default%20Images/SinglePlus.gif" alt="Plus" onclick="toggleOrderDetails(this)" />

</td>

<td colspan="4">

<b>Title:</b> <asp:Label ID="TitleLabel" runat="server" Text='<%# Eval("Title") %>' /><br />

<br />

</td>

</tr>

<tr class="orders" style="display: none;">

<td class="expand">

</td>

<td colspan="4">

<telerik:RadListView ID="RadListView2" runat="server" ItemPlaceholderID="OrderDetailsPlaceHolder"

EnableViewState="false">

<LayoutTemplate>

<table>

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

</table>

</LayoutTemplate>

<ItemTemplate>

<tr>

<td>

<b>Date Start:</b>

<%#Eval("EventStart")%>

</td>

</tr>

<tr>

<td>

<b>Date End</b>

<%#Eval("EventEnd")%>

</td>

</tr>

<tr>

<td>

<b>Street</b>

<%#Eval("Street")%>

</td>

</tr>

<tr>

<td>

<b>City:</b>

<%# Eval("City") %>

</td>

</tr>

<tr>

<td>

<b>Content</b>

<%#Eval("Content")%>

</td>

</tr>

<tr>

<td>

<b>Summary</b>

<%#Eval("Summary")%>

</td>

</tr>

</ItemTemplate>

</telerik:RadListView>

</td>

</tr>

</ItemTemplate>

</telerik:RadListView>

</div>

</body>

Here is my CodeBehind

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Sitefinity.Events.Model;

using Telerik.Sitefinity.GenericContent.Model;

using Telerik.Sitefinity.Modules.Events;

using Telerik.Sitefinity.Taxonomies;

using Telerik.Web.UI;

namespace SitefinityWebApp.UserControls

{

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

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void Pager_Pre(object sender, System.EventArgs e)

{

}

protected void listItems_PagePropertiesChanging(object sender, PagePropertiesChangingEventArgs e)

{

}

protected void Page_Init(object sender, System.EventArgs e)

{

LoadData();

}

protected void LoadData()

{

TaxonomyManager taxMan = TaxonomyManager.GetManager();

var tags = taxMan.GetTaxonomy(TaxonomyManager.TagsTaxonomyId).Taxa;

tagSelector.DataTextField = "Title";

tagSelector.DataValueField = "Id";

tagSelector.DataSource = tags;

tagSelector.DataBind();

EventsManager eventsMan = EventsManager.GetManager();

var cities = eventsMan.GetEvents().Select(evt => evt.City.ToString()).ToList().Distinct();

citySelector.DataSource = cities;

citySelector.DataBind();

}

protected void Submit_Click(object sender, EventArgs e)

{

EventsManager eventsMan = EventsManager.GetManager();

string tagId;

if (tagSelector.SelectedIndex == -1)

{

tagId = "";

}

else

{

tagId = tagSelector.SelectedValue;

}

string city;

if (citySelector.SelectedIndex == -1)

{

city = "";

}

else

{

city = citySelector.SelectedItem.Text;

}

int? totalCount = -1;

IQueryable<Event> events = null;

if (!tagId.IsNullOrWhitespace())

{

events = eventsMan.Provider.GetItemsByTaxon(

new Guid(tagId),

false,

"Tags",

typeof(Event),

"Status = Master", "",

0, 100, ref totalCount).Cast<Event>().AsQueryable();

}

else

{

events = eventsMan.GetEvents()

.Where(evt => evt.Status == ContentLifecycleStatus.Master)

.Skip(0)

.Take(100);

}

if (!city.IsNullOrWhitespace())

events = events.Where(evt => evt.City == city);

if (RadDatePicker1.SelectedDate != null)

events = events.Where(evt => evt.EventStart >= RadDatePicker1.SelectedDate);

if (RadDatePicker2.SelectedDate != null)

events = events.Where(evt => evt.EventStart <= RadDatePicker2.SelectedDate);

RadListView1.DataSource = events;

RadListView1.DataBind();

LoadData();

foreach (RadListViewDataItem item in RadListView1.Items)

{

Label TitleLabel = (Label)item.FindControl("TitleLabel");

RadListView lb = (RadListView)item.FindControl("RadListView2");

string test = TitleLabel.Text;

IQueryable<Event> Subevents = null;

Subevents = eventsMan.GetEvents().Where(evt => (evt.Title == test && evt.Status == ContentLifecycleStatus.Live));

lb.DataSource = Subevents;

lb.DataBind();

}

ListView

answered on 09 Jan 2013

1 answer

61 views

Getting MouseMove Jquery to Work on RadGrid Rows

I am attempting to get a div to show and follow the mouse based on the row that the mouse is over. It seems that I can't get the right element to target in order to make this work.

In the code below lblEnclarityReportsPerPayer gets filled from codebehind with tables that have an ID that corresponds to the simpleRequestDate. The problem is that my $("tr.rgHoveredRow").mousemove() is not firing.

<telerik:RadGrid runat="server" ID="gvReport" DataSourceID="dsReport" >

<ClientSettings>

<ClientEvents OnRowMouseOver="showPayerBreakOut" OnRowMouseOut="hidePayerBreakOut" />

</ClientSettings>

<MasterTableView DataKeyNames="simpleRequestDate" ClientDataKeyNames="simpleRequestDate" CommandItemDisplay="Top" PageSize="100">

<CommandItemSettings ShowExportToExcelButton="true" ShowAddNewRecordButton="false" />

<Columns>

<telerik:GridDateTimeColumn DataField="RequestDate" DataFormatString="{0:MM/dd/yyyy}" HeaderText="Request Date" SortExpression="RequestDate" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" />

<telerik:GridBoundColumn DataField="requests" HeaderText="Requests" SortExpression="requests" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" />

<telerik:GridBoundColumn DataField="faxNumbersReceived" HeaderText="Fax Numbers Received" SortExpression="faxNumbersReceived" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" />

<telerik:GridBoundColumn DataField="percentage" HeaderText="Percentage Found" SortExpression="percentage" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

<script type="text/javascript">

$(document).ready(function () {

$('#payerReports span').children().each(function () {

$(this).hide();

});

var moveLeft = 20;

var moveDown = 10;

$("tr.rgHoveredRow").mousemove(function (e) {

$('#payerReports').css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);

});

function showPayerBreakOut(sender, eventArgs) {

$("#" + eventArgs.getDataKeyValue("simpleRequestDate")).show();

}

function hidePayerBreakOut(sender, eventArgs) {

$("#" + eventArgs.getDataKeyValue("simpleRequestDate")).hide();

}

</script>

<div id="payerReports">

<asp:Label runat="server" ID="lblEnclarityReportsPerPayer" />

</div>

Grid

answered on 09 Jan 2013

3 answers

111 views

Telerik RADEditor Failing to render with IIS Url Rewrite

am using IIS Url Rewrite to create friendly url, i have noticed after enabling it the radeditor fail to render as in the image :http://i.stack.imgur.com/TZo2O.png

The rule am using look like this in web.config :

<rewrite>

<rules>

<rule name="RewriteUserFriendlyURL1" stopProcessing="true">

<match url="^([^/]+)/?$" />

<conditions>

<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />

<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />

</conditions>

<action type="Rewrite" url="Default.aspx?name={R:1}" />

</rule>

</rules>

</rewrite>

I have changed DialogHandler from aspx to axd and also changed the path for it to look like below and also cant render properly

<add path="~/Telerik.Web.UI.DialogHandler.axd" type="Telerik.Web.UI.DialogHandler" verb="*" validate="false" />

Editor

answered on 09 Jan 2013

3 answers

145 views

How to assign variable to $find function

Is there a way to assign variable to $find function?
eg: It can be Sunday thru Saturday
var dateOfWeek = "Wednesday"
var timePickerStart = $find("<%= RadDateTimePickerWednesdayStart.ClientID %>");

or I can use:
var timePickerStart2 = document.getElementById("ctl00_TabContent_RadWindow1_C_RadDateTimePicker" + dateOfWeek + "Start");
timePickerStart2.set_enabled(true);
but I receive error "Microsoft JScript runtime error: Object doesn't support property or method 'set_enabled".

Window

answered on 09 Jan 2013

2 answers

120 views

Meta tags are corrupted

When I use editor in HTML mode its breaking valid meta tags from

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

into

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
?

Editor

answered on 09 Jan 2013