
We're creating an application that is similar to the webmail demo
http://demos.telerik.com/webmail/
When the user clicks on tree folders, there is a webservice that is called that will update the upper right side frame.
The problem is: The user might change their mind and click on a several different folder before the first request is loaded. Thus resulting in the webservice calls being stacked up.
If we were developing a Win32 forms application we would just execute this code
Cursor.Current = Cursors.WaitCursor;
Before running the webservice, and clear it when the results are returned.
http://www.csharp-examples.net/hourglass-wait-cursor/
Question 1: Is there a built-in way to accomplish this functionality with telerik AJAX controls?
If not:
There are several ways to accomplish this in javascript
This method http://www.webcodingtech.com/javascript/change-cursor.php
Simply changes the cursor style to wait.
This method http://raventools.com/blog/2911/create-a-modal-dialog-using-css-and-javascript
Places a layer over the entire screen and sets its z-index: to a large number. This has the effect of eating up all of the clicks before the underlying controls can get them.
Question 2: What is the best way to build a custom javascript solution that works best with telerik?
Our application uses a telerik ajax tab strip. It has three tabs, known as section1,section2 and section3. Since the tab strip is ajax based the state of it, is not known on the server.
At any point, the user can choose to bookmark the page. When the user loads that bookmarked page, they expect to return to a screen with the tab showing the same tab "selection" as when the bookmark occurred.
Question 1: is there any built capability in telerik to accomplish this?
One way to accomplish this is to use HTML anchors.
Each time the user click on a different tab we can execute custom javascript to change the page's url to contain this anchor. So when the user clicks on the tab named "section2" we change the url from
http://localhost/page.aspx
to this.
http://localhost/page.aspx#tab=section2
Now, when we change the pages url, the browser does not submit the page for a reload. This is because, i believe, the anchor is entirely processed on the client side. The server never even sees anything after the # in the request.. The browser must strip our everything after the # when it passes the URL to the server.
To be specific, as far as the server is concerned these urls all point to the same location
http://localhost/page.aspx
http://localhost/page.aspx#tab=section1
http://localhost/page.aspx#tab=section2
and therefore the browser does not need to resubmit the url when the client side javascript changes the anchor.
So far, that nuanced behavior is working in our favor. The problem is: when the page is reloaded from the bookmark. Now its the client side code responsibility to switch from the first tab which is section1 to section2 which is in the bookmark.
Question 2: Are all of my assumptions correct? Are anchors always ignored by the browser? Does this work reliably across all browser?
Question 3: Is there a better way to accomplish the same thing without using anchors?
Question 4: If it were just a single tab it would be simple, but there are actually more components involved. Are there any tools that can help us update all of the controls based on the contents of the anchor line?
<asp:TemplateField HeaderText="Status" SortExpression="Status"> <EditItemTemplate> <asp:DropDownList ID="DropDownList1" runat="server" SelectedValue='<%# Bind("Status") %>'> <asp:ListItem Text="" Value=""></asp:ListItem> <asp:ListItem Text="Assigned" Value="Assigned"></asp:ListItem> <asp:ListItem Text="Lost" Value="Lost"></asp:ListItem> <asp:ListItem Text="Returned" Value="Returned"></asp:ListItem> </asp:DropDownList> <%--<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Status") %>'></asp:TextBox>--%> </EditItemTemplate> <InsertItemTemplate> <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Status") %>'></asp:TextBox> </InsertItemTemplate> <ItemTemplate> <asp:Label ID="Label1" runat="server" Text='<%# Bind("Status") %>'></asp:Label> </ItemTemplate> </asp:TemplateField>Jon
<
telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadScheduler1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1" />
<telerik:AjaxUpdatedControl ControlID="DiaryEventsMenu" LoadingPanelID="RadAjaxLoadingPanel1" />
<telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" LoadingPanelID="RadAjaxLoadingPanel1" />
<telerik:AjaxUpdatedControl ControlID="SchedulerAppointmentContextMenu" LoadingPanelID="RadAjaxLoadingPanel1" />
<telerik:AjaxUpdatedControl ControlID="SchedulerTimeSlotContextMenu" LoadingPanelID="RadAjaxLoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1" />
<telerik:AjaxUpdatedControl ControlID="DiaryEventsMenu" LoadingPanelID="RadAjaxLoadingPanel1" />
<telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" LoadingPanelID="RadAjaxLoadingPanel1" />
<telerik:AjaxUpdatedControl ControlID="SchedulerAppointmentContextMenu" LoadingPanelID="RadAjaxLoadingPanel1" />
<telerik:AjaxUpdatedControl ControlID="SchedulerTimeSlotContextMenu" LoadingPanelID="RadAjaxLoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="RadDock1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadDock1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
function
openForm() {
var dock = $find('<%=RadDock1.ClientID %>');
// Center the RadDock on the screen
var viewPort = $telerik.getViewPortSize();
var xPos = Math.round((viewPort.width - parseInt(dock.get_width())) / 2);
var yPos = Math.round((viewPort.height - parseInt(dock.get_height())) / 2);
$telerik.setLocation(dock.get_element(), { x: xPos, y: yPos });
dock.set_closed(
false);
Sys.Application.remove_load(openForm);
}
function hideForm() {
var dock = $find("<%=RadDock1.ClientID %>");
dock.set_closed(
true);
return true;
}
function dockMoved(sender, args) {
//Return RadDock to his original HTML parent so it gets updated via ajax
$get(
"<%=DockPanel.ClientID %>").appendChild(sender.get_element());
}
<div id="errors">
</div>
<telerik:RadScheduler runat="server" ID="RadScheduler1" Width="100%" Height="100%"
DayStartTime="07:00:00" DayEndTime="19:00:00" DataKeyField="ID" DataSubjectField="Subject"
DataStartField="Start" DataEndField="End" DataRecurrenceField="RecurrenceRule"
Culture="en-GB" DayHeaderDateFormat="dddd, dd MMMM yyyy" DataRecurrenceParentKeyField="RecurrenceParentID"
OnFormCreating="RadScheduler1_FormCreating" StartEditingInAdvancedForm="false">
<AppointmentTemplate>
<asp:Panel ID="AppointmentContainer" runat="server">
<table cellpadding="0" cellspacing="0" border="0">
<tr style="vertical-align: top;">
<td class="icon">
<asp:ImageButton ID="ImageButtonMoreInfo" ImageUrl="~/App_Themes/HP25/Images/magnify.png"
OnClientClick="onButtonClick(this,event);" runat="server" AlternateText="Click for more info" />
</td>
<td class="text">
<asp:Label ID="Subject" runat="server" />
</td>
</tr>
<tr id="PropertyRow" runat="server" style="vertical-align: top;">
<td class="icon">
<asp:Image ID="PropertyIcon" AlternateText="Property Address" ImageUrl="~/App_Themes/HP25/Images/house.png"
runat="server" />
</td>
<td class="text">
<asp:Label ID="Property" runat="server" />
</td>
</tr>
</table>
</asp:Panel>
</AppointmentTemplate>
<DayView HeaderDateFormat="dddd, dd MMMM yyyy" />
</telerik:RadScheduler>
Protected Property EditedAppointmentID() As Object
Get
Return ViewState("EditedAppointmentID")
End Get
Set(ByVal value As Object)
ViewState(
"EditedAppointmentID") = value
End Set
End Property
Protected Sub PopulateEditForm(ByVal editedAppointment As Appointment)
Dim app = FindAppointmentById(editedAppointment.ID, Appointments)
TextBoxDescription.Text = app.Description
TextBoxSubject.Text = app.Subject
End Sub
Protected Sub RadScheduler1_FormCreating(ByVal sender As Object, ByVal e As SchedulerFormCreatingEventArgs)
If e.Mode = SchedulerFormMode.Insert OrElse e.Mode = SchedulerFormMode.Edit Then
EditedAppointmentID = e.Appointment.ID
e.Cancel =
True
ScriptManager.RegisterStartupScript(
Me, [GetType](), "formScript", "Sys.Application.add_load(openForm);", True)
PopulateEditForm(e.Appointment)
End If
End Sub
RadTextBoxName.Attributes.Add(
"onkeyup", "setTimeout('__doPostBack(\\'" + RadTextBoxName.ClientID.Replace("_", "$") + "\\',\\'\\')', 0);");
and have this in my AJAXSettings
<telerik:RadAjaxManagerProxy ID="RadAJAXManagerProxy1" runat="server"> <AjaxSettings> <telerik:AjaxSetting AjaxControlID="RadTextBoxName"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="RadTextBoxName" /> <telerik:AjaxUpdatedControl ControlID="errorLabel" /> <telerik:AjaxUpdatedControl ControlID="LinkButtonExpandedSearch" /> <telerik:AjaxUpdatedControl ControlID="dummyTextBox" LoadingPanelID="RadAjaxLoadingPanel1" /> <telerik:AjaxUpdatedControl ControlID="RadGridContact" /> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings> </telerik:RadAjaxManagerProxy>
Let me know if I can provide more information.
<telerik:DynamicRadGrid ID="RadGrid1" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateDeleteColumn="true" AutoGenerateEditColumn="true" AutoGenerateColumns="false" DataSourceID="ProjectsDataSource" GridLines="Vertical" Skin="Windows7"> <MasterTableView DataKeyNames="PKID" DataSourceID="ProjectsDataSource" AutoGenerateColumns="false"> <Columns> <telerik:DynamicGridBoundColumn DataField="ProjectState" HeaderText="Project State" /> <telerik:DynamicGridBoundColumn DataField="ProjectNumber" HeaderText="Project #"/> <telerik:DynamicGridBoundColumn DataField="ACModel" HeaderText="AC Model" /> <telerik:DynamicGridBoundColumn DataField="Name" /> <telerik:DynamicGridBoundColumn DataField="CustomerLocation" HeaderText="Customer Location" /> <telerik:DynamicGridBoundColumn DataField="Description" /> </Columns> <DetailTables> <telerik:GridTableView runat="server" DataKeyNames="PKID" DataSourceID="PhasesDataSource" AutoGenerateColumns="false"> <ParentTableRelation> <telerik:GridRelationFields DetailKeyField="Project_FKID" MasterKeyField="PKID" /> </ParentTableRelation> <Columns> <telerik:DynamicGridBoundColumn DataField="Description" HeaderText="Description" /> <telerik:DynamicGridBoundColumn DataField="HourlyRate" HeaderText="Hourly Rate" /> <telerik:DynamicGridBoundColumn DataField="EstimateHours" HeaderText="Estimate Hours" /> <telerik:DynamicGridBoundColumn DataField="EstimateTotal" HeaderText="Estimate Total" /> <telerik:DynamicGridBoundColumn DataField="EstimateStartDate" HeaderText="Estimate Start Date" /> <telerik:DynamicGridBoundColumn DataField="EstimateCompletionDate" HeaderText="Estimate Completion Date" /> <telerik:DynamicGridBoundColumn DataField="ActualStartDate" HeaderText="Actual Start Date" /> <telerik:DynamicGridBoundColumn DataField="ActualCompletionDate" HeaderText="Actual Completion Date" /> <telerik:DynamicGridBoundColumn DataField="EngineeringAuthorizations" HeaderText="Engineering Authorizations" /> <telerik:DynamicGridBoundColumn DataField="EngineeringType" HeaderText="Engineering Type" /> <telerik:DynamicGridBoundColumn DataField="PhaseState" HeaderText="Phase State" /> <telerik:DynamicGridBoundColumn DataField="PhaseType" HeaderText="Phase Type" /> </Columns> </telerik:GridTableView> </DetailTables> </MasterTableView> </telerik:DynamicRadGrid> <asp:LinqDataSource ID="ProjectsDataSource" runat="server" EnableDelete="true"> <WhereParameters> <asp:DynamicControlParameter ControlId="FilterRepeater" /> </WhereParameters> </asp:LinqDataSource> <asp:LinqDataSource ID="PhasesDataSource" runat="server" ContextTypeName="DD_EPC.Models.EPCDataContext" EnableDelete="True" EnableInsert="True" EnableUpdate="True" TableName="Phases"> </asp:LinqDataSource> <asp:LinqDataSource ID="TasksDataSource" runat="server" ContextTypeName="DD_EPC.Models.EPCDataContext" EnableDelete="True" EnableInsert="True" EnableUpdate="True" TableName="Tasks"> </asp:LinqDataSource><telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
<!-- Only for master table - level 0 --> <asp:ObjectDataSource ID="odsCustomerEntities" runat="server" SelectMethod="GetCustomerEntitiesRows" TypeName="EKSClientLibrary.Ecl.clsEclKernelClient" EnablePaging="True" MaximumRowsParameterName="RowCount" StartRowIndexParameterName="StartingRow"> <SelectParameters> <asp:Parameter Name="StartingRow" Type="Int32" DefaultValue="1" /> <asp:Parameter Name="RowCount" Type="Int32" DefaultValue="25" /> <asp:Parameter Name="pCustPkey" Type="String" DefaultValue="" /> </SelectParameters> </asp:ObjectDataSource> <!-- For header tables -> Level 1 - 3 - n -->
<asp:ObjectDataSource ID="odsEntities" runat="server" SelectMethod="GetEntitiesRows" TypeName="EKSClientLibrary.Ecl.clsEclKernelClient" EnablePaging="True" MaximumRowsParameterName="RowCount" StartRowIndexParameterName="StartingRow"> <SelectParameters> <asp:Parameter Name="StartingRow" Type="Int32" DefaultValue="1" /> <asp:Parameter Name="RowCount" Type="Int32" DefaultValue="25" /> <asp:Parameter Name="pParentPkey" Type="String" DefaultValue="" /> </SelectParameters> </asp:ObjectDataSource>
<!-- For detail tables -> Level 2 - 4 - n -->
<asp:ObjectDataSource ID="odsEntitiesDetails" runat="server" SelectMethod="GetEntitiesDetailsRows"
TypeName="EKSClientLibrary.Ecl.clsEclKernelClient" EnablePaging="True" MaximumRowsParameterName="RowCount"
StartRowIndexParameterName="StartingRow">
<SelectParameters>
<asp:Parameter Name="StartingRow" Type="Int32" DefaultValue="1" />
<asp:Parameter Name="RowCount" Type="Int32" DefaultValue="25" />
<asp:Parameter Name="pPkey" Type="String" DefaultValue="" />
<asp:Parameter Name="pParentPkey" Type="String" DefaultValue="" />
<asp:Parameter Name="pRelatedTable" Type="String" DefaultValue="" />
</SelectParameters>
</asp:ObjectDataSource>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> <AjaxSettings> <telerik:AjaxSetting AjaxControlID="PlaceHolder1"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="PlaceHolder1" /> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings> </telerik:RadAjaxManager> <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>Private Sub DefineGridStructure() 'Definicion global grdEntity = New RadGrid Dim column1 As GridBoundColumn 'Nivel 0 With grdEntity .DataSourceID = "odsCustomerEntities" .ID = "grdEntity" .Width = Unit.Percentage(100) .PageSize = 5 .AllowPaging = True .PagerStyle.Mode = GridPagerMode.NextPrevAndNumeric 'Columnas .AutoGenerateColumns = False column1 = New GridBoundColumn column1.DataField = "C03" column1.HeaderText = "Entidad" .MasterTableView.Columns.Add(column1) .GroupingEnabled = False .ShowGroupPanel = False .ShowStatusBar = True .ClientSettings.AllowDragToGroup = False .MasterTableView.PageSize = 15 .MasterTableView.DataKeyNames = New String(2) {"Pkey", "ParentPkey", "RelatedTable"} .MasterTableView.EnableViewState = True '.MasterTableView.HierarchyLoadMode = GridChildLoadMode.ServerOnDemand End With 'Nivel 1 Dim view1 = New GridTableView(grdEntity) view1.Name = "EntityDetails" view1.EnableViewState = True grdEntity.MasterTableView.DetailTables.Add(view1) 'Add grid to place holder Me.PlaceHolder1.Controls.Add(grdEntity) End Sub Private Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init mCustomerPkey = "" DefineGridStructure() End Sub Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load mCustomerPkey = Request.QueryString("CustPkey") Dim grid As RadGrid = CType(PlaceHolder1.FindControl("grdEntity"), RadGrid) RadAjaxManager1.AjaxSettings.AddAjaxSetting(grid, grid) End Sub Public Sub odsCustomerEntities_Selecting(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.ObjectDataSourceSelectingEventArgs) Handles odsCustomerEntities.Selecting With e.InputParameters .Item("pCustPkey") = mCustomerPkey End With End Sub Private Sub grdEntity_DetailTableDataBind(ByVal source As Object, ByVal e As Telerik.Web.UI.GridDetailTableDataBindEventArgs) Handles grdEntity.DetailTableDataBind Debug.Print("grdEntity_DetailTableDataBind") Dim dataItem As GridDataItem = CType(e.DetailTableView.ParentItem, GridDataItem) Select Case e.DetailTableView.Name Case "EntityDetails" Dim relationFields As GridRelationFields Dim wPkey As String = dataItem.GetDataKeyValue("Pkey").ToString() Dim wParentPkey As String = dataItem.GetDataKeyValue("ParentPkey").ToString() Dim wRelatedTable As String = dataItem.GetDataKeyValue("RelatedTable").ToString() With e.DetailTableView .DataSourceID = "odsEntitiesDetails" .DataKeyNames = New String(2) {"Pkey", "ParentPkey", "RelatedTable"} .Width = Unit.Percentage(100) 'Columnas '.AutoGenerateColumns = True Dim wColumn As GridBoundColumn wColumn = New GridBoundColumn wColumn.DataField = "Pkey" wColumn.HeaderText = "Pkey" .Columns.Add(wColumn) wColumn = New GridBoundColumn wColumn.DataField = "ParentPkey" wColumn.HeaderText = "ParentPkey" .Columns.Add(wColumn) wColumn = New GridBoundColumn wColumn.DataField = "RelatedTable" wColumn.HeaderText = "RelatedTable" .Columns.Add(wColumn) Dim wEntityColumns As EntityColumnType() wEntityColumns = GetEksClientInstance.GetEntitiesDetailsColumns(GetTicket(), wPkey, wRelatedTable) For i = 0 To wEntityColumns.GetLength(0) - 1 wColumn = New GridBoundColumn 'wColumn.DataField = wEntityColumns(i).Code wColumn.DataField = "C0" & i.ToString.Trim wColumn.HeaderText = wEntityColumns(i).Description .Columns.Add(wColumn) Next 'Relaciones relationFields = New GridRelationFields() relationFields.MasterKeyField = "Pkey" relationFields.DetailKeyField = "pPkey" .ParentTableRelation.Add(relationFields) relationFields = New GridRelationFields() relationFields.MasterKeyField = "ParentPkey" relationFields.DetailKeyField = "pParentPkey" .ParentTableRelation.Add(relationFields) relationFields = New GridRelationFields() relationFields.MasterKeyField = "RelatedTable" relationFields.DetailKeyField = "pRelatedTable" .ParentTableRelation.Add(relationFields) 'Nivel 2 Dim view2 = New GridTableView(grdEntity) view2.Name = "Entity" view2.EnableViewState = True .DetailTables.Add(view2) End With Case "Entity" Dim relationFields As GridRelationFields Dim wPkey As String = dataItem.GetDataKeyValue("Pkey").ToString() Dim wParentPkey As String = dataItem.GetDataKeyValue("ParentPkey").ToString() Dim wRelatedTable As String = dataItem.GetDataKeyValue("RelatedTable").ToString() With e.DetailTableView .DataSourceID = "odsEntities" .Width = Unit.Percentage(100) .DataKeyNames = New String(2) {"Pkey", "ParentPkey", "RelatedTable"} 'Columnas Dim column1 = New GridBoundColumn column1.DataField = "C03" column1.HeaderText = "Entidad" .Columns.Add(column1) 'Relaciones relationFields = New GridRelationFields() relationFields.MasterKeyField = "Pkey" relationFields.DetailKeyField = "pPkey" .ParentTableRelation.Add(relationFields) relationFields = New GridRelationFields() relationFields.MasterKeyField = "ParentPkey" relationFields.DetailKeyField = "pParentPkey" .ParentTableRelation.Add(relationFields) relationFields = New GridRelationFields() relationFields.MasterKeyField = "RelatedTable" relationFields.DetailKeyField = "pRelatedTable" .ParentTableRelation.Add(relationFields) 'Nivel 1 Dim view1 = New GridTableView(grdEntity) view1.Name = "EntityDetails" view1.EnableViewState = True .DetailTables.Add(view1) End With End Select End Sub