Search code examples
asp.netasp.net-mvcasp.net-mvc-3razorwebgrid

use images instead of text in webgrid asp mvc


How can I change the action links in this webgrid into images? ps: I want all the images to appear in the same column

@{
var grid = new WebGrid(Model, canPage:true ,canSort:true, rowsPerPage :6);
grid.Pager(WebGridPagerModes.NextPrevious);
    @grid.GetHtml(tableStyle: "webGrid", htmlAttributes: new { id = "datatable" },
    headerStyle: "Header",
    alternatingRowStyle: "alt",
    columns: grid.Columns(grid.Column(header: "", format: (item) =>
 new HtmlString(
       Html.ActionLink("Détails", "Details", new { id = item.id_client }).ToString() +
       Html.ActionLink("Modifier", "Edit", new { id = item.id_client }).ToString() +
                Html.ActionLink("Supprimer", "Delete", new { id = item.id_client }).ToString()
 )),
    grid.Column("Nom"),
    grid.Column("Prenom", "Prénom"),
    grid.Column("Email")));


                    }

Solution

  • I've solved this using css classes

    @{
             var grid = new WebGrid(Model, canPage:true ,canSort:true, rowsPerPage :6);
                grid.Pager(WebGridPagerModes.NextPrevious);
                @grid.GetHtml(tableStyle: "webGrid", htmlAttributes: new { id = "datatable" },
                headerStyle: "webgrid-header",
                selectedRowStyle : "webgrid-selected-row",
                footerStyle : "webgrid-footer",
                rowStyle: "webgrid-row-style",
                alternatingRowStyle: "webgrid-alternating-row",
                columns: grid.Columns(
                grid.Column(header: "", format:  (item) =>
                Html.ActionLink("Détails", "ObtenirDifficulte", new { id = item.id_diff}, 
                new { @class = "details" }), style: "actions"),
                grid.Column(header: "", format:  (item) => Html.ActionLink("Modifier", 
                "Edit",
                new { id = item.id_diff }, new { @class = "modifier" }),style : "actions"),
                grid.Column(header: "", format: (item) => Html.ActionLink("Supprimer",
                "Delete", new { id = item.id_diff }, new { @class = "supprimer" }),
                style: "actions"),
                grid.Column("titre", "Titre"),
                grid.Column("description", "Description"),
                grid.Column("tache.nom_tache", "Tâche correspondante")
                ));
    }
    

    And here are the css classes

    .modifier
    {
        background: url(../Images/modifier.png) no-repeat top left ;
        display: block;
        width: 18px;
        height: 24px;
        text-indent: -9999px;
    }
    .details
    {
        background: url(../Images/details.png) no-repeat top left ;
        display: block;
        width: 26px;
        height: 32px;
        text-indent: -9999px;
    }
    .supprimer
    {
        background: url(../Images/supprimer.png) no-repeat  ;
        display: block;
        width: 18px;
        height: 24px;
        text-indent: -9999px;
    }