I'm following this demo to use "global item template feature" of RadGrid but using Client-side binding. Somehow I'm not able to access the label element within the ItemTemplate in
RadGrid1_RowDataBound
event. I can this event called up but the label comes up NULL. Can someone please advice how I can achieve this? Thanks.<
telerik:RadGrid
ID
=
"RadGrid1"
PageSize
=
"10"
AutoGenerateColumns
=
"false"
runat
=
"server"
>
<
MasterTableView
TableLayout
=
"Fixed"
DataKeyNames
=
"itemid"
ClientDataKeyNames
=
"itemid"
>
<
ItemTemplate
>
<
asp:Label
ID
=
"lblDetail"
runat
=
"server"
Text
=
""
></
asp:Label
>
</
ItemTemplate
>
</
MasterTableView
>
<
GroupingSettings
CaseSensitive
=
"false"
/>
<
PagerStyle
Mode
=
"NextPrevAndNumeric"
></
PagerStyle
>
<
ClientSettings
>
<
ClientEvents
OnRowCreated
=
"OnRowCreated"
OnRowDblClick
=
"OnRowDblClick"
OnCommand
=
"RadGrid1_Command"
OnRowDataBound
=
"RadGrid1_RowDataBound"
/>
</
ClientSettings
>
</
telerik:RadGrid
>
function
RadGrid1_RowDataBound(sender, args)
{
var
lbl = args.get_element().findElement(
"lblDetail"
);
lbl.innerHTML =
"This is test"
;
}
12 Answers, 1 is accepted
0

HarryM
Top achievements
Rank 1
answered on 22 Mar 2011, 12:05 AM
Anyone please. Thank you.
0

HarryM
Top achievements
Rank 1
answered on 28 Mar 2011, 08:30 PM
Anyone?
0
Hello Harry,
Please set the AutoGenerateColumns property of the master table view to true and let me know whether it makes any difference.
I hope this helps.
Kind regards,
Mira
the Telerik team
Please set the AutoGenerateColumns property of the master table view to true and let me know whether it makes any difference.
I hope this helps.
Kind regards,
Mira
the Telerik team
0

HarryM
Top achievements
Rank 1
answered on 31 Mar 2011, 01:58 PM
Hi Mira
That doesn't work. I get this error: "Client-side data-binding with auto-generated columns is not supported! Please declare at least one column for the grid."
Harry
That doesn't work. I get this error: "Client-side data-binding with auto-generated columns is not supported! Please declare at least one column for the grid."
Harry
0
Hello Harry,
You need to define at least one declarative column in your grid to avoid the exception you received.
I have followed your scenario and prepared a sample project for you demonstrating how the desired functionality can be implemented. You can find it attached to this post.
I hope it helps.
Kind regards,
Mira
the Telerik team
You need to define at least one declarative column in your grid to avoid the exception you received.
I have followed your scenario and prepared a sample project for you demonstrating how the desired functionality can be implemented. You can find it attached to this post.
I hope it helps.
Kind regards,
Mira
the Telerik team
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Public Issue Tracking
system and vote to affect the priority of the items
0

HarryM
Top achievements
Rank 1
answered on 05 Apr 2011, 03:08 AM
Thank you Mira for the code sample but the solution doesn't solve my problem. I'm trying to achieve a ListView/DataList/Gallery like data presentation with client-side binding as shown in the demo here, not the usual column based view. Let me know if this is achievable.
Thanks.
Harry
Thanks.
Harry
0
Hello Harry,
I have modified the project from my previous post to implement the ListView look. You can find the updated version attached to this message.
I hope it helps.
Greetings,
Mira
the Telerik team
I have modified the project from my previous post to implement the ListView look. You can find the updated version attached to this message.
I hope it helps.
Greetings,
Mira
the Telerik team
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Public Issue Tracking
system and vote to affect the priority of the items
0

James
Top achievements
Rank 1
answered on 09 May 2011, 10:41 AM
I have implemented this solution however when I try to rebind the grid with:
The grid repeats the first couple of items and then the remaining items are displayed with the correct style but only in one vertical column instead of extending horizontally.
Anyone else have this problem or have suggestions?
$find('<%=RadGrid1.ClientID %>').get_masterTableView().rebind();
The grid repeats the first couple of items and then the remaining items are displayed with the correct style but only in one vertical column instead of extending horizontally.
Anyone else have this problem or have suggestions?
0
Hello James,
I suggest that you rebind the grid server-side. In this way the page postbacks and the grid structure is recreated.
I hope this helps.
Best wishes,
Mira
the Telerik team
I suggest that you rebind the grid server-side. In this way the page postbacks and the grid structure is recreated.
I hope this helps.
Best wishes,
Mira
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0

James
Top achievements
Rank 1
answered on 12 May 2011, 11:16 AM
Thanks Mira for the response.
Is there any other solution to do this client-side? I originally had my grid do everything server-side however I am now in the process of moving my grid functionality to client-side methods in hopes to create a more responsive feeling page.
Is there any other solution to do this client-side? I originally had my grid do everything server-side however I am now in the process of moving my grid functionality to client-side methods in hopes to create a more responsive feeling page.
0
Hello James,
Rebinding the grid only client-side is not enough for it to be properly recreated in your custom scenario.
The responsive feeling of the page will not be affected very much by the server-side rebind because the methods the grid is bound to are on the server as well.
I hope this helps.
Best wishes,
Mira
the Telerik team
Rebinding the grid only client-side is not enough for it to be properly recreated in your custom scenario.
The responsive feeling of the page will not be affected very much by the server-side rebind because the methods the grid is bound to are on the server as well.
I hope this helps.
Best wishes,
Mira
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0

HarryM
Top achievements
Rank 1
answered on 16 May 2011, 04:37 PM
Telerik's responses did not help me much. This is how I've achieved it. See the code, it's pretty straightforward. Magic is in the page method web service, CSS and simple client-side binding of RadGrid.
Result would something like attached image.
Hope this would help a bit.
<
telerik:RadCodeBlock
ID
=
"RadCodeBlock1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
function pageLoad(sender, eventArgs)
{
LoadGridData(1,0);
}
function LoadGridData(pageNum, pricemin)
{
var tableView = $find("<%= RadGridProducts.ClientID %>").get_masterTableView();
var pageSize = tableView.get_pageSize();
tableView.set_pageSize(pageSize);
PageMethods.GetDataMarkUp(pageNum,pageSize,updateGrid);
PageMethods.GetDataCount(pageNum,pageSize,updateVirtualItemCount);
}
function updateGrid(result)
{
var tableView = $find("<%= RadGridProducts.ClientID %>").get_masterTableView();
tableView.set_dataSource(result);
tableView.dataBind();
}
function updateVirtualItemCount(result)
{
var tableView = $find("<%= RadGridProducts.ClientID %>").get_masterTableView();
tableView.set_virtualItemCount(result);
}
function RadGrid1_RowDataBound(sender, args)
{
var lbl = args.get_item().findElement("lblMarkUp");
if(lbl){lbl.innerHTML = args.get_dataItem()["success"];}
}
function RadGrid1_Command(sender, args)
{
args.set_cancel(true);
var newPageSize = sender.get_masterTableView().get_pageSize();
sender.get_masterTableView().set_pageSize(newPageSize);
var pageSize = newPageSize;
var currentPageIndex = sender.get_masterTableView().get_currentPageIndex();
LoadGridData(currentPageIndex+1,0);
}
</
script
>
</
telerik:RadCodeBlock
>
<
div
id
=
"divContent"
style
=
"display:none; margin-bottom:100px;"
>
<
telerik:RadGrid
ID
=
"RadGridProducts"
PageSize
=
"8"
EnableViewState
=
"false"
runat
=
"server"
CssClass
=
"radZLowest"
ShowStatusBar
=
"true"
Width
=
"99.7%"
Skin
=
"Windows7"
AllowPaging
=
"false"
AllowSorting
=
"True"
GridLines
=
"None"
AllowMultiRowSelection
=
"false"
>
<
ItemStyle
Wrap
=
"false"
/>
<
MasterTableView
PagerStyle-Position
=
"TopAndBottom"
PagerStyle-Mode
=
"NextPrevAndNumeric"
ShowHeader
=
"false"
AutoGenerateColumns
=
"False"
DataKeyNames
=
"success"
ClientDataKeyNames
=
"success"
AlternatingItemStyle-BackColor
=
"#FFFFFF"
ItemStyle-BackColor
=
"#FFFFFF"
>
<
Columns
>
<
telerik:GridTemplateColumn
>
<
ItemTemplate
>
<
asp:Label
ID
=
"lblMarkUp"
runat
=
"server"
Text
=
""
></
asp:Label
>
</
ItemTemplate
>
</
telerik:GridTemplateColumn
>
</
Columns
>
<
norecordstemplate
>
</
norecordstemplate
>
</
MasterTableView
>
<
PagerStyle
Mode
=
"NextPrevAndNumeric"
></
PagerStyle
>
<
ClientSettings
>
<
ClientEvents
OnCommand
=
"RadGrid1_Command"
OnRowDataBound
=
"RadGrid1_RowDataBound"
/>
</
ClientSettings
>
</
telerik:RadGrid
>
<
telerik:RadAjaxLoadingPanel
ID
=
"RadAjaxLoadingPanel1"
runat
=
"server"
></
telerik:RadAjaxLoadingPanel
>
</
div
>
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
Telerik.Web.UI;
using
System.Web.Services;
using
System.Web.Script.Serialization;
using
System.Web.Script.Services;
using
System.Configuration;
namespace
xyzzz
{
public
partial
class
shopsbest : System.Web.UI.Page
{
protected
void
Page_Load(
object
sender, EventArgs e)
{
if
(!IsPostBack)
{
}
}
public
class
ServiceResponse
{
public
string
success {
get
;
set
; }
public
string
error {
get
;
set
; }
}
[WebMethod]
public
static
List<ServiceResponse> GetDataMarkUp(
int
pageNum,
int
pageSize)
{
JavaScriptSerializer oSerializer =
new
JavaScriptSerializer();
ServiceResponse response =
null
;
List<ServiceResponse> oList =
null
;
string
errorResponse =
string
.Empty;
string
successResponse =
string
.Empty;
List<sp_GetRandomTopShopsResult> list =
null
;
string
markup =
string
.Empty;
try
{
using
(CBClassDataContext db =
new
CBClassDataContext())
{
var s = db.sp_GetRandomTopShops(pageNum, pageSize);
list = s.ToList();
foreach
(sp_GetRandomTopShopsResult p
in
list)
{
string
logourl = p.logo !=
null
?
string
.Format(
"http://www.xyzzz.com/Media/Shop/{0}/Logo/"
+ p.logo.Replace(
"_icon"
,
"_resized"
), p.storeid.ToString()) :
"#"
;
string
storeURL =
"supplier.aspx?id="
+ p.storeid.ToString();
string
item1pic =
string
.Empty;
string
item2pic =
string
.Empty;
string
item3pic =
string
.Empty;
string
item4pic =
string
.Empty;
if
(!
string
.IsNullOrEmpty(p.items))
{
if
(!
string
.IsNullOrEmpty(p.items))
{
string
[] itemids = p.items.Split(
','
);
if
(itemids.Length >= 2) { item1pic = !
string
.IsNullOrEmpty(itemids[1]) ?
string
.Format(
"http://www.xyzzz.com/Media/Product/{0}/Photo/itemphoto_{0}__0_list.jpg"
, itemids[1]) :
string
.Empty; }
if
(itemids.Length >= 3) { item2pic = !
string
.IsNullOrEmpty(itemids[2]) ?
string
.Format(
"http://www.xyzzz.com/Media/Product/{0}/Photo/itemphoto_{0}__0_list.jpg"
, itemids[2]) :
string
.Empty; }
if
(itemids.Length >= 4) { item3pic = !
string
.IsNullOrEmpty(itemids[3]) ?
string
.Format(
"http://www.xyzzz.com/Media/Product/{0}/Photo/itemphoto_{0}__0_list.jpg"
, itemids[3]) :
string
.Empty; }
if
(itemids.Length >= 5) { item4pic = !
string
.IsNullOrEmpty(itemids[4]) ?
string
.Format(
"http://www.xyzzz.com/Media/Product/{0}/Photo/itemphoto_{0}__0_list.jpg"
, itemids[4]) :
string
.Empty; }
}
}
markup +=
"<ul>"
;
markup +=
"<li>"
;
markup += p.name !=
null
?
"<p><a href='"
+ storeURL +
"'>"
+ p.name +
"</a></p>"
:
string
.Empty;
string
slogan = !
string
.IsNullOrEmpty(p.slogan) ? p.slogan : p.name;
markup +=
"<p style='font-size:11px; font-style:italic;'><a class='captionGray' href='"
+ storeURL +
"'>"
+ slogan +
"</a></p>"
;
markup +=
"<p class='picture'><a href='"
+ storeURL +
"'><img border='0px' alt='' src='"
+ logourl +
"'></a></p>"
;
markup +=
"<div id='storeBlocks_main_bottom'>"
;
markup += !
string
.IsNullOrEmpty(item1pic) ?
"<a href='"
+ storeURL +
"'><img border='0px' class='img' alt='' src='"
+ item1pic +
"'></a>"
:
string
.Empty;
markup += !
string
.IsNullOrEmpty(item2pic) ?
"<a href='"
+ storeURL +
"'><img border='0px' class='img' alt='' src='"
+ item2pic +
"'></a>"
:
string
.Empty;
markup += !
string
.IsNullOrEmpty(item3pic) ?
"<a href='"
+ storeURL +
"'><img border='0px' class='img' alt='' src='"
+ item3pic +
"'></a>"
:
string
.Empty;
markup += !
string
.IsNullOrEmpty(item4pic) ?
"<a href='"
+ storeURL +
"'><img border='0px' class='img' alt='' src='"
+ item4pic +
"'></a>"
:
string
.Empty;
markup +=
"</div>"
;
markup +=
"</li>"
;
markup +=
"</ul>"
;
}
}
}
catch
(Exception ex)
{
throw
ex;
}
if
(!
string
.IsNullOrEmpty(markup))
{
successResponse =
"<div id='storeBlocks_main'>"
+ markup +
"</div>"
;
response =
new
ServiceResponse { success = successResponse, error = errorResponse };
oList =
new
List<ServiceResponse>() { response };
}
else
{
oList =
new
List<ServiceResponse>();
//no result
}
return
oList;
}
[WebMethod]
public
static
string
GetDataCount(
int
pageNum,
int
pageSize)
{
string
rowCount =
"0"
;
try
{
using
(CBClassDataContext db =
new
CBClassDataContext())
{
var s = db.sp_GetRandomTopShopsCount(pageNum, pageSize);
foreach
(sp_GetRandomTopShopsCountResult sc
in
s)
{
rowCount = sc.rowscount.ToString();
}
}
}
catch
(Exception ex)
{
throw
ex;
}
return
rowCount;
}
}
}
Result would something like attached image.
Hope this would help a bit.