Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

on client side binding itemtemplate is empty

8 Answers 294 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mohammad sadegh
Top achievements
Rank 1
Mohammad sadegh asked on 25 Jul 2011, 07:30 PM
1.gif
2.gif
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

8 Answers, 1 is accepted

Sort by
0
Mohammad sadegh
Top achievements
Rank 1
answered on 27 Jul 2011, 10:56 AM
1.gif
2.gif
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
0
Mohammad sadegh
Top achievements
Rank 1
answered on 28 Jul 2011, 07:40 AM
any solution my friends?
0
Mohammad sadegh
Top achievements
Rank 1
answered on 28 Jul 2011, 12:48 PM
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
0
Claudio
Top achievements
Rank 1
answered on 14 Nov 2011, 05:15 AM
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.
0
Jayesh Goyani
Top achievements
Rank 2
answered on 14 Nov 2011, 06:54 AM
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
0
Marlou
Top achievements
Rank 1
answered on 28 Jun 2012, 01:10 PM
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?
0
Joe
Top achievements
Rank 1
answered on 05 Jan 2015, 08:15 PM
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
0
Angel Petrov
Telerik team
answered on 08 Jan 2015, 03:20 PM
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.

 
Tags
Grid
Asked by
Mohammad sadegh
Top achievements
Rank 1
Answers by
Mohammad sadegh
Top achievements
Rank 1
Claudio
Top achievements
Rank 1
Jayesh Goyani
Top achievements
Rank 2
Marlou
Top achievements
Rank 1
Joe
Top achievements
Rank 1
Angel Petrov
Telerik team
Share this question
or