Questions on UI for ASP.NET AJAX Forum

4 answers

164 views

Hi,

I am new to Telerik.

I am trying to develop a datasheet view similar to what we have in sharepoint 2010 using telerik grid controls.

I want to provide a excel spreadsheet kind of environment to the user where he can add any number of items to the list as easy it is excel. ( for example, In standard view user is supposed to click "Add New Action Item" every time If he needs to add an action item, I need an environment where user can type all his action items at the same time and save all at a time.)

Thanks,

Sree

Grid

answered on 25 May 2015

3 answers

247 views

Localization of dateformat of column headers

Dears,

using the localization of the gantt diagramm the date format of the header cannot be changed, always displayed in english. Can you show me the way to czhange the datetime format?

Gantt

answered on 25 May 2015

1 answer

225 views

RadListView and columns

Hi! I'm trying to test your ListView with responsive behavior. All works very fine!

I have seen that the number of columns changes automatically with the width of the browser window.

Now I have only a question ...

Can I limit the number of columns at runtime or by a config value? Db Value? Or Runtime user Value?

This is very important to use this very good control within ecommerce application...

For example I have the need to limit the number of column at 3 ... indépendamment their width

Or there is another control to do a list with image and text from db ... that can be configured in a multicolumn panel?

Merci beaucoup!

ListView

answered on 25 May 2015

1 answer

69 views

Prevent Auto selection or highlighting of GridNumericColumn value when moving between pages.

Hi,

The user enters some data in Grid Numeric Column and checks some other open tab in browser and when user returns to that page, the Grid Numeric column value gets auto selected & it leads to data loss of autoselected value.. Please help me in preventing the auto selection. Thanks in advance.

Code:

<telerik:GridNumericColumn DataField="Price" UniqueName="Price" MaxLength="15" DataFormatString="{0:#,##0.#0}"
DataType="System.Double" HeaderText="Price*" ItemStyle-Width="60px" HeaderStyle-Font-Bold="true">
</telerik:GridNumericColumn>

Grid

answered on 25 May 2015

1 answer

105 views

DataRowView ParentNodeId

This work!

If (TryCast(e.Node.DataItem, DataRowView))("NodeId").ToString() = 3 Then

e.Node.AllowDrag = False

End If

This is not work

If (TryCast(e.Node.DataItem, DataRowView))("ParentNodeId").ToString() = 3 Then

e.Node.AllowDrag = False

End If

Get: Exception Details: System.FormatException: Input string was not in a correct format.

TreeView

answered on 25 May 2015

1 answer

85 views

Tab in TabStrip renders only once

Hello. I have a problem. I created Layout by splitters and put the Tabstrip into the central area. In TabStrip I creates 2 tabs. In one tab I put PageView with UserControl and the second tab is empty UserControl. When page is loaded in first tab I see my UserControl. But after switch into the second tab and return into first I see an empty tab. The code is following.

Default.aspx:

<style type=css>

html, body, form

{

height: 100%;

margin: 0px;

padding: 0px;

}

</style>

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

<%@ Register Src="~/ChartUC.ascx" TagPrefix="uc1" TagName="Chart" %>

<!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>

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

<script type="text/javascript">

/* <![CDATA[ */

function onTabSelecting(sender, args) {

var tab = args.get_tab();

if (tab.get_pageView())

{

tab.set_postBack(false);

}

/* ]]> */

</script>

</telerik:RadCodeBlock>

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadTabStrip1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadTabStrip1"></telerik:AjaxUpdatedControl>

<telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="LoadingPanel1"></telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadMultiPage1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadMultiPage1"></telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<div>

<telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" LiveResize="true" Width="100%">

<telerik:RadPane ID="navigationPane" runat="server" Width="25%" Height="100%">

<p>Left</p>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward" Height="100%">

</telerik:RadSplitBar>

<telerik:RadPane ID="contentPane" runat="server" Width="75%" Height="100%">

<telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Horizontal" Height="70%" LiveResize="true">

<telerik:RadPane ID="topPane" runat="server">

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Glow" MultiPageID="RadMultiPage1"

Width="100%" SelectedIndex="0" OnTabClick="RadTabStrip1_TabClick" ClickSelectedTab="True"

OnClientTabSelecting="onTabSelecting" Align="Justify">

</telerik:RadTabStrip>

<telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0" RenderSelectedPageOnly="true"

OnPageViewCreated="RadMultiPage1_PageViewCreated" CssClass="RadMultiPage">

</telerik:RadMultiPage>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitbar2" runat="server" CollapseMode="Backward"/>

<telerik:RadPane ID="bottomPane" runat="server" Height="30%">

Nested Splitter Bottom Content

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

</telerik:RadSplitter>

</div>

</form>

</body>

</html>

Default.aspx.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;

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

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

AddTab("Диаграмма Парето", "ChartUC");

AddPageView(RadTabStrip1.FindTabByText("Диаграмма Парето"));

AddTab("Таблица", "GridUC");

}

protected void RadTabStrip1_TabClick(object sender, RadTabStripEventArgs e)

{

AddPageView(e.Tab);

e.Tab.PageView.Selected = true;

}

protected void RadMultiPage1_PageViewCreated(object sender, RadMultiPageEventArgs e)

{

string userControlName = e.PageView.ID + ".ascx";

Control userControl = Page.LoadControl(userControlName);

userControl.ID = e.PageView.ID + "_userControl";

e.PageView.Controls.Add(userControl);

}

private void AddPageView(RadTab tab)

{

RadPageView pageView = new RadPageView();

pageView.ID = tab.PageViewID;

RadMultiPage1.PageViews.Add(pageView);

tab.PageViewID = pageView.ID;

}

private void AddTab(string tabName, string sId)

{

RadTab tab = new RadTab();

tab.Text = tabName;

tab.PageViewID = sId;

tab.Width = Unit.Percentage(100);

RadTabStrip1.Tabs.Add(tab);

}

ChartUC.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ChartUC.ascx.cs" Inherits="ChartUC" %>

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

<div class="contentWrapper">

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdateInitiatorPanelsOnly="true" OnAjaxRequest="RadAjaxManager1_AjaxRequest">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="gridLoadingPanel"></telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

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

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

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

<script type="text/javascript">

function SeriesClicked(e) {

if (e.originalEvent.type === "contextmenu") {

// Disable browser context menu

e.originalEvent.preventDefault();

return;

}

var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");

ajaxManager.ajaxRequest('Chart1SC' + '$' + e.series.index + '$' + e.point.categoryIx);

}

</script>

</telerik:RadCodeBlock>

<div style="width: 700px; height: 500px; float: left;">

<telerik:RadHtmlChart runat="server" ID="m_ParetoChart" Height="400" Width="600">

<ChartTitle Text="Дефекты ППМ. Диаграмма Парето">

</ChartTitle>

<ClientEvents OnSeriesClick="SeriesClicked" />

<PlotArea>

<Series>

<telerik:ColumnSeries Name="Дефекты">

<TooltipsAppearance Color="White" />

</telerik:ColumnSeries>

<telerik:LineSeries Name="Проценты">

<TooltipsAppearance Color="White" />

</telerik:LineSeries>

</Series>

<YAxis Width="3">

<TitleAppearance Text="Количество">

<TextStyle Color="Black" />

</TitleAppearance>

<LabelsAppearance>

<TextStyle Color="Black" />

</LabelsAppearance>

</YAxis>

<AdditionalYAxes>

<telerik:AxisY Name="AdditionalAxis" Color="Black" Width="3" MaxValue="1.2">

<TitleAppearance Text="Проценты">

<TextStyle Color="Black" />

</TitleAppearance>

<LabelsAppearance>

<TextStyle Color="Black" />

</LabelsAppearance>

<LabelsAppearance DataFormatString="P" />

</telerik:AxisY>

</AdditionalYAxes>

<XAxis>

<TitleAppearance Text="Дефекты">

<TextStyle Color="Black" />

</TitleAppearance>

<LabelsAppearance>

<TextStyle Color="Black" />

</LabelsAppearance>

<AxisCrossingPoints>

<telerik:AxisCrossingPoint Value="0" />

<telerik:AxisCrossingPoint Value="9" />

</AxisCrossingPoints>

</XAxis>

</PlotArea>

<Legend>

<Appearance BackgroundColor="White" Position="Right" Visible="true" />

</Legend>

</telerik:RadHtmlChart>

</div>

<div style="width: 700px; height: 500px; float: left;">

<h2>Дефекты ППМ. Таблица</h2>

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" AllowPaging="true"

AllowSorting="true" AllowFilteringByColumn="true" GridLines="Both" PageSize="10"

ClientSettings-Scrolling-AllowScroll="true"

AllowCustomPaging="True" OnNeedDataSource="RadGrid1_NeedDataSource">

<ClientSettings AllowKeyboardNavigation="True">

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

</ClientSettings>

<MasterTableView TableLayout="Fixed">

<Columns>

<telerik:GridBoundColumn HeaderText="Вид дефектов на печатной плате" DataType="System.String"

DataField="CategoryID"/>

<telerik:GridBoundColumn HeaderText="Процент от общего числа дефектов" DataType="System.Double"

DataField="Percents"/>

<telerik:GridBoundColumn HeaderText="Дата обнаружения" DataType="System.DateTime"

DataField="Date"/>

<telerik:GridBoundColumn HeaderText="Контроллер" DataType="System.String"

DataField="Checker"/>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</div>

Chart.ascx.cs

using System;

using System.Collections.Generic;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Xml.Linq;

using Telerik.Web.UI;

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

{

public ChartUC()

{

m_SelectedSeries.SeriesIdx = -1;

}

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

PopulateChart2();

}

public struct SelectedSeries

{

public int SeriesIdx;

public int ItemIdx;

}

private SelectedSeries m_SelectedSeries;

protected void RadGrid1_NeedDataSource(object source, GridNeedDataSourceEventArgs e)

{

if (m_SelectedSeries.SeriesIdx == -1)

{

int startRowIndex = RadGrid1.CurrentPageIndex * RadGrid1.PageSize;

int maximumRows = RadGrid1.PageSize;

DataTable dt = PopulateGrid2(false);

var v = dt.AsEnumerable().Skip(startRowIndex).Take(maximumRows);

RadGrid1.DataSource = v.Any() ? v.CopyToDataTable() : dt.Clone();

}

else

{

DataTable dt = PopulateGrid2(false);

var grps = dt.AsEnumerable().GroupBy(a => a.Field<string>("CategoryID")).OrderByDescending(b => b.Count());

//var v = m_SelectedSeries.ItemIdx == 0 ? grps.Take(1) : grps.Skip(m_SelectedSeries.ItemIdx - 1).Take(1);

var v = grps.Skip(m_SelectedSeries.ItemIdx).Take(1);

var dt_ = v.First().CopyToDataTable();

RadGrid1.VirtualItemCount = dt_.Rows.Count;

RadGrid1.DataSource = dt_;

}

private void PopulateChart2()

{

DataTable dt = PopulateGrid2(false);

var grps = dt.AsEnumerable().GroupBy(a => a.Field<string>("CategoryID")).OrderByDescending(b => b.Count());

RadHtmlChart chart = m_ParetoChart;

var colSeries = chart.PlotArea.Series[0] as ColumnSeries;

decimal sum = 0;

foreach (var grp in grps)

{

//string sName = grp.Key;

decimal ct = grp.Count();

sum += ct;

var csi = new CategorySeriesItem(ct);

colSeries.SeriesItems.Add(csi);

}

//colSeries.TooltipsAppearance.ClientTemplate = "#=dataItem." + tooltipColumn + "#";

var weights = new List<decimal>();

foreach (var grp in grps)

{

decimal ct = grp.Count();

weights.Add(ct / sum * 100);

}

var lineSeries = chart.PlotArea.Series[1] as LineSeries;

decimal weight = 0;

foreach (var val in weights)

{

weight += val;

if (weight > 100) weight = 100;

var v = Math.Round(weight);

var csi = new CategorySeriesItem(v);

lineSeries.SeriesItems.Add(csi);

}

private DataTable PopulateGrid(bool a_bSetDataSource = true)

{

DataTable dt = new DataTable();

DataColumn col = new DataColumn("CategoryID", typeof(string));

dt.Columns.Add(col);

col = new DataColumn("Percents", typeof(double));

dt.Columns.Add(col);

col = new DataColumn("Date", typeof(DateTime));

dt.Columns.Add(col);

col = new DataColumn("Checker", typeof(string));

dt.Columns.Add(col);

DataRow row = dt.NewRow();

row["CategoryID"] = "Недостаток припоя";

row["Percents"] = 60;

row["Date"] = DateTime.Now;