Questions on UI for ASP.NET AJAX Forum

2 answers

159 views

Hello,

I've been using telerik/ajax for a couple of months, and I have recently hit a proplem with regards to displaying a loading panel. When the user click a button, I want to display a loading panel while the server process the data. However, I also want to run a javascript method before the post is made to the server. See my example:

<head runat="server">

<title></title>

<script type="text/javascript">

<!--

function addItem()

{

var textBoxData = document.getElementById("txtData");

if (textBoxData.value.length > 0)

{

var listBoxData= document.getElementById("lsbSelectedData");

var newLength = listBoxData.length;

listBoxData[newLength] = document.createElement("option");

listBoxData[newLength].text = textBoxData.value;

}

else

{

alert("Enter data");

}

textBoxData.value = "";

textBoxData.focus();

return false;

}

function submitData()

{

var listBoxData = document.getElementById("lsbSelectedData");

// Ensure that barcodes have been entered

if (listBoxData.options.length > 0)

{

// Store data in a hidden field as the contexts of a listbox

// do not get posted back to the server

var hiddenData = document.getElementById("hdnSelectedData");

var pipedData = "";

var index;

for (var index = 0; index < listBoxData.options.length; index++)

{

pipedData += listBoxData.options[index].text + "|";

}

hiddenData.value = pipedData;

return true;

}

else

{

alert("Enter data");

var textBoxData = document.getElementById("txtData");

textBoxData.focus();

return false;

}

// -->

</script>

</head>

<body>

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

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

<telerik:RadAjaxManager ID="AjaxManager" runat="server" DefaultLoadingPanelID="AjaxLoadingPanel">

<AjaxSettings>

<%--<telerik:AjaxSetting AjaxControlID="btnOK" >

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnlDataEntry" LoadingPanelID="AjaxLoadingPanel" />

<telerik:AjaxUpdatedControl ControlID="lblResults" />

</UpdatedControls>

</telerik:AjaxSetting>--%>

</AjaxSettings>

</telerik:RadAjaxManager>

<asp:Panel ID="pnlDataEntry" runat="server">

<asp:TextBox ID="txtData" runat="server"></asp:TextBox>

<asp:Button ID="btnAdd" runat="server" Text="Add" OnClientClick=" return addItem()" />

</asp:Panel>

<asp:ListBox ID="lsbSelectedData" runat="server" Width="300" Height="200"></asp:ListBox>

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

<br />

<asp:Button ID="btnOK" runat="server" Text="OK" onclick="btnOK_Click" OnClientClick="return submitData()"/>

<%--<asp:Button ID="btnOK" runat="server" Text="OK" onclick="btnOK_Click"/>--%>

<br />

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

<telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel" runat="server" Height="75px" Width="75px"

BackColor="WhiteSmoke" CssClass="loadingImage" HorizontalAlign="Center">

<asp:Image ID="Image1" runat="server" AlternateText="Loading..." ImageUrl="loading5.gif" />

</telerik:RadAjaxLoadingPanel>

</form>

</body>

C# code:

public partial class TestPage: System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void btnOK_Click(object sender, EventArgs e)

{

System.Threading.Thread.Sleep(2000);

StringBuilder results = new StringBuilder();

// Get the formatted data from the hidden field

string pipedData = hdnSelectedData.Value;

if (!string.IsNullOrEmpty(pipedData))

{

results.Append("Results:<BR />");

string[] enteredData = pipedData.Remove(pipedData.Length - 1).Split('|');

foreach (string data in enteredData)

{

results.AppendFormat("{0}<BR />", data);

}

else

{

results.Append("Results: Nothing entered!");

}

lblResults.Text = results.ToString();

}

The code above works, but if you un-comment the in the Ajax manager to enable the loading panel, the btnOK_Click on the server is never called. If you remove the OnClientClick methods from the OK button the loading panel appears, but page does not work how it was designed!.

I would like my javascript to run, the loading panel to appear, and the server to process the post back. Does anybody know what I'm doing wrong? P.S Our version of Telerik is Q2 2008.

Many thanks,

Matt

Ajax

answered on 29 Nov 2010

1 answer

101 views

Radwindow return value problem

Hi,
I have developed opening of radwindow using the following code.

function ShowDialogTest() {

var wnd = window.radopen("TestUpLoad.aspx", "Test");

wnd.setSize(700, 265);

wnd.set_modal(true);

wnd.center();

wnd.set_behaviors(Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move + Telerik.Web.UI.WindowBehaviors.Resize);

wnd.show();

}

and i am loading the radwindow using the following server side code.

protected void cmbTest_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)

{

if (e.Text.ToUpper() == "YES" || e.Text.ToUpper() == "NO")

{

ScriptManager.RegisterStartupScript(this, this.GetType(), "Test", "ShowDialogTest();", true);

//Rest Of the Code

//Block 1

//Block2

}

}

but , i have been facing the following issues
1)i am unable to know how to pass a value from radwindow to the base page(from where it is called).
2)when i execute "ScriptManager.RegisterStartupScript" line to load popup, i would like to hold that line without executing till the value returns from the radwindow, based of the return value from the popup then i would like to execute either "Block1" or "Block2".

Please let me know the better solution for this.
Thanks in advance.

Window

answered on 29 Nov 2010

12 answers

237 views

RADMenu doesn't see style sheet for IE8

RADMenu for AJAX 1Q 2010 running under Sitefinity 3.7 sp2 works in compatibility mode of IE 7 to use my menu specific styles (left align text, dropdown image, background and text colors, etc).

The rest of the page sees the style sheet, but not the RADMenu.

Any ideas?

Thanks,
Rich Winslow
www.automatedresults.com
828-243-5932

Menu

answered on 29 Nov 2010

7 answers

113 views

Multimonth Navigation Very Slow

Is there any reason why when using a multi-month calendar it has to use AutoPostBack and cannot work client side like a single calendar does? The navigation is so slow because of the postbacks and I don't see why it has to use postbacks anyway. I have the calendar wrapped in a conditional update panel, but still it takes much too long for it to navigate. Is there anything I can do to improve the performance of this? It would be nice if you guys would change this to work client side at some point as well which would help a bit.

Calendar

answered on 29 Nov 2010

6 answers

142 views

Export to Excel

Please Tell me simple way to export my grid contents to Excel...
I am using DataTable to bind data with grid

Grid

answered on 29 Nov 2010

3 answers

105 views

Client Side Insert/Update Question

Hi All,

I'm looking at the online demo for client side insert, update, delete.

My only problem with it is that it employs the use of a totally separate web service, and does most everything using manual javascript.

I like the RadComboBox, it has an OnItemsRequested event, and while being AJAX, doesn't require a web service to run. It's just a server side event of the control.

<telerik:RadComboBox ID="ProductComboBox" visible="true" runat="server"

EnableViewState="true" Width="350px" Height="150px" EmptyMessage="Select a Product"

EnableLoadOnDemand="True" OnItemsRequested="ProductComboBox_ItemsRequested"

OnTextChanged="ProductTextChange" autoPostBack="false" AllowCustomText="True">

</telerik:RadComboBox>

Is there a way to do RadGrid, having client side controls that update the grid client side, and then call SqlDataSource objects server side using an eventing structure?

Is that currently possible with RadGrid?

It just seems a bit extraneous to have to build all of the items by hand, updates by hand in javascript, and then calls to a webservice when I'd rather use SqlDataSources with updates and server side events.

Any help you could provide is appreciated!

-Brandon

Grid

answered on 29 Nov 2010

4 answers

88 views

RadGridView problem with RowData

Hi,

We have RadGridView, with columns such as itemid, price, quantity, total, ....
If we add a new line or changing an existing in Edit Form it is needed that “Handler” automatically fill in other fields, based on new value.
All fields are related-linked from childlink's and should respond to the changing values
Question:
1. why they do not respond
2. while confirming the entries need to recalculate total value (price * quantity), but he fails to do so with values that are currently in the field but with the old values before the update..

Does anyone can help?

Thanks,

Dragan

Grid

answered on 29 Nov 2010

2 answers

118 views

From gridview to radgrid

HI,

it is extremely important to me that change Gridwiev and instead it add Radgrid control in my application. When I do it, i have a problem that I can not solve. The application handler and populate functions (witch are responsible for data pump) should be modified to work with radgrid, but they do not work, and also callbacks. Will put code below so if anyone has any idea what to do I'll gladly accept it,

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

<%@ Register Assembly="EnterpriseASPClient" Namespace="EnterpriseASPClient.Core" TagPrefix="core" %>

<%@ Register Assembly="EnterpriseASPClient" Namespace="EnterpriseASPClient.Controls" TagPrefix="ctls" %>

<core:DBDataSource ID="DBDataSource1" runat="server" ObjectName="ServiceInvoiceHeader" TableType="Detail" TableName="InvoiceHeader"/>

<core:ClientCallbackControl>

<core:CallbackLink Target="txtTaxPercent;lblSubTotal;lblTotal;lblTaxAmount;txtSubTotal;txtTotal;txtTaxAmount" Source="cmbTaxGroupID" DataFieldTarget="TaxPercent;SubTotal;Total;TaxAmount" DataFieldSource="TaxGroupID" />

<core:CallbackLink Target="lblSubTotal;lblTotal;lblTaxAmount;txtSubTotal;txtTotal;txtTaxAmount" Source="txtItemUnitPrice" DataFieldTarget="SubTotal;Total;TaxAmount" DataFieldSource="ItemUnitPrice" />

</Callbacks>

</core:ClientCallbackControl>

this is my grid (callback link should populate data when i change some field in edit mode but it does not):

<telerik:RadGrid ID="InvoiceDetailGrid" AllowFilteringByColumn="True" runat="server" DataSourceID="DBDataSource1" AutoGenerateColumns="False"

GridLines="None" AllowAutomaticDeletes="True" AllowAutomaticUpdates="True" AllowAutomaticInserts="True" AllowPaging="True" OnDetailTableDataBind="GridIsBinding" >

<MasterTableView EditMode="PopUp"

DataKeyNames="CompanyID,DivisionID,DepartmentID,InvoiceNumber,InvoiceLineNumber"

DataSourceID="DBDataSource1"

DataMember="InvoiceDetail"

CommandItemDisplay="Top"

InsertItemPageIndexAction="ShowItemOnCurrentPage">

<telerik:GridEditCommandColumn ButtonType="ImageButton" InsertImageUrl="~/images/edit.gif" UniqueName="EditCommandColumn">

</telerik:GridEditCommandColumn>

<telerik:GridButtonColumn ConfirmText="Delete this product?" ConfirmDialogType="RadWindow"

ConfirmTitle="Delete" ButtonType="ImageButton" ImageUrl="~/images/delete.gif" CommandName="Delete" Text="Delete"

UniqueName="DeleteColumn">

</telerik:GridButtonColumn>

<telerik:GridTemplateColumn HeaderText="<%$ Translation:WarehouseID%>">

<asp:Label ID="lblWarehouseID"

runat="server"

Text='<%# Eval("WarehouseID") %>'

>

</asp:Label>

</ItemTemplate>

<telerik:RadComboBox ID="RadComboBoxWarehouseID"

Text="WarehouseID"

runat="server"

DataMember="InvoiceDetail.Warehouses_Via_WarehouseID"

DataTextField="WarehouseID"

DataValueField="WarehouseID"

SelectedValue='<%# Bind("WarehouseID") %>'

DataSourceID="DBDataSource2">

</telerik:RadComboBox>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="<%$ Translation:Service Invoice / Line Number %>" >

<asp:Label ID="lblInvoiceNumber" runat="server" Text='<%# Eval("InvoiceNumber") %>'></asp:Label>/

<asp:Label ID="lblInvoiceLineNumber" runat="server" Text='<%# Eval("InvoiceLineNumber") %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="<%$ Translation:Item ID %>" SortExpression="ItemID">

<asp:Label ID="lblItemID" runat="server" Text='<%# Eval("ItemID") %>'></asp:Label>

</ItemTemplate>

<ctls:PopupControl id="lkpItemID" runat="server" Text='<%# Bind("ItemID") %>'

TargetURL="../../LookupForms/ServiceInventoryItemsLookup.aspx" Width="100%" />

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn HeaderText="<%$ Translation:Description %>" DataField="Description" SortExpression="Description" />

<telerik:GridBoundColumn HeaderText="<%$ Translation:Serial / Lot Number %>" DataField="SerialNumber" SortExpression="SerialNumber" />

<telerik:GridTemplateColumn HeaderText="<%$ Translation:Invoice Qty %>" SortExpression="InvoiceQty">

<asp:Label ID="lblOrderQty" runat="server" Text='<%# Eval("OrderQty", "{0:0.0000}") %>'></asp:Label>

</ItemTemplate>

<asp:TextBox ID="txtOrderQty" DataMember="InvoiceDetail" runat="server" Text='<%# Bind("OrderQty", "{0:0.0000}") %>' Width="31%" ></asp:TextBox>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="<%$ Translation:UOM / WT / Total WT %>" >

</ItemTemplate>

<telerik:RadTextBox ID="txtItemUOM" runat="server" DataMember="InvoiceDetail" Text='<%# Bind("ItemUOM") %>' Width="31%"></telerik:RadTextBox>

<telerik:RadTextBox ID="txtItemWeight" runat="server" DataMember="InvoiceDetail" Text='<%# Bind("ItemWeight") %>' Width="32%"></telerik:RadTextBox>

<telerik:RadTextBox ID="txtTotalWeight" runat="server" DataMember="InvoiceDetail" Text='<%# Bind("TotalWeight") %>' Width="30%"></telerik:RadTextBox>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="">

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

</ItemTemplate>

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

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="<%$ Translation:Item Cost %>" >

<asp:Label ID="lblItemCost" runat="server" Text='<%# Eval("ItemCost", "{0:0.0000}") %>'></asp:Label>

</ItemTemplate>

<telerik:RadTextBox ID="txtItemCost" runat="server" DataMember="InvoiceDetail" Enabled="false" Text='<%# Bind("ItemCost", "{0:0.0000}") %>' Width="45%"></telerik:RadTextBox>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="<%$ Translation:Item Unit Price %>" >

<asp:Label width="25%" ID="lblItemUnitPrice" runat="server" Text='<%# Eval("ItemUnitPrice", "{0:0.0000}") %>'></asp:Label>

</ItemTemplate>

<asp:TextBox width="25%" ID="txtItemUnitPrice" runat="server" Text='<%# Bind("ItemUnitPrice", "{0:0.0000}") %>' ></asp:TextBox>

<asp:CheckBox width="20%" ID="chkTaxable" runat="server" Text='<%$ Translation:Taxable %>' Checked='<%# Bind("Taxable") %>' AutoPostBack="true" />

<asp:Label width="18%" runat="Server" ID="text" Text="Discount"></asp:Label>

<telerik:RadTextBox width="26%" ID="txtDiscountPerc" runat="server" Text='<%# Bind("DiscountPerc", "{0:0.0000}") %>' ></telerik:RadTextBox>%

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="<%$ Translation:Tax Group / Percent / Amount %>" >

<asp:Label ID="lblTaxGroupID" runat="server" DataMember="InvoiceDetail" Text='<%# Eval("TaxGroupID") %>'></asp:Label>/

<asp:Label ID="lblTaxPercent" runat="server" DataMember="InvoiceDetail" Text='<%# Eval("TaxPercent", "{0:0.0000}") %>'></asp:Label>%

<asp:Label ID="lblTaxAmount" runat="server" DataMember="InvoiceDetail" Text='<%# Eval("TaxAmount", "{0:0.0000}") %>'></asp:Label>

</ItemTemplate>

<telerik:RadComboBox ID="cmbTaxGroupID" runat="server" DataSourceID="DBDataSource1" DataMember="InvoiceDetail.TaxGroups_Via_TaxGroupID"

DataTextField="TaxGroupID" DataValueField="TaxGroupID" SelectedValue='<%# Bind("TaxGroupID") %>' Width="30%" >

</telerik:RadComboBox>

<asp:TextBox ID="txtTaxPercent" runat="server" DataMember="InvoiceDetail" Enabled="false" Text='<%# Bind("TaxPercent", "{0:0.0000}") %>' Width="30%" ></asp:TextBox>%

<asp:TextBox ID="txtTaxAmount" runat="server" DataMember="InvoiceDetail" Enabled="false" Text='<%# Bind("TaxAmount", "{0:0.0000}") %>' Width="30%" ></asp:TextBox>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="<%$ Translation:Sub Total / Total %>" >

<asp:Label ID="lblSubTotal" runat="server" Text='<%# Eval("SubTotal", "{0:0.0000}") %>'></asp:Label>/

<asp:Label ID="lblTotal" runat="server" Text='<%# Eval("Total", "{0:0.0000}") %>'></asp:Label>

</ItemTemplate>

<asp:TextBox ID="txtSubTotal" runat="server" Text='<%# Bind("SubTotal", "{0:0.0000}") %>' Width="47%"></asp:TextBox>

<asp:TextBox ID="txtTotal" runat="server" Text='<%# Bind("Total", "{0:0.0000}") %>' Width="48%"></asp:TextBox>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="a" >

</ItemTemplate>

<asp:Button ID="recalc" runat="server" Text="<%$ Translation:Recalc %>" OnClick="Recalc" />

</EditItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</EditFormSettings>

</MasterTableView>

</ClientSettings>

</telerik:RadGrid>

<telerik:GridTextBoxColumnEditor ID="GridTextBoxColumnEditor1" runat="server" TextBoxStyle-Width="200px" />

<telerik:GridTextBoxColumnEditor ID="GridTextBoxColumnEditor2" runat="server" TextBoxStyle-Width="150px" />

<telerik:GridDropDownListColumnEditor ID="GridDropDownColumnEditor1" runat="server" DropDownStyle-Width="110px" />

<telerik:GridNumericColumnEditor ID="GridNumericColumnEditor1" runat="server" NumericTextBox-Width="40px" />

<telerik:RadWindowManager ID="RadWindowManager1" runat="server"></telerik:RadWindowManager>

<br />

Thank you in advance,

Dragan.

Grid

answered on 29 Nov 2010

3 answers

687 views

access cell values in radgrid selected index event

hi

i have a grid with some datas in it when i select a row or column the corresponding items has to get binded to the text box outside the grid what should i do to achieve this pl tell me a good suggestion and i need an immediate reply

Grid