Questions on UI for ASP.NET AJAX Forum

4 answers

194 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

141 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

110 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

225 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

172 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

59 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

126 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

2 answers

92 views

exporting the RadGrid to MS word

I have a link

http://gyansuraj.com?ID=5

that leads to a page that has a grid in it. I can easily print this grid using

RadGrid1.MasterTableView.ExportToWord();

This page leads to same grid depending on the ID that I am passing as a querystring, the data of the grid keeps changing. so if I pass http://gyansuraj.com?ID=7, the data of the grid is different.

User is asking me to consolidate all these IDS and export them in MS word as diffent pages of the same document so in the above case, I will have two pages in same document, one will be with ID=7 and another one will be with ID=5.

I am not sure how can i achieve this. i can save individual word document for each ID, but I am not sure how can i consolidate all of them.
There can be at least 100 ID so they want a MS word document that has 100 pages and each page has a grid data of different ID's.

Grid

answered on 14 Jun 2011

1 answer

325 views

Exception Details: System.NullReferenceException: Object reference not set to an instance of an object comes when try to set scroll bar as true in telerik chart code

Hello Sir,

I was trying to create a chart with scroll bar so that we can see maximum chart but when we set scroll bar is true then websites gives null reference error message and when we set scroll bar as null then it is working fine.

Please find the error message as:

Object reference not set to an instance of an object.
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.

Source Error:

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

Stack Trace:

[NullReferenceException: Object reference not set to an instance of an object.]
   Telerik.Web.ScriptObjectBuilder.RegisterCssReferences(Control control) +257
   Telerik.Web.UI.RadChart.OnPreRender(EventArgs e) +64
   System.Web.UI.Control.PreRenderRecursiveInternal() +103
   System.Web.UI.Control.PreRenderRecursiveInternal() +175
   System.Web.UI.Control.PreRenderRecursiveInternal() +175
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +2496

--------------------------------------------------------------------------------
Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.1

Please find the details code which i have written and help me to resolve this issue.

Thanks,
Vinod

//---------------Default aspx.vb------------------//

Imports System
Imports System.Data
Imports System.Configuration
Imports System.Collections
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls
Imports System.Data.SqlClient
Imports Telerik.Charting

Partial Public Class Chart_Examples_Skinning_Bars_DefaultCS
Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        If Not Page.IsPostBack Then
            RadChart1.Skin = "Default"
        End If
        PopulateSkins()
    End Sub
    Private Sub PopulateSkins()
        If Not Page.IsPostBack Then
            Dim skinsList As New ArrayList()
            skinsList.AddRange(New String() {"Black", "Default", "Hay", "Inox", "Office2007", "Outlook", "Sunset", "Telerik", "Vista", "Web20", "WebBlue", "Marble", "Metal", "Wood", "BlueStripes", "DeepBlue", "DeepGray", "DeepGreen", "DeepRed", "GrayStripes", "GreenStripes", "LightBlue", "LightBrown", "LightGreen"})
            ThumbsList.DataSource = skinsList
            ThumbsList.DataBind()
        End If
    End Sub
    Protected Sub OrientationList_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
        RadChart1.SeriesOrientation = DirectCast([Enum].Parse(GetType(ChartSeriesOrientation), OrientationList.SelectedValue), ChartSeriesOrientation)
    End Sub
    Protected Sub SubtypeDropdown_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
        RadChart1.Series(0).Type = DirectCast([Enum].Parse(GetType(ChartSeriesType), SubtypeDropdown.SelectedValue), ChartSeriesType)
        RadChart1.Series(1).Type = DirectCast([Enum].Parse(GetType(ChartSeriesType), SubtypeDropdown.SelectedValue), ChartSeriesType)
    End Sub
    Protected Overloads Overrides Sub OnPreRender(ByVal e As EventArgs)
        MyBase.OnPreRender(e)
        For Each item As ListItem In ThumbsList.Items
            item.Text = String.Format("<img src='thumbnails/{0}.gif' alt='' onclick='if(this.parentNode.click)this.parentNode.click();'/> {0}", item.Value)
        Next
    End Sub
    Protected Sub ThumbsList_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
        RadChart1.Skin = ThumbsList.SelectedValue
    End Sub

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click

        RadChart1.ClientSettings.ScrollMode = Telerik.Web.UI.ChartClientScrollMode.XOnly

    End Sub

    Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click
        Dim connectionString As [String] = "Data Source = IN-GGS-VINOD\MSSQLSERVER1; Initial Catalog=LibraryManagementSystem;Integrated Security = True;"
        Dim selectCommand As String = "SELECT top 200 [Facility] ,[TodaysChart],[YesterdaysChart] FROM [LibraryManagementSystem].[dbo].[Facility]"
        Dim dataAdapter As New SqlDataAdapter(selectCommand, connectionString)
        Dim table As New DataTable()
        dataAdapter.Fill(table)
        RadChart1.DataSource = table
        RadChart1.PlotArea.XAxis.DataLabelsColumn = "Facility"
        AddHandler RadChart1.DataBound, AddressOf radChart1_DataBound
        RadChart1.SeriesOrientation = ChartSeriesOrientation.Horizontal
        RadChart1.Series(0).Type = ChartSeriesType.StackedBar
        RadChart1.Series(1).Type = ChartSeriesType.StackedBar

        RadChart1.DataBind()
    End Sub
    Private Sub radChart1_DataBound(ByVal sender As Object, ByVal e As EventArgs)
        RadChart1.Series(0).DataYColumn = "TodaysChart"
        ' assign appearance related properties
        radChart1.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = 300
        radChart1.PlotArea.XAxis.Appearance.TextAppearance.TextProperties.Color = System.Drawing.Color.BlueViolet
        RadChart1.PlotArea.Appearance.Dimensions.Margins.Bottom = Telerik.Charting.Styles.Unit.Percentage(20)
        RadChart1.PlotArea.Appearance.Dimensions.Margins.Left = Telerik.Charting.Styles.Unit.Percentage(20)

        RadChart1.SeriesOrientation = ChartSeriesOrientation.Horizontal
        RadChart1.Series(0).Type = ChartSeriesType.StackedBar
        RadChart1.Series(1).Type = ChartSeriesType.StackedBar

End Sub

End Class

//----------default.aspx-----------------//

<%@ Page Language="vb" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="Chart_Examples_Skinning_Bars_DefaultCS" %>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body class="BODY">
    <form id="Form1" runat="server">
        <asp:ScriptManager ID="ScriptManager" runat="server" />
        <div id="MainPlaceHolder">
            <div id="ChartArea">
           <div id="chartOptionsPlaceholder">
                    <asp:Button ID="Button1" runat="server" Text="PopulateChart" />
                    <asp:Button ID="Button2" runat="server" Text="NewPopulateChart" />
                    <br />
                    <asp:Label ID="lblChartOrientation" runat="server" Text="Series orientation:" />
                    <asp:RadioButtonList AutoPostBack="true" ID="OrientationList" runat="server" OnSelectedIndexChanged="OrientationList_SelectedIndexChanged">
                        <asp:ListItem Text="Horizontal" Value="Horizontal" />
                        <asp:ListItem Text="Vertical" Value="Vertical" Selected="True" />
                    </asp:RadioButtonList>
                    <br />
                    <asp:Label ID="lblChartType" runat="server" Text="Additional chart types:" />
                    <asp:DropDownList AutoPostBack="true" ID="SubtypeDropdown" runat="server" OnSelectedIndexChanged="SubtypeDropdown_SelectedIndexChanged">
                        <asp:ListItem Text="Normal Bar" Value="Bar" Selected="True" />
                        <asp:ListItem Text="Stacked Bar" Value="StackedBar" />
                        <asp:ListItem Text="Stacked Bar 100" Value="StackedBar100" />
                    </asp:DropDownList>
                </div>
                <div id="chartPlaceholder">
                    <telerik:RadChart ID="RadChart1" SkinsOverrideStyles="true" runat="server"
                       Width="1038px" AutoLayout="true">

                    <ClientSettings EnableZoom="false" ScrollMode=Both />
           <Series>
             <telerik:ChartSeries Name="series 1" Type="Bar">
             <Items>
             <telerik:ChartSeriesItem YValue="3" XValue="0" />
             <telerik:ChartSeriesItem YValue="3" XValue="1" />
             <telerik:ChartSeriesItem YValue="4" XValue="3" />
             <telerik:ChartSeriesItem YValue="3" XValue="3" />
             <telerik:ChartSeriesItem YValue="5" XValue="4" />
             </Items>
             </telerik:ChartSeries>
             <telerik:ChartSeries Name="series 2" Type="Bar">
             <Items>
             <telerik:ChartSeriesItem YValue="1" XValue="5" />
             <telerik:ChartSeriesItem YValue="2" XValue="4" />
             </Items>
             </telerik:ChartSeries>
             </Series>

Chart (Obsolete)

answered on 14 Jun 2011

3 answers

187 views

ComboBox with TreeView and CheckBox

Hi,

I am using ComboxBox with TreeView. TreeView have CheckBox and CheckChildNodes enable.

What I want to do is whatever I checked in the TreeView, I need to show in ComboBox. I only found the example that is ComboxBox with TreeView and OnClientNodeClicking. Please let me know which event i need to use to show the checked value in ComboBox.

Thanks,
Alex

TreeView

answered on 14 Jun 2011