Best way to change CSS for @helper GridManageItemColumn

Aug 22, 2014 at 11:22 PM
Bukharin - First, thank you so much for making this! This has really helped me with my project!

This is a pretty low level question, hopefully some other users can help me.

I wanted to create a dropdown button group to combine all the Create, Edit, Detail and Delete views and read about creating an Html.ActionLinks as a way to combine these into the
.RenderValueAs(o => GridManageItemColumn(o.ID).ToHtmlString());
However, since the button group gets put in the table.grid-table tr.grid-row-selected class, which turns the row blue and the a class white it appears blank (see photo link below).

I've tried a few things short of changing the CSS file, but I'm not sure how or what is the best way to achieve what I want, which is to let the button groups css fire on its own. But I get why that's not possible. I've tried adding a few buttons without dropdown as well, and it's not optimal either.

Hopefully this makes sense.
@helper GridManageItemColumn(int id)
{
    <!-- Split button -->
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            Action <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li>@Html.ActionLink("New", "Create", new { ID = id }, null)</li>
            <li>@Html.ActionLink("Edit", "Edit", new { ID = id }, null)</li>
            <li>@Html.ActionLink("Details", "Details", new { ID = id }, null)</li>
            <li class="divider"></li>
            <li>@Html.ActionLink("Delete", "Delete", new { ID = id }, new { @class = "btn btn-danger" })</li>
        </ul>
    </div>
}

@helper GridManageItemColumn(int id)
{
    <!-- button group -->
    <div class="btn-group-sm">
            <button class="btn btn-success">@Html.ActionLink("New", "Create", new { ID = id }, null)</button>
            <button class="btn btn-primary">@Html.ActionLink("Edit", "Edit", new { ID = id }, null)</button>
            <button class="btn btn-info">@Html.ActionLink("Details", "Details", new { ID = id }, null)</button>
            <button class="btn btn-danger">@Html.ActionLink("Delete", "Delete", new { ID = id }, null)</button>
    </div>
}

        @Html.Grid(Model).Columns(columns =>
{
    /* Adding not mapped column, that renders body, using inline Razor html helper */
    columns.Add()
            .Encoded(false)
            .Sanitized(false)
            .SetWidth(200)
            .RenderValueAs(o => GridManageItemColumn(o.ID).ToHtmlString());
Link in case images aren't there.
Image