Questions on UI for ASP.NET AJAX Forum

7 answers

467 views

Problem working with dynamically created RadGrid's

Hello,

We want to create a WebForm with a RadGrid that should be able to show different datasources. I started out with http://www.telerik.com/help/aspnet-ajax/grid-changing-structure-dynamically.html help page, that explains how to dynamically create a grid structure. To be more flexible I used the NeedDataSource event handling, and everything works reasonably well. For this I got some helpful info from the http://www.telerik.com/community/forums/aspnet-ajax/grid/grid-dynamically-needs-different-datasources-needdatasource-can-t-do-this.aspx forum page.

However I have two issues I'm unable to solve.

1) If the user changes a column width and then switch to a different datasource we get a 'Cannot find a column with UniqueName '...' error. This is because it still refers to the previous grid layout. What code changes should I make to fix this?

2) I want to save the width of columns and the sort columns. But as the RadGrid is created dynamically in the Page_Init I don't have a clue how and when I should save the grid layout.

I added a small sample, based on the Northwind database, to show my current solution. Can someone instruct me how to solve my problems?

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm9.aspx.cs" Inherits="WebApplication3.WebForm9"  Trace="false" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

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

</head>

<body class="BODY">

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

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

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<div id="menu" style="height:30px; margin-top:10px;">

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"

onselectedindexchanged="DropDownList1_SelectedIndexChanged">

<asp:ListItem>customers</asp:ListItem>

<asp:ListItem>orders</asp:ListItem>

</asp:DropDownList>

</div>

<br />

<div id="DivGrid1" style="height:200px; margin-top:10px;" >

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

</telerik:RadGrid>

</div>

</form>

</body>

</html>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Configuration;

using System.Data.SqlClient;

using Telerik.Web.UI;

namespace WebApplication3

{

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

{

myListview pageGrid = new myListview();

List<myListviewColumn> gridColumn = new List<myListviewColumn>();

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

{

Grid1_PageInit();

}

private void Grid1_PageInit()

{

RadGrid1.Skin = "Office2010Blue";

this.RadGrid1.NeedDataSource += new GridNeedDataSourceEventHandler(this.RadGrid1_NeedDataSource);

RadGrid1.Width = Unit.Percentage(100);

RadGrid1.AllowPaging = true;

RadGrid1.GroupingEnabled = false;

RadGrid1.ShowGroupPanel = false;

RadGrid1.ShowStatusBar = true;

RadGrid1.AllowMultiRowSelection = true;

RadGrid1.PagerStyle.Mode = GridPagerMode.NextPrevAndNumeric;

RadGrid1.PagerStyle.AlwaysVisible = true;

RadGrid1.ClientSettings.AllowDragToGroup = true;

RadGrid1.ClientSettings.Selecting.AllowRowSelect = true;

RadGrid1.ClientSettings.AllowColumnsReorder = true;

RadGrid1.ClientSettings.AllowKeyboardNavigation = true;

RadGrid1.ClientSettings.Scrolling.AllowScroll = true;

RadGrid1.ClientSettings.Scrolling.UseStaticHeaders = true;

RadGrid1.ClientSettings.Scrolling.ScrollHeight = Unit.Percentage(100);

RadGrid1.ClientSettings.Resizing.AllowColumnResize = true;

RadGrid1.ClientSettings.Resizing.EnableRealTimeResize = true;

RadGrid1.ClientSettings.Resizing.ResizeGridOnColumnResize = true;

RadGrid1.ClientSettings.Resizing.AllowResizeToFit = true;

// Add Master Table

RadGrid1.MasterTableView.PageSize = 20;

RadGrid1.MasterTableView.AllowSorting = true;

RadGrid1.AutoGenerateColumns = false;

RadGrid1.MasterTableView.EnableColumnsViewState = false;

string ddlValue = Request.Form.Get("DropDownList1");

switch (ddlValue)

{

case "customers":

goto default;

case "orders":

pageGrid.gridDbConnection = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;

pageGrid.gridQuery = "SELECT OrderID, OrderDate, ShipName, ShipAddress FROM Orders";

gridColumn.Clear();

gridColumn.Add(new myListviewColumn(0, "orderid", "Order", AttributeType.String, 100));

gridColumn.Add(new myListviewColumn(1, "orderdate", "Orderdatum", AttributeType.String, 100));

gridColumn.Add(new myListviewColumn(2, "shipname", "Bedrijf", AttributeType.String, 100));

gridColumn.Add(new myListviewColumn(3, "shipaddress", "Adres", AttributeType.String, 100));

break;

default:

pageGrid.gridDbConnection = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;

pageGrid.gridQuery = "SELECT CompanyName, ContactName, Address, City FROM Customers";

gridColumn.Clear();

gridColumn.Add(new myListviewColumn(0, "companyname", "Bedrijf", AttributeType.String, 200));

gridColumn.Add(new myListviewColumn(1, "contactname", "Contactpersoon", AttributeType.String, 200));

gridColumn.Add(new myListviewColumn(2, "address", "Adres", AttributeType.String, 200));

gridColumn.Add(new myListviewColumn(3, "city", "Plaats", AttributeType.String, 200));

break;

}

CreateListlayout();

}

private void CreateListlayout()

{

GridClientSelectColumn selectColumn;

selectColumn = new GridClientSelectColumn();

selectColumn.UniqueName = "ClientSelectColumn";

selectColumn.HeaderStyle.Width = Unit.Pixel(35);

selectColumn.Resizable = false;

RadGrid1.MasterTableView.Columns.Add(selectColumn);

GridBoundColumn boundColumn;

for (int i = 0; i < gridColumn.Count; i++)

{

boundColumn = new GridBoundColumn();

boundColumn.DataField = gridColumn[i].AttributeName;

boundColumn.HeaderText = gridColumn[i].Name;

boundColumn.ItemStyle.Wrap = false;

if (i < gridColumn.Count - 1) { boundColumn.HeaderStyle.Width = Unit.Pixel(gridColumn[i].Width); }

RadGrid1.MasterTableView.Columns.Add(boundColumn);

}

protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)

{

SqlDataReader dr;

dr = SqlRetrieve(pageGrid.gridQuery, pageGrid.gridDbConnection);

RadGrid1.DataSource = dr;

}

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

{

RadGrid1.CurrentPageIndex = 0;

RadGrid1.MasterTableView.SortExpressions.Clear();

RadGrid1.Rebind();

}

// Retrieve data using a SQL Query

public static SqlDataReader SqlRetrieve(string sql, string connectionString)

{

// Create the database connection

SqlConnection dbConnection = new SqlConnection(connectionString);

// Prepare the SQL command execution

SqlCommand cmd = new SqlCommand(sql, dbConnection);

cmd.CommandType = CommandType.Text;

// Retrieve data with sqlDataReader

try

{

dbConnection.Open();

// Make sure the database connection is closed when the datareader is closed.

return cmd.ExecuteReader(CommandBehavior.CloseConnection);

}

catch (SqlException dbex)

{

return null;

}

catch (Exception ex)

{

return null;

}

public class myListview

{

public string gridQuery { get; set; }

public string gridDbConnection { get; set; }

}

public class myListviewColumn

{

public int Index { get; set; }

public string Name { get; set; }

public string AttributeName { get; set; }

public int Type { get; set; }

public int Width { get; set; }

public myListviewColumn(int index, string attributename, string name, int type, int width)

{

Index = index;

Name = name;

Type = type;

Width = width;

AttributeName = attributename;

}

Kind Regards, Remco

Grid

answered on 07 Dec 2011

3 answers

230 views

RadWindow confirm dialog localization with resource files.

Im currently using this example in one of my projects :
Confirm dialog example

When I want to use resources files to localize my application, i normally use a tag like this to set the text :

Text="<%$ Code: ResourceFile.Some_TranslatedText_DependingOnCulture %>"

Do you have a suggestion on how I can use the same technique to have to localized version of the prompt text and title text ? The sample below is obviously not working ...

OnClientClick="return blockConfirm(" + <%$ Code: ResourceFile
.TranslatedPrompt %> + ", event, 330, 100, '', " + <%$ Code: 
ResourceFile
.
TranslatedTitle 
 %> + ");"

Thank you !

Window

answered on 07 Dec 2011

1 answer

133 views

Rad Window from DotNetNuke Module.

I have a RadWindow in a separate DNN module that acts as an Address validator(it calls a service that we have access to). If the address is invalid it shows a modal popup to allow them to use the suggested address or not.

The module is placed in a different module that is doing an applications that has several addresses to validate. This module is using an ASP wizard. This is reference by

<%

@ Register Src="../AddressValidator/AddressValidator.ascx" TagName="AddressValidator" TagPrefix="AddVal" %>

and

<AddVal:AddressValidator ID="addValBorrower" runat="server" />

<AddVal:AddressValidator ID="addValBorrowerPhysical" runat="server" />

<AddVal:AddressValidator ID="addValEmployeer" runat="server" />

<AddVal:AddressValidator ID="addValStudent" runat="server" />

<AddVal:AddressValidator ID="addValRef1" runat="server" />

<AddVal:AddressValidator ID="addValRef2" runat="server" />

Which are all place outside of the

asp

:Wizard

Everything works ok and the modal window pops up when desired.

The problem is when using the wizard previous button. After the modal window is displayed and a selection is made. If the previous button is selected...none of the Telerik controls work properly. For instance if we have RadDatePicker...it displays the text to select the calendar(rather than the calendar image)...and then the calendar does not display correct. Similar things happen to the RadComboBox...it displays(but not as dropdown box) and the values displaying strangely.

There are no javascript errors that show in the browser.

Is there something that I'm missing that causes all the ajax controls to go screwy?

Window

answered on 07 Dec 2011

0 answers

86 views

Controls Resize after postback when hovering

I am using a radajaxpanel and doing a postback. After the postback the controls all resize when hovering over them. Any reason for this and how do I fix?

General Discussions

asked on 07 Dec 2011

2 answers

173 views

Invalid state

Is there anyway to set the RadComboBox into an invalid state, like RadInput? I'd like a similar rendering mode, with a little yellow warning sign, and such.

ComboBox

answered on 07 Dec 2011

1 answer

101 views

Multiple instances of a user control that contains a RadGrid behaves oddly.

I have create a user control that contains a RadGrid. I have enabled infinite Scrolling and this worked fine until I realized that If I wanted to have the User control multiple times on a single page. I found that I needed to use the RadAjaxManagerProxy inside the user control.Then I placed the RadAjaxManager on the master page. Once I did this the scrolling functionality stopped working.

Master Page.

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

</telerik:RadAjaxManager>

User Control

<asp:HiddenField ID="hdfnTotalRecords" runat="server" />

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

<script type="text/javascript">

function HandleScrolling(e) {

var totalRecords = $('[Id$=hdfnTotalRecords]').val();

var grid = $find("<%=RadGrid1.ClientID %>");

var scrollArea = document.getElementById("<%= RadGrid1.ClientID %>" + "_GridData");

if (IsScrolledToBottom(scrollArea)) {

var currentlyDisplayedRecords = grid.get_masterTableView().get_pageSize() * (grid.get_masterTableView().get_currentPageIndex() + 1);

//if the visible items are less than the entire record count

//trigger an ajax request to increase them

if (currentlyDisplayedRecords < totalRecords) {

alert("here");

$find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest("LoadMoreRecords");

}

//calculate when the scroll bar is at the bottom

function IsScrolledToBottom(scrollArea) {

var currentPosition = scrollArea.scrollTop + scrollArea.clientHeight;

return currentPosition == scrollArea.scrollHeight;

}

function onRequestStart(sender, eventArgs) {

if (eventArgs.get_eventTarget().indexOf("ibtnPhone") != -1) {

eventArgs.set_enableAjax(false);

}

function RowDblClick(sender, eventArgs) {

var test = eventArgs.getDataKeyValue("Id");

window.location.href = '/Messages/AddEditMessage.aspx?Id=' + test

}

</script>

</telerik:RadCodeBlock>

<telerik:RadWindowManager id="WindowManager1" runat="server">

<windows>

<telerik:radwindow id="Window1" top="150" left="10" runat="server" width="700px" height="150px"></telerik:radwindow>

</windows>

</telerik:RadWindowManager>

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

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

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

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

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy >

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" MinDisplayTime="500" Transparency="25" BackColor="#ffffff" runat="server" CssClass="ajaxloader" />

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

AllowSorting="True" GridLines="None"

AutoGenerateColumns="false"

OnItemCommand="RadGrid1_ItemCommand"

OnItemDataBound="Messages_ItemDataBound"

OnNeedDataSource="RadGrid1_NeedDataSource"

AllowAutomaticDeletes="True"

AllowPaging="true"

PageSize="5">

<PagerStyle Visible="False"/>

<%--<PagerStyle Visible="true" />--%>

<MasterTableView Width="100%" DataKeyNames="Id" CommandItemDisplay="Top" ClientDataKeyNames="Id">

<CommandItemTemplate>

<table>

<tr>

<td width="45px">

<asp:LinkButton ID="btnAddNew" runat="server" CommandName="AddNewMessage" ToolTip="Add a new message."><img style="border:0px;vertical-align:middle;" alt="" src="/Images/pc_icon_new_15x15.gif" /> New</asp:LinkButton>

</td>

<td width="45px">

<asp:LinkButton ID="btnEdit" runat="server" CommandName="EditMessage" ToolTip="Edit the selected message."><img style="border:0px;vertical-align:middle;" alt="" src="/Images/pc_icon_edit_15x15.gif" /> Edit</asp:LinkButton>

</td>

<td width="60px">

<asp:LinkButton ID="btnDelete" runat="server" CommandName="DeleteMessage" ToolTip="Delete the selected message."><img style="border:0px;vertical-align:middle;" alt="" src="/Images/pc_icon_delete_15x15.gif" /> Delete</asp:LinkButton>

</td>

</tr>

</table>

</CommandItemTemplate>

<Columns>

<telerik:GridClientSelectColumn UniqueName="ClientSelect" HeaderStyle-Width="5%" />

<telerik:GridBoundColumn DataField="Id" HeaderText="Id" UniqueName="Id" DataType="System.Int32" HeaderStyle-Width="20%" />

<telerik:GridBoundColumn DataField="DisplayName" HeaderText="Name" UniqueName="DisplayName" DataType="System.String" HeaderStyle-Width="20%" />

<telerik:GridBoundColumn DataField="FileDateTime" HeaderText="Created Date/Time" UniqueName="Created" DataType="System.DateTime" HeaderStyle-Width="20%" DataFormatString="{0:MM/dd/yy hh:mm tt}" />

<telerik:GridBoundColumn DataField="LastSentDateTime" HeaderText="Last Used" UniqueName="Sent" DataType="System.DateTime" HeaderStyle-Width="20%" DataFormatString="{0:MM/dd/yy hh:mm tt}" />

<telerik:GridTemplateColumn ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="30%"

HeaderText="Message Type" AllowFiltering="false" UniqueName="MessageFormat" SortExpression="MessageFormat">

<ItemTemplate>

<asp:ImageButton ID="ibtnPhone" runat="server" ImageUrl="~/Images/pc_icon_phone.gif" CommandName="ListenPhone" CommandArgument="" ToolTip="Listen to message" />

<asp:ImageButton ID="ibtnSMS" runat="server" ImageUrl="~/Images/pc_icon_txt.gif" CommandName="ViewSMS" CommandArgument="" ToolTip="View SMS Message" />

</ItemTemplate>

<HeaderStyle HorizontalAlign="Left" />

<ItemStyle HorizontalAlign="Left" />

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

<ClientSettings>

<Selecting AllowRowSelect="True" />

<ClientEvents OnRowDblClick="RowDblClick" />

<Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="135px"/>

<ClientEvents OnScroll="HandleScrolling"/>

</ClientSettings>

</telerik:RadGrid>

Page that contains multiple Instances.

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" SelectedIndex="0" CssClass="tabStrip">

<Tabs>

<telerik:RadTab Text="Messages">

</telerik:RadTab>

<telerik:RadTab Text="Greetings" Visible="false">

</telerik:RadTab>

<telerik:RadTab Text="Trailers" Visible="false">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" CssClass="multiPage">

<telerik:RadPageView ID="RadPageView1" runat="server">

<ucMessages:Messages ID="ucMessages" runat="server" />

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView3" runat="server">

<ucMessages:Messages ID="ucGreetingMessages" runat="server" />

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView4" runat="server">

<ucMessages:Messages ID="ucTrailerMessages" runat="server" />

</telerik:RadPageView>

</telerik:RadMultiPage>

Grid

answered on 07 Dec 2011

3 answers

286 views

Edit/Update/Cancel image - Inline Editing

Hi

I am using inline edit inside grid. I want to change the default images for Edit/Update/Cancel. I am using sprite css and not exactly image. So please guide how to achieve this

I tried this -
<telerik:GridEditCommandColumn ItemStyle-Width="60px" HeaderStyle-Width="60px" ButtonType="ImageButton"
UpdateText="Update" CancelText="Cancel" EditText="Edit" ></telerik:GridEditCommandColumn>

This shows telerik default images only.... As dont have image so I cannot give ImageUrl.

I tried giving cssClass like this.....
<telerik:GridEditCommandColumn ItemStyle-Width="60px" HeaderStyle-Width="60px" ButtonType="LinkButton" ItemStyle-CssClass="buttonEdit" UpdateText="Update" CancelText="Cancel" EditText="Edit" ></telerik:GridEditCommandColumn>

It is only showing me - Text as Edit/Update/Cancel.

Please guide me on this.

Thanks,
Pradip

Grid

answered on 07 Dec 2011

1 answer

72 views

Updating RadGrid using Ajax after edits from a User Control are saved

Hi,

I have a Master page which looks like:

In the left placeholder, I have a RadGrid. In the right placeholder I have a user control.
When a user clicks on a row in the RadGrid, the user control on the right is successfully populated and edits are allowed.
I have a "save" button which, when clicked, successfully posts the data to the database.

Some of that data is displayed in the RadGrid. However, after changing this data, the grid is not updated.

In the right placed holder I have a RadAjaxManagerProxy setup like so:

<telerik:RadAjaxManagerProxy ID="LocationAjaxProxy" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="LocationList">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="LocationInformationRadMultiPage" LoadingPanelID="RadAjaxGridLoad" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="LocationInformationRadMultiPage">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="LocationList" LoadingPanelID="RadAjaxGridLoad" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

LocationList is the RadGrid. The LocationInformationRadMultiPage is a RadTabStrip that contains the user control that allows editing and saving of the data.

Is this the correct approach?

Thanks!

Ajax

answered on 07 Dec 2011

1 answer

110 views

RadScheduler

I want to insert,edit and Delete Appointments in RadScheduler from the database.
Iam using Visual Studio 2008 ,sqlserver 2005.

Scheduler

answered on 07 Dec 2011

4 answers

196 views

[Solved] RadScheduler AdvancedForm

On my project, i'm using RadScheduler.

In result of the needs, i had to create a custom edit "window".

Basically in the main page i have:

<telerik:RadScheduler runat="server" ID="radScheduler" SelectedView="TimelineView"

EnableExactTimeRendering="True" DayStartTime="00:00:00" DayEndTime="23:59:59"

DataKeyField="ID" DataSubjectField="Subject" DataStartField="Start" DataEndField="End"

DataRecurrenceField="RecurrenceRule" DataRecurrenceParentKeyField="RecurrenceParentId"

AllowInsert="false" AllowDelete="False" AllowEdit="false" ColumnWidth="100px"

OnAppointmentCreated="radScheduler_AppointmentCreated" AdvancedForm-Modal="true"

Width="100%" FirstDayOfWeek="Monday" ShowHoursColumn="False" Skin="Telerik" ShowsConfirmationWindowOnDelete="False"

OnFormCreated="radScheduler_FormCreated">

<TimelineView UserSelectable="true" GroupingDirection="Vertical" NumberOfSlots="24"

ColumnHeaderDateFormat="HH:mm" ShowInsertArea="false" StartTime="00:00:00" SlotDuration="01:00:00"

GroupBy="Room" />

<DayView UserSelectable="false" />

<MonthView UserSelectable="false" />

<WeekView UserSelectable="false" />

<AdvancedEditTemplate>

<scheduler:AdvancedForm runat="server" ID="AdvancedInsertForm1" Mode="Edit"/>

</AdvancedEditTemplate>

</telerik:RadScheduler>

and also a RadAjaxManager.

<scheduler:AdvancedForm>

points to AdvancedForm.ascx

In AdvancedForm.ascx i have this javascript block

<script type="text/javascript">

var chart; // global

/*

* Request data from the server, add it to the graph

*/

function requestData() {

$.ajaxSetup({ cache: false });

$.getJSON('exampleurl', function (data) {

//Clear the "old" series

while (chart.series.length > 0) {

chart.series[0].remove(true);

}

//declare Json

var jsonObj = {

series: []

};

//Cycle through each JSONobjcect returned by the url

$.each(data, function (i, item) {

var key = item['tag'];

var value = item['data']['Velocity'];

jsonObj.series.push({

"name": key,

"data": value

});

//Add each of the key:value pair to the series

for (var i in jsonObj.series) {

chart.addSeries(jsonObj.series[i]);

}

// call it again after ten seconds

setTimeout(requestData, 10000);

});

}

$(document).ready(function () {

chart = new Highcharts.Chart({

chart: {

renderTo: 'container',

defaultSeriesType: 'column',

events: {

load: requestData

}

},

title: {

text: 'Test Chart'

},

xAxis: {

title: {

text: 'Viaturas'

},

categories: ['']

},

yAxis: {

min: 0,

title: {

text: 'Velocidade (Km/h)'

}

},

tooltip: {

formatter: function () {

return '' +

this.series.name + ': ' + this.y + ' Km/h';

}

},

});

</script>

the problem i have is that the $(document).ready is never called...

Thanks in advance for the help..

Scheduler

answered on 07 Dec 2011