Hello,
I have an ajaxified RadGrid with a single template column which contains an image, along with other data. I am required to display all search results in this grid on a single page, but because each row has a unique image, the load time for the page is unacceptable for large row counts. My solution was to load the results using a small placeholder image, and then use AJAX to replace the placeholder image with the real image for each row when the page finishes loading. It works great, except that each time one of the images is replaced, the page scrolls to the top. This is problematic for large row counts because I am unable to scroll down until all images are loaded. Is there a way I can prevent the page from scrolling to the top after every ajax request? What I'd really like to do is only update the rows individually, but I couldn't figure out how to avoid ajaxifying the entire grid. Any help would be greatly appreciated. Thanks in advance!
Here is my .aspx:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="InventorySearch.ascx.cs" Inherits="KellerBuick.UserControl.InventorySearch" %>
<style type="text/css">
div.TelerikModalOverlay {
opacity: 0.75 !important;
background-color: rgb(0,0,0) !important;
z-index: 149999;
}
.top {
z-index: 150000;
}
.rcbSlide {
z-index: 900000 !important;
}
.numericPages {
display: inline-block;
}
.GridLoadingPanel {
width: 100%;
height: 100%;
background-color: white;
top: 50px;
}
</style>
<telerik:RadScriptBlock ID="rsbCustomPagerCode" runat="server">
<script type="text/javascript">
var tableView = null;
function pageLoad(sender, args) {
tableView = $find("<%= grdSearchResults.ClientID %>").get_masterTableView();
var arrRows = tableView.get_dataItems();
for (var i = 0; i < arrRows.length; i++) {
var imgCar = arrRows[i].findElement("imgCar");
if (imgCar.src.indexOf("vehicle-silhouette.jpg") > 0) {
tableView.fireCommand("SetImage", i);
break;
} // end if
} // end for
} // end pageLoad()
function cboPageSize_SelectedIndexChanged(sender, args) {
tableView.set_pageSize(sender.get_value());
} // end cboPageSize_SelectedIndexChanged()
function changePage(argument) {
tableView.page(argument);
} // end changePage()
function numCurrentPage_ValueChanged(sender, args) {
tableView.page(sender.get_value());
} // end numCurrentPage_ValueChanged()
</script>
</telerik:RadScriptBlock>
<telerik:RadAjaxLoadingPanel ID="lplLoading" runat="server" CssClass="GridLoadingPanel" Transparency="50" ZIndex="1000000">
<table style="width: 100%; height: 100%; background-color: white;">
<tr style="height: 100%">
<td align="center" valign="middle" style="width: 100%">
<img alt="Loading..." src='Images/Loading.gif' style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" />
</td>
</tr>
</table>
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxManager ID="ramAjaxManager" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="grdSearchResults">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="grdSearchResults" LoadingPanelID="lplLoading"></telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<div class="invent-list">
<div class="inventory-search">
<asp:DropDownList ID="ddlYear" runat="server" CssClass="select-all-years"></asp:DropDownList>
<asp:DropDownList ID="ddlMake" runat="server" CssClass="select-all-years" OnSelectedIndexChanged="ddlMake_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList>
<asp:DropDownList ID="ddlModel" runat="server" CssClass="select-all-years"></asp:DropDownList>
<asp:DropDownList ID="ddlMinPrice" runat="server" CssClass="select-all-years">
<asp:ListItem Value="" Text="Min Price" />
<asp:ListItem Value="0" Text="0" />
<asp:ListItem Value="10000" Text="10000" />
<asp:ListItem Value="15000" Text="15000" />
<asp:ListItem Value="20000" Text="20000" />
<asp:ListItem Value="25000" Text="25000" />
<asp:ListItem Value="30000" Text="30000" />
<asp:ListItem Value="35000" Text="35000" />
<asp:ListItem Value="40000" Text="40000" />
</asp:DropDownList>
<asp:DropDownList ID="ddlMaxPrice" class="select-all-years" runat="server">
<asp:ListItem Value="" Text="Max Price" />
<asp:ListItem Value="9999" Text="9999" />
<asp:ListItem Value="14999" Text="14999" />
<asp:ListItem Value="19999" Text="19999" />
<asp:ListItem Value="24999" Text="24999" />
<asp:ListItem Value="29999" Text="29999" />
<asp:ListItem Value="34999" Text="34999" />
<asp:ListItem Value="39999" Text="39999" />
<asp:ListItem Value="" Text="No Max" />
</asp:DropDownList>
<%--
<asp:DropDownList ID="ddlMinMPG" class="select-all-years" runat="server">
<asp:ListItem Text="Min MPG" Value=""></asp:ListItem>
<asp:ListItem Text="15" Value="15"></asp:ListItem>
<asp:ListItem Text="20" Value="20"></asp:ListItem>
<asp:ListItem Text="25" Value="25"></asp:ListItem>
<asp:ListItem Text="30" Value="30"></asp:ListItem>
<asp:ListItem Text="35" Value="35"></asp:ListItem>
<asp:ListItem Text="40" Value="40"></asp:ListItem>
<asp:ListItem Text="45" Value="45"></asp:ListItem>
<asp:ListItem Text="50" Value="50"></asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddlMaxMPG" class="select-all-years" runat="server">
<asp:ListItem Text="Max MPG" Value=""></asp:ListItem>
<asp:ListItem Text="15" Value="15"></asp:ListItem>
<asp:ListItem Text="20" Value="20"></asp:ListItem>
<asp:ListItem Text="25" Value="25"></asp:ListItem>
<asp:ListItem Text="30" Value="30"></asp:ListItem>
<asp:ListItem Text="35" Value="35"></asp:ListItem>
<asp:ListItem Text="40" Value="40"></asp:ListItem>
<asp:ListItem Text="45" Value="45"></asp:ListItem>
<asp:ListItem Text="50" Value="50"></asp:ListItem>
</asp:DropDownList>
--%>
<asp:ImageButton ID="lnkSearchDetailed" runat="server" OnClick="lnkSearchDetailed_Click"
ImageUrl="~/images/go-button.jpg" align="absmiddle" Width="40" Height="22"></asp:ImageButton>
</div>
<div class="sort-by-area" id="dvSortBy" runat="server">
<div class="sort-by-txt">
Sort By :
</div>
<div class="sort-by-links">
<ul>
<li>
<asp:LinkButton ID="lnkSortYear" runat="server" Text="Year" OnClick="lnkSortYear_Click"></asp:LinkButton>
</li>
<li>
<asp:LinkButton ID="lnkSortMake" runat="server" Text="Make" OnClick="lnkSortMake_Click"></asp:LinkButton>
</li>
<li>
<asp:LinkButton ID="lnkSortModel" runat="server" Text="Model" OnClick="lnkSortModel_Click"></asp:LinkButton>
</li>
<li>
<asp:LinkButton ID="lnkSortPrice" runat="server" Text="Price" OnClick="lnkSortPrice_Click"></asp:LinkButton>
</li>
</ul>
</div>
</div>
<div>
<telerik:RadGrid ID="grdSearchResults" runat="server" AllowPaging="true" AllowSorting="true" PageSize="1500"
OnItemDataBound="grdSearchResults_ItemDataBound"
OnNeedDataSource="grdSearchResults_NeedDataSource"
OnItemCreated="grdSearchResults_ItemCreated"
OnItemCommand="grdSearchResults_ItemCommand">
<PagerStyle AlwaysVisible="true" Position="TopAndBottom" Mode="NumericPages" />
<ClientSettings EnableAlternatingItems="false"></ClientSettings>
<MasterTableView CommandItemDisplay="None" AutoGenerateColumns="false"
NoMasterRecordsText="No vehicles were found matching your search criteria. Try widening your search to match more vehicles.">
<PagerTemplate>
<asp:Panel ID="PagerPanel" Style="padding: 6px; line-height: 24px" runat="server">
<div style="float: left">
<span style="margin-right: 3px;">Page size:</span>
<telerik:RadComboBox ID="cboPageSize" DataSource='<%# new RadComboBoxItem[]{new RadComboBoxItem("All", "1500"), new RadComboBoxItem("10", "10"), new RadComboBoxItem("20", "20"), new RadComboBoxItem("30", "30"), new RadComboBoxItem("40", "40"), new RadComboBoxItem("50", "50")} %>'
DataTextField="Text" DataValueField="Value"
Style="margin-right: 20px;" Width="40px" SelectedValue='<%# DataBinder.Eval(Container, "Paging.PageSize") %>'
runat="server" OnClientSelectedIndexChanged="cboPageSize_SelectedIndexChanged">
</telerik:RadComboBox>
</div>
<div style="margin: 0px; float: right;">
Displaying page <%# (int)DataBinder.Eval(Container, "Paging.CurrentPageIndex") + 1 %>
of <%# DataBinder.Eval(Container, "Paging.PageCount")%>,
items <%# (int)DataBinder.Eval(Container, "Paging.FirstIndexInPage") + 1 %>
to <%# (int)DataBinder.Eval(Container, "Paging.LastIndexInPage") + 1 %>
of <%# DataBinder.Eval(Container, "Paging.DataSourceCount")%>
</div>
<div style="width: 400px; margin: 0px; padding: 0px; margin-right: 10px; white-space: nowrap;">
<asp:Button ID="cmdFirstPage" runat="server" OnClientClick="changePage('first'); return false;"
CommandName="Page" CommandArgument="First" Text=" " CssClass="rgPageFirst"></asp:Button>
<asp:Button ID="cmdPrevPage" runat="server" OnClientClick="changePage('prev'); return false;"
CommandName="Page" CommandArgument="Prev" Text=" " CssClass="rgPagePrev"></asp:Button>
<asp:Panel runat="server" ID="NumericPagerPlaceHolder" CssClass="numericPages"></asp:Panel>
<%--<span style="vertical-align: middle;">Page:</span>
<telerik:RadNumericTextBox ID="numCurrentPage" Width="25px" Value='<%# (int)DataBinder.Eval(Container, "Paging.CurrentPageIndex") + 1 %>'
runat="server" AutoPostBack="false">
<ClientEvents OnValueChanged="numCurrentPage_ValueChanged"></ClientEvents>
<NumberFormat DecimalDigits="0"></NumberFormat>
</telerik:RadNumericTextBox>
<span style="vertical-align: middle;">of <%# DataBinder.Eval(Container, "Paging.PageCount")%></span>--%>
<asp:Button ID="cmdNextPage" runat="server" OnClientClick="changePage('next'); return false;"
CommandName="Page" CommandArgument="Next" Text=" " CssClass="rgPageNext"></asp:Button>
<asp:Button ID="cmdLastPage" runat="server" OnClientClick="changePage('last'); return false;"
CommandName="Page" CommandArgument="Last" Text=" " CssClass="rgPageLast"></asp:Button>
</div>
</asp:Panel>
</PagerTemplate>
<Columns>
<telerik:GridTemplateColumn>
<ItemTemplate>
<div class="list-box">
<div class="list-box-head">
<a href='cardetails.aspx?VIN=<%# Eval("VIN")%>'>
<asp:Literal runat="server" ID="Lit_CarName"></asp:Literal>
</a>
<asp:HiddenField ID="hdnCar" runat="server" />
<asp:HiddenField ID="hdnYear" runat="server" Value='<%# Eval("YEAR")%>' />
<asp:HiddenField ID="hdnMake" runat="server" Value='<%# Eval("MAKE_NAME")%>' />
<asp:HiddenField ID="hdnModel" runat="server" Value='<%# Eval("SERIES")%>' />
<asp:HiddenField ID="hdnVIN" runat="server" Value='<%# Eval("VIN")%>' />
<asp:HiddenField ID="hdnMSRP" runat="server" Value='<%# Eval("MSRP")%>' />
<asp:HiddenField ID="hdnSTYLE" runat="server" Value='<%# Eval("STYLE")%>' />
<asp:HiddenField ID="hdnPhoto" runat="server" Value='<%# Eval("IMG_URL")%>' />
<asp:HiddenField ID="hdnImageCount" runat="server" Value='<%# Eval("IMG_COUNT")%>' />
</div>
<div class="list-box-content">
<div class="inventoryItemDetailThumbnail">
<a href='cardetails.aspx?VIN=<%# Eval("VIN")%>' style="border: 0px;">
<asp:Image BorderStyle="None" Width="175" ID="imgCar" runat="server" ImageUrl="/images/vehicle-silhouette.jpg" /></a>
</div>
<div class="inventoryItemDetailColumn1">
<table>
<tr>
<td class="inventoryItemDetailLabel1">Body Style :</td>
<td class="inventoryItemDetailData1">
<asp:Label ID="lblBody" runat="server" Text='<%# Eval("SEGMENT")%>'></asp:Label>
</td>
</tr>
<tr>
<td class="inventoryItemDetailLabel1">Engine :</td>
<td class="inventoryItemDetailData1">
<asp:Label ID="lblEngine" runat="server" Text='<%# Eval("ENGINE")%>'></asp:Label>
</td>
</tr>
<tr>
<td class="inventoryItemDetailLabel1">Ext. color :</td>
<td class="inventoryItemDetailData1">
<asp:Label ID="lblExteriorColor" runat="server" Text='<%# Eval("COLOR")%>'></asp:Label>
</td>
</tr>
<tr>
<td class="inventoryItemDetailLabel1">VIN :</td>
<td class="inventoryItemDetailData1">
<asp:Label ID="lblVIN" runat="server" Text='<%# Eval("VIN")%>'></asp:Label>
</td>
</tr>
<%--<tr>
<td class="inventoryItemDetailLabel1">Int Color :</td>
<td class="inventoryItemDetailData1">
<asp:Label ID="lblInteriorColor" runat="server" Text='<%# Eval("")%>'></asp:Label>
</td>
</tr>--%>
<tr>
<td class="inventoryItemDetailLabel1">Stock Number :</td>
<td class="inventoryItemDetailData1">
<asp:Label ID="lblStockNo" runat="server" Text='<%# Eval("STOCK_NO")%>'></asp:Label>
</td>
</tr>
<tr>
<td class="inventoryItemDetailLabel1">Trim :</td>
<td class="inventoryItemDetailData1">
<asp:Label ID="lblTrim" runat="server" Text='<%# Eval("STYLE")%>'></asp:Label>
</td>
</tr>
</table>
</div>
<div class="inventoryItemDetailColumn2">
<table>
<tr>
<td class="inventoryItemDetailLabel2">MSRP :</td>
<td class="inventoryItemDetailData2">
<asp:Label ID="lblmsrp" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="inventoryItemDetailLabel2">
<asp:Label ID="lblMileageLabel" runat="server"></asp:Label>
</td>
<td class="inventoryItemDetailData2">
<asp:Label ID="lblMileage" runat="server" Text='<%# string.Format("{0:n0}", Eval("MILEAGE"))%>'></asp:Label>
</td>
</tr>
<%--<tr>
<td class="inventoryItemDetailLabel2">Transmission :</td>
<td class="inventoryItemDetailData2">
<asp:Label ID="lblTransmission" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="inventoryItemDetailLabel2">Drivetrain :</td>
<td class="inventoryItemDetailData2">
<asp:Label ID="lblDrivetrain" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="inventoryItemDetailLabel2">Model Code :</td>
<td class="inventoryItemDetailData2">
<asp:Label ID="lblModelCode" runat="server"></asp:Label>
</td>
</tr>--%>
</table>
</div>
<div class="list-box-button">
<div id="divOfferButton" runat="server">
<a href='deal.aspx?VIN=<%# Eval("VIN")%>' target="RadWindow1" onclick="window.radopen(null, 'RadWindow1');" class="offer-button"></a>
</div>
<div id="divRebateButton" runat="server">
<a href='rebates.aspx?VIN=<%# Eval("VIN")%>' class="incentive-button"></a>
</div>
<div id="divViewDetailsButton" runat="server">
<a href='cardetails.aspx?VIN=<%# Eval("VIN")%>' class="viewdetail-button"></a>
</div>
</div>
</div>
</div>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</div>
</div>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server">
<Windows>
<telerik:RadWindow ID="RadWindow1" runat="server"
CssClass="top PriceTimeWindow"
VisibleTitlebar="true"
VisibleStatusbar="false"
Modal="true"
Width="650"
Height="625"
Behaviors="Close">
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
Here is the relavent codebehind:
protected void grdSearchResults_ItemDataBound(object sender, GridItemEventArgs e) {
if (e.Item is GridDataItem) {
System.Web.UI.WebControls.Image imgCar = e.Item.FindControl("imgCar") as System.Web.UI.WebControls.Image;
System.Web.UI.HtmlControls.HtmlControl divOfferButton = e.Item.FindControl("divOfferButton") as System.Web.UI.HtmlControls.HtmlControl;
System.Web.UI.HtmlControls.HtmlControl divRebateButton = e.Item.FindControl("divRebateButton") as System.Web.UI.HtmlControls.HtmlControl;
HiddenField hdnVIN = e.Item.FindControl("hdnVIN") as HiddenField;
HiddenField hdnCar = e.Item.FindControl("hdnCar") as HiddenField;
HiddenField hdnYear = e.Item.FindControl("hdnYear") as HiddenField;
HiddenField hdnMake = e.Item.FindControl("hdnMake") as HiddenField;
HiddenField hdnModel = e.Item.FindControl("hdnModel") as HiddenField;
HiddenField hdnMSRP = e.Item.FindControl("hdnMSRP") as HiddenField;
HiddenField hdnSTYLE = e.Item.FindControl("hdnSTYLE") as HiddenField;
HiddenField hdnPhoto = e.Item.FindControl("hdnPhoto") as HiddenField;
HiddenField hdnImageCount = e.Item.FindControl("hdnImageCount") as HiddenField;
Literal litCarName = e.Item.FindControl("Lit_CarName") as Literal;
Label lblBody = e.Item.FindControl("lblBody") as Label;
Label lblInterior = e.Item.FindControl("lblInterior") as Label;
Label lblmsrp = e.Item.FindControl("lblmsrp") as Label;
Label lblMileage = e.Item.FindControl("lblMileage") as Label;
Label lblMileageLabel = e.Item.FindControl("lblMileageLabel") as Label;
litCarName.Text = hdnYear.Value + " " + hdnMake.Value + " " + hdnModel.Value + " " + hdnSTYLE.Value;
if (lblMileage.Text != "0") {
lblMileageLabel.Text = "Mileage :";
} else {
lblMileageLabel.Visible = false;
lblMileage.Visible = false;
} // end else
hdnCar.Value = litCarName.Text;
string tempMSRP = hdnMSRP.Value.Replace("$", "");
if (String.IsNullOrEmpty(tempMSRP)) {
lblmsrp.Text = "Call For Price";
} else {
lblmsrp.Text = "$" + String.Format("{0:0,0}", Convert.ToDouble(tempMSRP));
} // end else
if (lblmsrp.Text == "$00") {
lblmsrp.Text = "Call For Price";
divOfferButton.Visible = false;
} // end if
divRebateButton.Visible = (StockType == "New");
} // end if
} // end grdSearchResults_ItemDataBound()
protected void grdSearchResults_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) {
grdSearchResults.DataSource = GetFilteredInventory();
} // end grdSearchResults_NeedDataSource()
protected void grdSearchResults_ItemCreated(object sender, GridItemEventArgs e) {
if (e.Item is GridPagerItem) {
GridPagerItem gridPager = e.Item as GridPagerItem;
Control numericPagerControl = gridPager.GetNumericPager();
Control placeHolder = gridPager.FindControl("NumericPagerPlaceHolder");
placeHolder.Controls.Add(numericPagerControl);
} // end if
} // end grdSearchResults_ItemCreated()
protected void grdSearchResults_ItemCommand(object sender, GridCommandEventArgs e) {
switch (e.CommandName) {
case "SetImage": {
int itemIndex = 0;
if (e.CommandArgument != null &&
e.CommandArgument is string &&
int.TryParse(e.CommandArgument.ToString(), out itemIndex)) {
GridDataItem item = grdSearchResults.MasterTableView.Items[itemIndex];
HiddenField hdnVIN = item.FindControl("hdnVIN") as HiddenField;
HiddenField hdnPhoto = item.FindControl("hdnPhoto") as HiddenField;
HiddenField hdnImageCount = item.FindControl("hdnImageCount") as HiddenField;
Image imgCar = item.FindControl("imgCar") as Image;
int imgCnt;
int.TryParse(hdnImageCount.Value, out imgCnt);
if (imgCnt > 0) {
imgCar.ImageUrl = hdnPhoto.Value;
} else {
imgCar.ImageUrl = CommonFunctions.GetChromeImageUrl(hdnVIN.Value);
} // end else
} // end if
} // end case
break;
default:
break;
} // end switch
} // end grdSearchResults_ItemCommand()
I have an ajaxified RadGrid with a single template column which contains an image, along with other data. I am required to display all search results in this grid on a single page, but because each row has a unique image, the load time for the page is unacceptable for large row counts. My solution was to load the results using a small placeholder image, and then use AJAX to replace the placeholder image with the real image for each row when the page finishes loading. It works great, except that each time one of the images is replaced, the page scrolls to the top. This is problematic for large row counts because I am unable to scroll down until all images are loaded. Is there a way I can prevent the page from scrolling to the top after every ajax request? What I'd really like to do is only update the rows individually, but I couldn't figure out how to avoid ajaxifying the entire grid. Any help would be greatly appreciated. Thanks in advance!
Here is my .aspx:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="InventorySearch.ascx.cs" Inherits="KellerBuick.UserControl.InventorySearch" %>
<style type="text/css">
div.TelerikModalOverlay {
opacity: 0.75 !important;
background-color: rgb(0,0,0) !important;
z-index: 149999;
}
.top {
z-index: 150000;
}
.rcbSlide {
z-index: 900000 !important;
}
.numericPages {
display: inline-block;
}
.GridLoadingPanel {
width: 100%;
height: 100%;
background-color: white;
top: 50px;
}
</style>
<telerik:RadScriptBlock ID="rsbCustomPagerCode" runat="server">
<script type="text/javascript">
var tableView = null;
function pageLoad(sender, args) {
tableView = $find("<%= grdSearchResults.ClientID %>").get_masterTableView();
var arrRows = tableView.get_dataItems();
for (var i = 0; i < arrRows.length; i++) {
var imgCar = arrRows[i].findElement("imgCar");
if (imgCar.src.indexOf("vehicle-silhouette.jpg") > 0) {
tableView.fireCommand("SetImage", i);
break;
} // end if
} // end for
} // end pageLoad()
function cboPageSize_SelectedIndexChanged(sender, args) {
tableView.set_pageSize(sender.get_value());
} // end cboPageSize_SelectedIndexChanged()
function changePage(argument) {
tableView.page(argument);
} // end changePage()
function numCurrentPage_ValueChanged(sender, args) {
tableView.page(sender.get_value());
} // end numCurrentPage_ValueChanged()
</script>
</telerik:RadScriptBlock>
<telerik:RadAjaxLoadingPanel ID="lplLoading" runat="server" CssClass="GridLoadingPanel" Transparency="50" ZIndex="1000000">
<table style="width: 100%; height: 100%; background-color: white;">
<tr style="height: 100%">
<td align="center" valign="middle" style="width: 100%">
<img alt="Loading..." src='Images/Loading.gif' style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" />
</td>
</tr>
</table>
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxManager ID="ramAjaxManager" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="grdSearchResults">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="grdSearchResults" LoadingPanelID="lplLoading"></telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<div class="invent-list">
<div class="inventory-search">
<asp:DropDownList ID="ddlYear" runat="server" CssClass="select-all-years"></asp:DropDownList>
<asp:DropDownList ID="ddlMake" runat="server" CssClass="select-all-years" OnSelectedIndexChanged="ddlMake_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList>
<asp:DropDownList ID="ddlModel" runat="server" CssClass="select-all-years"></asp:DropDownList>
<asp:DropDownList ID="ddlMinPrice" runat="server" CssClass="select-all-years">
<asp:ListItem Value="" Text="Min Price" />
<asp:ListItem Value="0" Text="0" />
<asp:ListItem Value="10000" Text="10000" />
<asp:ListItem Value="15000" Text="15000" />
<asp:ListItem Value="20000" Text="20000" />
<asp:ListItem Value="25000" Text="25000" />
<asp:ListItem Value="30000" Text="30000" />
<asp:ListItem Value="35000" Text="35000" />
<asp:ListItem Value="40000" Text="40000" />
</asp:DropDownList>
<asp:DropDownList ID="ddlMaxPrice" class="select-all-years" runat="server">
<asp:ListItem Value="" Text="Max Price" />
<asp:ListItem Value="9999" Text="9999" />
<asp:ListItem Value="14999" Text="14999" />
<asp:ListItem Value="19999" Text="19999" />
<asp:ListItem Value="24999" Text="24999" />
<asp:ListItem Value="29999" Text="29999" />
<asp:ListItem Value="34999" Text="34999" />
<asp:ListItem Value="39999" Text="39999" />
<asp:ListItem Value="" Text="No Max" />
</asp:DropDownList>
<%--
<asp:DropDownList ID="ddlMinMPG" class="select-all-years" runat="server">
<asp:ListItem Text="Min MPG" Value=""></asp:ListItem>
<asp:ListItem Text="15" Value="15"></asp:ListItem>
<asp:ListItem Text="20" Value="20"></asp:ListItem>
<asp:ListItem Text="25" Value="25"></asp:ListItem>
<asp:ListItem Text="30" Value="30"></asp:ListItem>
<asp:ListItem Text="35" Value="35"></asp:ListItem>
<asp:ListItem Text="40" Value="40"></asp:ListItem>
<asp:ListItem Text="45" Value="45"></asp:ListItem>
<asp:ListItem Text="50" Value="50"></asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddlMaxMPG" class="select-all-years" runat="server">
<asp:ListItem Text="Max MPG" Value=""></asp:ListItem>
<asp:ListItem Text="15" Value="15"></asp:ListItem>
<asp:ListItem Text="20" Value="20"></asp:ListItem>
<asp:ListItem Text="25" Value="25"></asp:ListItem>
<asp:ListItem Text="30" Value="30"></asp:ListItem>
<asp:ListItem Text="35" Value="35"></asp:ListItem>
<asp:ListItem Text="40" Value="40"></asp:ListItem>
<asp:ListItem Text="45" Value="45"></asp:ListItem>
<asp:ListItem Text="50" Value="50"></asp:ListItem>
</asp:DropDownList>
--%>
<asp:ImageButton ID="lnkSearchDetailed" runat="server" OnClick="lnkSearchDetailed_Click"
ImageUrl="~/images/go-button.jpg" align="absmiddle" Width="40" Height="22"></asp:ImageButton>
</div>
<div class="sort-by-area" id="dvSortBy" runat="server">
<div class="sort-by-txt">
Sort By :
</div>
<div class="sort-by-links">
<ul>
<li>
<asp:LinkButton ID="lnkSortYear" runat="server" Text="Year" OnClick="lnkSortYear_Click"></asp:LinkButton>
</li>
<li>
<asp:LinkButton ID="lnkSortMake" runat="server" Text="Make" OnClick="lnkSortMake_Click"></asp:LinkButton>
</li>
<li>
<asp:LinkButton ID="lnkSortModel" runat="server" Text="Model" OnClick="lnkSortModel_Click"></asp:LinkButton>
</li>
<li>
<asp:LinkButton ID="lnkSortPrice" runat="server" Text="Price" OnClick="lnkSortPrice_Click"></asp:LinkButton>
</li>
</ul>
</div>
</div>
<div>
<telerik:RadGrid ID="grdSearchResults" runat="server" AllowPaging="true" AllowSorting="true" PageSize="1500"
OnItemDataBound="grdSearchResults_ItemDataBound"
OnNeedDataSource="grdSearchResults_NeedDataSource"
OnItemCreated="grdSearchResults_ItemCreated"
OnItemCommand="grdSearchResults_ItemCommand">
<PagerStyle AlwaysVisible="true" Position="TopAndBottom" Mode="NumericPages" />
<ClientSettings EnableAlternatingItems="false"></ClientSettings>
<MasterTableView CommandItemDisplay="None" AutoGenerateColumns="false"
NoMasterRecordsText="No vehicles were found matching your search criteria. Try widening your search to match more vehicles.">
<PagerTemplate>
<asp:Panel ID="PagerPanel" Style="padding: 6px; line-height: 24px" runat="server">
<div style="float: left">
<span style="margin-right: 3px;">Page size:</span>
<telerik:RadComboBox ID="cboPageSize" DataSource='<%# new RadComboBoxItem[]{new RadComboBoxItem("All", "1500"), new RadComboBoxItem("10", "10"), new RadComboBoxItem("20", "20"), new RadComboBoxItem("30", "30"), new RadComboBoxItem("40", "40"), new RadComboBoxItem("50", "50")} %>'
DataTextField="Text" DataValueField="Value"
Style="margin-right: 20px;" Width="40px" SelectedValue='<%# DataBinder.Eval(Container, "Paging.PageSize") %>'
runat="server" OnClientSelectedIndexChanged="cboPageSize_SelectedIndexChanged">
</telerik:RadComboBox>
</div>
<div style="margin: 0px; float: right;">
Displaying page <%# (int)DataBinder.Eval(Container, "Paging.CurrentPageIndex") + 1 %>
of <%# DataBinder.Eval(Container, "Paging.PageCount")%>,
items <%# (int)DataBinder.Eval(Container, "Paging.FirstIndexInPage") + 1 %>
to <%# (int)DataBinder.Eval(Container, "Paging.LastIndexInPage") + 1 %>
of <%# DataBinder.Eval(Container, "Paging.DataSourceCount")%>
</div>
<div style="width: 400px; margin: 0px; padding: 0px; margin-right: 10px; white-space: nowrap;">
<asp:Button ID="cmdFirstPage" runat="server" OnClientClick="changePage('first'); return false;"
CommandName="Page" CommandArgument="First" Text=" " CssClass="rgPageFirst"></asp:Button>
<asp:Button ID="cmdPrevPage" runat="server" OnClientClick="changePage('prev'); return false;"
CommandName="Page" CommandArgument="Prev" Text=" " CssClass="rgPagePrev"></asp:Button>
<asp:Panel runat="server" ID="NumericPagerPlaceHolder" CssClass="numericPages"></asp:Panel>
<%--<span style="vertical-align: middle;">Page:</span>
<telerik:RadNumericTextBox ID="numCurrentPage" Width="25px" Value='<%# (int)DataBinder.Eval(Container, "Paging.CurrentPageIndex") + 1 %>'
runat="server" AutoPostBack="false">
<ClientEvents OnValueChanged="numCurrentPage_ValueChanged"></ClientEvents>
<NumberFormat DecimalDigits="0"></NumberFormat>
</telerik:RadNumericTextBox>
<span style="vertical-align: middle;">of <%# DataBinder.Eval(Container, "Paging.PageCount")%></span>--%>
<asp:Button ID="cmdNextPage" runat="server" OnClientClick="changePage('next'); return false;"
CommandName="Page" CommandArgument="Next" Text=" " CssClass="rgPageNext"></asp:Button>
<asp:Button ID="cmdLastPage" runat="server" OnClientClick="changePage('last'); return false;"
CommandName="Page" CommandArgument="Last" Text=" " CssClass="rgPageLast"></asp:Button>
</div>
</asp:Panel>
</PagerTemplate>
<Columns>
<telerik:GridTemplateColumn>
<ItemTemplate>
<div class="list-box">
<div class="list-box-head">
<a href='cardetails.aspx?VIN=<%# Eval("VIN")%>'>
<asp:Literal runat="server" ID="Lit_CarName"></asp:Literal>
</a>
<asp:HiddenField ID="hdnCar" runat="server" />
<asp:HiddenField ID="hdnYear" runat="server" Value='<%# Eval("YEAR")%>' />
<asp:HiddenField ID="hdnMake" runat="server" Value='<%# Eval("MAKE_NAME")%>' />
<asp:HiddenField ID="hdnModel" runat="server" Value='<%# Eval("SERIES")%>' />
<asp:HiddenField ID="hdnVIN" runat="server" Value='<%# Eval("VIN")%>' />
<asp:HiddenField ID="hdnMSRP" runat="server" Value='<%# Eval("MSRP")%>' />
<asp:HiddenField ID="hdnSTYLE" runat="server" Value='<%# Eval("STYLE")%>' />
<asp:HiddenField ID="hdnPhoto" runat="server" Value='<%# Eval("IMG_URL")%>' />
<asp:HiddenField ID="hdnImageCount" runat="server" Value='<%# Eval("IMG_COUNT")%>' />
</div>
<div class="list-box-content">
<div class="inventoryItemDetailThumbnail">
<a href='cardetails.aspx?VIN=<%# Eval("VIN")%>' style="border: 0px;">
<asp:Image BorderStyle="None" Width="175" ID="imgCar" runat="server" ImageUrl="/images/vehicle-silhouette.jpg" /></a>
</div>
<div class="inventoryItemDetailColumn1">
<table>
<tr>
<td class="inventoryItemDetailLabel1">Body Style :</td>
<td class="inventoryItemDetailData1">
<asp:Label ID="lblBody" runat="server" Text='<%# Eval("SEGMENT")%>'></asp:Label>
</td>
</tr>
<tr>
<td class="inventoryItemDetailLabel1">Engine :</td>
<td class="inventoryItemDetailData1">
<asp:Label ID="lblEngine" runat="server" Text='<%# Eval("ENGINE")%>'></asp:Label>
</td>
</tr>
<tr>
<td class="inventoryItemDetailLabel1">Ext. color :</td>
<td class="inventoryItemDetailData1">
<asp:Label ID="lblExteriorColor" runat="server" Text='<%# Eval("COLOR")%>'></asp:Label>
</td>
</tr>
<tr>
<td class="inventoryItemDetailLabel1">VIN :</td>
<td class="inventoryItemDetailData1">
<asp:Label ID="lblVIN" runat="server" Text='<%# Eval("VIN")%>'></asp:Label>
</td>
</tr>
<%--<tr>
<td class="inventoryItemDetailLabel1">Int Color :</td>
<td class="inventoryItemDetailData1">
<asp:Label ID="lblInteriorColor" runat="server" Text='<%# Eval("")%>'></asp:Label>
</td>
</tr>--%>
<tr>
<td class="inventoryItemDetailLabel1">Stock Number :</td>
<td class="inventoryItemDetailData1">
<asp:Label ID="lblStockNo" runat="server" Text='<%# Eval("STOCK_NO")%>'></asp:Label>
</td>
</tr>
<tr>
<td class="inventoryItemDetailLabel1">Trim :</td>
<td class="inventoryItemDetailData1">
<asp:Label ID="lblTrim" runat="server" Text='<%# Eval("STYLE")%>'></asp:Label>
</td>
</tr>
</table>
</div>
<div class="inventoryItemDetailColumn2">
<table>
<tr>
<td class="inventoryItemDetailLabel2">MSRP :</td>
<td class="inventoryItemDetailData2">
<asp:Label ID="lblmsrp" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="inventoryItemDetailLabel2">
<asp:Label ID="lblMileageLabel" runat="server"></asp:Label>
</td>
<td class="inventoryItemDetailData2">
<asp:Label ID="lblMileage" runat="server" Text='<%# string.Format("{0:n0}", Eval("MILEAGE"))%>'></asp:Label>
</td>
</tr>
<%--<tr>
<td class="inventoryItemDetailLabel2">Transmission :</td>
<td class="inventoryItemDetailData2">
<asp:Label ID="lblTransmission" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="inventoryItemDetailLabel2">Drivetrain :</td>
<td class="inventoryItemDetailData2">
<asp:Label ID="lblDrivetrain" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="inventoryItemDetailLabel2">Model Code :</td>
<td class="inventoryItemDetailData2">
<asp:Label ID="lblModelCode" runat="server"></asp:Label>
</td>
</tr>--%>
</table>
</div>
<div class="list-box-button">
<div id="divOfferButton" runat="server">
<a href='deal.aspx?VIN=<%# Eval("VIN")%>' target="RadWindow1" onclick="window.radopen(null, 'RadWindow1');" class="offer-button"></a>
</div>
<div id="divRebateButton" runat="server">
<a href='rebates.aspx?VIN=<%# Eval("VIN")%>' class="incentive-button"></a>
</div>
<div id="divViewDetailsButton" runat="server">
<a href='cardetails.aspx?VIN=<%# Eval("VIN")%>' class="viewdetail-button"></a>
</div>
</div>
</div>
</div>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</div>
</div>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server">
<Windows>
<telerik:RadWindow ID="RadWindow1" runat="server"
CssClass="top PriceTimeWindow"
VisibleTitlebar="true"
VisibleStatusbar="false"
Modal="true"
Width="650"
Height="625"
Behaviors="Close">
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
Here is the relavent codebehind:
protected void grdSearchResults_ItemDataBound(object sender, GridItemEventArgs e) {
if (e.Item is GridDataItem) {
System.Web.UI.WebControls.Image imgCar = e.Item.FindControl("imgCar") as System.Web.UI.WebControls.Image;
System.Web.UI.HtmlControls.HtmlControl divOfferButton = e.Item.FindControl("divOfferButton") as System.Web.UI.HtmlControls.HtmlControl;
System.Web.UI.HtmlControls.HtmlControl divRebateButton = e.Item.FindControl("divRebateButton") as System.Web.UI.HtmlControls.HtmlControl;
HiddenField hdnVIN = e.Item.FindControl("hdnVIN") as HiddenField;
HiddenField hdnCar = e.Item.FindControl("hdnCar") as HiddenField;
HiddenField hdnYear = e.Item.FindControl("hdnYear") as HiddenField;
HiddenField hdnMake = e.Item.FindControl("hdnMake") as HiddenField;
HiddenField hdnModel = e.Item.FindControl("hdnModel") as HiddenField;
HiddenField hdnMSRP = e.Item.FindControl("hdnMSRP") as HiddenField;
HiddenField hdnSTYLE = e.Item.FindControl("hdnSTYLE") as HiddenField;
HiddenField hdnPhoto = e.Item.FindControl("hdnPhoto") as HiddenField;
HiddenField hdnImageCount = e.Item.FindControl("hdnImageCount") as HiddenField;
Literal litCarName = e.Item.FindControl("Lit_CarName") as Literal;
Label lblBody = e.Item.FindControl("lblBody") as Label;
Label lblInterior = e.Item.FindControl("lblInterior") as Label;
Label lblmsrp = e.Item.FindControl("lblmsrp") as Label;
Label lblMileage = e.Item.FindControl("lblMileage") as Label;
Label lblMileageLabel = e.Item.FindControl("lblMileageLabel") as Label;
litCarName.Text = hdnYear.Value + " " + hdnMake.Value + " " + hdnModel.Value + " " + hdnSTYLE.Value;
if (lblMileage.Text != "0") {
lblMileageLabel.Text = "Mileage :";
} else {
lblMileageLabel.Visible = false;
lblMileage.Visible = false;
} // end else
hdnCar.Value = litCarName.Text;
string tempMSRP = hdnMSRP.Value.Replace("$", "");
if (String.IsNullOrEmpty(tempMSRP)) {
lblmsrp.Text = "Call For Price";
} else {
lblmsrp.Text = "$" + String.Format("{0:0,0}", Convert.ToDouble(tempMSRP));
} // end else
if (lblmsrp.Text == "$00") {
lblmsrp.Text = "Call For Price";
divOfferButton.Visible = false;
} // end if
divRebateButton.Visible = (StockType == "New");
} // end if
} // end grdSearchResults_ItemDataBound()
protected void grdSearchResults_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) {
grdSearchResults.DataSource = GetFilteredInventory();
} // end grdSearchResults_NeedDataSource()
protected void grdSearchResults_ItemCreated(object sender, GridItemEventArgs e) {
if (e.Item is GridPagerItem) {
GridPagerItem gridPager = e.Item as GridPagerItem;
Control numericPagerControl = gridPager.GetNumericPager();
Control placeHolder = gridPager.FindControl("NumericPagerPlaceHolder");
placeHolder.Controls.Add(numericPagerControl);
} // end if
} // end grdSearchResults_ItemCreated()
protected void grdSearchResults_ItemCommand(object sender, GridCommandEventArgs e) {
switch (e.CommandName) {
case "SetImage": {
int itemIndex = 0;
if (e.CommandArgument != null &&
e.CommandArgument is string &&
int.TryParse(e.CommandArgument.ToString(), out itemIndex)) {
GridDataItem item = grdSearchResults.MasterTableView.Items[itemIndex];
HiddenField hdnVIN = item.FindControl("hdnVIN") as HiddenField;
HiddenField hdnPhoto = item.FindControl("hdnPhoto") as HiddenField;
HiddenField hdnImageCount = item.FindControl("hdnImageCount") as HiddenField;
Image imgCar = item.FindControl("imgCar") as Image;
int imgCnt;
int.TryParse(hdnImageCount.Value, out imgCnt);
if (imgCnt > 0) {
imgCar.ImageUrl = hdnPhoto.Value;
} else {
imgCar.ImageUrl = CommonFunctions.GetChromeImageUrl(hdnVIN.Value);
} // end else
} // end if
} // end case
break;
default:
break;
} // end switch
} // end grdSearchResults_ItemCommand()