[Solved] reducing size of buttons bound to a column

[william]

Hi All,
Please find below copy of my code. The edit and delete buttons are taking up far too much screen real estate and should be smaller. However, I'm having a hard time trying to reduce the size. does anybody have any ideas thanks:

@model GRID.ViewModels.PolicyViewModelBase
@{
    ViewBag.Title = "Details";
}
@section header
{
    @{Html.RenderPartial("PolicyHeader");}
}
<div class="frame details">
    <h2>Policy Zones</h2>
    @using (Html.BeginForm())
    {
        @*@Html.Hidden("newZoneTypeId")*@
        <input id="AddZone" type="submit" value="Add Zone" />
        @Html.DropDownListFor(x => x.PolicyZoneID, new SelectList(Model.PolicyZoneTypes, "Value", "Text"))
        @Html.Label("Name:")
        @Html.TextBoxFor(x => x.NewPolicyZoneName)
        <hr />
        @(Html.Telerik().Grid(Model.Zones)
            .Name("policyZoneGrid")
            .DataKeys(keys => keys.Add(r => r.PolicyId))

            .Columns(columns =>
            {
                columns.Bound(r => r.PolicyId).Title("Edit").Sortable(false).Filterable(false)
                        .Template(r => @Html.ActionLink("Edit", "Edit", "PolicyZone",
                        new { policyZoneID = r.Id, policyID = r.PolicyId, policyVersion = r.Version }, new { @class = "editLink", @title = "Edit Zone" })).width(3);
                columns.Bound(r => r.PolicyId).Title("Delete").Sortable(false).Filterable(false)
                        .Template(r => @Html.ActionLink("Delete", "Delete", "PolicyZone",
                        new { policyZoneID = r.Id }, new { @class = "deleteLink", @title = "Delete Zone" })).width(3);

                columns.Bound(r => r.Name).Title("Name").Width(10);
                columns.Bound(r => r.TypeName).Title("Type").Width(10);
                columns.Bound(r => r.CreatedOn).Title("Created On").Width(10).Format("{0:dd/MM/yyyy}");
                columns.Bound(r => r.CreatedBy).Title("Created By").Width(10);
            })
            .Pageable()
            .RowAction(row =>
            {
                if (row.IsAlternate) { row.HtmlAttributes["style"] = "background:aliceblue;"; }
            })

        )

<script type="text/javascript">
    $(".editLink").button({ icons: { primary: "ui-icon-zoomin"} } );
    $(".deleteLink").button({ icons: { primary: "ui-icon-trash"} } );
</script>
    }
</div>

[Dimo]

Hi William,

Two things come across my mind while looking at the provided code snippet.

1. You are using text hyperlinks inside column templates, so the real estate these occupy depends pretty much on the website stylesheets (and the jQuery script, which adds additional button CSS classes), not the Grid itself.

2. The specified column widths are rather strange - if you really want 3px or 10px wide columns, you should make sure the content inside is that small, otherwise it will either overflow or be clipped, depending on the applied styles.

Generally, in such cases we recommend using Firebug to inspect the page elements and finding what styles influence their appearance.

Regards,
Dimo
the Telerik team

[william]

Took me a while to figure it out, but I have found that if I remove the 'Text' element on the actionlink such that it becomes:

columns.Bound(r => r.PolicyId).Title("Edit").Sortable(false).Filterable(false)
                        .Template(r => @Html.ActionLink("Edit", "", "PolicyZone",
                        new { policyZoneID = r.Id, policyID = r.PolicyId, policyVersion = r.Version }, new { @class = "editLink", @title = "Edit Zone" })).Width(3);

and then edit the script to be:

<script type="text/javascript">
    $(".editLink").height(20).width(70).text("Edit").button({ icons: { primary: "ui-icon-zoomin"} });
    $(".deleteLink").height(20).width(90).text("Delete").button({ icons: { primary: "ui-icon-trash"} });
</script>

This works. Note that the button and icon have been shifted to be the last thing declared. Leaving this as the first element does not render the icon????

[Dimo]

Hi William,

So far the problem does not seem to be related to the Grid component. If you test your scenario (text links transformed to buttons using jQuery) outside the Grid and the buttons look differently, please send a runnable demo.

Regards,
Dimo
the Telerik team