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

[Solved] listview with grid through clientside binding

1 Answer 111 Views

Grid

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

Tammy asked on 02 Jun 2009, 08:35 PM

i have agrid that i am binding through client side binding

and on the rowdatabound clientevent im replacing the rows innerhtml and my width of the grid goes to a rexolution of about 900px and the innerhtml that i am replacing the width is about 290px each . So each row should float to be 3 rows to one row. This works great in all other browsers except ie 7 and below.

Please help fix this last issue. I need to keep this on the client side binding because we switch views which works very well except in ie7 and below and i need them to work here as well.

Thank you
Tammy ODonnell

.RadGrid_Default

.rgRow,

.RadGrid_Default

.rgAltRow

{

padding-left:1px;

padding-right:1px;

font-size:11px;

cursor:default;

float:left;

display:block;

}

function ArchiveProjectGrid_RowDataBound(sender, args)

{

switch(MainTabSelected)

{

case Enum.MainTab.Archive:

args.get_item()._element.cells[0].innerHTML = ArchiveGridAltTemplate(sender,args).toString();

break;

}
}

function

ArchiveGridAltTemplate(sender,args)

{

var DataItem = args.get_dataItem();

var sb = new Sys.StringBuilder();

var panel = ReturnPanelFilter();

var items = panel.get_items();

var panelbar = ReturnPanelFilter();

var panelItem;

var panelItemAdd;

var panelToAddTo;

var strOne = DataItem["ProjectNo"] + "," + DataItem["ProjectLeader"]+ "," +DataItem["Client"]+ "," +DataItem["Study"]+ "," +DataItem["StartTime"]+ "," +DataItem["EndTime"]+ "," +DataItem["Dept"];

var rowIndex;

try{rowIndex = args.get_item()._element.rowIndex.toString()}

catch(sError) { rowIndex = args._element.rowIndex.toString()}

var myDate = DataItem["Date"];

var dt = new Date(myDate);

var newDate = dt.format("m/dd/yyyy");

var y=dt.getYear();

var m=dt.getMonth() + 1;

var day=dt.getDate();

newDate=m+

"/"+day+"/"+y ;

// var tempIndex = rowIndex;

// if(tempIndex >=18) {tempIndex = tempIndex - 18;}

// if(tempIndex != 0)

sb.appendLine(

"</td></tr></table>");

//class='GridRow' style=' height:150px;

sb.appendLine(

"<div style='width:290px;margin-top:0; height:150px; display:block;max-height:150px; position:relative; padding: 3px 5px 15px 8px;'>");

sb.appendLine(

"<div class='ThumbnilColumnExtLrg' style='float:left;margin-top:0;'>");

sb.appendLine(String.format(

"<img onload=\"RetrievePictureMedia(this,'{2}','s');\" title='{0}' ondblclick=\"SelectRowClickLaunch('{3}');\" onclick=\"SelectRowClick('{3}');\" alt='{1}' src=\"Images/EmptyMedia.jpg\" ></img>" , DataItem["ProjectNo"], DataItem["ProjectNo"], DataItem["ProjectNo"],rowIndex));

sb.appendLine(

"</div>");

sb.appendLine(

"<div class='AltTemplateItemCol' >");

sb.appendLine(

"<b>Project: </b>");

sb.appendLine(String.format(

"{0} <b><a style='color:red; cursor:pointer; font-size:8px;' onclick='LoadProjectITEMS({1})'>Details </a></b>",DataItem["ProjectNo"],rowIndex));

// sb.appendLine(String.format("{0}",DataItem["ProjectNo"]));

sb.appendLine(

"</div>");

sb.appendLine(

"<div class='AltTemplateItemCol' >");

sb.appendLine(

"<b>Date: </b>");

sb.appendLine(String.format(

"{0}",newDate));

sb.appendLine(

"</div>");

sb.appendLine(

"<div class='AltTemplateItemCol' >");

sb.appendLine(

"<b>Project Leader: </b>");

sb.appendLine(String.format(

"{0}",DataItem["ProjectLeader"]));

sb.appendLine(

"</div>");

sb.appendLine(

"<div class='AltTemplateItemCol' >");

sb.appendLine(

"<b>Expires in Days: </b>");

sb.appendLine(String.format(

"{0}",DataItem["ExpiresinDays"]));

sb.appendLine(

"</div>");

sb.appendLine(

"<div class='AltTemplateItemCol'>");

sb.appendLine(

"<b>City: </b>");

sb.appendLine(String.format(

"{0}",DataItem["City"]));

sb.appendLine(

"</div>");

sb.appendLine(

"</div>");

// if(tempIndex != (18 - 1))

sb.appendLine(

"</td><table style='display:none;'><tr><td>");

return sb;

}

I need to have the

<telerik:RadGrid ID="ArchiveProjectGrid" runat="server" EnableEmbeddedSkins="false"

EnableViewState="false" GridLines="None" ShowHeader="false" AllowPaging="true"

AllowCustomPaging="true" ShowFooter="true" AllowMultiRowSelection="false" Width="100%"

AutoGenerateColumns="false" ShowStatusBar="false" PageSize="3" Height="100%"

VirtualItemCount="500">

<MasterTableView ShowFooter="false" AllowFilteringByColumn="true" TableLayout="Fixed"

ClientDataKeyNames="ProjectNo,ItemID,ProjectLeader,Date,Facility,City,Study,ProjectTopic,Product,Dept,ExpiresinDays,ResearchVendor,Moderator,Name">

<telerik:GridBoundColumn DataField="ProjectNo" HeaderText="ProjectNo" Visible="true">

</telerik:GridBoundColumn>

</Columns>

</RowIndicatorColumn>

</ExpandCollapseColumn>

</EditFormSettings>

</MasterTableView>

</FilterMenu>

<Scrolling EnableVirtualScrollPaging="false" SaveScrollPosition="False" AllowScroll="true"

UseStaticHeaders="true" />

<ClientEvents OnRowDblClick="ArchiveProjectGrid_OnRowDblClick" OnRowSelected="ArchiveProjectGrid_OnRowClick"

OnDataBound="ArchiveProjectGrid_DataBound" OnGridCreated="ArchiveProjectGrid_Created"

OnCommand="ArchiveProjectGrid_Command" OnRowDataBound="ArchiveProjectGrid_RowDataBound" />

</ClientSettings>

</telerik:RadGrid>

1 Answer, 1 is accepted

answered on 05 Jun 2009, 01:15 PM

Hello Tammy ,

From your code snippets I see that you are using a custom implementation which injects divs and a table as inner html of a grid item on the client intercepting the OnRowDataBound event of the grid.

Can you please check whether injecting the same html inside regular table row (tr) produces different result under IE 7? You may also provide a live url where the issue under this browser can be observed or use IE developer toolbar to inspect the page markup and find the cause of the abnormality.

Kind regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.