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>