Questions on UI for ASP.NET AJAX Forum

1 answer

317 views

[Solved] closed the radwindow and refresh parent

hi
i need:
when closed the radwindow, parent Page is Be refreshed.
thanks

Window

answered on 28 Jul 2014

1 answer

180 views

ColumnSeries border in RadHTMLChart

Please find the attachement.

How to set Column border color to white.

Thanks in advance

Chart (HTML5)

answered on 28 Jul 2014

1 answer

202 views

run c# code then close rad window then redirect to other page whithout radwindow

how to :
when i clicked the button in radwindow,i want to execute the c# code in button_click event then close radwindow and returen or redirect to parent page or other page.
but,when i clicked the button in radwindow,(execute the c# code and never close radwindow) or (not execute c# code and close radwindow)i need:
execute the c# code and then close radwindow then redirect to other page whithout radwindowin other word,i need when i redirect from radwindow to parent Page,never shown the parent page in radwindow.What should I do?

Window

answered on 28 Jul 2014

2 answers

143 views

RadFilter losing values inside filter expressions

Hello forum... long time reader, first time poster.

I do have a support ticket open on this issue, but we seem to be stuck. I thought I'd ask the forum community if anyone had any ideas.

Short version... I am updating a RadFilter in a server side callback. Immediately after updating it, the client side filter values and the grid it is filtering look great. I have a button for refreshing the grid. The first time the user hits that button after the filter is set, the filter is hosed. By hosed, I mean that the right expressions/etc are there, but their value is 0 (or Nothing depending on the type). I do have the need for manipulating the sql string that the filter produces, so I am using a RadFilterSqlQueryProvider in my callbacks. Another thing to note, it happens whether EnabledAJAX is true or false.

In working with the support ticket, I was able to reduce the problem to a pretty small example. I would LOVE it if some Telerik guru could tell me what I'm doing wrong or if there is a better way to do it. I have been stuck on this for 3 weeks. ;(

<%@ Page Title="" Language="vb" AutoEventWireup="false" CodeBehind="RadSample.aspx.vb" Inherits="HelpDesk.RadSample" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!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 id="Head1" runat="server">

<title><%= HelpDesk.GetAppConfigValue("AppTitle") %></title>

<telerik:RadStyleSheetManager ID="styleSheetMgr" runat="server" />

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

<script

src="<%= HelpDesk.WebUtil.GetVirtualPath()%>/Scripts/helpdesk.js?<%= HelpDesk.WebUtil.GetRevision()%>" type="text/javascript"></

script>

<script type="text/javascript">

var prefix = '<%= HelpDesk.WebUtil.GetVirtualPath() %>';

var username = '<%= Membership.GetUser().Username %>';

</script>

</telerik:RadScriptBlock>

<link href="~/Styles/DataStyle.css" rel="stylesheet" type="text/css" />

<link href="~/Styles/OtherStyles.css" rel="stylesheet" type="text/css" />

<link href="~/Styles/Style.css" rel="stylesheet" type="text/css" />

<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />

<link href="~/Styles/Menu.css" rel="stylesheet" type="text/css" />

</head>

<body onload="RadMasterLoaded();">

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

<telerik:RadScriptManager ID="MainRadScriptManager" runat="server" EnablePageMethods="true">

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

<telerik:RadAjaxManager runat="server" ID="AjaxManager" EnableAJAX="false" >

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="TicketFilter">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="TicketGrid" LoadingPanelID="LoadingPanel" />

<telerik:AjaxUpdatedControl ControlID="TicketFilter" />

<telerik:AjaxUpdatedControl ControlID="TestRefresh" />

<telerik:AjaxUpdatedControl ControlID="UsedFilter" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="TestRefresh">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="TicketGrid" LoadingPanelID="LoadingPanel" />

<telerik:AjaxUpdatedControl ControlID="TicketFilter" />

<telerik:AjaxUpdatedControl ControlID="TestRefresh" />

<telerik:AjaxUpdatedControl ControlID="UsedFilter" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="SetFilter">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="TicketGrid" LoadingPanelID="LoadingPanel" />

<telerik:AjaxUpdatedControl ControlID="TestRefresh" />

<telerik:AjaxUpdatedControl ControlID="TicketFilter" />

<telerik:AjaxUpdatedControl ControlID="SetFilter" />

<telerik:AjaxUpdatedControl ControlID="UsedFilter" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="TicketGrid">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="TicketGrid" LoadingPanelID="LoadingPanel" />

<telerik:AjaxUpdatedControl ControlID="TicketFilter" />

<telerik:AjaxUpdatedControl ControlID="TestRefresh" />

<telerik:AjaxUpdatedControl ControlID="UsedFilter" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="LoadingPanel" runat="server" Width="100%" Height="100%" BackColor="Black"

Transparency="75">Loading

</telerik:RadAjaxLoadingPanel>

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

<telerik:RadFilter runat="server" ID="TicketFilter" ShowApplyButton="true" FilterContainerID="TicketGrid"

OperationMode="Server" ExpressionPreviewPosition="None" />

<telerik:RadButton runat="server" ID="TestRefresh" OnClick="DoTheRefresh" Text="RefreshMe" />

<telerik:RadButton runat="server" ID="SetFilter" OnClick="SetFilterClick" Text="SetFilter" />

<telerik:RadGrid ID="TicketGrid" runat="server" Height="100%" Width="100%"

OnNeedDataSource="TG_NeedDataSource"

AutoGenerateColumns="false" AllowSorting="True" GridLines="None"

EnableLinqExpressions="false" AllowAutomaticUpdates="true" >

<MasterTableView TableLayout="Fixed" IsFilterItemExpanded="true" Name="Tickets"

DataKeyNames="TID" CommandItemDisplay="None" AllowMultiColumnSorting="true" Width="100%" >

<Columns>

<telerik:GridBoundColumn DataField="TID" DataType="System.Int16" UniqueName="TID" ForceExtractValue="Always"

HeaderText="TID" headerstyle-width="60px" ReadOnly="true" />

<telerik:GridBoundColumn DataField="TicketTitle" UniqueName="TicketTitle" HeaderText="Title"

ItemStyle-Wrap="false" ColumnEditorID="TextEditor" ItemStyle-Font-Bold="true" headerstyle-width="300px" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

</form>

</body>

</html>

Imports Telerik.Web.UI

Public Class RadSample

Inherits System.Web.UI.Page

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

End Sub

Protected Sub TG_NeedDataSource(sender As Object, e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles TicketGrid.NeedDataSource

UsedFilter.Text = "Used Filter: " + TicketGrid.MasterTableView.FilterExpression

TicketGrid.DataSource = GetTickets()

End Sub

Protected Sub DoTheRefresh(sender As Object, e As System.EventArgs) Handles TestRefresh.Click

Dim provider As RadFilterSqlQueryProvider = New RadFilterSqlQueryProvider()

provider.ProcessGroup(TicketFilter.RootGroup)

TicketGrid.MasterTableView.FilterExpression = provider.Result

TicketGrid.Rebind()

End Sub

Protected Sub SetFilterClick(sender As Object, e As System.EventArgs) Handles SetFilter.Click

TicketFilter.RootGroup.AddExpression(New RadFilterLessThanFilterExpression(Of Integer)("TID") _

With {.Value = "400"})

TicketGrid.Rebind()

End Sub

Private Function GetTickets()

Dim dataTable As DataTable

dataTable = New DataTable("Tickets")

dataTable.Columns.Add("TID")

dataTable.Columns.Add("TicketTitle")

dataTable.Rows.Add(New Object() {1, "The initial data load should show all tickets. (1-701)"})

dataTable.Rows.Add(New Object() {101, "Then hit the SetFilter button and only tickets 1-301 should show."})

dataTable.Rows.Add(New Object() {201, "Then hitting RefresheMe should still display 1-301, but it empties the grid because the filter is wrong."})

dataTable.Rows.Add(New Object() {301, "Hitting RefreshMe again though fixes the filter and shows 1-301."})

dataTable.Rows.Add(New Object() {401, "Hi"})

dataTable.Rows.Add(New Object() {501, "Hi"})

dataTable.Rows.Add(New Object() {601, "Hi"})

dataTable.Rows.Add(New Object() {701, "Hi"})

GetTickets = dataTable

End Function

End Class

Thank you...
Heath

Filter

answered on 28 Jul 2014

1 answer

146 views

Grabbing SVG of Telerik Components

Currently, I have an aspx page in vb that launches a RadHTMLChart and I want to grab the SVG code of that chart. However, since the chart is rendered client-side, I have to launch this aspx page and then grab the SVG code from a second aspx page during postback. Currently, I am using Server.Execute (firstpage.aspx) to grab the SVG code but this does not work. I want to use the SVG to generate a PDF document but the Server.Execute command seems to run in the background and the code that comes after it do not wait for it to finish first, hence I am not grabbing the SVG content. Does anyone know of another way to grab this SVG content?

General Discussions

answered on 28 Jul 2014

2 answers

62 views

Grid Sort issue when placed inside mulitple panels

I have a User Control MainPage.aspx. Based on the tab clicked, it calls another class Page1.cs.Based on WorkFlow state, this calls another class Page2.cs. Page2 has 5 controls out of which 2 are radgrids. Page 2 has an Update panel, where all the 5 controls are added. Now Page2 to add the 1st grid, calls another class Inner1.cs, which based on certain conditions, calls Inner2 which again calls Inner3.cs which has the RadGrid. Here the RadGrid is simply added as this.Controls.Add(this._RadGrid1); No panels or updatePanels here. Inner2 adds Inner3 in a Panel. If Page2 directly adds Inner2 in its update panel, it works good. But as per the application, Page2 has to add Inner1, and hence sorting doesnt work in this case.It can sort one way but on 2nd click it gives back the no sort results. I also tried the onSort_Command function, but on each click it gave None as the current sort value!

Ajax

answered on 28 Jul 2014

1 answer

305 views

OnChange event and filter expression

Hi
this is my OnChenge function

function OnChange(sender, args) {

if (sender.hasChanges()) {

var response;

if (sender.get_filterExpressions()._hasFilerEntries) {

response = sender.view();

alert("filter");

}

else

response = sender.get_data(); // args.get_items();

if (response) {

//DO SOMETHING

}

I would like to find only the records filtered if filters are filled, and all data if there are no filters
Problems:
1. If I have more pages in my grid, sender.view() return only data in the current page
2. If I cancel text in my filter textbox and I press enter

sender.get_filterExpressions()._hasFilerEntries

is true

thanks

ClientDataSource

answered on 28 Jul 2014

9 answers

299 views

Batch Edit Mode - Disable sorting when items edited are not saved

When items are being added/updated/deleted on a Telerik Radgrid (Batch editmode/ cell) and are not saved. Clicking on the headers for sorting is discarding the changes made to the grid. How to disable the grid column headers if an item is still in pending state (red).

No sorting functionality enabled in this example.
http://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/batch-editing/defaultcs.aspx

Thanks.

Grid

answered on 28 Jul 2014

1 answer

149 views

Rad Calendar and post back outside of Calendar

Hi,

We are using a Rad Calendar for a control that we integrated into our website. Which works great. Until someone uses our "Add to Cart" button. I have mixed some JS and some of the Rad Calendar JS calls.

I have a box that, on click, opens my calendar and you can choose a day. Then the user chooses a time from a list when we get a post back from our service.

The issue is, if the user does not choose a "ticket" quantity, and chooses "add to cart," the calendar and the time stays chosen in the background, but my 'mask' resets to the default. I am using the Rad Calendar to call the functions on the front end to show and hide my 'masks'.

How would I write the function so that the 'masks' only show if there no Time and Date chosen, but also make the selections show in the boxes if they are chosen, but "Add to Cart" postback occurs.

So what I need is the Calendar value AND the Time to still show in the boxes if the "Add to Cart" button is chosen and there is an error, such as not quantity.

Any and all help is appreciated.

I have screen shots attached. I have put notes in the screen shots.

Myc JS and Calendar aspx code is below:

ASPX Code:

<asp:UpdatePanel runat="server" ID="up1" UpdateMode="Always">

<ContentTemplate>

<asp:Panel ID="Panel1" CssClass="ControlPanel" runat="server">

<asp:Table runat="server" ID="contents" CssClass="MuseumDateTimeTable">

<asp:TableRow ID="trCalendar" runat="server" VerticalAlign="Top">

<asp:TableCell ID="tcCalendar" runat="server" CssClass="CalendarOverallCell">

<div class="MuseumStepHeaderWrapper">

<div class="MuseumVariantStepText">

<asp:Label runat="server" ID="lblMuseumStepOne"><%=GetLocaleResourceString("Museum.StepOne")%></asp:Label>

</div>

<asp:Label runat="server" ID="ltNextAvailableDate" Text="" CssClass="MuseumNextAvailableDate" />

<%--

<div class="MuseumVariantChooseText">

<%=GetLocaleResourceString("Museum.MuseumChooseDateTimeText")%>

</div>--%>

</div>

<div id="MuseumSelectedDayBox">

<%--

<div id="DateSelectedTitle">

<%=GetLocaleResourceString("Museum.MuseumDateSelectedTitle")%></div>--%>

<div id="DateSelectedDay">

<asp:Literal runat="server" ID="ltMuseumDateSelectedDay" Text="" />

</div>

<asp:HiddenField runat="server" ID="ShowCalendar" ClientIDMode="Static" />

<telerik:RadCalendar ID="tkCalendar" runat="server" EnableMultiSelect="false" OnSelectionChanged="tkCalendar_SelectionChange"

CssClass="CalendarOverall" AutoPostBack="true" ShowRowHeaders="false" NavigationPrevToolTip="Previous Month"

NavigationNextToolTip="Next Month" Skin="Special" EnableEmbeddedSkins="false"

EnableEmbeddedBaseStylesheet="false" EnableMonthYearFastNavigation="false" DayNameFormat="Short"

UseColumnHeadersAsSelectors="false">

<ClientEvents OnDateSelecting="LoadingTimes" />

<ClientEvents OnInit="InitializeCalendar" />

<ClientEvents OnCalendarViewChanging="MonthChangeShow" />

<ClientEvents OnDateSelected="EnableTimes" />

<SelectedDayStyle CssClass="CalendarSelectedDay" />

<OtherMonthDayStyle CssClass="CalendarOtherMonthDay" />

<TitleStyle CssClass="CalendarTitle" />

<DayStyle CssClass="CalendarDay" />

<SpecialDays>

<telerik:RadCalendarDay Repeatable="Today" Date="" ItemStyle-CssClass="rcToday">

</telerik:RadCalendarDay>

</SpecialDays>

<CalendarDayTemplates>

<telerik:DayTemplate ID="BlackOutDayTemplate" runat="server">

<Content>

<div class="UnavailableKeyText">

<%=GetLocaleResourceString("Museum.EventCalendar.Unavailable")%>

</div>

</Content>

</telerik:DayTemplate>

<telerik:DayTemplate ID="SoldOutDayTemplate" runat="server">

<Content>

<div class="SoldOutDateKeyText">

<%=GetLocaleResourceString("Museum.EventCalendar.SoldOut")%>

</div>

</Content>

</telerik:DayTemplate>

<telerik:DayTemplate ID="PreviousDayTemplate" runat="server">

<Content>

<div class="PreviousDate">

</div>

</Content>

</telerik:DayTemplate>

</CalendarDayTemplates>

</telerik:RadCalendar>

</asp:TableCell>

<%--<asp:TableCell ID="tcCalSpacer" runat="server" Width="10px">

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

</asp:TableCell> --%>

<asp:TableCell ID="tcAvailableTimes" runat="server" VerticalAlign="Top" CssClass="MuseumAvailableTimes">

<div class="MuseumStepHeaderWrapper">

<div class="MuseumVariantStepText">

<asp:Label runat="server" ID="lblMuseumStepTwo"><%=GetLocaleResourceString("Museum.StepTwo")%></asp:Label>

</div>

<%--

<div class="MuseumVariantChooseText">

<%=GetLocaleResourceString("Museum.MuseumChooseQuantityText")%>

</div>--%>

</div>

<asp:ListBox CssClass="timeListBox" AutoPostBack="True" OnSelectedIndexChanged="TimedListBoxSelectionChanged"

ID="TimesAvailable" runat="server"></asp:ListBox>

<asp:Label ID="lblTimesMessage" runat="server" CssClass="MuseumTimesMessage"></asp:Label>

</asp:TableCell></asp:TableRow>

</asp:Table>

<asp:HiddenField ID="hfDateLock" value="false" runat="server" />

<asp:HiddenField ID="hfLastDate" Value="" runat="server"/>

<div id="museumCalendarLoadingContainer">

</div>

<div id="museumCalendarLoadingContent">

<%=GetLocaleResourceString("Museum.MuseumCalendarEventProcessingText")%><br />

<img src="../App_Themes/Museum/images/museumLayout/loading.gif" /></div>

</asp:Panel>

</ContentTemplate>

</asp:UpdatePanel>

Javascript Code:

$(document).ready(function () {

$('#museumCalendarLoadingContainer').hide();

$('#museumCalendarLoadingContent').hide();

//$('table.RadCalendar_Special').hide();

$('#MuseumSelectedDayBox').removeClass('chosen');

//On initial start adjust generated size and prepend blank option to list

$(".timeListBox").attr('size', '1');

//TODO: If 'No Shows Today' is in list don't show 'Choose Time' text only show 'No Shows Today'

if ($('.timeListBox option[value="NoShows"]').length) {

//Do nothing and show 'No Shows' message

$('.timeListBox').addClass('SoldOutDateKeyText');

}else{

$('<option value="" selected>Choose a Time</option>').prependTo('.timeListBox');

}

//Default Choose Date on Dom Load and disable Choose Time

$('#DateSelectedDay').html('Choose Date');

if ($('#DateSelectedDay').html('Choose Date')) {

$('.timeListBox').prop('disabled', 'disabled').addClass('disabled');

$('<option value="" selected>Choose a Time</option>').prependTo('.timeListBox');

$('.timeListBox').before('<div class="disabledTrigger"></div>');

}

$('.disabledTrigger').click(function (e) {

$('#disabledMessage').hide();

$('<div id="disabledMessage">Please choose date first<span id="closeFieldAlert">X</span></div>').prependTo('body').hide().delay(300).slideDown(400).delay(6000).slideUp(400);

$('#closeFieldAlert, #disabledMessage').click(function () {

$('#disabledMessage').hide();

});

// alert("Please choose DATE first");

});

$(document).on('click', '#MuseumSelectedDayBox', function () {

$('#MuseumSelectedDayBox').addClass('chosen');

$("table.RadCalendar_Special").fadeIn(300);

$('#calendarModalCover').show();

});

//Show/Hide calendar and show calendar again on Month Change using the ASP.NET Hidden field.

function pageLoad(sender, args) {

if ($telerik.findElement(document, "ShowCalendar").value == "show") {

$("table.RadCalendar_Special").show();

};

$telerik.findElement(document, "ShowCalendar").value = "hide";

$("#calendardiv").click(function () {

$("table.RadCalendar_Special").show();

});

}

function MonthChangeShow(sender, eventArgs) {

$telerik.findElement(document,"ShowCalendar").value = "show";

}

//DateSelecting - OnDateSelecting

function LoadingTimes(sender, eventArgs) {

$('#museumCalendarLoadingContainer').show();

$('#museumCalendarLoadingContent').show();

$('#calendarModalCover').hide();

}

//Calendar Initialized - OnInit

function InitializeCalendar(sender) {

//alert('initialize calendar');

$('#museumCalendarLoadingContainer').hide();

$('#museumCalendarLoadingContent').hide();

$(".timeListBox").attr('size', '1');

}

//Enable Times on date selected - OnDateSelected - this is not really working because of postback

function EnableTimes(sender, eventArgs) {

// alert('enable times');

//sender.set_autoPostBack(true);//Kind of works

$('.timeListBox').prop('disabled', false).removeClass('disabled');

$('table.RadCalendar_Special').hide();

}

Thanks,

Carlos

Calendar

answered on 28 Jul 2014

4 answers

230 views

How to expand Mobile RadMenu child items by clicking anywhere on a parent item?

When the menu is in mobile render mode and we have sub menus, you have to tap the arrow to the right of the menu name to get the menu to expand. Is there a method to allow tapping anywhere on the sub-menu to have it expand ?

Menu

answered on 28 Jul 2014