Questions on UI for ASP.NET AJAX Forum

4 answers

262 views

[Solved] Grid / Master/Detail Grids with DataTable

I would like to use the following example but with datatables. I am customizing an existing app and the way they handle the data is only thru datatables.

Long story short, I can't figure out how to get this to work using DT. Any help would be appreciated.

http://demos.telerik.com/aspnet-ajax/grid/examples/programming/selectedvalue/defaultcs.aspx

Thank you.

Grid

answered on 06 Feb 2013

6 answers

191 views

OnSeriesItemClicked Not Refreshing Datasource

Hi Everyone.

VB.net AJAX Q2 2012.

I have a line graph with several data points flowing left to right. I used the OnCleintSeriesClicked Property and wrote:

function Chart_Line_Count_SeriesClicked(sender,args)

{

if (args.get_seriesName() != "DaysL") $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest(args.get_category());

}

Then through the RadAjaxManager1 configuration I associated the RadAjaxManager1 with the Chart_Line_Count Object.

Then in the code behind file:

Protected Sub RadAjaxManager1_AjaxRequest(sender As Object, e As AjaxRequestEventArgs) Handles RadAjaxManager1.AjaxRequest

'test to clear datasource and blank out the chart

Chart_Line_Count.DataSource = ""

Chart_Line_Count.DataSourceID = ""

End Sub

But it doesn't work. Can anyone tell me why? I see the AJAX circular spinning refresh thing fire, but nothing happens. Please let me know if you need any more information.

Chart (HTML5)

answered on 06 Feb 2013

2 answers

72 views

Grid problem - work around?

I have a situation that I wonder if anyone can suggest or point me to a solution that solves my problem.

I want to display the radcombobox so the user can select a date, which will return a set of records from a database.

The problem is that the grid does have any datasource until then and therefore does not display.

The combobox is in a commanditem template and does not display.  Would it be better to load the grid with dummy records(all zeros and nulls) or is there a better solution.

I just need to display the radcombobox.  Any suggestions will be appreciated.  The HTML is below. 

<

telerik:RadGrid ID="TimesheetGrid" runat="server" AutoGenerateColumns="false" EnableLinqExpressions="false" GridLines="None">

<MasterTableView CommandItemDisplay="Top" AllowPaging="false" PageSize="15">

<EditFormSettings>

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

</EditFormSettings>

<CommandItemTemplate>

<table>

<tr>

<td style="width:10%">

<telerik:RadComboBox ID="cboPayPeriod" runat="server" AutoPostBack="true" OnSelectedIndexChanged="cboPayPeriod_SelectedIndexChanged"></telerik:RadComboBox>

</td>

<td style="width:40%">

<asp:LinkButton ID="cmdInsert" runat="server" CommandName="InitInsert" Font-Underline="True" ForeColor="White">Insert New Timesheets Record</asp:LinkButton>

</td>

<td style="width:30%">

<asp:LinkButton ID="cmdUpdateAll" runat="server" CommandName="UpdateEdited" Font-Underline="True" ForeColor="White">Update Timesheet</asp:LinkButton>

</td>

</tr>

</table>

</CommandItemTemplate>

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

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

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

<Columns>

<telerik:GridDateTimeColumn DataField="WorkDate" HeaderText="Work Date" UniqueName="WorkDate" DataFormatString="{0:MM/dd/yy}"

HeaderStyle-Width="100px" HeaderStyle-HorizontalAlign="Center" AllowFiltering="false">

</telerik:GridDateTimeColumn>

<telerik:GridBoundColumn DataField="Shift" HeaderText="Shift" ItemStyle-Width="25px" HeaderStyle-Width="25px" AllowFiltering="False"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Reg" HeaderText="Reg" ItemStyle-Width="35px" AllowSorting="True" AllowFiltering="False" DataFormatString="{0:##.0}"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ShftHrs" HeaderText="Shift Hrs" ItemStyle-Width="35px" AllowSorting="True" AllowFiltering="False" DataFormatString="{0:##.0}"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="OT" HeaderText="OT" ItemStyle-Width="35px" AllowFiltering="False" DataFormatString="{0:##.0}"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Vac36" HeaderText="Vac 36 Hrs" ItemStyle-Width="35px" AllowFiltering="False" DataFormatString="{0:##.0}"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Vac40" HeaderText="Vac 40 Hrs" ItemStyle-Width="35px" AllowFiltering="False" DataFormatString="{0:##.0}"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Vac48" HeaderText="Vac 48 Hrs" ItemStyle-Width="35px" AllowFiltering="False" DataFormatString="{0:##.0}"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Sick36" HeaderText="Sick 36 Hrs" ItemStyle-Width="35px" AllowFiltering="False" DataFormatString="{0:##.0}"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Sick40" HeaderText="Sick 40 Hrs" ItemStyle-Width="35px" AllowFiltering="False" DataFormatString="{0:##.0}"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Sick48" HeaderText="Sick 48 Hrs" ItemStyle-Width="35px" AllowFiltering="False" DataFormatString="{0:##.0}"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Exc_Absence" HeaderText="Exc Abs Hrs" ItemStyle-Width="35px" AllowFiltering="False" DataFormatString="{0:##.0}"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Holiday_Worked" HeaderText="Holiday Worked" ItemStyle-Width="35px" AllowFiltering="False" DataFormatString="{0:##.0}"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Holiday_Not_Worked" HeaderText="Holiday Not Worked" ItemStyle-Width="35px" AllowFiltering="False" DataFormatString="{0:##.0}"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Comments" HeaderText="Comment" ItemStyle-Width="135px" AllowFiltering="False"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Additional_Comment" HeaderText="Additional Comment" ItemStyle-Width="135px" AllowFiltering="False"></telerik:GridBoundColumn>

<telerik:GridTemplateColumn DataField="Five" HeaderText="5%" AllowFiltering="false">

<ItemTemplate>

<asp:CheckBox ID="chkFive" runat="server" Checked='<%#Bind("Five")%>' />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="Ten" HeaderText="10%" AllowFiltering="false">

<ItemTemplate>

<asp:CheckBox ID="chkTen" runat="server" Checked='<%#Bind("Ten")%>' />

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

Grid

answered on 06 Feb 2013

2 answers

87 views

Grid Resizing issue

Hi have a grid with paging on it. I want it to be resized (including the pager) whenever I resize the form or change the pager size/index.
I have the following code:

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

<script type="text/javascript">

window.$ = $telerik.$;

jQuery.event.add(window, "load", resize);

jQuery.event.add(window, "resize", resize);

function resize() {

var h = $(window).height();

$(".resizeGrid").css({ 'height': (h - 60) });

}

</script>

</telerik:RadCodeBlock>

1. The grid loads ok the first time it is loaded i.e. the grid + pager are aligned to the footer.
2. When I change the pager size to say 20 from 50. The grid + pager moves up and is no longer aligned to the footer.
3. Same thing happens when I change the page index.
3. If I resize the form, the pager moves down and aligns itself with the footer (which is what I want)

How do I fix the above behavior in step 2 and 3 above so that the grid resizes each time?

Grid

answered on 06 Feb 2013

1 answer

158 views

RadHTMLChart Client Side Update

Hi .
I have a RadGrid in my form that bind to a webservice . I have a radhtmlchart too . I want to update my chart after update my grid ,but radhtmlchart does not have any client side databiding .

how can I do that ?

Chart (HTML5)

answered on 06 Feb 2013

1 answer

168 views

[Solved] How to make particular Columns in RadGrid unclickable?

Hello,

I want to allow the EnablePostBackOnRowClick only in some columns, is that possible?

Lets say I have a RadGrid with 5 Columns, is it possible to make only the 3 columns in the middle clickable and the first and last columsn not clickable?
I need this because I want to handle the "RowClick" event in ItemCommand but I don't want the RowCLick event to be triggered if I click on the row area of the first and last columns.

is it possible to do that?

Grid

answered on 06 Feb 2013

2 answers

89 views

[Solved] GridHTMLEditorColumn HTML set as Default

How can I have the 'HTML' button selected when you go into edit mode for a GridHTMLEditorColumn?
Instead of the default of 'Design' being selected.

Thanks Darren

Grid

answered on 06 Feb 2013

7 answers

168 views

[Solved] RadInputManager Textbox values clears on focus

Hi,

While using RadInputManager Text box, the value gets clear on Focusing.

Thanks

General Discussions

answered on 06 Feb 2013

1 answer

43 views

Hierarchy Grid

I believe the ASP.NET RadControls Grid is what i am looking for in order to display (programmatically) x level deep data.
I am wondering if this is possible and if so, how to do it?

I have a custom datasource in a List<T>
I want to be able to, programmatically, add header columns. Each headercolumn could be a simple bound column (non editable), or a checkbox (editable) or a dropdownlist (editable), or a button of somekind, so it would postback that row to the server (not using AJAX).. Is this possible? How?

furthermore, how can I, programmatically, add x level deep structure to a parent row? Similar to:
http://demos.telerik.com/aspnet-ajax/grid/examples/programming/detailtabledatabind/defaultcs.aspx

General Discussions

answered on 06 Feb 2013

1 answer

62 views

After Added Chart ID to AjaxUpdatedControl I got an error

Hi All,

After Added Chart ID to AjaxUpdatedControl I got an error:

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

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.Web.HttpException: The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

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.

I already use to update a data grid with the same RadAjaxManager and everything works well with the grid!

Here the Ajax setting:

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="GrabberMonitorGrid">

<UpdatedControls>

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

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

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

Here the chart declaration:

<telerik:RadChart runat="server" Width="945" ID="RadChart2" Skin="LightBrown" Visible="false">

<Appearance>

<FillStyle MainColor="240, 237, 225"></FillStyle>

<Border Color="209, 197, 175"></Border>

</Appearance>

<Series>

<telerik:ChartSeries Name="Resieved Query" Type="SplineArea">

<Appearance>

<FillStyle FillType="ComplexGradient" MainColor="243, 206, 119">

<FillSettings>

<ComplexGradient>

<telerik:GradientElement Color="243, 206, 119" />

<telerik:GradientElement Color="236, 190, 82" Position="0.5" />

<telerik:GradientElement Color="210, 157, 44" Position="1" />

</ComplexGradient>

</FillSettings>

</FillStyle>

<TextAppearance TextProperties-Color="112, 93, 56">

</TextAppearance>

<Border Color="223, 170, 40" />

</Appearance>

<Items>

<telerik:ChartSeriesItem YValue="1.2" XValue="0">

</telerik:ChartSeriesItem>

<telerik:ChartSeriesItem YValue="3.2" XValue="1">

</telerik:ChartSeriesItem>

<telerik:ChartSeriesItem YValue="2.2" XValue="2">

</telerik:ChartSeriesItem>

<telerik:ChartSeriesItem YValue="5.2" XValue="3">

</telerik:ChartSeriesItem>

<telerik:ChartSeriesItem YValue="4.2" XValue="4">

</telerik:ChartSeriesItem>

</Items>

</telerik:ChartSeries>

<telerik:ChartSeries Name="Recaived Result" Type="SplineArea">

<Appearance>

<FillStyle FillType="ComplexGradient" MainColor="154, 220, 230">

<FillSettings>

<ComplexGradient>

<telerik:GradientElement Color="154, 220, 230" />

<telerik:GradientElement Color="121, 207, 220" Position="0.5" />

<telerik:GradientElement Color="89, 185, 204" Position="1" />

</ComplexGradient>

</FillSettings>

</FillStyle>

<TextAppearance TextProperties-Color="112, 93, 56">

</TextAppearance>

<Border Color="117, 177, 192" />

</Appearance>

<Items>

<telerik:ChartSeriesItem YValue="1.1" XValue="0">

</telerik:ChartSeriesItem>

<telerik:ChartSeriesItem YValue="3.1" XValue="1">

</telerik:ChartSeriesItem>

<telerik:ChartSeriesItem YValue="2.1" XValue="2">

</telerik:ChartSeriesItem>

<telerik:ChartSeriesItem YValue="5.1" XValue="3">

</telerik:ChartSeriesItem>

<telerik:ChartSeriesItem YValue="4.1" XValue="4">

</telerik:ChartSeriesItem>

</Items>

</telerik:ChartSeries>

<telerik:ChartSeries Name="Send Order" Type="SplineArea">

<Appearance>

<FillStyle FillType="ComplexGradient" MainColor="161, 218, 123">

<FillSettings>

<ComplexGradient>

<telerik:GradientElement Color="161, 218, 123" />

<telerik:GradientElement Color="130, 202, 82" Position="0.5" />

<telerik:GradientElement Color="104, 179, 48" Position="1" />

</ComplexGradient>

</FillSettings>

</FillStyle>

<TextAppearance TextProperties-Color="112, 93, 56">

</TextAppearance>

<Border Color="81, 162, 37" />

</Appearance>

<Items>

<telerik:ChartSeriesItem YValue="1" XValue="0">

</telerik:ChartSeriesItem>

<telerik:ChartSeriesItem YValue="3" XValue="1">

</telerik:ChartSeriesItem>

<telerik:ChartSeriesItem YValue="2" XValue="2">

</telerik:ChartSeriesItem>

<telerik:ChartSeriesItem YValue="5" XValue="3">

</telerik:ChartSeriesItem>

<telerik:ChartSeriesItem YValue="4" XValue="4">

</telerik:ChartSeriesItem>

</Items>

</telerik:ChartSeries>

</Series>

<Legend>

<Appearance Corners="Round, Round, Round, Round, 6">

<ItemTextAppearance TextProperties-Color="113, 94, 57"></ItemTextAppearance>

<Border Color="225, 217, 201"></Border>

</Appearance>

</Legend>

<PlotArea>

<XAxis LayoutMode="Normal" AutoScale="False" MaxValue="4" Step="1">

<Appearance Color="226, 218, 202" MajorTick-Color="216, 207, 190">

<MajorGridLines Color="226, 218, 202"></MajorGridLines>

<TextAppearance TextProperties-Color="112, 93, 56"></TextAppearance>

</Appearance>

<AxisLabel>

<TextBlock>

<Appearance TextProperties-Color="112, 93, 56"></Appearance>

</TextBlock>

</AxisLabel>

<Items>

<telerik:ChartAxisItem Value="1"></telerik:ChartAxisItem>

<telerik:ChartAxisItem Value="2"></telerik:ChartAxisItem>

<telerik:ChartAxisItem Value="3"></telerik:ChartAxisItem>

<telerik:ChartAxisItem Value="4"></telerik:ChartAxisItem>

</Items>

</XAxis>

<YAxis>

<Appearance Color="226, 218, 202" MinorTick-Color="226, 218, 202" MajorTick-Color="226, 218, 202">

<MajorGridLines Color="231, 225, 212"></MajorGridLines>

<MinorGridLines Color="231, 225, 212"></MinorGridLines>

<TextAppearance TextProperties-Color="112, 93, 56"></TextAppearance>

</Appearance>

<AxisLabel>

<TextBlock>

<Appearance TextProperties-Color="112, 93, 56"></Appearance>

</TextBlock>

</AxisLabel>

</YAxis>

<Appearance Dimensions-Margins="18%, 23%, 12%, 10%">

<FillStyle MainColor="254, 255, 228" SecondColor="Transparent"></FillStyle>

<Border Color="226, 218, 202"></Border>

</Appearance>

</PlotArea>

<ChartTitle>

<Appearance>

<FillStyle MainColor=""></FillStyle>

</Appearance>

<TextBlock Text="Intelligent Labels - On">

<Appearance TextProperties-Color="127, 85, 51"></Appearance>

</TextBlock>

</ChartTitle>

</telerik:RadChart>

Here the event execute grid:

<telerik:RadGrid ID="GrabberMonitorGrid" runat="server" OnDetailTableDataBind="InstrumentGrid_DatdataBind"

AutoGenerateColumns="False" AllowMultiRowSelection="false" AllowSorting="True"

OnItemCommand="RadGrid1_ItemCommand" ClientSettings-EnablePostBackOnRowClick="true"

CellSpacing="1" Skin="Office2010Silver">

Here the successfully updated grid:

<telerik:RadGrid ID="StatisticsGrid" runat="server" AllowSorting="True"

EnableLinqExpressions="False" MasterTableView-ShowHeadersWhenNoRecords="true"

OnDetailTableDataBind="StatisticsGrid_DatdataBind" Skin="Office2010Silver" CellSpacing="0"

GridLines="None">

<ClientSettings AllowKeyboardNavigation="false" Resizing-AllowColumnResize="True">

<Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="80%" />

</ClientSettings>

And here the C# code for updating the Chart:

#region Create chart series collection

RadChart2.Chart.Series.Clear();

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

{

InstrumentCountersUnit currentUnit = interpolatedCounters[i];

foreach (string receivedCounterName in currentUnit.Received.Keys)

{

Telerik.Charting.ChartSeries singleSeries = new ChartSeries(receivedCounterName, ChartSeriesType.SplineArea);

singleSeries.Name = "Recieved " + receivedCounterName;

SortedList<DateTime, int> counterValues = currentUnit.Received[receivedCounterName];

for (int j = 0; j < counterValues.Count; j++)

{

DateTime currentValueDate = counterValues.Keys[j];

int currentValueCounter = counterValues[currentValueDate];

ChartSeriesItem seriesItem = new ChartSeriesItem(currentValueCounter, currentValueDate.Minute);

singleSeries.AddItem(seriesItem);

}

RadChart2.Chart.Series.Add(singleSeries);

}

foreach (string sentCounterName in currentUnit.Sent.Keys)

{

Telerik.Charting.ChartSeries singleSeries = new ChartSeries(sentCounterName, ChartSeriesType.SplineArea);

singleSeries.Name = "Sent " + sentCounterName;

SortedList<DateTime, int> counterValues = currentUnit.Sent[sentCounterName];

for (int j = 0; j < counterValues.Count; j++)

{

DateTime currentValueDate = counterValues.Keys[j];

int currentValueCounter = counterValues[currentValueDate];

ChartSeriesItem seriesItem = new ChartSeriesItem(currentValueCounter, currentValueDate.Minute);

singleSeries.AddItem(seriesItem);

}

RadChart2.Chart.Series.Add(singleSeries);

}

RadChart2.ChartTitle.TextBlock.Text = Name;

RadChart2.Visible = true;

}

#endregion

Ajax

answered on 06 Feb 2013