Questions on UI for ASP.NET AJAX Forum

3 answers

197 views

RadWindow confirm dialog localization with resource files.

Im currently using this example in one of my projects :
Confirm dialog example

When I want to use resources files to localize my application, i normally use a tag like this to set the text :

Text="<%$ Code: ResourceFile.Some_TranslatedText_DependingOnCulture %>"

Do you have a suggestion on how I can use the same technique to have to localized version of the prompt text and title text ? The sample below is obviously not working ...

OnClientClick="return blockConfirm(" + <%$ Code: ResourceFile
.TranslatedPrompt %> + ", event, 330, 100, '', " + <%$ Code: 
ResourceFile
.
TranslatedTitle 
 %> + ");"

Thank you !

Window

answered on 07 Dec 2011

1 answer

114 views

Rad Window from DotNetNuke Module.

I have a RadWindow in a separate DNN module that acts as an Address validator(it calls a service that we have access to). If the address is invalid it shows a modal popup to allow them to use the suggested address or not.

The module is placed in a different module that is doing an applications that has several addresses to validate. This module is using an ASP wizard. This is reference by

<%

@ Register Src="../AddressValidator/AddressValidator.ascx" TagName="AddressValidator" TagPrefix="AddVal" %>

and

<AddVal:AddressValidator ID="addValBorrower" runat="server" />

<AddVal:AddressValidator ID="addValBorrowerPhysical" runat="server" />

<AddVal:AddressValidator ID="addValEmployeer" runat="server" />

<AddVal:AddressValidator ID="addValStudent" runat="server" />

<AddVal:AddressValidator ID="addValRef1" runat="server" />

<AddVal:AddressValidator ID="addValRef2" runat="server" />

Which are all place outside of the

asp

:Wizard

Everything works ok and the modal window pops up when desired.

The problem is when using the wizard previous button. After the modal window is displayed and a selection is made. If the previous button is selected...none of the Telerik controls work properly. For instance if we have RadDatePicker...it displays the text to select the calendar(rather than the calendar image)...and then the calendar does not display correct. Similar things happen to the RadComboBox...it displays(but not as dropdown box) and the values displaying strangely.

There are no javascript errors that show in the browser.

Is there something that I'm missing that causes all the ajax controls to go screwy?

Window

answered on 07 Dec 2011

0 answers

72 views

Controls Resize after postback when hovering

I am using a radajaxpanel and doing a postback. After the postback the controls all resize when hovering over them. Any reason for this and how do I fix?

General Discussions

asked on 07 Dec 2011

2 answers

120 views

Invalid state

Is there anyway to set the RadComboBox into an invalid state, like RadInput? I'd like a similar rendering mode, with a little yellow warning sign, and such.

ComboBox

answered on 07 Dec 2011

1 answer

77 views

Multiple instances of a user control that contains a RadGrid behaves oddly.

I have create a user control that contains a RadGrid. I have enabled infinite Scrolling and this worked fine until I realized that If I wanted to have the User control multiple times on a single page. I found that I needed to use the RadAjaxManagerProxy inside the user control.Then I placed the RadAjaxManager on the master page. Once I did this the scrolling functionality stopped working.

Master Page.

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

</telerik:RadAjaxManager>

User Control

<asp:HiddenField ID="hdfnTotalRecords" runat="server" />

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

<script type="text/javascript">

function HandleScrolling(e) {

var totalRecords = $('[Id$=hdfnTotalRecords]').val();

var grid = $find("<%=RadGrid1.ClientID %>");

var scrollArea = document.getElementById("<%= RadGrid1.ClientID %>" + "_GridData");

if (IsScrolledToBottom(scrollArea)) {

var currentlyDisplayedRecords = grid.get_masterTableView().get_pageSize() * (grid.get_masterTableView().get_currentPageIndex() + 1);

//if the visible items are less than the entire record count

//trigger an ajax request to increase them

if (currentlyDisplayedRecords < totalRecords) {

alert("here");

$find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest("LoadMoreRecords");

}

//calculate when the scroll bar is at the bottom

function IsScrolledToBottom(scrollArea) {

var currentPosition = scrollArea.scrollTop + scrollArea.clientHeight;

return currentPosition == scrollArea.scrollHeight;

}

function onRequestStart(sender, eventArgs) {

if (eventArgs.get_eventTarget().indexOf("ibtnPhone") != -1) {

eventArgs.set_enableAjax(false);

}

function RowDblClick(sender, eventArgs) {

var test = eventArgs.getDataKeyValue("Id");

window.location.href = '/Messages/AddEditMessage.aspx?Id=' + test

}

</script>

</telerik:RadCodeBlock>

<telerik:RadWindowManager id="WindowManager1" runat="server">

<windows>

<telerik:radwindow id="Window1" top="150" left="10" runat="server" width="700px" height="150px"></telerik:radwindow>

</windows>

</telerik:RadWindowManager>

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"/>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy >

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" MinDisplayTime="500" Transparency="25" BackColor="#ffffff" runat="server" CssClass="ajaxloader" />

<telerik:RadGrid ID="RadGrid1" runat="server"

AllowSorting="True" GridLines="None"

AutoGenerateColumns="false"

OnItemCommand="RadGrid1_ItemCommand"

OnItemDataBound="Messages_ItemDataBound"

OnNeedDataSource="RadGrid1_NeedDataSource"

AllowAutomaticDeletes="True"

AllowPaging="true"

PageSize="5">

<PagerStyle Visible="False"/>

<%--<PagerStyle Visible="true" />--%>

<MasterTableView Width="100%" DataKeyNames="Id" CommandItemDisplay="Top" ClientDataKeyNames="Id">

<CommandItemTemplate>

<table>

<tr>

<td width="45px">

<asp:LinkButton ID="btnAddNew" runat="server" CommandName="AddNewMessage" ToolTip="Add a new message."><img style="border:0px;vertical-align:middle;" alt="" src="/Images/pc_icon_new_15x15.gif" /> New</asp:LinkButton>

</td>

<td width="45px">

<asp:LinkButton ID="btnEdit" runat="server" CommandName="EditMessage" ToolTip="Edit the selected message."><img style="border:0px;vertical-align:middle;" alt="" src="/Images/pc_icon_edit_15x15.gif" /> Edit</asp:LinkButton>

</td>

<td width="60px">

<asp:LinkButton ID="btnDelete" runat="server" CommandName="DeleteMessage" ToolTip="Delete the selected message."><img style="border:0px;vertical-align:middle;" alt="" src="/Images/pc_icon_delete_15x15.gif" /> Delete</asp:LinkButton>

</td>

</tr>

</table>

</CommandItemTemplate>

<Columns>

<telerik:GridClientSelectColumn UniqueName="ClientSelect" HeaderStyle-Width="5%" />

<telerik:GridBoundColumn DataField="Id" HeaderText="Id" UniqueName="Id" DataType="System.Int32" HeaderStyle-Width="20%" />

<telerik:GridBoundColumn DataField="DisplayName" HeaderText="Name" UniqueName="DisplayName" DataType="System.String" HeaderStyle-Width="20%" />

<telerik:GridBoundColumn DataField="FileDateTime" HeaderText="Created Date/Time" UniqueName="Created" DataType="System.DateTime" HeaderStyle-Width="20%" DataFormatString="{0:MM/dd/yy hh:mm tt}" />

<telerik:GridBoundColumn DataField="LastSentDateTime" HeaderText="Last Used" UniqueName="Sent" DataType="System.DateTime" HeaderStyle-Width="20%" DataFormatString="{0:MM/dd/yy hh:mm tt}" />

<telerik:GridTemplateColumn ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="30%"

HeaderText="Message Type" AllowFiltering="false" UniqueName="MessageFormat" SortExpression="MessageFormat">

<ItemTemplate>

<asp:ImageButton ID="ibtnPhone" runat="server" ImageUrl="~/Images/pc_icon_phone.gif" CommandName="ListenPhone" CommandArgument="" ToolTip="Listen to message" />

<asp:ImageButton ID="ibtnSMS" runat="server" ImageUrl="~/Images/pc_icon_txt.gif" CommandName="ViewSMS" CommandArgument="" ToolTip="View SMS Message" />

</ItemTemplate>

<HeaderStyle HorizontalAlign="Left" />

<ItemStyle HorizontalAlign="Left" />

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

<ClientSettings>

<Selecting AllowRowSelect="True" />

<ClientEvents OnRowDblClick="RowDblClick" />

<Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="135px"/>

<ClientEvents OnScroll="HandleScrolling"/>

</ClientSettings>

</telerik:RadGrid>

Page that contains multiple Instances.

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" SelectedIndex="0" CssClass="tabStrip">

<Tabs>

<telerik:RadTab Text="Messages">

</telerik:RadTab>

<telerik:RadTab Text="Greetings" Visible="false">

</telerik:RadTab>

<telerik:RadTab Text="Trailers" Visible="false">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" CssClass="multiPage">

<telerik:RadPageView ID="RadPageView1" runat="server">

<ucMessages:Messages ID="ucMessages" runat="server" />

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView3" runat="server">

<ucMessages:Messages ID="ucGreetingMessages" runat="server" />

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView4" runat="server">

<ucMessages:Messages ID="ucTrailerMessages" runat="server" />

</telerik:RadPageView>

</telerik:RadMultiPage>

Grid

answered on 07 Dec 2011

3 answers

252 views

Edit/Update/Cancel image - Inline Editing

Hi

I am using inline edit inside grid. I want to change the default images for Edit/Update/Cancel. I am using sprite css and not exactly image. So please guide how to achieve this

I tried this -
<telerik:GridEditCommandColumn ItemStyle-Width="60px" HeaderStyle-Width="60px" ButtonType="ImageButton"
UpdateText="Update" CancelText="Cancel" EditText="Edit" ></telerik:GridEditCommandColumn>

This shows telerik default images only.... As dont have image so I cannot give ImageUrl.

I tried giving cssClass like this.....
<telerik:GridEditCommandColumn ItemStyle-Width="60px" HeaderStyle-Width="60px" ButtonType="LinkButton" ItemStyle-CssClass="buttonEdit" UpdateText="Update" CancelText="Cancel" EditText="Edit" ></telerik:GridEditCommandColumn>

It is only showing me - Text as Edit/Update/Cancel.

Please guide me on this.

Thanks,
Pradip

Grid

answered on 07 Dec 2011

1 answer

55 views

Updating RadGrid using Ajax after edits from a User Control are saved

Hi,

I have a Master page which looks like:

In the left placeholder, I have a RadGrid. In the right placeholder I have a user control.
When a user clicks on a row in the RadGrid, the user control on the right is successfully populated and edits are allowed.
I have a "save" button which, when clicked, successfully posts the data to the database.

Some of that data is displayed in the RadGrid. However, after changing this data, the grid is not updated.

In the right placed holder I have a RadAjaxManagerProxy setup like so:

<telerik:RadAjaxManagerProxy ID="LocationAjaxProxy" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="LocationList">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="LocationInformationRadMultiPage" LoadingPanelID="RadAjaxGridLoad" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="LocationInformationRadMultiPage">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="LocationList" LoadingPanelID="RadAjaxGridLoad" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

LocationList is the RadGrid. The LocationInformationRadMultiPage is a RadTabStrip that contains the user control that allows editing and saving of the data.

Is this the correct approach?

Thanks!

Ajax

answered on 07 Dec 2011

1 answer

87 views

RadScheduler

I want to insert,edit and Delete Appointments in RadScheduler from the database.
Iam using Visual Studio 2008 ,sqlserver 2005.

Scheduler

answered on 07 Dec 2011

4 answers

170 views

RadScheduler AdvancedForm

On my project, i'm using RadScheduler.

In result of the needs, i had to create a custom edit "window".

Basically in the main page i have:

<telerik:RadScheduler runat="server" ID="radScheduler" SelectedView="TimelineView"

EnableExactTimeRendering="True" DayStartTime="00:00:00" DayEndTime="23:59:59"

DataKeyField="ID" DataSubjectField="Subject" DataStartField="Start" DataEndField="End"

DataRecurrenceField="RecurrenceRule" DataRecurrenceParentKeyField="RecurrenceParentId"

AllowInsert="false" AllowDelete="False" AllowEdit="false" ColumnWidth="100px"

OnAppointmentCreated="radScheduler_AppointmentCreated" AdvancedForm-Modal="true"

Width="100%" FirstDayOfWeek="Monday" ShowHoursColumn="False" Skin="Telerik" ShowsConfirmationWindowOnDelete="False"

OnFormCreated="radScheduler_FormCreated">

<TimelineView UserSelectable="true" GroupingDirection="Vertical" NumberOfSlots="24"

ColumnHeaderDateFormat="HH:mm" ShowInsertArea="false" StartTime="00:00:00" SlotDuration="01:00:00"

GroupBy="Room" />

<DayView UserSelectable="false" />

<MonthView UserSelectable="false" />

<WeekView UserSelectable="false" />

<AdvancedEditTemplate>

<scheduler:AdvancedForm runat="server" ID="AdvancedInsertForm1" Mode="Edit"/>

</AdvancedEditTemplate>

</telerik:RadScheduler>

and also a RadAjaxManager.

<scheduler:AdvancedForm>

points to AdvancedForm.ascx

In AdvancedForm.ascx i have this javascript block

<script type="text/javascript">

var chart; // global

/*

* Request data from the server, add it to the graph

*/

function requestData() {

$.ajaxSetup({ cache: false });

$.getJSON('exampleurl', function (data) {

//Clear the "old" series

while (chart.series.length > 0) {

chart.series[0].remove(true);

}

//declare Json

var jsonObj = {

series: []

};

//Cycle through each JSONobjcect returned by the url

$.each(data, function (i, item) {

var key = item['tag'];

var value = item['data']['Velocity'];

jsonObj.series.push({

"name": key,

"data": value

});

//Add each of the key:value pair to the series

for (var i in jsonObj.series) {

chart.addSeries(jsonObj.series[i]);

}

// call it again after ten seconds

setTimeout(requestData, 10000);

});

}

$(document).ready(function () {

chart = new Highcharts.Chart({

chart: {

renderTo: 'container',

defaultSeriesType: 'column',

events: {

load: requestData

}

},

title: {

text: 'Test Chart'

},

xAxis: {

title: {

text: 'Viaturas'

},

categories: ['']

},

yAxis: {

min: 0,

title: {

text: 'Velocidade (Km/h)'

}

},

tooltip: {

formatter: function () {

return '' +

this.series.name + ': ' + this.y + ' Km/h';

}

},

});

</script>

the problem i have is that the $(document).ready is never called...

Thanks in advance for the help..

Scheduler

answered on 07 Dec 2011

3 answers

85 views

Date Picker shifts when focus changes and/or date is selected in Google Chrome

I was going to enter my own markup so you can see what I'm talking about....but that isn't necessary seeing how the official telerik control is also displaying this strange behavior in Chrome...

open this link in chrome and select a date, you'll see that the textbox shifts or changes sizes and misaligns things. It's really bugging me.

http://demos.telerik.com/aspnet-ajax/calendar/examples/datepicker/custompopup/defaultcs.aspx

Calendar

answered on 07 Dec 2011