Custom Style

To use a custom style for your table, you can implement the IMVCGridRenderingEngine to create your table. Everything you need to populate your table will be given to you in the RenderingModel object. Once you have the implementation, set the property on your grid definition to use your new rendering engine: gridDef.DefaultRenderingEngine = typeof(CustomHtmlRenderingEngine);. This same method could also be used to create custom export formats.

IdFirst Name (Sort)Last Name (Sort)Status (Sort)
370PatrickAdamsInactive
493KarenAdamsActive
570NancyAdamsInactive
599EricAdamsInactive
635ChristineAdamsInactive
663BonnieAdamsInactive
778RonaldAdamsInactive
820SeanAdamsInactive
897JudithAdamsActive
857MichaelAlexanderActive
652HowardAlexanderInactive
339JerryAlexanderInactive
55SusanAlexanderActive
190AmyAlexanderActive
250NicholasAllenActive
472DeniseAllenActive
171JessicaAlvarezInactive
127JanetAlvarezInactive
661MildredAlvarezInactive
855MarieAlvarezInactive


Code

CustomHtmlRenderingEngine.cs
    public class CustomHtmlRenderingEngine : IMVCGridRenderingEngine
{
    public bool AllowsPaging
    {
        get { return true; }
    }
    public void PrepareResponse(HttpResponse response)
    {
    }
    public void Render(MVCGrid.Models.RenderingModel model, System.IO.Stream outputStream)
    {
        StringBuilder sb = new StringBuilder();
        sb.Append("<table class='customStyleTable'><thead><tr>");
        foreach (var col in model.Columns)
        {
            sb.Append("<th"); if (!string.isnullorwhitespace(col.onclick))
                                {
                                sb.appendformat(" onclick='{0}' ", col.Onclick);
            }
            sb.Append(">");
            sb.Append(col.HeaderText);
            if (col.SortIconDirection.HasValue)
            {
                switch (col.SortIconDirection.Value)
                {
                    case MVCGrid.Models.SortDirection.Asc:
                        sb.Append(" (Ascending)");
                        break;
                    case MVCGrid.Models.SortDirection.Dsc:
                        sb.Append(" (Descending)");
                        break;
                    case MVCGrid.Models.SortDirection.Unspecified:
                        sb.Append(" (Sort)");
                        break;
                }
            }
            sb.Append("</th>");
        }
        sb.Append("</tr></thead><tbody>");
        foreach (var row in model.Rows)
        {
            sb.Append("<tr"); if (!string.isnullorwhitespace(row.calculatedcssclass))
                                {
                                sb.appendformat(" class='{0}' ", row.CalculatedCssClass);
            }
            sb.Append(">");
            foreach (var col in model.Columns)
            {
                var cell = row.Cells[col.Name];
                sb.Append("<td"); if (!string.isnullorwhitespace(cell.calculatedcssclass))
                                    {
                                    sb.appendformat(" class='{0}' ", cell.CalculatedCssClass);
                }
                sb.Append(">");
                sb.Append(cell.HtmlText);
                sb.Append("</td>");
            }
            sb.Append("</tr>");
        }
        sb.Append("</tbody></table>");
        if (model.PagingModel != null)
        {
            sb.Append("<div><ul>");
            foreach (var pl in model.PagingModel.PageLinks)
            {
                sb.Append("<li class='pageItem'>");
                sb.AppendFormat("<a href='#' onclick='{0}'>{1}</a>", pl.Value, pl.Key);
                sb.Append("</li>");
            }
            sb.Append("</ul></div>");
        }
        using (StreamWriter sw = new StreamWriter(outputStream))
        {
            sw.Write(sb.ToString());
        }
    }
}