Custom message inside the webgrid if empty - asp.net-mvc-3

Question

#if (Model.ActivityCollection.Count > 0)
{
var grid = new WebGrid(source: Model.ActivityCollection, rowsPerPage: 12, canSort: false);
#grid.GetHtml(tableStyle: "webGrid",
headerStyle: "header",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column("EffectiveDate", "Effective Date", style: "date"),
grid.Column("PremiumPaymentAmount", "Premium Payment Amount", style: "amount"),
grid.Column("PaymentType", "Payment Type", style: "date")
));
}
else
{
}
I would like to display a message "No Payment Information Found" inside the web grid in the above else statement. Can someone help me with this?

Answer 1

<div class="grid" style="margin-left:5px;" id="grid">
#if (Model.ActivityCollection.Count > 0)
{
var grid = new WebGrid(source: Model.ActivityCollection, rowsPerPage: 12, canSort: false);
#grid.GetHtml(tableStyle: "webGrid",
headerStyle: "header",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column("EffectiveDate", "Effective Date", style: "date"),
grid.Column("PremiumPaymentAmount", "Premium Payment Amount", style: "amount"),
grid.Column("PaymentType", "Payment Type", style: "date")
));
}
else
{
<div class="grid">
<table cellspacing="0" width="80%">
<thead>
<tr>
<th>Effective Date</th>
<th>Premium Payment Amount</th>
<th>Payment Type</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3" align="center" ><br />No payment information found<br /><br /> </td>
</tr>
</tbody>
</table>
<br/><br/><br/><br/>
</div>
}
</div>

Answer 2

I made this jQuery-function to be triggered when the grid has loaded, and if there is no data in the table it will insert a new row in the empty table to display the text. Much more manageable than building a replica of the WebGrid in HTML.
I added a row style to the Webgrid, to identify the rows (not wanting the header+footer): "webGridDataRow".
function addNoDataTextIfNeeded(){
if($(".webGrid .webGridDataRow").length < 1){ //if there are no data-rows in table, our text should be displayed
var newCell = $("<td>") //create the cell
.attr("colspan", $(".webGrid tr:first th").length) //set colspan so it will span entire grid width (counting the number of column headers)
.text("No data found"); //add the text to be displayed
$("<tr>").append(newCell).appendTo(".webGrid"); //add the cell to a row to the grid :)
}
}

Answer 3

you can do something like this?
public class MyWebGrid : WebGrid
{
public WebGridMkf(IEnumerable<dynamic> source = null,
IEnumerable<string> columnNames = null,
string defaultSort = null,
int rowsPerPage = 10,
bool canPage = true,
bool canSort = true,
string ajaxUpdateContainerId = null,
string ajaxUpdateCallback = null,
string fieldNamePrefix = null,
string pageFieldName = null,
string selectionFieldName = null,
string sortFieldName = null,
string sortDirectionFieldName = null) :
base(source, columnNames, defaultSort, rowsPerPage, canPage, canSort, ajaxUpdateContainerId, ajaxUpdateCallback, fieldNamePrefix, pageFieldName, sortFieldName, sortDirectionFieldName)
{
}
public IHtmlString Table(string tableStyle = null,
string headerStyle = null,
string footerStyle = null,
string rowStyle = null,
string alternatingRowStyle = null,
string selectedRowStyle = null,
string caption = null,
bool displayHeader = true,
bool fillEmptyRows = false,
string emptyRowCellValue = null,
IEnumerable<WebGridColumn> columns = null,
IEnumerable<string> exclusions = null,
Func<dynamic, object> footer = null,
object htmlAttributes = null)
{
if (this.TotalRowCount.Equals(0))
{
return new HtmlString("<div>teste</div>");
}
return base.Table(tableStyle, headerStyle, footerStyle, rowStyle, alternatingRowStyle, selectedRowStyle, caption, displayHeader, fillEmptyRows, emptyRowCellValue, columns, exclusions, footer, htmlAttributes);
}
}
and call:
var grid = new MyWebGrid(
ajaxUpdateContainerId: "grid-test",
rowsPerPage: 10,
defaultSort: "id"
);
grid.Bind(
source: Model.ActivityCollection,
rowCount: Model.ActivityCollection.Count
);
#grid.Table(
alternatingRowStyle: "color1",
rowStyle: "color0",
tableStyle: "webgrid table table-striped table-hover table-condensed",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
footer: #<span></span>,
columns: grid.Columns(
grid.Column(columnName: "id",
header: "ID",
style: "column-id",
canSort: true)
)
)