This is a migrated thread and some comments may be shown as answers.

Edit Button in Grid cut in half

1 Answer 19 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Neil
Top achievements
Rank 1
Neil asked on 04 May 2017, 09:49 PM

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>

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 08 May 2017, 12:29 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
Tags
Grid
Asked by
Neil
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or