on client side binding itemtemplate is empty

10 posts, 0 answers
  1. Mohammad sadegh
    Mohammad sadegh avatar
    18 posts
    Member since:
    Jul 2011

    Posted 25 Jul 2011 Link to this post

    Hello All

    I asked this question later. But i think my question must be in a separate Thread.

    This is my problem:
    When i bind my grid in client side, my template column is empty, and just some records binded on server side page_load() contains template column by items.
    I have not any problem using both server side and client side binding, just this:
    First rows that bound from server has not any problem, and works fine, but other rows that added after client side binding has problem and are empty. why ??
    This rows are added in client and has problem yet,but first rows has not any problem.

    For exapmle :
    If on server side page_load() you has 10 rows, and after that on client binding you have 6 rows (less that server side binding) you have not any problem, and every things fine.
    But if you have 13 rows,you have problem on 3 new rows, just in template columns. and they are empty.
    Is there any solution? Is any politics for solve this problem with this status (first bind on server side, and after that bind form clinet side with template columns)?

    I attached 2 pics, First one shows a grid with only one record,that bind from server side,that's fine.
    and second one shows that grid after binding from client side and new records that template columns are EMPTY.

    In additional
    when I change DataSource in client side, that columns was generated on server side binding are exists yet.
    can is reinitialize my Grid in client side and solve this problem?
    i think this two problem are related together, and the answer is reinitialize grid on client side for be free from server side binding status.

    Best regards,
    Mohammad
  2. Mohammad sadegh
    Mohammad sadegh avatar
    18 posts
    Member since:
    Jul 2011

    Posted 27 Jul 2011 Link to this post

    Hello again

    I test grid just with client side binding(without server side binding), that result is template column is empty yet!
    This is my full client side code:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script language="javascript" type="text/javascript">
                function Button1_onclick() {
                    var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                    PageMethods.GetData(1, true, updateGrid);
                }
     
                function updateGrid(result) {
                    var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                    tableView.set_dataSource(result);
                    tableView.dataBind();
                }
            </script>
        </telerik:RadCodeBlock>
    </head>
    <body>
        <form id="form1" runat="server">
        <input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="true">
        </telerik:RadScriptManager>
        <br />
        <telerik:RadGrid ID="RadGrid1" runat="server" EnableViewState="false" AutoGenerateColumns="true">
            <MasterTableView>
                <Columns>
                    <telerik:GridBoundColumn DataField="pic" HeaderText="pic" />
                    <telerik:GridTemplateColumn>
                        <ItemTemplate >
                            <img id="PersonPic" src='pics/personels/khoobani.jpg' width="30px" height="40px"
                                alt="" />                           
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings>
                <ClientEvents OnCommand="function(){}" />
            </ClientSettings>
        </telerik:RadGrid>
        </form>
    </body>
    </html>

    This is my full server side code:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.Services;
    using System.Data;
     
    public partial class Default2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
     
        }
     
        [WebMethod]
        public static List<object> GetData(int departmentID, bool SelectSubNodesPersonels)
        {
            DAL.Personels ObjPersonels = new DAL.Personels();
            DataTable DT = ObjPersonels.Personels_SELECT_BY_DepartmentID(departmentID, SelectSubNodesPersonels);
     
            return ObjPersonels.Convert_DataTable_To_List_Object(DT);
        }
    }

    Here i attached 2 pics,first one is before binding, and second one is after client side binding.
    template columns don't repeat for new lines
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mohammad sadegh
    Mohammad sadegh avatar
    18 posts
    Member since:
    Jul 2011

    Posted 28 Jul 2011 Link to this post

    any solution my friends?
  5. Mohammad sadegh
    Mohammad sadegh avatar
    18 posts
    Member since:
    Jul 2011

    Posted 28 Jul 2011 Link to this post

    Hello all

    I test this way too.
    Full client side code:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script language="javascript" type="text/javascript">
                function Button1_onclick() {
                    var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                    PageMethods.GetData(1, true, updateGrid);
                }
     
                function updateGrid(result) {
                    var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                    tableView.set_dataSource(result);
                    tableView.dataBind();
                }
            </script>
        </telerik:RadCodeBlock>
    </head>
    <body>
        <form id="form1" runat="server">
        <input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="true">
        </telerik:RadScriptManager>
        <br />
        <telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="true">
            <MasterTableView TableLayout="Fixed">
                <Columns>
                    <telerik:GridBoundColumn DataField="pic" HeaderText="pic" />
                    <telerik:GridTemplateColumn UniqueName="pp">
                        <ItemTemplate>
                            Just show a text,nothing more. after that i will add my items!!!
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings>
            </ClientSettings>
        </telerik:RadGrid>
        </form>
    </body>
    </html>

    and server side code:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.Services;
    using System.Data;
     
    public partial class Default2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
     
        }
     
        [WebMethod]
        public static List<object> GetData(int departmentID, bool SelectSubNodesPersonels)
        {
            DAL.Personels ObjPersonels = new DAL.Personels();
            DataTable DT = ObjPersonels.Personels_SELECT_BY_DepartmentID(departmentID, SelectSubNodesPersonels);
     
            return ObjPersonels.Convert_DataTable_To_List_Object(DT);
        }
     
        protected override void OnInit(System.EventArgs e)
        {
            base.OnInit(e);
            RadGrid1.NeedDataSource += new Telerik.Web.UI.GridNeedDataSourceEventHandler(RadGrid1_NeedDataSource);
        }
     
        void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
        {
            RadGrid1.AllowCustomPaging = true;
            RadGrid1.VirtualItemCount = 1000;
            RadGrid1.DataSource = new List<object>();
        }
    }

    But item template is empty yet !
    what's your solution?

    Best Regards,
    Mohammad
  6. Claudio
    Claudio avatar
    1 posts
    Member since:
    Oct 2011

    Posted 13 Nov 2011 Link to this post

    HI Mohamed, I have the same problem, maybe set the property  RadGrid1.PageSize = 200(by example) in the event RadGrid1_NeedDataSource could find the solution.

    Regards,
    Claudio.
  7. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 14 Nov 2011 Link to this post

    Hello Mohammad sadegh,


    Default.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_1734880_Default" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <script src="../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                $(document).ready(function () {
     
                    jQuery.ajax({
                        type: 'POST',
                        contentType: 'application/json; charset=utf-8',
                        data: '',
                        dataType: 'JSON',
                        url: 'Default.aspx/BindGrid',
                        success: function (result) {
                            var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                            tableView.set_dataSource(result.d);
                            tableView.dataBind();
                        },
                        error: function () {
                             
                        }
                    });
                });
     
                function gridRowBound(sender, args) {
     
     
                    args.get_item().findElement("lblName").innerHTML = args.get_item()._dataItem.Name + " From Client";
     
                }
            </script>
        </telerik:RadCodeBlock>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <telerik:RadScriptManager ID="RadScriptManager1" EnablePageMethods="true" runat="server">
            </telerik:RadScriptManager>
            <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false">
                <MasterTableView>
                    <Columns>
                        <telerik:GridBoundColumn DataField="ID" UniqueName="ID" HeaderText="ID">
                        </telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn HeaderText="Name">
                            <ItemTemplate>
                                <asp:Label ID="lblName" runat="server"></asp:Label>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings>
                    <ClientEvents OnRowDataBound="gridRowBound" />
                </ClientSettings>
            </telerik:RadGrid>
        </div>
        </form>
    </body>
    </html>

    Default.aspx.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.Services;
     
    public partial class _1734880_Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
     
            if (!IsPostBack)
            {
                dynamic data = new[] {
                    new { ID = "1", Name ="Name11"},
                     new { ID = "1", Name ="Name11"},
                    new { ID = "1", Name ="Name11"}
                };
     
                RadGrid1.DataSource = data;
                RadGrid1.DataBind();
     
     
            }
        }
     
        [WebMethod]
        public static List<Employee> BindGrid()
        {
            List<Employee> list = new List<Employee>(); ;
     
            Employee obj = new Employee();
            obj.ID = "1";
            obj.Name = "Name1";
            list.Add(obj);
     
            obj = new Employee();
            obj.ID = "2";
            obj.Name = "Name2";
            list.Add(obj);
     
            return list;
        }
     
     
    }
     
    public class Employee
    {
        public string ID { get; set; }
        public string Name { get; set; }
    }

    Thanks,
    Jayesh Goyani
  8. Marlou
    Marlou avatar
    27 posts
    Member since:
    Jun 2012

    Posted 28 Jun 2012 Link to this post

    I have the exact same problem. I add rows and if I bind again clientside, my template columns are empty. I've tried your solution but the following line returns null. So I can't set the innerHTML.

    args.get_item().findElement("lblName")


    Am I doing something wrong?
  9. cesar ursua
    cesar ursua avatar
    1 posts
    Member since:
    Feb 2006

    Posted 03 Dec 2014 Link to this post

    Guys, I am facing the same issue.. at first population from server side the templates are working fine, but not after the radgrid is populated from client side and some rows are aggregated, the templates cells appear empty on those new rows, just the ones already obtained initally from server side are displayed correctly.

    If this issue was solved already, let me know where I can find the answer please.
  10. Joe
    Joe avatar
    16 posts
    Member since:
    Oct 2013

    Posted 05 Jan 2015 Link to this post

    Guys,

    Having the same exact issue. No controls specified in the GridTemplateColumns are rendered if you bind the radgrid on the client-side. Pretty big problem for Telerik if this is the designed behavior or a bug. At least they could provide us with some work-around?

    - Joe
  11. Angel Petrov
    Admin
    Angel Petrov avatar
    1006 posts

    Posted 08 Jan 2015 Link to this post

    Hello Joe,

    Actually the controls in the ItemTemplate should be rendered initially when the grid is displayed. Could you please share with us the markup and code-behind of the page so we could further research the matter?

    Bear in mind that problems may occur in scenarios where the PageSize is increased. In such cases the grid will add the new rows solely on the client. Since a round trip to the server does not occur the server controls that are placed inside the ItemTemplate will not initialize(expected behavior). In such cases we recommend using ClientItemTemplates that can contain pure HTML.

    Regards,
    Angel Petrov
    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017