This is a migrated thread and some comments may be shown as answers.

Dynamically built rad grids need ajaxified and client side click event

1 Answer 28 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Josh
Top achievements
Rank 1
Josh asked on 07 Jun 2012, 01:44 PM
So here's the scenario that I have:

I have a dashboard that has multiple radgrids in it.  These rad grids are one offs (in other words no update, delete, add).  I want to be able to let the users click on a row and redirect to a report page.  All of this works until I want to have each radgrid update every 5 seconds.  The calls are made from code behind. I thought about adding a ticker like the example here:

http://demos.telerik.com/aspnet-ajax/grid/examples/client/livedata/defaultcs.aspx

However this doesn't work because the data I am pulling is designed to work for an increasing number of rad grids so if the client decided they want to add another radgrid they can.  I use a lambda expression to parse the object from code behind.  Which isn't really possible to do from javascript and ajax (that I am aware of).  If I add the static classes this makes the display to brittle and will require maintenance more often than I wanted. 

So I decided to go with the update panel binding the ajaxmanager to the radgrid at instantiation of the radgrid.  Here's my current problem.  If I bind the update panel I need to assign an ID to reference the control.  If I pass in the control during instantiation then I have to create concrete NeedDataSource classes.  Is there any way to create n number of rad grids from code behind and then have the following abilities:

1.   Allow row clicked events
2.   update every interval

I keep getting i.get_postBackElement() is undefined. Here's a look at some of the code I have (that doesn't work):

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" />
    <fieldset id="Facility" class="dashboardFieldsetDisplay">
        <legend>Facility Data</legend>
        <asp:Panel ID="FacilityGrids" runat="server" CssClass="dashboardGrid"></asp:Panel>
    </fieldset>
    <fieldset id="Company" class="dashboardFieldsetDisplay">
        <legend>Company Data</legend>
        <asp:Panel ID="CompanyGrids" runat="server" CssClass="dashboardGrid"></asp:Panel>
    </fieldset>
    <fieldset id="Region" class="dashboardFieldsetDisplay">
        <legend>Region Data</legend>
        <asp:Panel ID="RegionGrids" runat="server" CssClass="dashboardGrid"></asp:Panel>
    </fieldset>
    <div class="clearBoth"></div>
    <div class="displayNone">
        <asp:Timer ID="Ticker" runat="server" OnTick="Ticker_Ticked"></asp:Timer>
    </div>
</asp:Content>

Code Behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using PCSGroup.Freund;
using Telerik.Web.UI;
 
 
public partial class _default : Base
{
    private List<DateTime> dateRange = new List<DateTime>();
    private List<RegionalSales> allRegionalSales = new List<RegionalSales>();
    private List<FacilitySales> allFacilitySales = new List<FacilitySales>();
    private List<CompanySales> allCompanySales = new List<CompanySales>();
    private List<RadGrid> listOfGrids = new List<RadGrid>();
    private int dashboardWidth = 235;
 
    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
        int count = 0;
        while(count < 5)
        {
            dateRange.Add(DateTime.Now.Date.AddDays(count));
            count++;
        }
 
        foreach (DateTime day in dateRange)
        {
            //loops through the region sales object and creates a list of regionalsales if any exist for that date
            RegionalSales regionOrders = new RegionalSales(day);
            allRegionalSales.AddRange(regionOrders.SelectOrders());
 
            //loops through the facility sales object and creates a list of facilitysales if any exist for that date
            FacilitySales facilityOrders = new FacilitySales(day);
            allFacilitySales.AddRange(facilityOrders.SelectOrders());
 
            //loops through the company sales object and creates a list of companysales if any exist for that date
            CompanySales companyOrders = new CompanySales(day);
            allCompanySales.AddRange(companyOrders.SelectOrders());
        }
    }
 
    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
        Ticker.Interval = 3000;
        foreach (Region region in new Region().SelectAllRegionsNotDeleted())
        {
            Panel gridWrapper = new Panel();
            gridWrapper.Width = 250;
            gridWrapper.CssClass = "floatLeft";
            Literal regionHead = new Literal();
            regionHead.Text = String.Format("<h2>{0}</h2>", region.RegionName);
            gridWrapper.Controls.Add(regionHead);
            gridWrapper.Controls.Add(GetRegionChart(region.RegionID));
            RegionGrids.Controls.Add(gridWrapper);
        }
        foreach (Facility facility in new Facility().SelectAllFacilitiesNotDeleted())
        {
            Literal facilityHead = new Literal();
            facilityHead.Text = String.Format("<h2>{0}</h2>", facility.FacilityName);
            FacilityGrids.Controls.Add(facilityHead);
            FacilityGrids.Controls.Add(GetFacilityChart(facility.FacilityID));
        }
        foreach (Company company in new Company().SelectAllCompaniesNotDeleted().Where(i => i.CompanyID != 2).ToList())
        {
            Panel gridWrapper = new Panel();
            gridWrapper.Width = 250;
            gridWrapper.CssClass = "floatLeft";
            Literal companyHead = new Literal();
            companyHead.Text = String.Format("<h2>{0}</h2>", company.CompanyName);
            gridWrapper.Controls.Add(companyHead);
            gridWrapper.Controls.Add(GetCompanyChart(company.CompanyID));
            CompanyGrids.Controls.Add(gridWrapper);
        }
    }
 
    protected void Company3_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        RadGrid company = listOfGrids.FirstOrDefault(i => i.ID == "Company_3");
        company.DataSource = allCompanySales.Where(i => i.CompanyID == 3);
    }
 
    public void Ticker_Ticked(object sender, EventArgs e)
    {
        foreach (RadGrid grid in listOfGrids)
        {
            grid.Rebind();
        }
    }
 
    private RadGrid GetRegionChart(int ID)
    {
        string[] keys = { "RegionID", "DeliveryDate" };
        RadGrid thisView = new RadGrid();
        thisView.CssClass = "roundedCorners";
        thisView.Skin = Skin;
        thisView.Width = dashboardWidth;
        thisView.AutoGenerateColumns = false;
        thisView.GridLines = GridLines.None;
        thisView.MasterTableView.Width = Unit.Percentage(100);
        thisView.MasterTableView.NoMasterRecordsText = string.Empty;
        thisView.MasterTableView.ClientDataKeyNames = keys;
        thisView.ClientSettings.ClientEvents.OnRowClick = "RegionRowClick";
 
        thisView.DataSource = allRegionalSales.Where(i => i.RegionID == ID);
 
        GridBoundColumn boundColumn;
 
        boundColumn = new GridBoundColumn();
        thisView.MasterTableView.Columns.Add(boundColumn);
        boundColumn.DataField = "DeliveryDate";
        boundColumn.HeaderText = "Date";
        boundColumn.DataFormatString = "{0:MM/dd}";
 
        boundColumn = new GridBoundColumn();
        thisView.MasterTableView.Columns.Add(boundColumn);
        boundColumn.DataField = "NewCount";
        boundColumn.HeaderText = "New";
 
        boundColumn = new GridBoundColumn();
        thisView.MasterTableView.Columns.Add(boundColumn);
        boundColumn.DataField = "RenewedCount";
        boundColumn.HeaderText = "Renewed";
 
        boundColumn = new GridBoundColumn();
        thisView.MasterTableView.Columns.Add(boundColumn);
        boundColumn.DataField = "CancelledCount";
        boundColumn.HeaderText = "Cancelled";
 
        listOfGrids.Add(thisView);
        return thisView;
    }
 
    private RadGrid GetFacilityChart(int ID)
    {
        string[] keys = { "FacilityID", "DeliveryDate" };
        RadGrid thisView = new RadGrid();
        thisView.CssClass = "roundedCorners";
        thisView.Skin = Skin;
        thisView.Width = dashboardWidth;
        thisView.AutoGenerateColumns = false;
        thisView.GridLines = GridLines.None;
        thisView.ID = String.Format("FacilityID_{0}", ID);
        thisView.MasterTableView.Width = Unit.Percentage(100);
        thisView.MasterTableView.NoMasterRecordsText = string.Empty;
        thisView.MasterTableView.ClientDataKeyNames = keys;
        thisView.ClientSettings.ClientEvents.OnRowClick = "FacilityRowClick";
 
        thisView.DataSource = allFacilitySales.Where(i => i.FacilityID == ID);
 
        GridBoundColumn boundColumn;
 
        boundColumn = new GridBoundColumn();
        thisView.MasterTableView.Columns.Add(boundColumn);
        boundColumn.DataField = "DeliveryDate";
        boundColumn.HeaderText = "Date";
        boundColumn.DataFormatString = "{0:MM/dd}";
 
        boundColumn = new GridBoundColumn();
        thisView.MasterTableView.Columns.Add(boundColumn);
        boundColumn.DataField = "NewCount";
        boundColumn.HeaderText = "New";
 
        boundColumn = new GridBoundColumn();
        thisView.MasterTableView.Columns.Add(boundColumn);
        boundColumn.DataField = "RenewedCount";
        boundColumn.HeaderText = "Renewed";
 
        boundColumn = new GridBoundColumn();
        thisView.MasterTableView.Columns.Add(boundColumn);
        boundColumn.DataField = "CancelledCount";
        boundColumn.HeaderText = "Cancelled";
 
        listOfGrids.Add(thisView);
        return thisView;
    }
 
    private RadGrid GetCompanyChart(int ID)
    {
        string[] keys = { "CompanyID", "DeliveryDate" };
        RadGrid thisView = new RadGrid();
        thisView.CssClass = "roundedCorners";
        thisView.Skin = Skin;
        thisView.Width = dashboardWidth;
        thisView.AutoGenerateColumns = false;
        thisView.GridLines = GridLines.None;
        thisView.ID = String.Format("Company_{0}", ID);
        thisView.MasterTableView.Width = Unit.Percentage(100);
        thisView.MasterTableView.NoMasterRecordsText = string.Empty;
        thisView.MasterTableView.ClientDataKeyNames = keys;
        thisView.ClientSettings.ClientEvents.OnRowClick = "CompanyRowClick";
        /*
         !!!!              Here's the code that doesn't work                  !!!!
                      I am creating a reference to a method
                      that does makes my code very brittle.
       */
        if (ID == 3)
        {
            thisView.NeedDataSource += new GridNeedDataSourceEventHandler(Company3_NeedDataSource);
        }
 
        RadAjaxManager1.DefaultLoadingPanelID = "LoadingPanel1";
        RadAjaxManager1.AjaxSettings.AddAjaxSetting(Ticker, thisView, null);
 
        // End Broken Code
 
        thisView.DataSource = allCompanySales.Where(i => i.CompanyID == ID);
 
        GridBoundColumn boundColumn;
 
        boundColumn = new GridBoundColumn();
        thisView.MasterTableView.Columns.Add(boundColumn);
        boundColumn.DataField = "DeliveryDate";
        boundColumn.HeaderText = "Date";
        boundColumn.DataFormatString = "{0:MM/dd}";
 
        boundColumn = new GridBoundColumn();
        thisView.MasterTableView.Columns.Add(boundColumn);
        boundColumn.DataField = "NewCount";
        boundColumn.HeaderText = "New";
 
        boundColumn = new GridBoundColumn();
        thisView.MasterTableView.Columns.Add(boundColumn);
        boundColumn.DataField = "RenewedCount";
        boundColumn.HeaderText = "Renewed";
 
        boundColumn = new GridBoundColumn();
        thisView.MasterTableView.Columns.Add(boundColumn);
        boundColumn.DataField = "CancelledCount";
        boundColumn.HeaderText = "Cancelled";
 
        listOfGrids.Add(thisView);
        return thisView;
    }
}

1 Answer, 1 is accepted

Sort by
0
Josh
Top achievements
Rank 1
answered on 07 Jun 2012, 03:33 PM
I figured it out, though I don't fully understand how it's working.

I commented out the problem code because it kept giving me an javascript error but I left the ticker in it in which I rebind each of the radgrids in my list of radgrids which has each of the radgrids on the page.  So it rebinds all of them on the Tick event.  It loads everything "real time".  No need for ajax and from the looks of it it only causes on full page refresh that I can see, and this still allows me to use the rowclick event without specifying an static ID.
Tags
Ajax
Asked by
Josh
Top achievements
Rank 1
Answers by
Josh
Top achievements
Rank 1
Share this question
or