ajouter une ligne dans webgrid

Question

Je travaille avec MVC 3 webgrid et j'ai besoin d'ajouter une nouvelle ligne dans webgrid pour montrer la somme du prix de la table des produits.
Toutes les idées sont appréciées.
Voici mon code

@{ 
WebGrid grid = new WebGrid(source: Model, 
          rowsPerPage: 3, 
          canSort: true, 
          canPage: true, 
          ajaxUpdateContainerId: "ajaxgrid"); 


@grid.GetHtml(
    alternatingRowStyle: "altrow", 
    mode: WebGridPagerModes.All, 
    firstText: "<< ", 
    previousText: "< ", 
    nextText: " >", 
    lastText: " >>", 
    columns: grid.Columns(
      grid.Column(format: (item) => new HtmlString(Html.ActionLink("Edit", "Edit", new { id = item.ProductId }).ToString() + " | " + 
                 Html.ActionLink("Delete", "Delete", new { id = item.ProductId }).ToString() 
                 ) 
         ), 
      grid.Column("ProductId", "Product Id"), 
      grid.Column("CategoryId", "Category Name", format: (item) => item.Category.CategoryName), 
      grid.Column("ProductName", "Product Name"), 
      grid.Column("Price", "Price", format: @<text>@String.Format("{0:c}", item.Price)</text>) 
    ) 
) 

}

Answer 1

C'est un terrible bidouille mais il m'a permis de faire ma journée. Je pense que la façon de le faire correctement est d'écrire un Helper Html qui vous permet de passer dans la ligne de pied de page. Je suis un peu déçu du WebGrid ne pas une ligne de bas de page construit.

gridHtml = MvcHtmlString.Create(gridHtml.ToString().Replace("</table>", sbTotalsTable.ToString())); 

    gridHtml is from var gridHtml = @grid.GetHtml....blah.. 


    the sbTotalsTable is var sbTotalsTable = new StringBuilder(); 

    sbTotalsTable.Append("<tr>"); 

    sbTotalsTable.Append("<td>"); 

    sbTotalsTable.Append(DataSource.Select(s=>s.PropToSum).Sum().ToString();//The total of that column 
    sb.TotalsTable.Append("</td>"); 
    sb.TotalsTable.Append("</tr>"); 
    sb.TotalsTable.Append("</table>");//closing the table without opening it because the rest comes from the gridHtml. 

seulement se assurer que vous correspondez le nombre de colonnes dans votre ligne de table construite à la main. Notez qu'il n'y a pas de balise de début de table .. L'idée est de détourner le html créé à la fermeture de la table et d'ajouter une ligne. Désolé pour le code tapé à la main. Je suis sur une application propriétaire et je n'ose rien y coller ...

Answer 2

Ajoutez un nouvel élément à IEnumerable que vous utilisez comme source pour le WebGrid à lier.

var lineItems = Model.LineItems; 
var totalRow = new SalesLineItem 
       { 
        SaleType = "Total Sales", 
        Amount = Model.TotalSales 
       }; 
lineItems.Add(totalRow); 

var grid = new WebGrid(lineItems); 

Je n'ai pas encore trouvé une bonne façon d'appliquer le formatage à cette ligne totale. Cela pourrait devoir être fait côté client.

Answer 3

J'ai eu un problème similaire, j'ai donc créé une extension du MVC WebGrid intégré. L'utilisation de code et d'exemple est au https://gist.github.com/3211605. J'espère que c'est utile.

Answer 4

Si vous êtes d'accord avec l'utilisation de JQuery et ayant la teneur en pied de page ne pas être aligné colonne, l'ajout d'un pied de page à un WebGrid est un peu hacky, mais pas difficile:

@{ 
    var grid = new WebGrid(...); 
} 
@grid.GetHtml(
    ..., 
    htmlAttributes: new { id = "myTable" } 
) 

<span id="footerContent">This will be in footer</span> 

<script> 
    $().ready(function() { 
    $('#footerContent').appendTo('#myTable tfoot tr td:last'); 
    } 
</script> 

Les bases sont:

1. Set ID HTML de votre table attribut, en utilisant le paramètre htmlAttributes de WebGrid.GetHtml()
2. Mettez le contenu du pied de page dans un élément sur votre page
3. U La méthode .appendTo() de JQuery permet d'ajouter l'élément de contenu à la fin de l'élément TD du pied de page

Une solution plus robuste devrait s'assurer que ces éléments existent, mais vous en avez l'idée.

En supposant que votre modèle contient déjà la somme (ou une méthode pour obtenir la somme), juste construire votre pied de page comme:

<span id="footerContent">@Model.Total</span>