Hi,
We were using the Kendo Grid in the following way, using JQuery. As you can see in the createTelerikGridControls method,
the columns are being created dynamically. (ie if they should be visible or hidden).
This is done in the controller:
public Dictionary<string, object> GetATMStatusGridData(int id, int userId, int pageId)
{
Dictionary<string, object> dict = new Dictionary<string, object>();
object[] args;
try
{
List<PPSPortal.Models.ATM> atmModelList = GetATMStatusData(id);
List<ColumProperties> deserializedColumnProperties = GetUserPreferencesColumnProperties(userId, pageId);
List<ColumProperties> columns = new List<ColumProperties>();
columns.Add(new ColumProperties { field = "Id", title = "ATM Id", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "Id"), width = 40 });
columns.Add(new ColumProperties { field = "Name", title = "Name", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "Name"), width = 60 });
columns.Add(new ColumProperties { field = "Status", title = "Status", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "Status"), width = 30, template = "#= formatCellColor(Status) #" });
columns.Add(new ColumProperties { field = "Active", title = "Active", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "Active"), width = 30 });
columns.Add(new ColumProperties { field = "Online", title = "Online", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "Online"), width = 30 });
columns.Add(new ColumProperties { field = "TotalCashRemaining", title = "Total Cash Remaining", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "TotalCashRemaining"), width = 70, template = "#= formatToatlCash(TotalCashRemaining) #" });
columns.Add(new ColumProperties { field = "LastMessageFromATM", title = "Last Message From ATM", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "LastMessageFromATM"), width = 80 });
columns.Add(new ColumProperties { field = "LastMessageToATM", title = "Last Message To ATM", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "LastMessageToATM"), width = 80 });
columns.Add(new ColumProperties { field = "GroupName", title = "Group Name", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "GroupName"), width = 50 });
columns.Add(new ColumProperties { field = "Location", title = "ATM Location", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "Location"), width = 140 });
dict.Add("Columns", columns);
dict.Add("Collection", atmModelList);
}
catch (Exception ex)
{
}
return dict;
}
The ColumnProperties class has field, title and hidden properties which is added to the Dictionary object.
this Disctionary object stores:
1. The data (ATM)
2. Columns meta data (ColumnProperties)
In JQuery:
$(document).ready(function () {
// Send an AJAX request
var participantId = $("#ParticipantId").attr("value");
var userId = $("#UserId").attr("value");
var apiUrl = '/api/ATMStatusWebAPI/GetATMStatusGridData/' + participantId + '?userId=' + userId + '&pageId=3';
var grid = $("#grid");
grid.css('color', '#1e426d');
var gridblock = $(".JHADisplayBlock_Grid");
gridblock.hide();
$.getJSON(apiUrl)
.done(function (data) {
var tbl = $(".JHADisplayBlock_Table");
tbl.css("width", "100%");
//GridProperties is a prototype to set the properties of the Grid
var jhaGridProperties = new GridProperties(data.Collection, data.Columns, 20, true, true, false, true, [20, 30, 40, 50], true, true, true, true, "single row", "blue");
createTelerikGridControls(jhaGridProperties);
gridblock.show();
})
.error(function (jqXHR, textStatus, errorThrown) {
//alert("error " + errorThrown);
//alert("incoming Text " + jqXHR.responseText);
})
});
// Create the Telerik controls
function createTelerikGridControls(jhaGridProperties) {
var grids = $(".JHAGrid");
grids.each(function () {
$(this).kendoGrid({
dataSource: {
data: jhaGridProperties.data,
pageSize: jhaGridProperties.pageSize
},
color: jhaGridProperties.color,
groupable: jhaGridProperties.groupable,
scrollable: jhaGridProperties.scrollable,
sortable: jhaGridProperties.sortable,
pageable: {
refresh: jhaGridProperties.refreshPages,
pageSizes: jhaGridProperties.pageSizes
},
filterable: jhaGridProperties.filterable,
selectable: jhaGridProperties.rowSelectableType,
dataBound: addExtraStylingToGrid,
reorderable: jhaGridProperties.reorderable,
columnMenu: {
columns: jhaGridProperties.showColumns
},
toolbar: kendo.template($("#toolbarTemplate").html()),
detailTemplate: kendo.template($("#template").html()),
detailInit: detailInit,
change: onGridClick,
columns: jhaGridProperties.columns
});
});
}
All this works fine.
Now we need to do this in ASP.Net MVC. But I am not able to hide/show the columns in the same way, as Visible needs to be hardcoded to true or false at design time
Could you please help me with this?
@(Html.Kendo().Grid<PPSPortal.Models.ATM>()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetATMStatusGrid", "ATM", new { id = participantId, userId = userId, pageid = 3 }))
.PageSize(10)
.ServerOperation(false)
)
.Name("Grid")
.Sortable()
.Filterable()
.Pageable()
.ColumnMenu()
.Columns(cols=>
{
col.Bound(m => m.Id).Visible(false);
col.Bound(m => m.Name).Visible(true);
})
.Groupable()
)
We were using the Kendo Grid in the following way, using JQuery. As you can see in the createTelerikGridControls method,
the columns are being created dynamically. (ie if they should be visible or hidden).
This is done in the controller:
public Dictionary<string, object> GetATMStatusGridData(int id, int userId, int pageId)
{
Dictionary<string, object> dict = new Dictionary<string, object>();
object[] args;
try
{
List<PPSPortal.Models.ATM> atmModelList = GetATMStatusData(id);
List<ColumProperties> deserializedColumnProperties = GetUserPreferencesColumnProperties(userId, pageId);
List<ColumProperties> columns = new List<ColumProperties>();
columns.Add(new ColumProperties { field = "Id", title = "ATM Id", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "Id"), width = 40 });
columns.Add(new ColumProperties { field = "Name", title = "Name", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "Name"), width = 60 });
columns.Add(new ColumProperties { field = "Status", title = "Status", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "Status"), width = 30, template = "#= formatCellColor(Status) #" });
columns.Add(new ColumProperties { field = "Active", title = "Active", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "Active"), width = 30 });
columns.Add(new ColumProperties { field = "Online", title = "Online", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "Online"), width = 30 });
columns.Add(new ColumProperties { field = "TotalCashRemaining", title = "Total Cash Remaining", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "TotalCashRemaining"), width = 70, template = "#= formatToatlCash(TotalCashRemaining) #" });
columns.Add(new ColumProperties { field = "LastMessageFromATM", title = "Last Message From ATM", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "LastMessageFromATM"), width = 80 });
columns.Add(new ColumProperties { field = "LastMessageToATM", title = "Last Message To ATM", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "LastMessageToATM"), width = 80 });
columns.Add(new ColumProperties { field = "GroupName", title = "Group Name", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "GroupName"), width = 50 });
columns.Add(new ColumProperties { field = "Location", title = "ATM Location", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "Location"), width = 140 });
dict.Add("Columns", columns);
dict.Add("Collection", atmModelList);
}
catch (Exception ex)
{
}
return dict;
}
The ColumnProperties class has field, title and hidden properties which is added to the Dictionary object.
this Disctionary object stores:
1. The data (ATM)
2. Columns meta data (ColumnProperties)
In JQuery:
$(document).ready(function () {
// Send an AJAX request
var participantId = $("#ParticipantId").attr("value");
var userId = $("#UserId").attr("value");
var apiUrl = '/api/ATMStatusWebAPI/GetATMStatusGridData/' + participantId + '?userId=' + userId + '&pageId=3';
var grid = $("#grid");
grid.css('color', '#1e426d');
var gridblock = $(".JHADisplayBlock_Grid");
gridblock.hide();
$.getJSON(apiUrl)
.done(function (data) {
var tbl = $(".JHADisplayBlock_Table");
tbl.css("width", "100%");
//GridProperties is a prototype to set the properties of the Grid
var jhaGridProperties = new GridProperties(data.Collection, data.Columns, 20, true, true, false, true, [20, 30, 40, 50], true, true, true, true, "single row", "blue");
createTelerikGridControls(jhaGridProperties);
gridblock.show();
})
.error(function (jqXHR, textStatus, errorThrown) {
//alert("error " + errorThrown);
//alert("incoming Text " + jqXHR.responseText);
})
});
// Create the Telerik controls
function createTelerikGridControls(jhaGridProperties) {
var grids = $(".JHAGrid");
grids.each(function () {
$(this).kendoGrid({
dataSource: {
data: jhaGridProperties.data,
pageSize: jhaGridProperties.pageSize
},
color: jhaGridProperties.color,
groupable: jhaGridProperties.groupable,
scrollable: jhaGridProperties.scrollable,
sortable: jhaGridProperties.sortable,
pageable: {
refresh: jhaGridProperties.refreshPages,
pageSizes: jhaGridProperties.pageSizes
},
filterable: jhaGridProperties.filterable,
selectable: jhaGridProperties.rowSelectableType,
dataBound: addExtraStylingToGrid,
reorderable: jhaGridProperties.reorderable,
columnMenu: {
columns: jhaGridProperties.showColumns
},
toolbar: kendo.template($("#toolbarTemplate").html()),
detailTemplate: kendo.template($("#template").html()),
detailInit: detailInit,
change: onGridClick,
columns: jhaGridProperties.columns
});
});
}
All this works fine.
Now we need to do this in ASP.Net MVC. But I am not able to hide/show the columns in the same way, as Visible needs to be hardcoded to true or false at design time
Could you please help me with this?
@(Html.Kendo().Grid<PPSPortal.Models.ATM>()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetATMStatusGrid", "ATM", new { id = participantId, userId = userId, pageid = 3 }))
.PageSize(10)
.ServerOperation(false)
)
.Name("Grid")
.Sortable()
.Filterable()
.Pageable()
.ColumnMenu()
.Columns(cols=>
{
col.Bound(m => m.Id).Visible(false);
col.Bound(m => m.Name).Visible(true);
})
.Groupable()
)