Edit Button in Grid cut in half

2 posts, 0 answers
  1. Neil
    Neil avatar
    31 posts
    Member since:
    Aug 2016

    Posted 04 May Link to this post

    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>
  2. Stefan
    Admin
    Stefan avatar
    1040 posts

    Posted 08 May Link to this post

    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 visualization (charts) and form elements.
Back to Top