Questions on UI for ASP.NET AJAX Forum

2 answers

148 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

83 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

264 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

60 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

94 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

177 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

92 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

1 answer

245 views

How can I Change/Display value into RadTextBox with RadComboBox Selection?

Hello
I am using RelatedLoDRadComboboxesinAdvForm. In my RadScheduler if I select a RadcomboBox list's value then some data according to this value should be displayed in my RadTextBox but not editable.
suppose Client First name is selected then Last Name should be displayed in textbox.
Any help
Thanks

Scheduler

answered on 07 Dec 2011

2 answers

123 views

Problem accessing the SelectedValue of a programatically created RadGrid

Hello,

I am having difficulty with the problem of accessing the Selected value of a programatically created RadGrid. The purpose of this app is to allow a user to select an order from a grid and open a new page with a new grid populated based on the selection of the previous grid. I can't seem to find an example like this in the forums. Most example assume the grid is bound directly, however I am pulling from a programatically created grid. I am new to Telerik controls. I tried using the format code block but it made my code unreadable.

Here is how I create the grid:

<telerik:RadGrid ID="OrdersGrid" runat="server" Skin="WebBlue" CellSpacing="0" GridLines="None"
ClientSettings-Selecting-AllowRowSelect="True">
<ClientSettings>
<Selecting AllowRowSelect="True" />
<Scrolling AllowScroll="True" UseStaticHeaders="True" />
</ClientSettings>
<MasterTableView DataKeyNames="OrderID" ClientDataKeyNames="OrderID">
<CommandItemSettings ExportToPdfText="Export to PDF" />
<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
<HeaderStyle Width="20px" />
</RowIndicatorColumn>
<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
<HeaderStyle Width="20px" />
</ExpandCollapseColumn>
<EditFormSettings>
<EditColumn FilterControlAltText="Filter EditCommandColumn column">
</EditColumn>
</EditFormSettings>
</MasterTableView>
<FilterMenu EnableImageSprites="False">
</FilterMenu>
<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_WebBlue">
</HeaderContextMenu>
</telerik:RadGrid> <telerik:RadGrid ID="OrdersGrid" runat="server" Skin="WebBlue" CellSpacing="0" GridLines="None"
ClientSettings-Selecting-AllowRowSelect="True">
<ClientSettings>
<Selecting AllowRowSelect="True" />
<Scrolling AllowScroll="True" UseStaticHeaders="True" />
</ClientSettings>
<MasterTableView DataKeyNames="OrderID" ClientDataKeyNames="OrderID">
<CommandItemSettings ExportToPdfText="Export to PDF" />
<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
<HeaderStyle Width="20px" />
</RowIndicatorColumn>
<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
<HeaderStyle Width="20px" />
</ExpandCollapseColumn>
<EditFormSettings>
<EditColumn FilterControlAltText="Filter EditCommandColumn column">
</EditColumn>
</EditFormSettings>
</MasterTableView>
<FilterMenu EnableImageSprites="False">
</FilterMenu>
<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_WebBlue">
</HeaderContextMenu>
</telerik:RadGrid>

Here is how I bind the data to the new grid:

protected void Page_Load(object sender, EventArgs e)
{
using (Dbcontext)
{
companyID = Convert.ToInt32(Request.QueryString["CompanyID"]);
OrdersGrid.DataSource = Dbcontext.usp_SelectOrders(null,companyID);
OrdersGrid.DataBind();
OrdersGrid.MasterTableView.DataKeyNames = new String[] { "OrderID" };
}
}

Here is how I am attempting to access the SelectedValue of the OrdersGrid:

protected void OrderDetailsButton_Click(object sender, EventArgs e)
{
Response.Redirect("~/Pages/OrderDetails.aspx?OrderID=" + OrdersGrid.SelectedValue.ToString());
}

When the button is clicked I get an error stating that the Selected value has not been initialized. When I hover over the SelectedValue in Debugging mode it says it is "null."

Any thoughts?

Thanks in advance,
Jonathan

Grid

answered on 07 Dec 2011

5 answers

63 views

Scheduler Keyboard Support gives javascript error

Hi,

I followed the instructions on the demo page: http://demos.telerik.com/aspnet-ajax/scheduler/examples/keyboardsupport/defaultcs.aspx , but do not get the required result.

In IE a javascript error is shown: Line: 17846
Error: Object doesn't support property or method '_getContentTable'

Line 17846 and surroundings:

var r=i.KeyboardNavigation.Models.createMap(d.get_activeModel()._getContentTable(),function(u){q=false;

var w=u.get_targetSlot().get_domElement();

var v=w.cellIndex;

var t=w.parentNode.rowIndex;

m.x=t;

m.y=v;

});

FF and Chrome do not show the javascript error, but no keyboard support eighter.

Any idea what might cause this?

Sceduler code:

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

</telerik:RadAjaxLoadingPanel>

<telerik:RadScheduler ID="rs_Planner" runat="server" Culture="Dutch (Netherlands)" AccessKey="F" TabIndex="1"

HoursPanelTimeFormat="HHtt" LastDayOfWeek="Sunday" FirstDayOfWeek="Monday" RowHeight="30px"

OverflowBehavior="Expand" Width="100%">

<AppointmentContextMenus>

<telerik:RadSchedulerContextMenu runat="server" ID="SchedulerAppointmentContextMenu">

<Items>

<telerik:RadMenuItem Text="Ga naar klant" Value="1" />