Questions on UI for ASP.NET AJAX Forum

1 answer

118 views

Friends,
Tabs are working just fine in my project but on resizing the window I'd like to re-size the tabs to make sure that they do not get messed with the other controls, any clues ?

Thanks,
-Aarsh

Alternatively...

I was trying to have a javascript just like the below one, so that as soon as the mouse hovers the Rad-menu, the Z-index becomes 100 and -1 once Mouse gets out.

I am using the following java-script for the same ...

//<![CDATA[

function RadMenu1_MouseOver(sender,args)

{

//Add JavaScript handler code here

var id = sender.get_id();

var menu = $(".RadMenu(id$='" + id + "']");

menu.css('z-index', 100);

}

//]]>

</script>

<script type="text/javascript" id="telerikClientEvents2">

//<![CDATA[

function RadMenu1_MouseOut(sender,args)

{

//Add JavaScript handler code here

var id = sender.get_id();

var menu = $(".RadMenu(id$='" + id + "']");

menu.css('z-index', -1);

}

//]]>

TabStrip

answered on 15 Jun 2012

4 answers

637 views

Editing cells in RadGrid

Hello,

I am very new to .NET and the telerik UI (5 days of experience) and I am working with radgrid. I know many people have posted questions about this before, but I still can't seem to figure it out. I have a grid that gets its original data from a database. I want to be able to edit each cell individually and update the data to the database. I have been trying for hours but I can't get any of the cells to edit or even get any handlers to fire. Thank you in advance.

ASP.NET code:

<body>

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

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<div>

<telerik:RadGrid ID="GrdConfig" runat="server" CellSpacing="0" GridLines="None"

EnableLinqExpressions="False" oncolumncreated="GrdConfig_ColumnCreated"

CssClass="MyRadGridCssClass" AllowPaging="True">

<ClientSettings>

<Resizing AllowColumnResize="True" />

<Scrolling AllowScroll="True" />

</ClientSettings>

<MasterTableView>

<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>

<RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">

<HeaderStyle Width="20px"></HeaderStyle>

</RowIndicatorColumn>

<ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">

<HeaderStyle Width="20px"></HeaderStyle>

</ExpandCollapseColumn>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>

</EditFormSettings>

</MasterTableView>

<FilterMenu EnableImageSprites="False"></FilterMenu>

</telerik:RadGrid>

</div>

</form>

</body>

</html>

C# code:

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

{

protected void Page_Load(object sender, EventArgs e)

{

                

                 ** Code to extract data from database goes here**

GrdConfig.DataSource = data;

GrdConfig.DataBind();

GridGroupByExpression expression = GridGroupByExpression.Parse("ConfigFile[Config File:] Group by ConfigFile");

GrdConfig.MasterTableView.GroupByExpressions.Add(expression);

GridColumn cConfig = GrdConfig.MasterTableView.GetColumnSafe("ConfigFile");

cConfig.Visible = false;

GrdConfig.Rebind();

}

protected void GrdConfig_ColumnCreated(object sender, GridColumnCreatedEventArgs e)

{

if (e.Column is GridGroupSplitterColumn)

{

e.Column.HeaderStyle.Width = Unit.Pixel(1);

e.Column.HeaderStyle.Font.Size = FontUnit.Point(1);

e.Column.ItemStyle.Width = Unit.Pixel(1);

e.Column.ItemStyle.Font.Size = FontUnit.Point(1);

e.Column.Resizable = false;

}

protected void GrdConfig_ItemDataBound(object sender, GridItemEventArgs e)

{

if (e.Item is GridGroupHeaderItem)

{

GridGroupHeaderItem groupHeader = (GridGroupHeaderItem)e.Item;

groupHeader.Font.Bold = true;

}

Please Note: This is the code that generates the grid using the data from the database. I need to modify this code to make the grid editable. Thank you

Grid

answered on 15 Jun 2012

1 answer

180 views

looking for approachs for long running process

I am looking for different approaches for long running processes and giving the user feed back of the progress.
1. Using ASP.NET 3.5 sp1
2. Web Forms (not mvc)
3. Ajax
4. Not likely but could use jquery (not using in project at this time)
5. Using Telerik controls

So I have process a user will kick off that will require numerious calls to a set of stored procedures for a set of records (500 + )
As one record is completly processed, I would like to report back to a user that 1 of 500 is complete. Then 2 of 500 and etc...
As this finalize process executes I was thinking of using a radwindow that shows gears, perhaps a progress indicator or simple text that gets updated.

Any suggestions or examples that you can think of would be helpful.

General Discussions

answered on 15 Jun 2012

2 answers

131 views

FormDecorator messes up "setSelectionRange"

Hi,

I have a javascript function that uses "setSelectionRange" to set the cursor to the end of text inside a textbox after a postback.

Everything works great in FireFox and IE.

In Chrome/Safari, the javascript function runs without errors, but the cursor is not set.

If I remove the FormDecorator from the page, every thing works in Chrome/Safari.

The attached code demonstrates what I'm seeing.

Just connect to different DB.
Test in Chrome/Safari.
Run one test with the RadFormDecorator enabled = true
Test again with enabled = false

If RadFormDecorator enabled = false, both the textbox and grid filter focus correctly in Chrome.

I have a few issues that clients report "only happen in Chrome" that I could never track down...I wonder if the FormDecorator was causing more issues than I realize.

Just to be safe, I disable the FormDecorator if Chrome/Safari is detected, but I lose a lot of the nice skinning the FormDecorator provides.

Any suggestions?

aspx:

<%@ Page Language="VB" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="RadControlsWebAppTesting._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 id="Head1" runat="server">

<title></title>

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

</head>

<body>

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

<telerik:RadScriptManager ID="RadScriptManagerMain" runat="server" EnablePageMethods="true"

EnableScriptGlobalization="true">

<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:RadSkinManager ID="RadSkinManagerMain" runat="server" ShowChooser="false">

<TargetControls>

<telerik:TargetControl ControlsToApplySkin="NotSet" />

</TargetControls>

</telerik:RadSkinManager>

<telerik:RadFormDecorator ID="RadFormDecoratorMain" runat="server" DecoratedControls="Buttons" Skin="Web20"

Enabled="true"

EnableRoundedCorners="false" EnableEmbeddedBaseStylesheet="true" EnableAjaxSkinRendering="true"

EnableEmbeddedScripts="true" EnableEmbeddedSkins="true" />

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

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanelMain" runat="server" BackColor="Transparent">

</telerik:RadAjaxLoadingPanel>

<script type="text/javascript">

//Put your JavaScript code here.

function SetCursorToTextEnd(textControlID) {

var text = document.getElementById(textControlID);

if (text != null && text.value.length > 0) {

if (text.createTextRange) {

//IE

var range = text.createTextRange();

range.moveStart('character', text.value.length);

range.collapse();

range.select();

}

else if (text.setSelectionRange) {

//FF, web-kit

var textLength = text.value.length;

text.focus();

text.setSelectionRange(textLength, textLength);

}

</script>

<div>

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

<br />

<asp:Button ID="Button1" runat="server" Text="Button" />

<hr />

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

PageSize="20" AllowFilteringByColumn="true" AllowSorting="False" ShowStatusBar="false"

ShowFooter="false" ShowHeader="True" AutoGenerateColumns="False" GridLines="None"

EnableEmbeddedSkins="True" GroupingSettings-CaseSensitive="false" Width="99%"

DataSourceID="SqlDataSource1">

<PagerStyle Mode="NumericPages" Visible="False" AlwaysVisible="False" Position="Bottom"

Height="0px"></PagerStyle>

<StatusBarSettings LoadingText="Loading Data" ReadyText="Data Loaded." />

<ClientSettings EnablePostBackOnRowClick="False">

<Scrolling AllowScroll="true" EnableVirtualScrollPaging="False" ScrollHeight="250"

SaveScrollPosition="False" />

<Selecting AllowRowSelect="True" EnableDragToSelectRows="True" />

<ClientEvents />

</ClientSettings>

<MasterTableView AutoGenerateColumns="False" DataSourceID="SqlDataSource1" TableLayout="auto">

<RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">

<HeaderStyle Width="20px"></HeaderStyle>

</RowIndicatorColumn>

<ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">

<HeaderStyle Width="20px"></HeaderStyle>

</ExpandCollapseColumn>

<Columns>

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

UniqueName="GridBoundColumnDescription" FilterControlWidth="100%" HeaderText="Search List"

CurrentFilterFunction="Contains" AutoPostBackOnFilter="false" ShowFilterIcon="False"

FilterDelay="700">

</telerik:GridBoundColumn>

</Columns>

<ExpandCollapseColumn Visible="False">

</ExpandCollapseColumn>

<RowIndicatorColumn Visible="False">

</RowIndicatorColumn>

</MasterTableView>

</telerik:RadGrid>

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

SelectCommand="SELECT [EMP_LNAME] FROM [EMPLOYEE]"></asp:SqlDataSource>

</div>

</form>

</body>

</html>

codebehind:

Imports Telerik.Web.UI

Partial Class _Default

Inherits System.Web.UI.Page

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

Me.Page.ClientScript.RegisterStartupScript(Me.GetType(), "focus_script", "SetCursorToTextEnd('" & Me.TextBox1.ClientID & "');", True)

End Sub

Private Sub RadGrid1_ItemCommand(sender As Object, e As Telerik.Web.UI.GridCommandEventArgs) Handles RadGrid1.ItemCommand

Select Case e.CommandName

Case "Filter"

Dim filteringItem As GridFilteringItem = DirectCast(RadGrid1.MasterTableView.GetItems(GridItemType.FilteringItem)(0), GridFilteringItem)

Dim box As TextBox = TryCast(filteringItem("GridBoundColumnDescription").Controls(0), TextBox)

Me.Page.ClientScript.RegisterStartupScript(Me.GetType(), "focus_script", "SetCursorToTextEnd('" & box.ClientID & "');", True)

End Select

End Sub

Private Sub RadGrid1_PreRender(sender As Object, e As System.EventArgs) Handles RadGrid1.PreRender

If Not Me.IsPostBack And Not Me.IsCallback Then

Dim filteringItem As GridFilteringItem = DirectCast(RadGrid1.MasterTableView.GetItems(GridItemType.FilteringItem)(0), GridFilteringItem)

Dim box As TextBox = TryCast(filteringItem("GridBoundColumnDescription").Controls(0), TextBox)

With box

.Focus()

End With

End If

End Sub

End Class

FormDecorator

answered on 15 Jun 2012

0 answers

62 views

Adding Icons Gives Error

Ahh, yes, I see it now.

It's been a long day already ;)

Button

asked on 15 Jun 2012

1 answer

466 views

RadGrid dynamically generate columns and export to excel

need create radgrid to dynamic way and also to export to Excel, but when exporting to excel only creates a blank file.

<telerik:RadGrid ID="rgCajas" runat="server" DataSourceID="odsCajas" OnSortCommand="rgCajas_SortCommand" OnPageIndexChanged="rgCajas_PageIndexChanged" OnPageSizeChanged="rgCajas_PageSizeChanged"

AllowSorting="True" PageSize="15" AllowPaging="True" AllowMultiRowSelection="True" Gridlines="None" MasterTableView-NoMasterRecordsText="No se encontró registro" Width="40%" DataSourcePersistenceMode="ViewState">

<PagerStyle Mode="NextPrevAndNumeric" PagerTextFormat="{4} Registros {2}-{3} de {5}" PageSizeLabelText="# Registros"></PagerStyle>

<ExportSettings ExportOnlyData="true" IgnorePaging="true" OpenInNewWindow="true">

<Excel Format="ExcelML" />

</ExportSettings>

<MasterTableView DataSourceID="odsCajas" CommandItemDisplay="Top" AutoGenerateColumns="false" UseAllDataFields="true">

<CommandItemSettings ShowExportToExcelButton="true" ShowAddNewRecordButton="false" ShowRefreshButton="False" />

<Columns>

</Columns>

</MasterTableView>

</telerik:RadGrid>

<asp:ObjectDataSource runat="server" ID="odsCajas" SelectMethod="GetCajaPorId"

TypeName="HQB.HQBDOC.HQBDocBLL.Orden.OrdenManagerBLL">

<SelectParameters>

<asp:ControlParameter ControlID="hfCajaId" DefaultValue="" Name="cajaId" PropertyName="Value" Type="String" />

</SelectParameters>

</asp:ObjectDataSource>

private void LoadData()

{

try{

rgCajas.Columns.Clear();

string cajas_query_attributes = GetVariableLocal("cajas.query.attributes");

string[] arrCajas_query_attributes = cajas_query_attributes.Split(",".ToArray());

for (int i = 0; i < arrCajas_query_attributes.Length; i++)

{

string attibute = arrCajas_query_attributes[i].ToString();

string[] arrCajas_query_attributesField = attibute.Split("$".ToArray());

GridBoundColumn column = new GridBoundColumn();

column.HeaderText = arrCajas_query_attributesField[1];

column.DataField = arrCajas_query_attributesField[0];

rgCajas.MasterTableView.Columns.Add(column);

}

catch (Exception ex)

{

//LOG.DE.ERRORES.

LogManagerBLL.IngresarLog(LogConstante.ERROR, ex.Message, ex.StackTrace);

throw ex;

}

this is how I load dynamically the columns I get from a local variable is an array of string.
do not know if this will be the right approach?

Grid

answered on 15 Jun 2012

3 answers

278 views

Get Row BackColor ItemDataBound

Hi,

I need to change the row background color in ItemDataBound but can't find how to get that.

If oDataItem.DataItem("isAnswer") = True Then
' Change the background color of the whole row
End If

Many thanks in advance

Jon

ListView

answered on 15 Jun 2012

1 answer

138 views

Programmatically alter generated query generated by RadFilter

I have a SQL database that users should be able to query. However, the database has some fields that are similar and when they choose to build a filter on one of those columns, I want to also include the same function for the other column(s) as well. I am not trying to bind the filter directly to a data source, but will programmatically bind it in the code.

For example, if a user selects to filter on Manufacturer starts with 'somecompany', I want to build the SQL query to look like:
ManfName like 'somecompany%' or AltManf like 'somecompany%' or GenericManf like 'somecompany%'

I have been able to create the code to loop the generated expressions, but I am really hoping that there is a much easier way to accomplish my objective. As it is, I have to use a recursive subroutine to process each of the groups, and manually build the SQL code. For example, I can use

Dim rfProvider As New RadFilterSqlQueryProvider

rfProvider.ProcessGroup(e.ExpressionRoot)

To build the SQL string, but then there is a LOT of coding that would be required to parse through the string and inject the additional SQL code.

What I want to be able to do is use the recursive call to get the current SQL code, then use a string replacement function to add the check for the additional fields to the query. The snippet below would be an example of what I am trying to accomplish, but don't know how.

dim queryString as string

Protected Sub RadFilter1_ApplyExpressions(sender As Object, e As Telerik.Web.UI.RadFilterApplyExpressionsEventArgs) Handles RadFilter1.ApplyExpressions

queryString = String.Empty

Dim objExpression As RadFilterGroupExpression = e.ExpressionRoot

Dim objCollection As RadFilterExpressionsCollection = objExpression.Expressions

processGroup(objCollection)

End Sub

Private Sub processGroup(ByVal objCollection As RadFilterExpressionsCollection)

For Each objExp As RadFilterExpression In objCollection

Dim objFunction As RadFilterFunction = objExp.FilterFunction

Dim rfProvider As New RadFilterSqlQueryProvider

' I don't know how to produce the functionality of the next statement!

Dim strFilter as new string = rfProvider.ProcessFilter(RadFilterExpression)  ' This would return "Manufacturer like 'somecompany%'"

if strFilter.StartsWith("Manufacturer") then

queryString &= " (" & strFilter.Replace("Manufacturer","ManfName") & _

" or " & strFilter.Replace("Manufacturer", "AltManf") & _

" or " & strFilter.Replace("Manufacturer", "GenericManf") & ") "

end if

...

Next

End Sub

Can you please provide any suggestions? Thank you!!!

Filter

answered on 15 Jun 2012

5 answers

904 views

Dynamically created checkbox and dropdown list how to get two field values

In button click to Dynamically created checkbox and dropdown list how to get checkbox.checked=true and dropdown values to find

This is my code
             chk_Dynamic = new CheckBox();
            Panel1.Controls.Add(chk_Dynamic);
            dropdown = new RadComboBox();
            dropdown.ID = "dropdown";
            Panel1.Controls.Add(dropdown);
            dropdown.Height = Unit.Pixel(200);
            dropdown.Width = Unit.Pixel(110);
            dropdown.BackColor = System.Drawing.Color.LightGray;
            dropdown.Items.Insert(0, new RadComboBoxItem("--Select--", "-1"));
            dropdown.Items.Insert(1, new RadComboBoxItem("Today", "10000000000001"));
            dropdown.Items.Insert(2, new RadComboBoxItem("Yesterday", "10000000000002"));
            dropdown.Items.Insert(3, new RadComboBoxItem("This Week", "10000000000003"));
            dropdown.Items.Insert(4, new RadComboBoxItem("Last Week", "10000000000004"));
            dropdown.Items.Insert(5, new RadComboBoxItem("This Month", "10000000000005"));
            dropdown.Items.Insert(6, new RadComboBoxItem("Last Month", "10000000000006"));
            dropdown.Items.Insert(7, new RadComboBoxItem("This Quarter", "10000000000007"));
            dropdown.Items.Insert(8, new RadComboBoxItem("Last Quarter", "10000000000008"));
            dropdown.Items.Insert(9, new RadComboBoxItem("This Year", "10000000000009"));
            dropdown.Items.Insert(10, new RadComboBoxItem("Last Year", "10000000000010"));

Advance
Thanks
Tamim

UI for ASP.NET AJAX in ASP.NET MVC

answered on 15 Jun 2012

1 answer

126 views

Chart Not Displaying Bars

I am having a problem with a chart I am trying to implement where it will not show any bars going up the bar graph. A pie chart will display all of the data, but all other chart types fail. I have confirmed the data is being entered into the dt and my code below shows you how I am doing this. I have also included a screenshot of what the output on the graph is as well as a screenshot of the data after the loop completes. Any help would be greatly appreciated.

Protected Sub CreateChart()

Dim dt As New DataTable

Dim dc As DataColumn

Dim dr As DataRow

Dim ctr As Integer = 0

Dim usableMonths As String = Me.Invoice.Custom45.ToString()

Dim usableData As String = Me.Invoice.Custom46.ToString()

Dim months() As String = usableMonths.Split(New [Char]() {","c})

Dim data() As String = usableData.Split(New [Char]() {","c})

dc = New DataColumn("XValues", Type.GetType("System.Int32"))

dc.AutoIncrement = True

dc.AutoIncrementSeed = 300

dt.Columns.Add(dc)

dc = New DataColumn("XDesc", Type.GetType("System.String"))

dt.Columns.Add(dc)

dc = New DataColumn("YValues", Type.GetType("System.Double"))

dt.Columns.Add(dc)

While ctr <= months.Length - 2

dr = dt.NewRow

If String.IsNullOrEmpty(months(ctr).ToString().Trim()) Then

dr(1) = " "

Else

dr(1) = months(ctr)

End If

If String.IsNullOrEmpty(data(ctr).ToString().Trim()) Then

dr(2) = 0

Else

dr(2) = Convert.ToDouble(data(ctr))

End If

dt.Rows.Add(dr)

ctr += 1

End While

dt.AcceptChanges()

Me.RadChart1.DataSource = dt

Dim usage As New Telerik.Charting.ChartSeries("Usage", Telerik.Charting.ChartSeriesType.Bar)

usage.DataXColumn = "XValues"

usage.DataYColumn = "YValues"

usage.Appearance.BarWidthPercent = 30

usage.DefaultLabelValue = String.Empty

usage.Visible = True

Me.RadChart1.Series.Add(usage)

Me.RadChart1.Width = Unit.Pixel(480)

Me.RadChart1.Height = Unit.Pixel(200)

Me.RadChart1.ChartTitle.Visible = False

Me.RadChart1.Legend.Visible = False

Me.RadChart1.PlotArea.XAxis.DataLabelsColumn = "XDesc"

Me.RadChart1.PlotArea.XAxis.Appearance.TextAppearance.AutoTextWrap = Telerik.Charting.Styles.AutoTextWrap.True

Me.RadChart1.PlotArea.XAxis.Appearance.MajorGridLines.Visible = False

Me.RadChart1.PlotArea.XAxis.Appearance.MinorGridLines.Visible = False

Me.RadChart1.PlotArea.YAxis.Appearance.MinorGridLines.Visible = False

Me.RadChart1.PlotArea.Appearance.Dimensions.Margins.Top = Telerik.Charting.Styles.Unit.Pixel(20)

Me.RadChart1.PlotArea.Appearance.Dimensions.Margins.Right = Telerik.Charting.Styles.Unit.Pixel(10)

Me.RadChart1.PlotArea.Appearance.Dimensions.Margins.Bottom = Telerik.Charting.Styles.Unit.Pixel(40)

Me.RadChart1.PlotArea.Appearance.Dimensions.Margins.Left = Telerik.Charting.Styles.Unit.Pixel(50)

Me.RadChart1.Skin = "Classic"

Me.RadChart1.DataBind()

End Sub

Chart (Obsolete)

answered on 15 Jun 2012