Questions on UI for ASP.NET AJAX Forum

1 answer

123 views

Is there a way to add a pop-up after clicking the Insert link-button in the edit mode of a RadGrid that asks a User if they would like to navigate to a different URL and then takes them there if they say yes? Would that be pure javascript?

Would it be easier to include a separate link button (IE: Insert, Link, Cancel), and have the Link open in a new window/tab? If so, how would that be accomplished?

Thanks,
Mark

Grid

answered on 05 Dec 2013

1 answer

83 views

Programmatic Creation Data Navigation Chart

hi

is it possible to get an example or some suggestions of how to dynamically/programmatically create a html5 chart with data navigation , assuming that it is possible to do so ?

Peter.

Chart (HTML5)

answered on 05 Dec 2013

3 answers

118 views

[Solved] ScrollingHeader grid column problem

Hello Telerik team.

I'm using telerik 2013.3.1114.40 version

Please look at this sample code. it's very simple code.
The problem is, if radgrid set scrolling header. header column width and data column width are not fit slightly.
I attached screenshots IE and chrome. please let me know any solutions.
thank you.

sample source link Downloading sample source here click me !!!!!!

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>

<!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 runat="server">

<title></title>

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />

</head>

<body>

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

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

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

//Put your JavaScript code here.

</script>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

</telerik:RadAjaxManager>

<div>

<telerik:RadGrid ID="RadGridOtherMembersStateList" runat="server" Width="100%"

OnItemDataBound="RadGridOtherMembersStateList_ItemDataBound">

<MasterTableView AutoGenerateColumns="false" AllowSorting="false" AllowPaging="false"

AllowNaturalSort="false" AllowCustomPaging="false" AllowCustomSorting="false"

CommandItemDisplay="None" TableLayout="Auto">

<Columns>

<telerik:GridHyperLinkColumn HeaderText="State" DataTextField="StateName" UniqueName="StateName"

ItemStyle-HorizontalAlign="Left">

</telerik:GridHyperLinkColumn>

<telerik:GridBoundColumn HeaderText="Count" DataField="StateCount" UniqueName="StateCount"

HeaderStyle-Width="100" HeaderStyle-HorizontalAlign="Center"

ItemStyle-HorizontalAlign="Right">

</telerik:GridBoundColumn>

</Columns>

<NoRecordsTemplate>

<div class="divNoRecordsTemplateLayout">

No records found.

</div>

</NoRecordsTemplate>

</MasterTableView>

<ClientSettings>

<Scrolling AllowScroll="true" UseStaticHeaders="true" />

</ClientSettings>

</telerik:RadGrid>

</div>

</form>

</body>

</html>

Grid

answered on 05 Dec 2013

5 answers

427 views

RadGrid - Problem when export with template column

Hi,

I have a RadGrid with a TempleColumn and I have some problem exporting the grid to excel, the context is as follow:

The RadGrid is bound from a stored procedure in a data base, no problem here... the real difficult is when I want to export this grid to an Excel format, the grid has a template column and the data from the template never goes to exported excel file (see attachments).
The grid is created programatically and one of the columns is a template column. The grid needs to be created programatically because the columns returned for the stored procedure are always variable (dynamics) and I need generated a templated column (some merge headers) based on these results.

Any suggestions ?? Thanks in advance to all for your help

This is the code in the .aspx page

<asp:Button ID="Button1" runat="server" Text="Exportar a Excel" onclick="Button1_Click" />

<br /><br />

<telerik:RadGrid ID="RadGrid1" runat="server">

</telerik:RadGrid>

//This is the .aspx.cs code

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

ds = obj_concentrador.ALE_ConcentradorLogros_Select("7", "2011", "6", "1", "1");

RadGrid1.DataSource = ds.Tables[0].DefaultView;

RadGrid1.MasterTableView.DataKeyNames = new string[] { "Alum_Id" };

RadGrid1.ExportSettings.HideStructureColumns = false;

RadGrid1.ExportSettings.ExportOnlyData = false;

RadGrid1.ExportSettings.IgnorePaging = true;

RadGrid1.ExportSettings.OpenInNewWindow = true;

RadGrid1.ExportSettings.FileName = "Concentrador";

//RadGrid1.ExportSettings.Excel.Format = GridExcelExportFormat.Html;

RadGrid1.Width = Unit.Percentage(98);

RadGrid1.PageSize = 5;

RadGrid1.AllowPaging = true;

RadGrid1.PagerStyle.Mode = GridPagerMode.NextPrevAndNumeric;

RadGrid1.AutoGenerateColumns = false;

RadGrid1.ShowHeader = true;

RadGrid1.ShowStatusBar = true;

//Add Customers table

RadGrid1.MasterTableView.PageSize = 50;

RadGrid1.MasterTableView.Width = Unit.Percentage(100);

RadGrid1.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.Top;

RadGrid1.MasterTableView.CommandItemSettings.ShowExportToWordButton = false;

RadGrid1.MasterTableView.CommandItemSettings.ShowExportToExcelButton = true;

RadGrid1.MasterTableView.CommandItemSettings.ExportToExcelText = "Exportar a Excel";

RadGrid1.MasterTableView.CommandItemSettings.ShowExportToPdfButton = true;

RadGrid1.MasterTableView.CommandItemSettings.ExportToPdfText = "Exportar a Pdf";

RadGrid1.MasterTableView.CommandItemSettings.ShowExportToCsvButton = false;

RadGrid1.ItemDataBound += new GridItemEventHandler(RadGrid1_ItemDataBound);

GridBoundColumn boundColumn1;

boundColumn1 = new GridBoundColumn();

RadGrid1.MasterTableView.Columns.Add(boundColumn1);

boundColumn1.DataField = "Alum_Id";

boundColumn1.HeaderText = "Alum_Id";

boundColumn1.Visible = false;

GridBoundColumn boundColumn2;

boundColumn2 = new GridBoundColumn();

RadGrid1.MasterTableView.Columns.Add(boundColumn2);

boundColumn2.DataField = "Alum_NomApellidos";

boundColumn2.HeaderText = "Estudiante";

boundColumn2.ItemStyle.Width = Unit.Percentage(20);

string templateColumnName = "materiaName";

string templateColumnLogros = "logrosName";

GridTemplateColumn templateColum;

templateColum = new GridTemplateColumn();

RadGrid1.MasterTableView.Columns.Add(templateColum);

templateColum.ItemStyle.Width = Unit.Percentage(80);

templateColum.ItemTemplate = new MyTemplate(templateColumnName, ds);

templateColum.HeaderTemplate = new MyTemplate2(templateColumnLogros, ds);

templateColum.UniqueName = "TemplateColumn";

templateColum.InitializeTemplatesFirst = false;

}

public class MyTemplate : ITemplate

{

private string colname;

protected Label lControl;

private DataSet ds;

public MyTemplate(string cName, DataSet datos)

{

colname = cName;

ds = datos;

}

public void InstantiateIn(System.Web.UI.Control container)

{

lControl = new Label();

lControl.ID = "lControl";

lControl.DataBinding += new EventHandler(lControl_DataBinding);

container.Controls.Add(lControl);

}

public void lControl_DataBinding(object sender, EventArgs e)

{

Label l = (Label)sender;

GridDataItem container = (GridDataItem)l.NamingContainer;

string sItem = string.Empty;

sItem = "<table width='100%' border='0' cellpadding='0' cellspacing='0'><tr>";

float ancho = 80 / (ds.Tables[0].Columns.Count - 2);

for (int i = 2; i < ds.Tables[0].Columns.Count; i++)

{

sItem += "<td align='center' style='width:" + ancho.ToString() + "%'>" + ((DataRowView)container.DataItem)[ds.Tables[0].Columns[i].ColumnName].ToString() + "</td>";

}

sItem += "</tr></table>";

l.Text = sItem;

}

public class MyTemplate2 : ITemplate

{

private DataSet ds;

private string colname;

protected Label lControl;

public MyTemplate2(string cName, DataSet datos)

{

colname = cName;

ds = datos;

}

public void InstantiateIn(System.Web.UI.Control container)

{

lControl = new Label();

lControl.ID = "lControl";

lControl.DataBinding += new EventHandler(lControl_DataBinding);

container.Controls.Add(lControl);

}

public void lControl_DataBinding(object sender, EventArgs e)

{

Label l = (Label)sender;

GridHeaderItem container = (GridHeaderItem)l.NamingContainer;

string sHeader = string.Empty;

sHeader = "<table id='Table1' width='100%' border='0' cellpadding='0' cellspacing='0'><tr>";

sHeader += "<td colspan='" + (ds.Tables[0].Columns.Count - 2).ToString() + "' align='center'>Nombres de Materias</td></tr><tr>";

float ancho = 80 / (ds.Tables[0].Columns.Count - 2);

for (int i = 2; i < ds.Tables[0].Columns.Count; i++)

{

sHeader += "<td align='center' style='width:" + ancho.ToString() + "%'>" + ds.Tables[0].Columns[i].ColumnName + "</td>";

}

sHeader += "</tr></table>";

l.Text = sHeader;

}

protected void Button1_Click(object sender, EventArgs e)

{

RadGrid1.MasterTableView.Columns.FindByUniqueName("TemplateColumn").Visible = true;

RadGrid1.ExportSettings.ExportOnlyData = true;

RadGrid1.ExportSettings.IgnorePaging = true;

RadGrid1.ExportSettings.OpenInNewWindow = true;

RadGrid1.ExportSettings.FileName = "Concentrador";

RadGrid1.MasterTableView.ExportToExcel();

}

Grid

answered on 05 Dec 2013

3 answers

236 views

Getting client object within div for any radcontrol!

Is there a way to get the client object of rad control withing the div? I have a div with class="extension" I can get hold of div using jquery. Now I want to $find all different radcontrol in that div and modify using client methods.. .. I cannot use if because they are within listview | raddockzone | custom usercontrol | div with class

Input

answered on 05 Dec 2013

3 answers

129 views

Grid Edit Mode DDL

Is there any way to replace a text box in edit mode with a drop down list?

Thanks,
Mark

Grid

answered on 05 Dec 2013

6 answers

281 views

UserControl Edit Form js call to parent page

Hi Team,

I'm facing with user control edit form js call to parent page js function and ajax error. I'm try to do the sample like User Control Edit Form. I wrote the js function in user control and attach to button onclientclick. When i click the button on user control error said function is not have. And then i move my js function to default.aspx and click it work. At the same time i put ajax manager on my user control, when i click cancel button it show error "Error: Sys.WebForms.PageRequestManagerServerErrorException: A control with ID 'RadGrid1$ctl00$ctl24$EditFormControl$_radAjManagers' could not be found for the trigger in UpdatePanel 'RadGrid1$ctl00$ctl24$EditFormControl$_lblstatusPanel'." But cancel button is not fire to any ajax event. I did simple rad grid edit form and call to user control. I can't understand what wrong my code.

So i tried to look live demo sample and i modified code at "C:\Program Files\Telerik\RadControls for ASP.NET AJAX Q3 2011 SP1\Live Demos\Grid\Examples\DataEditing\UserControlEditForm". If i comment this

protected void RadGrid1_PreRender(object sender, System.EventArgs e)

{

if (!this.IsPostBack)

{

this.RadGrid1.MasterTableView.Items[1].Edit = true;

this.RadGrid1.MasterTableView.Rebind();

}

does not work and same as my sample code.

I hope someone can help to me this problem.

Sample Code.

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<!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 runat="server">

<title></title>

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />

</head>

<body>

<form runat="server" id="mainForm" method="post">

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

<script type="text/javascript">

//Put your JavaScript code here.

function fnUpdate() {

alert('Default.aspx');

return false;

}

</script>

</telerik:RadCodeBlock>

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

//If i didn't comment this one when i click cancel i got error

      <

telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None" AllowPaging="True"

CssClass="RadGrid" AutoGenerateColumns="False" ShowStatusBar="True" OnNeedDataSource="RadGrid1_NeedDataSource"

PageSize="10" CellSpacing="0">

<MasterTableView DataKeyNames="row_id" EditMode="PopUp" HorizontalAlign="Left">

<CommandItemSettings />

<Columns>

<telerik:GridEditCommandColumn UniqueName="EditCommandColumn">

</telerik:GridEditCommandColumn>

<telerik:GridBoundColumn DataField="row_id" DataType="System.Int32" FilterControlAltText="Filter row_id column"

HeaderText="Row" ReadOnly="True" SortExpression="row_id" UniqueName="row_id">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="description" FilterControlAltText="Filter description column"

HeaderText="Description" SortExpression="description" UniqueName="description">

</telerik:GridBoundColumn>

<telerik:GridCheckBoxColumn DataField="status" DataType="System.Boolean" FilterControlAltText="Filter status column"

HeaderText="Status" SortExpression="status" UniqueName="status">

</telerik:GridCheckBoxColumn>

</Columns>

<EditFormSettings UserControlName="control/WebUserControl.ascx" EditFormType="WebUserControl"

PopUpSettings-Modal="true" CaptionFormatString="Current Editing row no. {0}"

CaptionDataField="row_id">

<EditColumn UniqueName="EditCommandColumn">

</EditColumn>

</EditFormSettings>

</MasterTableView>

<FilterMenu EnableImageSprites="False">

</FilterMenu>

</telerik:RadGrid>

<br />

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"

SelectCommand="SELECT [row_id], [description], [status] FROM [tbl_sample]"></asp:SqlDataSource>

</form>

</body>

</html>

Default.cs

using System;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Configuration;

using System.Web.Security;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using Telerik.Web.UI;

using System.Data.SqlClient;

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

{

protected void Page_Load(object sender, EventArgs e)

{

}

private static DataTable GetDataTable(string queryString)

{

String ConnString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;

SqlConnection MySqlConnection = new SqlConnection(ConnString);

SqlDataAdapter MySqlDataAdapter = new SqlDataAdapter();

MySqlDataAdapter.SelectCommand = new SqlCommand(queryString, MySqlConnection);

DataTable myDataTable = new DataTable();

MySqlConnection.Open();

try

{

MySqlDataAdapter.Fill(myDataTable);

}

finally

{

MySqlConnection.Close();

}

return myDataTable;

}

private DataTable Employees

{

get

{

object obj = this.Session["_tbl"];

if ((!(obj == null)))

{

return ((DataTable)(obj));

}

DataTable myDataTable = new DataTable();

myDataTable = GetDataTable("SELECT * FROM tbl_sample");

this.Session["_tbl"] = myDataTable;

return myDataTable;

}

protected void RadGrid1_PreRender(object sender, System.EventArgs e)

{

if (!this.IsPostBack)

{

this.RadGrid1.MasterTableView.Items[1].Edit = true;

this.RadGrid1.MasterTableView.Rebind();

}

protected void RadGrid1_NeedDataSource(object source, GridNeedDataSourceEventArgs e)

{

this.RadGrid1.DataSource = this.Employees;

this.Employees.PrimaryKey = new DataColumn[] { this.Employees.Columns["row_id"] };

}

protected void RadGrid1_EditCommand(object sender, GridCommandEventArgs e)

{

}

User Control.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs"

Inherits="control_WebUserControl" %>

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

<script type="text/javascript" language="javascript">

//Put your JavaScript code here.

function fnUpdate() {

alert('Control'

);// should be call this function

}

</script>

</telerik:RadCodeBlock>

<telerik:RadAjaxManager ID="_radAjManagers" runat="server" OnAjaxRequest="_radAjManager_AjaxRequest">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="_radAjManagers" EventName="OnAjaxRequest">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="_lblstatus" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<div>

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

<asp:TextBox ID="TextBox1" runat="server" Text='<%# DataBinder.Eval( Container, "DataItem.Description" ) %>'></asp:TextBox>

<br />

<asp:Button ID="btnInsert" Text="Insert" runat="server" OnClientClick="javascript:fnUpdate();return false;">

</asp:Button>

<asp:Button ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False"

CommandName="Cancel"></asp:Button>

</div>

User Control.ascx.cs

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using Telerik.Web.UI;

public partial class control_WebUserControl : System.Web.UI.UserControl

{

private object _dataItem = null;

protected void Page_Load(object sender, EventArgs e)

{

}

//protected void Button1_Command(object sender, CommandEventArgs e)

//{

// //

//}

protected void _radAjManager_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)

{

_lblstatus.Text = "Done....";

}

public object DataItem

{

get

{

return this._dataItem;

}

set

{

this._dataItem = value;

}

Sample Code Link : Sample
Regards,
Alex

Grid

answered on 04 Dec 2013

2 answers

163 views

Clicking Node + Ctrl to multiple select does not fire NodeClick event

Hello All

I am trying to get the event TreeView1_NodeClick to fire. When I click to select a single node there is no problem, but when I intend to select multiple nodes by clicking and holding ctrl or shift keys the event won't fire!

Is there any other event similar to achieve this?

Regards

TreeView

answered on 04 Dec 2013

3 answers

106 views

Multi Month View and Client Side navigation...

Hi,

Is it possible to navigate a Multi Month View Calendar without doing a postback?

Best Regards,
Christian

Calendar

answered on 04 Dec 2013

1 answer

89 views

RadAjaxManager Problem

radwindow hangs in the radajaxmanag, radajaxmanager hangs

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" CssClass="ajaxloader" runat="server" InitialDelayTime="0" Transparency="25" MinDisplayTime="0" BackColor="#474747" Skin="Metro">

</telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="txtMiktar">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="txtTutar" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="txtBirimFiyat">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="txtTutar" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="txtTutar">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="txtBirimFiyat" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

img : radajaxmanager hangs

<td>

<span>

<telerik:RadNumericTextBox ID="txtMiktar" runat="server" NumberFormat-DecimalDigits="3" AutoPostBack="true" OnTextChanged="txtMiktar_TextChanged" Culture="Turkish (Turkey)" MinValue="0" LabelCssClass="" Width="70px" Value="0"></telerik:RadNumericTextBox>

</span>

</td>

<td>

<span>

<telerik:RadTextBox ID="txtBirimKod" runat="server" Enabled="false" Width="80px"></telerik:RadTextBox>

</span>

</td>

<td>

<span>

<telerik:RadNumericTextBox ID="txtBirimFiyat" NumberFormat-DecimalDigits="4" AutoPostBack="true" OnTextChanged="txtBirimFiyat_TextChanged" runat="server" Culture="Turkish (Turkey)" MinValue="0" LabelCssClass="" Width="70px" Value="0"></telerik:RadNumericTextBox>

</span>

</td>

<td>

<span>

<telerik:RadNumericTextBox ID="txtTutar" NumberFormat-DecimalDigits="4" AutoPostBack="true" OnTextChanged="txtTutar_TextChanged" runat="server" Culture="Turkish (Turkey)" MinValue="0" LabelCssClass="" Width="70px" Value="0"></telerik:RadNumericTextBox>

<telerik:RadTextBox ID="txtGuncelleId" runat="server" Visible="false" Text=""></telerik:RadTextBox>

</span>

</td>

What is the problem here

Ajax

answered on 04 Dec 2013