KB: Grid (table) layout for results. (C#)

Knowledgebase Home Page > SearchUnit

Search the Knowledge Base

Grid (table) layout for results. (C#)
https://keyoti.com/kb/Default.aspx?ToDo=view&questId=225&catId=54

Options

Print this page
Email this to a friend

To layout the results in a grid (3x3 in this example), we can work with the result item template to add table tags as needed, around the result items.

There are alternative ways, such as using a GridView control, with the result data obtained via SearchResult.DataSet (using the SearchAgent class) – however the method below should be more effective.

Working with a page that has the SearchResult control in it:

1. In the SearchResult control, set the NumberOfResultsPerPage to 9, and add an (empty) onitemcreated event handler.

<SearchEngine:SearchResult ID="SearchResult1" runat="server"

IndexDirectory="~/IndexDirectory" onitemcreated="SearchResult1_ItemCreated" NumberOfResultsPerPage="9">

2. We want to insert table cell HTML elements around the results, depending on the result number being shown, so to do that we need placeholder controls at the start and end of the ResultItem template (which we can work with in the ItemCreated event handler). Modify the ResultItem template in the results page, or, if one doesn’t exist, insert the below inside the <SearchEngine:SearchResult> tag.

<asp:PlaceHolder ID="startPH" runat="server" />

<!—-default layout-->

<tr>

<td class='SEResultItemLink' style='font-family: sans-serif, Verdana, Arial, Helvetica;

font-size: 10pt;'>

<%# Container.Title %></a>

</td>

</tr>

<tr>

<td class='SEResultItemSummary' style='font-family: sans-serif, Verdana, Arial, Helvetica;

font-size: 9pt;'>

<%# Container.Summary%><span class='sew_previewResultWrapper'>...<img alt="Click to preview the document text"

src="<%# Container.ResultPreview_Expander_ClosedUrl %>" onclick="sew_toggleResultPreview(this, '<%# Container.UriAsStored %>', '<%# Container.ResultPreview_Expander_ClosedUrl %>', '<%# Container.ResultPreview_Expander_OpenedUrl %>')" /><span

class='sew_previewResultContent'>Loading document...</span></span>

</td>

</tr>

<tr>

<td class='SEResultItemURL' style='font-family: sans-serif, Verdana, Arial, Helvetica;

font-size: 8pt; color: green;'>

<%# Container.Uri %>

</td>

</tr>

<tr>

<td class='SELocation' style='font-family: sans-serif, Verdana, Arial, Helvetica;

font-size: 8pt; color: gray;'>

<%# Container.Location %>

</td>

</tr>

<tr>

<td class='SEContent' style='font-family: sans-serif, Verdana, Arial, Helvetica;

font-size: 8pt; color: gray;'>

<%# Container.Content %>

</td>

</tr>

</table>

</div>

<br />

<asp:PlaceHolder ID="endPH" runat="server" />

</ResultItemTemplate>

3. In the codebehind, the ItemCreated event handler will need to be like this (with an additional class level field called ‘itemCount’);

int itemCount = 0;

protected void SearchResult1_ItemCreated(object sender, Keyoti.SearchEngine.Web.SearchResultItemEventArgs e)

{

if (e.Item is Keyoti.SearchEngine.Web.ResultItem)

{

Control item = e.Item;

Control startPH = item.FindControl("startPH");

Control endPH = item.FindControl("endPH");

itemCount++;

if(itemCount==1)

startPH.Controls.Add(new LiteralControl("<table border='1'>"));

if (itemCount % 3 == 1)//first in row

startPH.Controls.Add(new LiteralControl("<tr>"));

startPH.Controls.Add(new LiteralControl("<td width='33%'>"));

endPH.Controls.Add(new LiteralControl("</td>"));

if (itemCount % 3 == 0)//last in row

endPH.Controls.Add(new LiteralControl("</tr>"));

if (itemCount == SearchResult1.NumberOfResultsPerPage ||

itemCount == SearchResult1.NumberOfResults - (SearchResult1.NumberOfResultsPerPage * (SearchResult1.ResultsPage - 1)))

{

if (itemCount % 3 != 0)//last in row

endPH.Controls.Add(new LiteralControl("</tr>"));

endPH.Controls.Add(new LiteralControl("</table>"));

}

Basically, as results are created and counted, it ‘inserts’ table elements around the result item, to essentially build a table holding the results. As is, this will show our default result’s template in a grid, and it is of course fairly simple from here to modify the rest of the ResultItem template to give the desired appearance (include images etc).

Note: if your search result page performs a postback, you will probably see that the grid layout is lost. This is because the ItemCreated event doesn't occur for all postbacks, and thus the extra controls we added are lost. To force recreation of the controls (and therefore ItemCreated), please call this

SearchResult1.InvalidateChildControlHierarchy();

in any postback event handler (eg. a button's event handler), but not the Page_Load event handler as this will invalidate the event and cause an exception.