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

Server side and Client side binding problem on GridTemplateColumn with IMG and Eval()

9 Answers 501 Views

Grid

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

Mohammad sadegh asked on 10 Jul 2011, 06:04 PM

ScreenShot.gif

hi guys
i have a problem with GridTemplateColumn
my program do this steps:
1- on the server side and on the page load i load some of data and binding the Grid to show personels image and info
        DAL.Personels ObjPersonels = new DAL.Personels();
        DataTable PersonelsDT = new DataTable();
        PersonelsDT = ObjPersonels.Personels_SELECT_BY_DepartmentID(1,true);
        RadGrid1.DataSource = PersonelsDT;
        RadGrid1.DataBind();

on this step every thing is OK and the IMG in the GridTemplateColumn shows currectly
2-After Page Load the user can click on a Organization chart and show personels work on that node. this step must be client side
my GridTemplateColumn:

<telerik:GridTemplateColumn>

<ItemTemplate>

<img src='pics/personels/<%# Eval("Pic") %>' width="60px" height="70px"/>

</ItemTemplate>

</telerik:GridTemplateColumn>

codes for binding client side Grid:

function OrganizationChartNode_Chicked(sender, args) {

var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

PageMethods.GetData(args.get_node().get_value(), false

, 1, tableView.get_pageSize(), tableView.get_sortExpressions().toString(), tableView.get_filterExpressions(), updateGrid);

}

function updateGrid(result) {

var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

tableView.set_dataSource(result);

tableView.dataBind();

}

on this step all columns show correctly, but the IMG tag in the templateColumn shows the Old data,and dont refresh, like catching !!!

here 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.Data;

using System.Web.Services;

using Telerik.Web.UI;

public partial class MonthlyOutputState : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

//Initializing WorkPeriodsComboBox: Start

DAL.WorkPeriods objWorkPeriods = new DAL.WorkPeriods();

DataTable WorkPeriodsDT = new DataTable();

WorkPeriodsDT = objWorkPeriods.WorkPeriods_Select_All();

for (int i = 0; i < WorkPeriodsDT.Rows.Count; i++)

{

Telerik.Web.UI.RadComboBoxItem ComboBoxItem=new Telerik.Web.UI.RadComboBoxItem(WorkPeriodsDT.Rows[i][1].ToString(),WorkPeriodsDT.Rows[i][0].ToString());

ComboBoxItem.Attributes.Add("Sdate", WorkPeriodsDT.Rows[i][2].ToString());

ComboBoxItem.Attributes.Add("Edate", WorkPeriodsDT.Rows[i][3].ToString());

RadComboBoxWorkPeriods.Items.Add(ComboBoxItem);

}

RadComboBoxWorkPeriods.FindItemByValue(objWorkPeriods.WorkPeriods_Get_Current().Rows[0][0].ToString()).Selected=true;

//Initializing WorkPeriodsComboBox: End

//Initializing Menu: Start

Telerik.Web.UI.RadTreeNode Node = new Telerik.Web.UI.RadTreeNode();

Node.Text = "چارت سازماني";

Node.Value = "0";

RadTreeView1.Nodes.Add(Node);

DAL.departments objdepartments = new DAL.departments();

DataTable departmentsDT = new DataTable();

departmentsDT = objdepartments.departments_Select_All();

AddSubTree(departmentsDT, Node);

RadTreeView1.ExpandAllNodes();

//Initializing Menu: End

//Initializing Grid: Start

DAL.Personels ObjPersonels = new DAL.Personels();

DataTable PersonelsDT = new DataTable();

PersonelsDT = ObjPersonels.Personels_SELECT_BY_DepartmentID(1,true);

RadGrid1.DataSource = PersonelsDT;

RadGrid1.DataBind();

//Initializing Grid: End

}

public void AddSubTree(DataTable dt, Telerik.Web.UI.RadTreeNode Node)

{

for (int i = 0; i < dt.Rows.Count; i++)

{

if (dt.Rows[i][1].ToString() == Node.Value)

{

Telerik.Web.UI.RadTreeNode Node22 = new Telerik.Web.UI.RadTreeNode();

Node22.Value = dt.Rows[i][0].ToString();

Node22.Text = dt.Rows[i][2].ToString();

// Node22.NavigateUrl = ;

//Node22.ToolTip = dt.Rows[i][3].ToString();

//if (dt.Rows[i][7].ToString() != "")

// // Node22.Attributes.Add("URL", dt.Rows[i][7].ToString());

//else

// Node22.Attributes.Add("URL", "NULL");

Node.Nodes.Add(Node22);

AddSubTree(dt, Node22);

}

[WebMethod]

public static int GetCount(List<GridFilterExpression> filterExpressions)

{

return 0;

}

[WebMethod]

public static List<object> GetData(int departmentID, bool SelectSubNodesPersonels, int startIndex, int maximumRows, string sortExpressions, List<GridFilterExpression> filterExpressions)

{

DAL.Personels ObjPersonels = new DAL.Personels();

DataTable DT = ObjPersonels.Personels_SELECT_BY_DepartmentID(departmentID, SelectSubNodesPersonels);

return ObjPersonels.Convert_DataTable_To_List_Object(DT);

}

}

here is my Full Client side Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="OutputState_Sum.aspx.cs"

Inherits="MonthlyOutputState" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<link href="css/MainStylesheet.css" rel="stylesheet" type="text/css" />

</head>

<body>

<script language="javascript" type="text/javascript">

function OrganizationChartNode_Chicked(sender, args) {

var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

PageMethods.GetData(args.get_node().get_value(), false, 1, tableView.get_pageSize(), tableView.get_sortExpressions().toString(), tableView.get_filterExpressions(), updateGrid);

}

function updateGrid(result) {

var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

tableView.set_dataSource(result);

tableView.dataBind();

}

function OnClientContextMenuItemClicked(sender, args) {

var menuItem = args.get_menuItem();

var treeNode = args.get_node();

menuItem.get_menu().hide();

treeNode.select();

switch (menuItem.get_value()) {

case "OpenNodeWithSubs":

{

var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

PageMethods.GetData(args.get_node().get_value(), true, 1, tableView.get_pageSize(), tableView.get_sortExpressions().toString(), tableView.get_filterExpressions(), updateGrid);

// args.get_node().get_value

}

break;

//////////////////////////////////////////// Adding tab and page views: End

case "Rename":

treeNode.startEdit();

break;

}

</script>

<form id="form1" runat="server" dir="rtl" style="width: 100%; height: 100%">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="True">

</telerik:RadScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">

</telerik:RadAjaxLoadingPanel>

<div class="parent">

<div class="FixedTop" style="height: 60px">

<table style="width: 100%; height: 100%; vertical-align: top;" cellpadding="0px"

cellspacing="0px">

<tr>

<td>

<table>

<tr>

<td>

دوره

</td>

<td>

<telerik:RadComboBox ID="RadComboBoxWorkPeriods" runat="server" Style="z-index: 7001">

</telerik:RadComboBox>

</td>

<td>

گروه

</td>

<td>

<telerik:RadComboBox ID="RadComboBox2" runat="server">

</telerik:RadComboBox>

</td>

<td>

شماره پرسنلي

</td>

<td>

<input type="text" />

</td>

</tr>

</table>

</td>

</tr>

<tr style="background-image: url('../UI/Pics/Icons/bar1.png');">

<td dir="rtl">

<telerik:RadMenu ID="RadMenu1" runat="server" dir="rtl" Skin="Telerik" Flow="Horizontal"

Style="top: 0px; right: 0px">

<Items>

<telerik:RadMenuItem runat="server" Text="محاسبه" ImageUrl="~/Pics/Icons/Calculate.gif">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" IsSeparator="true">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="فيلتر" ImageUrl="~/Pics/Icons/Filter.gif">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" IsSeparator="true">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="ايجاد کار" ImageUrl="~/Pics/Icons/Task.png">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" IsSeparator="true">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="نمايش ريز کارها" ImageUrl="~/Pics/Icons/Filter.gif">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

</td>

</tr>

</table>

</div>

<div class="FullOfRemainingBody" style="top: 60px">

<table style="width: 100%; height: 100%;">

<tr>

<td id="Chart" style="width: 200px; vertical-align: top">

<telerik:RadTreeView ID="RadTreeView1" runat="server" Skin="Default" dir="rtl" Font-Names="KasraB Traffic"

Font-Bold="True" OnClientNodeClicking="OrganizationChartNode_Chicked" OnClientContextMenuItemClicked="OnClientContextMenuItemClicked">

<ContextMenus>

<telerik:RadTreeViewContextMenu ID="RadTreeViewContextMenu1" runat="server">

<Items>

<telerik:RadMenuItem runat="server" Text="کليه زير مجموعه ها" Value="OpenNodeWithSubs">

</telerik:RadMenuItem>

</Items>

<Items>

<telerik:RadMenuItem runat="server" Text="سرجمع براي واحدهاي يک سطح پايين تر" Value="OpenNodeWithSubs">

</telerik:RadMenuItem>

</Items>

</telerik:RadTreeViewContextMenu>

</ContextMenus>

</telerik:RadTreeView>

</td>

<td style="vertical-align: top">

<telerik:RadGrid ID="RadGrid1" runat="server" Skin="Vista">

<ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True">

<Selecting AllowRowSelect="True" />

</ClientSettings>

<MasterTableView Font-Names="KasraB Traffic" Font-Bold="true" AllowSorting="true">

<Columns>

<telerik:GridTemplateColumn>

<ItemTemplate>

<img src='pics/personels/<%# Eval("Pic") %>' width="60px" height="70px"/>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

I tested some methods like set DataFiels="Pic" and UniqueName="Pic" but not work, i think we cannot use this method:

<ItemTemplate>

<img src='pics/personels/<%# Eval("Pic") %>' width="60px" height="70px"/>

</ItemTemplate>

but it works when we Bind server side,but maybe catched when binding client side
how can i program my idea?

i attached the a screen shot of my main page program.
i can attach the full project if need

thank my friends

9 Answers, 1 is accepted

answered on 14 Jul 2011, 11:00 AM

Hello Mohammad,

The described behavior is expected because the Eval() function is calculated at run time on the web server. So to change the value of the image a postback is need for calculating the Eval(). If you use client side databinding you need to transfer the data for the image from server to client as a JSON.
Also mixing the simple data binding with client side data binding is not a supported scenario. You need use only one of them.

Additionally please check out the following examples which demonstrates client side data binding
http://demos.telerik.com/aspnet-ajax/grid/examples/client/databinding/defaultcs.aspx

I hope this helps.

Best wishes,
Radoslav
the Telerik team

Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

answered on 14 Jul 2011, 02:57 PM

I has a column that contains PictureName and on page load i hide this column, on this code how can use data of that column without getting data from server again?

<ItemTemplate>

<img src='pics/personels/<%# Eval("Pic") %>' width="60px" height="70px" />

</ItemTemplate>

for example

<ItemTemplate>

<img src='pics/personels/'+Column('Pic') width="60px" height="70px" />

</ItemTemplate>

Also i has problem with BinaryImage Column type, this code work on the first page load, but after first client binding shows an string of bytes

<telerik:GridBinaryImageColumn DataField="BinaryPic"></telerik:GridBinaryImageColumn>

and why mixing the simple data binding with client side data binding is not a supported scenario ??
i want on the page load bind some of data on the server side and transfer grid to client completely, after that when need to new data i will use client side binding, the scenario increase page speed.

answered on 19 Jul 2011, 03:07 PM

Hello Mohammad,

Mixing server side data binding and client side data binding is not supported because into the two types of binding the creation of the RadGrid and its child controls are different. The different fragments of code are executed and different events are fired and the rendering model is different.

Also please keep in mind that Eval() function is executed on the server side, not on client side, so it could not be used when client side databinding is performed.

Additionally the DataImageUrlFormatString from the GridImageColumn is a server side property and it is used only on the server side for formatting the path to the image. You could not use it when the gird is bound client side.

On the following link you could see how to use asp:Image control into the GridTemplateColumn when the gird is bound on the client.
http://demos.telerik.com/aspnet-ajax/grid/examples/client/livedata/defaultcs.aspx

I hope this helps.

Regards,
Radoslav
the Telerik team

answered on 23 Jul 2011, 07:40 PM

Hello Admin,

After your helps, i mixed both of the server side and client side binding and a Template column, Out of curiosity.

every thins OK, but i have only one problem.
when row count of client binding are less than first binding (from server) every things is really really ok, its very fine.
but when if row count of client binding is more than first binding i a have java script error :
'undefined' is null or not an object.

Is it the mixing result ?? is there any solution for this ?? it's my final problem, if the problem be solve i can work very well with telerik grid.

Best regards
Mohammad

answered on 24 Jul 2011, 08:05 PM

hello
exactly i have problem on final line of this code:

function OnRowDataBound(sender, args) {

var spanControl = args.get_item().get_cell("Change").getElementsByTagName('span')[0];

var masterTable = $find("<%=RadGrid1.ClientID%>").get_masterTableView();

var picName = masterTable.getCellByColumnUniqueName(args.get_item(), "pic").innerHTML;

var image = args.get_item().get_cell("PP").getElementsByTagName('img')[0];

when i want access to cell that is in new line that was not on first time (page load).
is there any solution?

thanks.
Mohammad

answered on 25 Jul 2011, 09:21 AM

1.gif

2.gif

I fount the real problem:

when we bind client side, template column is empty, and no item is in this !!!!
why?

i attached 2 pics, First one shows page load, and template column with items in it,
and second one shows grid after client binding and empty template column !!!

Regards,
Mohammad