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

2 Questions on the Grid

3 Answers 102 Views

Grid

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

Lynn asked on 18 May 2011, 06:21 AM

RadGridQuestions1.png

RadGridQuestions2.png

I have two questions regarding the grid. One is a problem and the other is a "how to" or "can I".

(1) I have a grid which is used to page through search results (refer to attached graphic radgridquestion1.png). The first page of the grid displays just fine, but when I click on the grids 'next' button, the page is displayed with nothing but blank space where the grid was on the first page (refer to attached graphic radgridquestion2.png). The following code is the definition of the grid in the .aspx file.

<telerik:RadGrid ID="RadGrid1" runat="server" EnableEmbeddedSkins="true" Skin="Sitefinity" ShowHeader="false" AllowPaging="True" PageSize="5" Height="700px" >

<PagerStyle Mode="NextPrevAndNumeric" />

<MasterTableView TableLayout="Fixed">

<ItemTemplate>

<table>

<tr>

<td>

<asp:Image ID="Image1" Style="float: left;" Width="150px" Height="100px" ImageUrl='<%# Eval("PicturePath")%>'

BorderWidth="1px" runat="server" AlternateText="Stock Image" />

</td>

<td>

</td>

<td>

<div>

<ul>

<li>

<%# Eval("ListingStreetAddress")%>

</li>

<li>

<label>Beds:</label><%# Eval("Bedrooms")%>

</li>

<li>

<label>Baths:</label><%# Eval("Bathrooms")%>

</li>

<li>

<label>Price:</label><%# Eval("ListingPrice")%>

</li>

</ul>

</div>

</td>

</tr>

</table>

</ItemTemplate>

</MasterTableView>

<ClientSettings AllowDragToGroup="false">

<Scrolling AllowScroll="true" UseStaticHeaders="false" />

</ClientSettings>

</telerik:RadGrid>

Obviously, I don't understand why the second page won't display. Any ideas or assistance would be greatly appreciated!

(2) A "how to" question: In the first attached graphic, you can see search criteria in the left-most column, the grid containing results in the middle column, and the right-most column is blank. I will be putting a small Google map in this space and want it to only contain "push pins" for the properties displayed in the current page of the grid. Is there a way I can do this? How and in what grid event would I be able to put the code to add the "push pins" each time a new grid page is displayed? In what event would I place the code to "clear the map" to ready it for the next n number pins? Feel free to ask questions if I did not explain myself adequately.

Thanks in advance for your help. I know the attached page still looks a little rough, but it's still a work in progress!

Thanks again!

Lynn

3 Answers, 1 is accepted

Accepted

answered on 18 May 2011, 04:41 PM

Jayesh,

Thank you for the reply, but I do not understand. I have read considerable material on the Telerik site for the past 2 hours and am actually further away from a solution than I was when I submitted this item.

I have changed the grid to use a SqlDataSource like the "Basic Grid Paging" example on the Telerik site. The only difference is that I am setting the connection string and the SQL statement from the code behind file instead of fixing it in the display page. The results are the same...when I click on page 2 (or next) on the pager, the page refreshed and the grid is absent from the display. When I look at the "Basic Grid Paging" example on the Telerik site, it does not use any code behind functionality for NeedDataSource whatsoever.

So why is my grid not displaying anything past page 1?

<%@ Page Title="" Language="VB" MasterPageFile="~/Masters/SiteBackPage2.master" AutoEventWireup="true" CodeFile="SearchListings.aspx.vb" Inherits="SearchListings" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="cph1" Runat="Server">

<div id="page2" >

<div class="FullPageTopic-960-box">

<asp:Label ID="TopicHeading" CssClass="xltextbold" runat="server" Text="<% $GetLangString:Listings.Rentals %>" Visible="true"></asp:Label>

<br />

<div class="Search-col-a">

<br />

<asp:Label ID="Label16" CssClass="largetextbold" runat="server" Text="<% $GetLangString:NewTrans.SearchCriteria %>" ></asp:Label>

<br /><br />

<asp:Panel ID="Panel1" runat="server">

<asp:Label ID="HP_Search2" runat="server" Text="<% $GetLangString:NewTrans.ThisType %>"></asp:Label>

<br />

<telerik:RadComboBox ID="SearchPropType" TabIndex="4" style="z-index: 9000;" Width="200px" EnableEmbeddedSkins="true" Skin="Sitefinity" runat="server" Height="150px" ></telerik:RadComboBox>

<br /><br />

<asp:Label ID="Label1" runat="server" Text="<% $GetLangString:NewTrans.InThisCountry %>"></asp:Label>

<br />

<telerik:RadComboBox

ID="SearchCountry"

MarkFirstMatch="True"

TabIndex="5"

style="z-index: 9000;"

Width="200px"

EnableEmbeddedSkins="true"

Skin="Sitefinity"

runat="server"

Height="150px"

OnClientSelectedIndexChanging="aLoadSearchStateProv"

>

</telerik:RadComboBox>

<br /><br />

<asp:Label ID="Label3" runat="server" Text="<% $GetLangString:NewTrans.InThisState %>"></asp:Label>

<br />

<telerik:RadComboBox ID="SearchStateProv" TabIndex="6" style="z-index: 9000;" Width="200px" EnableEmbeddedSkins="true" Skin="Sitefinity" runat="server" Height="150px" OnClientSelectedIndexChanging="aLoadSearchCity" OnClientItemsRequested="SearchItemsLoaded" OnItemsRequested="SearchState_ItemsRequested"></telerik:RadComboBox>

<br /><br />

<asp:Label ID="Label4" runat="server" Text="<% $GetLangString:NewTrans.InThisCity %>"></asp:Label>

<br />

<telerik:RadComboBox ID="SearchCity" TabIndex="7" style="z-index: 9000;" Width="200px" EnableEmbeddedSkins="true" Skin="Sitefinity" runat="server" Height="150px" OnClientItemsRequested="SearchItemsLoaded" OnItemsRequested="SearchCity_ItemsRequested"></telerik:RadComboBox>

<br /><br />

<asp:Label ID="Label2" runat="server" Text="<% $GetLangString:Listings.PostalOrZipCode %>"></asp:Label>

<br />

<telerik:RadTextBox ID="SearchPostalZipCode" runat="server" TabIndex="8" Width="150px" EnableEmbeddedSkins="true" Skin="Sitefinity" ></telerik:RadTextBox>

<br /><br />

<asp:Label ID="Label17" runat="server" Text="<% $GetLangString:Listings.MinMaxPrice %>"></asp:Label>

<br />

<telerik:RadNumericTextBox EnableEmbeddedSkins="true" ID="SrchMinPrice" Width="70px" TabIndex="9" runat="server" MinValue="0" NumberFormat-DecimalDigits="0"></telerik:RadNumericTextBox>

<telerik:RadNumericTextBox ID="SrchMaxPrice" Width="70px" TabIndex="10" runat="server" MinValue="0" NumberFormat-DecimalDigits="0"></telerik:RadNumericTextBox>

<asp:CustomValidator ForeColor="#FF8040" ID="SrchMinPrice_CustomValid" OnServerValidate="ValidatePriceRangeCustom" ValidationGroup="SubmitInfo" EnableClientScript="false" runat="server" ErrorMessage=

"If you provide a minimum or maximum price, then you must provide both values and the minimum price must be less than the maximum price!"

></asp:CustomValidator>

<asp:Label ID="Label6" runat="server" Text="<% $GetLangString:Listings.BedroomsLabel %>"></asp:Label>

<br />

<telerik:RadComboBox EnableEmbeddedSkins="true" ID="SrchBedrooms" style="z-index: 9000;" Skin="Sitefinity" Height="200px" runat="server" TabIndex="11"></telerik:RadComboBox>

<br /><br />

<asp:Label ID="Label7" runat="server" Text="<% $GetLangString:Listings.BathroomsLabel %>"></asp:Label>

<br />

<telerik:RadComboBox EnableEmbeddedSkins="true" ID="SrchBathrooms" style="z-index: 9000;" Skin="Sitefinity" Height="200px" runat="server" TabIndex="12"></telerik:RadComboBox>

<br /><br />

</asp:Panel>

<asp:Panel ID="Panel2" runat="server">

<asp:Label ID="Label5" runat="server" Text="<% $GetLangString:Listings.StreetName %>"></asp:Label>

<br />

<telerik:RadTextBox ID="SrchStreetName" runat="server" TabIndex="13" Width="150px" EnableEmbeddedSkins="true" Skin="Sitefinity" ></telerik:RadTextBox>

<br /><br />

<asp:Label ID="Label10" runat="server" Text="<% $GetLangString:Listings.MasterPlanned %>"></asp:Label>

<br />

<telerik:RadTextBox ID="SrchMasterPlannedCommunity" runat="server" TabIndex="14" Width="150px" EnableEmbeddedSkins="true" Skin="Sitefinity" ></telerik:RadTextBox>

<br /><br />

<asp:Label ID="Label11" runat="server" Text="<% $GetLangString:Listings.Subdivision %>"></asp:Label>

<br />

<telerik:RadTextBox ID="SrchSubdivision" runat="server" TabIndex="15" Width="150px" EnableEmbeddedSkins="true" Skin="Sitefinity" ></telerik:RadTextBox>

<br /><br />

</asp:Panel>

<asp:Panel ID="Panel3" runat="server" Visible="false" >

<b><%= GetStringValue("Months", "YourPropertyToTrade")%></b>

<br /><br />

<asp:Label ID="Label12" runat="server" Text="<% $GetLangString:Listings.TypeLabel %>"></asp:Label>

<br />

<telerik:RadComboBox ID="MyPropType" TabIndex="4" style="z-index: 9000;" Width="200px" EnableEmbeddedSkins="true" Skin="Sitefinity" runat="server" Height="150px" ></telerik:RadComboBox>

<br /><br />

<asp:Label ID="Label13" runat="server" Text="<% $GetLangString:Listings.CountryLabel %>"></asp:Label>

<br />

<telerik:RadComboBox ID="MyCountry" TabIndex="5" style="z-index: 9000;" Width="200px" EnableEmbeddedSkins="true" Skin="Sitefinity" runat="server" Height="150px" OnClientSelectedIndexChanging="LoadMyStateProv"></telerik:RadComboBox>

<br /><br />

<asp:Label ID="Label14" runat="server" Text="<% $GetLangString:Listings.StateLabel %>"></asp:Label>

<br />

<telerik:RadComboBox ID="MyStateProv" TabIndex="6" style="z-index: 9000;" Width="200px" EnableEmbeddedSkins="true" Skin="Sitefinity" runat="server" Height="150px" OnClientSelectedIndexChanging="LoadMyCity" OnClientItemsRequested="MyItemsLoaded" OnItemsRequested="MyState_ItemsRequested"></telerik:RadComboBox>

<br /><br />

<asp:Label ID="Label15" runat="server" Text="<% $GetLangString:Listings.CityLabel %>"></asp:Label>

<br />

<telerik:RadComboBox ID="MyCity" TabIndex="7" style="z-index: 9000;" Width="200px" EnableEmbeddedSkins="true" Skin="Sitefinity" runat="server" Height="150px" OnClientItemsRequested="MyItemsLoaded" OnItemsRequested="MyCity_ItemsRequested"></telerik:RadComboBox>

<br /><br />

</asp:Panel>

<asp:Panel ID="Panel4" runat="server" Visible="false" >

<b><%= GetStringValue("Months", "TravelYearAndMonths")%></b>

<br /><br />

<asp:Label ID="Label8" runat="server" Text="<% $GetLangString:Months.TravelYear %>"></asp:Label>

<br />

<telerik:RadComboBox EnableEmbeddedSkins="true" ID="SrchYear" style="z-index: 9000;" Skin="Sitefinity" Height="200px" runat="server" TabIndex="13"></telerik:RadComboBox>

<br /><br />

<asp:Label ID="Label9" runat="server" Text="<% $GetLangString:Months.TravelMonth %>"></asp:Label>

<br />

<asp:CheckBox ID="TravelJanuary" runat="server" Text="<% $GetLangString:Months.January %>" /><br />

<asp:CheckBox ID="TravelFebruary" runat="server" Text="<% $GetLangString:Months.February %>" /><br />

<asp:CheckBox ID="TravelMarch" runat="server" Text="<% $GetLangString:Months.March %>" /><br />

<asp:CheckBox ID="TravelApril" runat="server" Text="<% $GetLangString:Months.April %>" /><br />

<asp:CheckBox ID="TravelMay" runat="server" Text="<% $GetLangString:Months.May %>" /><br />

<asp:CheckBox ID="TravelJune" runat="server" Text="<% $GetLangString:Months.June %>" /><br />

<asp:CheckBox ID="TravelJuly" runat="server" Text="<% $GetLangString:Months.July %>" /><br />

<asp:CheckBox ID="TravelAugust" runat="server" Text="<% $GetLangString:Months.August %>" /><br />

<asp:CheckBox ID="TravelSeptember" runat="server" Text="<% $GetLangString:Months.September %>" /><br />

<asp:CheckBox ID="TravelOctober" runat="server" Text="<% $GetLangString:Months.October %>" /><br />

<asp:CheckBox ID="TravelNovember" runat="server" Text="<% $GetLangString:Months.November %>" /><br />

<asp:CheckBox ID="TravelDecember" runat="server" Text="<% $GetLangString:Months.December %>" /><br />

<br /><br />

</asp:Panel>

<asp:LinkButton ID="StartSearchBtn" CssClass="xlink" runat="server" Text="<% $GetLangString:Listings.SearchAgainName %>"></asp:LinkButton>

<br /><br />

</div>

<div class="Search-col-b">

Column B

<br /><br />

<telerik:RadGrid ID="RadGrid1" runat="server" EnableEmbeddedSkins="true" Skin="Sitefinity" ShowHeader="false"

DataSourceID="SqlDataSource1" AllowPaging="True" PageSize="5" Height="700px" >

<PagerStyle Mode="NextPrevAndNumeric" />

<MasterTableView TableLayout="Fixed">

<ItemTemplate>

<table>

<tr>

<td>

<asp:Image ID="Image1" Style="float: left;" Width="150px" Height="100px" ImageUrl='<%# Eval("PicturePath")%>'

BorderWidth="1px" runat="server" AlternateText="Stock Image" />

</td>

<td>

</td>

<td>

<div>

<ul>

<li>

<%# Eval("ListingStreetAddress")%>

</li>

<li>

<label>Beds: </label><%# Eval("Bedrooms")%>

</li>

<li>

<label>Baths: </label><%# Eval("Bathrooms")%>

</li>

<li>

<label>Price: </label><%# Eval("ListingPrice")%>

</li>

</ul>

</div>

</td>

</tr>

</table>

</ItemTemplate>

</MasterTableView>

<ClientSettings AllowDragToGroup="false">

<Scrolling AllowScroll="true" UseStaticHeaders="false" />

</ClientSettings>

</telerik:RadGrid>

<br /><br />

<asp:Label ID="SqlText" runat="server" Text="Label"></asp:Label>

<br /><br />

</div>

<div class="Search-col-c">

Column C

</div>

<div class="clear">

</div>

<br />

</div>

<br /><br />

</div>

<asp:SqlDataSource ID="SqlDataSource1" ConnectionString="" ProviderName="System.Data.SqlClient" SelectCommand="" runat="server"></asp:SqlDataSource>

<style type="text/css">

.xlink {

display:inline-block;

border-radius: 6px;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

position: relative;

padding: 4px 10px 4px 10px;

background:url(images/link-tail.gif) left top repeat-x #232323;

font-size: 12px;

line-height:20px;

color:#fff;

text-decoration:none;

font-weight:bold;

margin:0 5px 0 6px;

}

.xlink:hover

{

background:url(images/link-tail-hover.gif) left top repeat-x #636363;

text-decoration: none;

color:#fff;

}

</style>

<script type="text/javascript">

function aLoadSearchCity(combo, eventArqs) {

var searchcityCombo = $find("<%=SearchCity.ClientID%>");

var searchstateprovCombo = $find("<%=SearchStateProv.ClientID%>");

var item = eventArqs.get_item();

searchcityCombo.set_text("Loading...");

// if a continent is selected

if (item.get_index() > 0) {

// this will fire the ItemsRequested event of the

// property type combobox passing the transaction type as a parameter

searchcityCombo.requestItems(item.get_value(), false);

}

else {

// the -Select a continent- item was chosen

searchcityCombo.set_text(" ");

searchcityCombo.clearItems();

}

function aLoadSearchStateProv(combo, eventArqs) {

var searchcountryCombo = $find("<%=SearchCountry.ClientID%>");

var searchstateprovCombo = $find("<%=SearchStateProv.ClientID%>");

var item = eventArqs.get_item();

searchstateprovCombo.set_text("Loading...");

// if a continent is selected

if (item.get_index() > 0) {

// this will fire the ItemsRequested event of the

// property type combobox passing the transaction type as a parameter

searchstateprovCombo.requestItems(item.get_value(), false);

}

else {

// the -Select a continent- item was chosen

searchstateprovCombo.set_text(" ");

searchstateprovCombo.clearItems();

}

function SearchItemsLoaded(combo, eventArqs) {

if (combo.get_items().get_count() > 0) {

// pre-select the first item

combo.set_text(combo.get_items().getItem(0).get_text());

combo.get_items().getItem(0).highlight();

}

function LoadMyCity(combo, eventArqs) {

var mycityCombo = $find("<%=MyCity.ClientID%>");

var mystateprovCombo = $find("<%=MyStateProv.ClientID%>");

var item = eventArqs.get_item();

mycityCombo.set_text("Loading...");

// if a continent is selected

if (item.get_index() > 0) {

// this will fire the ItemsRequested event of the

// property type combobox passing the transaction type as a parameter

mycityCombo.requestItems(item.get_value(), false);

}

else {

// the -Select a continent- item was chosen

mycityCombo.set_text(" ");

mycityCombo.clearItems();

}

function LoadMyStateProv(combo, eventArqs) {

var mycountryCombo = $find("<%=MyCountry.ClientID%>");

var mystateprovCombo = $find("<%=MyStateProv.ClientID%>");

var item = eventArqs.get_item();

mystateprovCombo.set_text("Loading...");

// if a continent is selected

if (item.get_index() > 0) {

// this will fire the ItemsRequested event of the

// property type combobox passing the transaction type as a parameter

mystateprovCombo.requestItems(item.get_value(), false);

}

else {

// the -Select a continent- item was chosen

mystateprovCombo.set_text(" ");

mystateprovCombo.clearItems();

}

function MyItemsLoaded(combo, eventArqs) {

if (combo.get_items().get_count() > 0) {

// pre-select the first item

combo.set_text(combo.get_items().getItem(0).get_text());

combo.get_items().getItem(0).highlight();

}

</script>

</asp:Content>

Any help would be appreciated!

Lynn

answered on 23 May 2011, 12:51 PM

Lynn-demo.rar

Hello Lynn,

Straight onto your questions:

1) I created a simple demo based on your code but failed to recreate your scenario. Judging by the attached screenshots you have a databinding-related problem. By one reason or another RadGrid does not have access to your data when you change the page.
Please have a look at the attached project and let me know if I'm leaving out something important.

2) The most common choice is the ItemDataBound event however it is triggered only when the control is bound. This means that if you press a button that causes postback, RadGrid will be recreated from ViewState and ItemDataBound won't be triggered.
Note that if you set the connection string/select command on every postback (as in the attached demo) RadGrid will be rebind itself and ItemDataBound will be triggered each time.
If this is not the case, the PreRender (or PreRenderComplete) event might be more suitable for your scenario. You can traverse the items collection and add the pushpins as per your requirements.

Regards,
Daniel
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.