Questions on UI for ASP.NET AJAX Forum

2 answers

277 views

Hi,
obnoxious question....
I have a RadGrid bound to a SQL data source.
If I use GridBoundColumn to bind datas everything works fine, but if I use GridTemplateColumn with (i.e.) asp:label o asp:literal it does not boud !

See attached code and attached image of the result.

<telerik:RadGrid ID="RadG_Operators" runat="server" AutoGenerateColumns="False" CssClass="RadGridCompact"

DataSourceID="SDS_Operators" GridLines="None" Width="100%" style="outline:none;border:0px;">

<clientsettings>

<selecting allowrowselect="true" />

</clientsettings>

<HeaderStyle HorizontalAlign="Center" />

<MasterTableView cssclass="RadGridCompact" datakeynames="IdOperator" DataSourceID="SDS_Operators" style="outline:none;border:0px;">

<Columns>

<telerik:GridTemplateColumn DataField="OpName" HeaderText='<%$ Resources:WebRes, Operator_Text %>'>

<ItemTemplate>

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

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="OpName" HeaderText='<%$ Resources:WebRes, Operator_Text %>'>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="OpRoleName" HeaderText='<%$ Resources:WebRes, Role_Text %>'

SortExpression="OpRoleName" UniqueName="OpRoleName">

<HeaderStyle HorizontalAlign="Center" />

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn>

<ItemTemplate>

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

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

<asp:SqlDataSource ID="SDS_Operators" runat="server"

ConnectionString="<%$ ConnectionStrings:DBConn %>"

SelectCommand="SELECT Operators.IdOperator, Operators.OpSurname + ' ' + Operators.OpName As OpName, OperatorsRoles.OpRoleName

FROM Operators INNER JOIN

OperatorsRoles ON Operators.IdOpRole = OperatorsRoles.IdOpRole

WHERE (Operators.IdCompany = @IdCompany)">

<SelectParameters>

<asp:QueryStringParameter Name="IdCompany" QueryStringField="IdCompany" />

</SelectParameters>

</asp:SqlDataSource>

What am I doing Wrong ?

Thanks Lorenzo

Grid

answered on 14 Jun 2011

1 answer

132 views

Crash in disable(), after partial postback

I have a page that has two RadComboBoxes and a button inside an UpdatePanel. The first combo box is populated server-side, the second is populated client-side, when a selection is made on the first.

That's not my problem. It's working fine.

My problem is that the button does a partial postback. I'm calling .trackChanges() and .commitChanges on the second combo box as I populate it, so the values in the dropdowns are preserved across the partial postback. But when I change the selected value in the first combo box, I get errors when I try to manipulate the second combo box.

Note - I don't get errors initially, I only get errors after the partial postback,

Currently, I'm getting the error in .disable(), which I call prior to making the ajax call that gets the data. But if I don't call disable, I get the same error in .clearItems(), etc. The second box seems to be confused about how many items are actually in the list.

The error is: Microsoft JScript runtime error: 'this.get_element()' is null or not an object

I'm calling ddLevel2.disable(), where ddLevel2 is my second RadComboBox, as returned by $find(). The javascript for RadComboBox.disable() is:

disable:function()

{

var e=this.get_tableElement();

if (e!=null)

{

e.className="rcbDisabled";

}

this.set_enabled(false);

this.get_inputDomElement().disabled="disabled";

this.disableEvents();

var d=this.get_items().get_count();

for (var c=0; c<d; c++)

{

this._children.getItem(c).disable();

}

Prior to the partial postback, the second dropdown had five items. After the partial postback there are five items in the list. And in this code, 'd' has the value 5.

disable:function()

{

this.set_enabled(false);

this.get_element().className="rcbDisabled";

}

And here, this.get_element() is not defined.

I've created a simple example page that demonstrates the problem. Load the page, select an item from the first combo box. Wait a bit, then select an item from the second combo box. Try this a few times.

Then click on "Go", to generate the partial postback.

Try selecting a different item from the second combo box. You'll see that it contains the same items as prior to the postback.

Then try selecting a different item from the first combo box. That's when I get the error.

I'm using version number 2010.1.519.35 of the Telerik.Web.UI.dll.

My example page:

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<script runat="server">

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

populateLevel1();

connectEvents();

}

protected void Page_PreRender(object sender, EventArgs e)

{

if (!IsPostBack)

{

initJavascript();

}

protected void btnRun_Click(object sender, EventArgs e)

{

}

private void populateLevel1()

{

ddLevel1.Items.Add(new RadComboBoxItem("", ""));

for (var i = 1; i <= 4; i++)

{

string name = String.Format("Item {0}", i);

string value = String.Format("{0}", i);

ddLevel1.Items.Add(new RadComboBoxItem(name, value));

}

ddLevel1.SelectedIndex = 0;

}

protected virtual void connectEvents()

{

ddLevel1.OnClientSelectedIndexChanged = "ddLevel1SelectedIndexChanged";

}

protected virtual void initJavascript()

{

string script = @"

Sys.UI.DomEvent.addHandler(window, 'load',

function()

{{

initJavascript('{0}');

}}

);";

script = String.Format(script, ddLevel2.ClientID);

ClientScript.RegisterStartupScript(this.GetType(), this.ClientID + "_initJavascript", script, true);

}

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<script type="text/javascript">

var ddLevel2 = null;

function initJavascript(ddLevel2ClientID)

{

var foo = $find(ddLevel2ClientID);

if (!foo)

{

window.setTimeout(function() { initJavascript(ddLevel2ClientID); }, 100);

return;

}

ddLevel2 = $find(ddLevel2ClientID);

}

function ddLevel1SelectedIndexChanged(sender, eventArgs)

{

var item = eventArgs.get_item();

var value = item.get_value();

ddLevel2.disable();

window.setTimeout(function() { getLevel2(value, ddLevel2); }, 1000);

}

function getLevel2(value, dd)

{

dd.trackChanges();

dd.clearSelection();

dd.clearItems();

if (value)

{

var items = dd.get_items();

var item = new Telerik.Web.UI.RadComboBoxItem();

item.set_text("");

item.set_value("");

items.add(item);

item.select();

items.add(item);

for (var i = 1; i <= 4; i++)

{

item = new Telerik.Web.UI.RadComboBoxItem();

item.set_text("Item " + value + "." + i);

item.set_value(value + "." + i);

items.add(item);

}

dd.commitChanges();

}

dd.enable();

}

</script>

<title>Testing RadComboBoxes</title>

</head>

<body>

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

<asp:ScriptManager ID="scriptManager" runat="server"></asp:ScriptManager>

<asp:UpdatePanel ID="updatePanel" runat="server">

<ContentTemplate>

<asp:Label ID="lblLevel1" runat="server">Level One:</asp:Label>

<telerik:RadComboBox ID="ddLevel1" runat="server"></telerik:RadComboBox>

<br />

<asp:Label ID="lblLevel2" runat="server">Level Two:</asp:Label>

<telerik:RadComboBox ID="ddLevel2" runat="server"></telerik:RadComboBox>

<br />

<asp:Button ID="btnRun" runat="server"

OnClick="btnRun_Click" Text="Go!" />

</ContentTemplate>

</asp:UpdatePanel>

</form>

</body>

</html>

ComboBox

answered on 14 Jun 2011

2 answers

110 views

Javascript error when using button in RadAjaxPanel

Hi,

I am new to ajax and I am having difficulty using radAjaxPanel.
I am using the following HTML:

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">

<telerik:RadGrid ID="grdFormList" runat="server" CssClass="RadGrid" GridLines="None"

AllowPaging="false" AllowSorting="false" AutoGenerateColumns="False"

ShowStatusBar="true" Height="100%" Width="100%" OnNeedDataSource="grdFormList_NeedDataSource" OnDataBound="grdFormList_DataBound">

<MasterTableView CommandItemDisplay="None" DataKeyNames="ID">

<NoRecordsTemplate>

No forms to review

</NoRecordsTemplate>

<Columns>

<telerik:GridBoundColumn DataField="ID" HeaderText="ID" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Title" HeaderText="Incentive Plan Form" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn DataField="View" HeaderText="View" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">

<ItemTemplate>

<telerik:radbutton id="btnViewItem" runat="server" text="" style="background:url(/_layouts/MirandaImages/msinfopath.png); width:20px; height:20px;">

<Image EnableImageButton="true" />

</telerik:radbutton>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="LastReviewDate" HeaderText="Last Review" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn DataField="Review" HeaderText="Review This Item" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">

<ItemTemplate>

<asp:CheckBox id="cbReview" checked="false" runat="server" />

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</telerik:RadAjaxPanel>

</div>

<div id="divFooterButtons" style="text-align:right; width:800px; padding-top:5px;">

<telerik:RadButton ID="btnSubmit" runat="server" Text="Done" OnClick="btnSubmit_Click" />

</div>

If I put the "divFooterButtons" inside the ajax panel I get an error: PageRequestManagerPerserErrorException: the message received from the server could not be parsed.

I do not have any response.write() in my code behind.

What I want to achieve is to refresh only the grid when I click the button.

Any help would be appreciated.
Thank you

Alex

Ajax

answered on 14 Jun 2011

4 answers

195 views

Split Button - hide context menu before posting back

I could use some help/advice with creating a drop down button that posts back to the server when the contextmenu item is clicked. Here are two different approaches.

The first simple example does this, but it doesn't refresh nicely. When I click the contextmenu item, the menu begins to close back up and simultaneously the postback starts. So what the user sees is the menu half-way closed as the browser is busy working on the postback. It just doesn't look polished. I'd like for the page to be in some kind of stable looking state at the time the postback initiates.

<telerik:RadButton EnableSplitButton="true" ID="SplitButton3" AutoPostBack="false"

runat="server" Text="Leave" OnClientClicked="OnClientSplitButton3Clicked">

</telerik:RadButton>

<div style="display: none;">

<telerik:RadContextMenu ID="RadContextMenu3" runat="server" EnableRoundedCorners="false"

OnItemClick="RadContextMenu3_Click">

<Items>

<telerik:RadMenuItem Text="Leave by Land" Value="LAND">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Leave by Sea" Value="SEA">

</telerik:RadMenuItem>

</Items>

</telerik:RadContextMenu>

</div>

function OnClientSplitButton3Clicked(sender, args) {

var contextMenu = $find("<%=RadContextMenu3.ClientID%>");

var currentLocation = $telerik.getLocation(sender.get_element());

contextMenu.showAt(currentLocation.x, currentLocation.y + 28);

}

The second approach is a little more complex. It produces the sort of user experience I'm trying to achieve, but it doesn't work due to the issue I posted in another thread titled "Single Click Split Button?". In the SplitButton1_Click server-side code, the SplitButton1.CommandName is always blank - it appears as though the set_enabled(false) javascript command is clearing it out.

telerik:RadButton EnableSplitButton="true" ID="SplitButton1" AutoPostBack="false"

runat="server" Text="Assign" OnClientClicked="OnClientSplitButton1Clicked" EnableEmbeddedSkins="false"

OnClick="SplitButton1_Click">

</telerik:RadButton>

<div style="display: none;">

<telerik:RadContextMenu ID="RadContextMenu1" runat="server" OnClientItemClicked="OnClientContextMenu1Clicked">

<Items>

<telerik:RadMenuItem Text="Assign and Return to List">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Assign and Continue">

</telerik:RadMenuItem>

</Items>

</telerik:RadContextMenu>

</div>

function OnClientContextMenu1Clicked(sender, args) {

// 2

var itemText = args.get_item().get_text();

var splitButton = $find("<%=SplitButton1.ClientID%>");

if (itemText == "Assign and Return to List") {

splitButton.set_commandName("AssignReturn");

}

else if (itemText == "Assign and Continue") {

splitButton.set_commandName("AssignContinue");

}

splitButton.set_text("Assigning...");

//allow context menu to finish hiding before doing postback

setTimeout('executeButtonClick()', 200);

}

function executeButtonClick() {

// 3

var splitButton = $find("<%=SplitButton1.ClientID%>");

splitButton.click();

}

function OnClientSplitButton1Clicked(sender, args) {

var contextMenu = $find("<%=RadContextMenu1.ClientID%>");

var btnText = sender.get_text();

if (btnText == "Assign") {

//text is still in initial state, so display the context menu.

// 1

var currentLocation = $telerik.getLocation(sender.get_element());

contextMenu.showAt(currentLocation.x, currentLocation.y + 28);

}

else {

// context menu has been clicked, so do a postback

// 4

sender.set_autoPostBack(true);

sender.set_enabled(false);

}

protected void SplitButton1_Click(object sender, EventArgs e)

{

lblMessage.Text = "Assign with this command: " + SplitButton1.CommandName + " " + DateTime.Now.ToLongTimeString();

}

Button

answered on 14 Jun 2011

1 answer

142 views

ComboBox / Templates - width problem

Hi,

I followed the ComboBox sample http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/templates/defaultcs.aspx in order to use the Combobox with checkboxes. In the sample, I found that the width of the combox is fixed. However, in my case, I would like to unspecify it so that the combobox can be expand / shrink according to its container / browser.

Pls. kindly advise.

Thanks,
Elton

ComboBox

answered on 14 Jun 2011

2 answers

112 views

RadComboBox for ASP.NET AJAX SelectedIndexchanged issue

Hello Telerik Team

Currently I'm using RadControl version : 2011.1.315.35 (for ASP.NET AJAX). After doing research a lot on this forum and the Internet, I still can not solve my issue so I post here.

My ASPX file :

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage/DownloadCenter.Master" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="DownloadCenter.GUI.Test" %>

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

<asp:Content ID="Content1" ContentPlaceHolderID="contentPage" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadComboBox ID="rd" runat="server"

EnableLoadOnDemand="True"

DataTextField="Desc"

DataValueField="PayID"

OnItemsRequested="RadComboBox1_ItemsRequested"

AutoPostBack="True"

onselectedindexchanged="rd_SelectedIndexChanged"

>

</telerik:RadComboBox>

</asp:Content>

My code behind looks like

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using DownloadCenter.Entity;

using Telerik.Web.UI;

namespace DownloadCenter.GUI

{

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

{

BO bo = new BO();

DB db = new DB();

User user;

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

BindRD();

}

private void BindRD()

{

rd.DataSource = db.GetPayMethod_CB();

rd.DataBind();

}

protected void RadComboBox1_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)

{

rd.DataSource = db.GetPayMethod_CB();

rd.DataBind();

}

protected void rd_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)

{

string tt = rd.SelectedValue.ToString();

Session["SupplierID"] = e.Value;

}

The very first issue I face is : when I select "aaa" the comboBox will automatically select "bbb". But this issue i already resolved by using

<script language="javascript">

function onBlur(comboBox) {

comboBox.OriginalText = comboBox.GetText();

}

</script>

Now when I select "aaa" it will display "aaa" but I don't know why the SelectedIndexChanged event won't fire.
Please notice that
DataTextField="Desc"
DataValueField="PayID"
has unique value and it differs from other field.

I already follow many work around here but i still can make it.
Please help me out.
Many thanks in advance

Regards
Pasha

ComboBox

answered on 14 Jun 2011

4 answers

228 views

Single Click Split Button?

It is possible to use the single click feature with a split button? I'm having trouble with this.

If you run the following code, you'll see the split button feature working. The split section of the button invokes the context menu for changing the button's text and command. The main part of the button does a postback. Each time a postback is done the server-side code displays the button's commandname. For example, I can run the page, choose "Save and Start Another" and keep clicking it. It stays on "Save and Start Another" after the postback.

But... if you uncomment the two lines of javascript, the Single Click feature starts working as expected. But now if I choose "Save and Start Another" from the context menu then do a postback, it reverts back to "Save and Return to List". It seems like the set_enabled(false) is causing the button's commandname to revert back to it's default/declared value. The commandname set on the clientside is lost.

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

<script type="text/javascript">

function OnClientSplitButton2Clicked(sender, args) {

if (args.IsSplitButtonClick()) {

var currentLocation = $telerik.getLocation(sender.get_element());

var contextMenu = $find("<%=RadContextMenu2.ClientID%>");

contextMenu.showAt(currentLocation.x, currentLocation.y + 22);

sender.set_autoPostBack(false);

}

else {

sender.set_autoPostBack(true);

//sender.set_enabled(false);

//sender.set_text("Saving...");

}

function OnClientContextMenu2Clicked(sender, args) {

var itemText = args.get_item().get_text();

var splitButton = $find("<%=SplitButton2.ClientID%>");

if (itemText == "Save and Return to List") {

splitButton.set_text("Save and Return to List");

splitButton.set_commandName("SaveReturn");

}

else if (itemText == "Save and Start Another") {

splitButton.set_text("Save and Start Another");

splitButton.set_commandName("SaveStartAnother");

}

</script>

</telerik:RadCodeBlock>

<br />

<asp:Label ID="lblMessage" runat="server" Text="" Style="font-size: 12pt; color: Red;"></asp:Label>

<br />

<telerik:RadButton ID="SplitButton2" AutoPostBack="false" runat="server" Text="Save and Return to List"

EnableSplitButton="true" Height="22px" Enabled="true" CommandName="SaveReturn"

UseSubmitBehavior="false" OnClientClicked="OnClientSplitButton2Clicked" OnClick="SplitButton2_Click">

</telerik:RadButton>

<div style="display: none;">

<telerik:RadContextMenu ID="RadContextMenu2" runat="server" OnClientItemClicked="OnClientContextMenu2Clicked"

EnableRoundedCorners="true">

<Items>

<telerik:RadMenuItem Text="Save and Return to List">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Save and Start Another">

</telerik:RadMenuItem>

</Items>

</telerik:RadContextMenu>

</div>

protected void SplitButton2_Click(object sender, EventArgs e)

{

lblMessage.Text = "Save with this command: " + SplitButton2.CommandName + " " + DateTime.Now.ToLongTimeString();

}

Button

answered on 14 Jun 2011

7 answers

175 views

Export to Excel and Word from Radgrid

Hello,i have a question about exporting to excel,i have i Radgrid (include Client Select Column) when i export , it will export from Radgrid (include client select column),but i don't want to that,i want to only get data from radgrid ( not get cilent select column or other columns such as template column ....)
this's demo :
http://nguy-hiem.co.cc/share/demo.png
please help me,THANK

Grid

answered on 14 Jun 2011

4 answers

61 views

Why don't ComboBoxes used as filters remember their selection state

Hi

I have been going round and round on this for days now.

I have a ComboBox in my FilterTemplate area of a grid.

I can get the filtering to occur, but the combo ALWAYS reverts to its default selection.

I thought I had found the magic setting, ViewStateMode, but that didn't work either.

I have ViewState turned on for the page, for the control, that after all is the default,
and I have ViewStateMode enabled on my combo.

But every time I make a selection I see the text area of the combo change.
I trigger the filter with some client side code, a post back occurs, and wammo!!!
the combo reverts to its default value.

Hellllpppppp

ComboBox

answered on 14 Jun 2011

3 answers

127 views

Dynamic Bind Delete Button

I Dynamic Bind Delete Button in that radgrid ,
It's not properly work

System.Webforms.pagerequestmanagersevererrorexception.Invalid post back or callback arguments

Thanks,
Mohamed.

Grid

answered on 14 Jun 2011