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

Updating a RadGrid from a PanelBar template

1 Answer 39 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Clint
Top achievements
Rank 1
Clint asked on 29 Aug 2014, 05:13 PM
I have a HeaderTemplate for a RadPanelItem that contains a LinkButton. In the template constructor I pass an ID value that I need the LinkButton to use. The idea is that the PanelBar grows dynamically based on a query. That works fine using the template.

My issue comes in when I try to click the LinkButton to update the RadGrid. Since the template is a class of its own, it cannot directly reference the RadGrid for passing it a new DateTable based on the ID value, stored within the template.

I've tried passing a callback function to the template constructor using System.Action<string>. I then try to attach the callback as an EventHandler to the LinkButton's Click event. So far this hasn't done anything for me.

Template:
public class TelerikTemplates
{
    public class PanelTemplate : ITemplate
    {
        private readonly Label title;
        private readonly LinkButton totalButton;
 
        public PanelTemplate(string pTitle, int pTotal, string pId, System.Action<string> callback)
        {
            title = new Label();
            title.CssClass = "panelTitle";
            title.Text = pTitle;
 
            totalButton = new LinkButton();
            totalButton.CssClass = "totalButton";
            totalButton.Text = pTotal.ToString();
            totalButton.Click += delegate(object sender, System.EventArgs e) { callback(pId); };
        }
 
        public void InstantiateIn(Control pContainer)
        {
            pContainer.Controls.Add(title);
            pContainer.Controls.Add(totalButton);
        }
    }
}

WebForm Code Behind
protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
    }
 
    using (DataTable data = GetData())
    {
        foreach (DataRow dr in data.Rows)
        {
            RadPanelItem titlePanel = new RadPanelItem();
            titlePanel.HeaderTemplate = new TelerikTemplates.PanelTemplate((string)dr["RuleName"], (int)dr["AccountTotal"], (string)dr["RuleId"], populateGrid);
            RadPanelItem subPanel = new RadPanelItem();
            subPanel.ContentTemplate = new TelerikTemplates.ChartAndTableTemplate(dr);
            titlePanel.Items.Add(subPanel);
            panelBar.Items.Add(titlePanel);
        }
    }
}
 
public void populateGrid(string pId)
{
    grid.DataSource = GetGridData(pId);
    grid.Rebind();
}

WebForm Markup
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="">
    <meta name="description" content="Demo site for home page.">
    <title>Demo: Home (PanelBar)</title>
    <link href="~/Content/less/css/styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <asp:Label ID="lblTest" runat="server" Text="Test"></asp:Label>
    <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>
    <script type="text/javascript">
        //Put your JavaScript code here.
    </script>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
              <UpdatedControls>
                  <telerik:AjaxUpdatedControl ControlID="grid" />
              </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="grid">
              <UpdatedControls>
                  <telerik:AjaxUpdatedControl ControlID="grid" />
              </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <section>
        <div>
            <telerik:RadPanelBar Runat="server" Width="100%" ExpandMode="SingleExpandedItem" ID="panelBar">
                <Items>
                </Items>
            </telerik:RadPanelBar>
        </div>
        <div>
            <telerik:RadGrid ID="grid" runat="server" AllowFilteringByColumn="True" AllowPaging="True" AllowSorting="True" />
        </div>
    </section>
    </form>
</body>
</html>

Thanks for any possible help!

1 Answer, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 03 Sep 2014, 10:21 AM
Hello Clint,

Try to use advanced data binding for the RadGrid. You could handle the NeedDataSource event and use it to set the DataSource for the RadGrid. If you need to rebind the RadGrid explicitly (e.g. when a button is clicked) you could call the Rebind() method.

If you would like an illustration on how you NeedDataSource event could be used, you would find the following article interesting:


Regards,
Viktor Tachev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Ajax
Asked by
Clint
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Share this question
or