Edit Button in Grid cut in half

[Neil]

I have a dynamic grid that I'm binding to the server. Since InCell editing is not available for with Server binding, I had to go to InLine with the Edit Button. When my grid renders I notice that no matter where I put the Edit Button, at the beginning or end of my list of columns, it's cut in half. I also noticed that there is no horizontal scrolling.

Here is my Razor view, attached is what I see after the grid renders. Has anyone seen this behavior before and how they fixed it?

@using SOCKETWorx.Site.Models
@model GridDynamicViewModel

@{
    ViewBag.Title = Model.ModuleName;
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<p>
    @Html.ValidationSummary(true, "", new { @class = "text-danger", id = "ValidationMessenger" })
</p>
<p>
    @(Html.Kendo().DropDownList()
        .Name("dropdownlist_GridViews")
        .DataTextField("Value")
        .DataValueField("Id")
        .HtmlAttributes(new { style = "width:300px" })
        .Events(e => e.Change("GridViews_OnChange"))
        .Value(Convert.ToString(Model.ViewId))
        .DataSource(source => source
            .Custom()
            .Group(g => g.Add("TypeName", typeof(string)))
            .Transport(transport => transport
                .Read(read =>
                {
                    read.Action("GridView_Read", "Data").Data("OnAdditionalData");
                }))
        )
    )
    @(Html.Kendo().Button()
        .Name("button_CreateView")
        .HtmlAttributes(new { type = "button" })
        .Content("Create New View")
        .Events(ev => ev.Click("CreateView_onClick")))
    @(Html.Kendo().Button()
        .Name("button_EditView")
        .HtmlAttributes(new { type = "button" })
        .Content("Edit View")
        .Events(ev => ev.Click("EditView_onClick")))
    @(Html.Kendo().Button()
        .Name("button_CloneView")
        .HtmlAttributes(new { type = "button" })
        .Content("Clone View")
        .Events(ev => ev.Click("CloneView_onClick")))
    <span id="span_ToolTip" style="color: transparent">View</span>
    <hr/>
    @(Html.Kendo().Grid(Model.TheData)
        .Name("grid_GridList")
        .Columns(columns =>
        {
            columns.Command(command => { command.Edit(); });
            if (Model.GridColumns != null)
            {
                columns.Bound(p => p.Id).Hidden();
                foreach (ColumnSettings col in Model.GridColumns)
                {
                    columns.Bound(col.PropertyName).Title(col.Title).Width(col.Width);
                }
            }
        })
        .ToolBar(toolbar =>
        {
            toolbar.Custom().Text("Export To Excel").Action("GenerateReport", "Chart", new { moduleId = Model.ModuleId, viewId = Model.ViewId });
            toolbar.Custom().Text("Spreadsheet Mode").Action("Spreadsheet", "Data", new { moduleId = Model.ModuleId, viewId = Model.ViewId });
        })
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .HtmlAttributes(new { style = "height:75vh" })
        .Sortable()
        .Scrollable()
        .Resizable(r => r.Columns(true))
        .Filterable()
        .Groupable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(false)
            .ButtonCount(5)
        )
        .Events(events =>
        {
            events.DataBound("OnDataBound");
            events.Group("OnGroup");
        })
        .DataSource(dataSource => dataSource
            .Server()
            .PageSize((int)ViewBag.UserInfo.GridSize)
            .Model(model =>
            {
                model.Id(p => p.Id);
                if (Model.GridColumns != null)
                {
                    foreach (ColumnSettings col in Model.GridColumns)
                    {
                        model.Field(col.PropertyName, col.ColType).Editable(col.Editable);
                    }
                }
            })
            .Read(read => read.Action("List", "Data"))
            .Update(update => update.Action("GridList_Update", "Data"))
        )
    )
</p>

@(Html.Kendo().Tooltip()
    .For("#span_ToolTip")
    .Content(Model.ToolTip)
    .Position(TooltipPosition.Right)
    .AutoHide(true)
    .Width(650)
)

<script type="text/javascript">
    $(document).ready(function () {
        try {
            var showGrid = "@Model.ShowGrid";
            if (showGrid.toLowerCase() == "false") {
                $("#grid_GridList").hide();
            }
            else {
                $("#grid_GridList").show();
            }

            var canEdit = "@Model.CanEditView";
            if (canEdit.toLowerCase() == "true") {
                $("#button_EditView").show();
            }
            else {
                $("#button_EditView").hide();
            }

            var toolTip = @Html.Raw(Json.Encode(Model.ToolTip));
            if (toolTip != "") {
                $("#span_ToolTip").show();
            }
            else {
                $("#span_ToolTip").hide();
            }

            var showGridViewControls = "@ViewBag.ShowGridViewControls";
            if (showGridViewControls.toLowerCase() == "false") {
                $("#dropdownlist_GridViews").closest(".k-widget").hide();
                $("#button_CreateView").hide();
                $("#button_CloneView").hide();
            }
        }
        catch(err) {
            $("ValidationMessenger").text(err);
        }
    });

    function GridViews_OnChange() {
        var viewId = $("#dropdownlist_GridViews").val();
        if (viewId == "0" || viewId == "") {
            $("#grid_GridList").hide();
        }
        else {
            $("#grid_GridList").show();
            location.href = '@Url.Action("List", "Data")?moduleId=' + @Model.ModuleId + '&viewId=' + viewId;
        }
    }

    function OnAdditionalData() {
        var moduleId = "@Model.ModuleId";
        var viewId = $("#dropdownlist_GridViews").val();
        return {
            moduleId,
            viewId,
        };
    }

    function OnDataBound(e) {
        var isCadWorx = "@Model.IsCadWorx";
        if (isCadWorx.toLocaleLowerCase() == "false") {
            var that = this;
            $(that.tbody).on("dblclick", "tr", function (e) {
                var rowData = that.dataItem(this);
                location.href = '@Url.Action("Detail", "Data", new {values = "val1" })'.replace("val1", rowData.Id);
            });
        }
    }

    function OnError(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            $("ValidationMessenger").text(message);
        }
    }

    function OnGroup(arg) {
        var groupByFields = [];
        for (iCount = 0; iCount < arg.groups.length; iCount++) {
            groupByFields[iCount] = arg.groups[iCount].field;
        }

        $.ajax({
            type: "POST",
            url: '@Url.Action("UpdateViewGroupedBy", "Data")',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({ fields: groupByFields, viewId: @Model.ViewId }),
            dataType: "json",
            success: function (result) {
                if (result.status != "Success") {
                    var msg = $("#ValidationMessenger");
                    if (msg) {
                        msg.text(result.message);
                    }
                }
            },
            error: function () {
                var msg = $("#ValidationMessenger");
                if (msg) {
                    msg.text(result.message);
                }
            }
        });
    }

    function CreateView_onClick() {
        location.href = '@Url.Action("Index", "ViewManager")?gridviewaction=3&moduleId=' + '@Model.ModuleId' + '&viewId=';
    }

    function EditView_onClick() {
        var viewId = $("#dropdownlist_GridViews").val();
        location.href = '@Url.Action("Index", "ViewManager")?gridviewaction=5&moduleId=' + '@Model.ModuleId' + '&viewId=' + viewId;
    }

    function CloneView_onClick() {
        var viewId = $("#dropdownlist_GridViews").val();
        location.href = '@Url.Action("Index", "ViewManager")?gridviewaction=2&moduleId=' + '@Model.ModuleId' + '&viewId=' + viewId;
    }
</script>

[Stefan]

Hello Neil,

I can assume that the issue occurs because the column with the edit button has no width set:

columns.Command(command => { command.Edit() }).Width(250);

As for the horizontal scrollbar, it will appear if the Grid has a width property set, and the width of the columns is bigger them the width of the Grid:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#scrolling

"To achieve horizontal scrolling, explicitly define the width of all columns in pixels and make sure their sum exceeds the width of the Grid."

Regards,
Stefan
Telerik by Progress