I have a kendo grid where user can select list of columns from grid and save the selection by giving name (i.e view name). Each saved selection (view name) will show up as drop-down above grid so that user can change grid columns whenever they want. In current implementation, whenever user selects view name from one drop-down value to other, im calling action method to select that view name as current view name. Then page reloads to invoke Index' action method to retrieve current view names columns values. I am using visible attribute in grid to show and hide columns in grid.
Now i was wondering if i can update the grid columns without reloading the page when user change the view name from the dropdown. I know kendo has ColumnMenu which helps to choose and hide columns without reloading the page, however i couldn't figure out a way to save/reload user selection done in Columns section.
It would be nice if the user could hide/show columns using 'ColumnMenu' and also be able to save the state in view name and show the view name in the dropdown. I saw this example http://demos.telerik.com/kendo-ui/grid/persist-state to persist the state of the grid however as there is limitation with not being able to save toolbar information, i couldn't use this solution.
Any suggestion how i can resolve this issue?
ViewModel:
namespace
MvcApplicatioin.Models
{
public
class
EmployeeViewModel
{
public
EmployeeColumns EmployeeColumns {
get
;
set
; }
public
IEnumerable<SelectListItem> EmployeeViewNames {
get
;
set
; }
public
long
EmployeeSelectedViewId {
get
;
set
; }
}
public
class
EmployeeResponse
{
public
int
Id {
get
;
set
; }
public
string
FirstName {
get
;
set
; }
public
string
LastName {
get
;
set
; }
}
public
class
EmployeeColumns
{
public
bool
Id {
get
;
set
; }
public
bool
FirstName {
get
;
set
; }
public
bool
LastName {
get
;
set
; }
}
}
Controller:
public
class
EmployeeController : Controller
{
// GET: Employee
public
ActionResult Index()
{
var service =
new
EmployeeService();
EmployeeViewModel model =
new
EmployeeViewModel();
long
currentViewId;
//setup views and column preferences
EmployeeColumns employeeColumns = service.GetCurrentEmployeeColumnsPreferences();
model.EmployeeColumns = employeeColumns;
model.EmployeeViewNames = service.GetAllEmployeeViewNames(
out
currentViewId);
model.EmployeeSelectedViewId = currentViewId;
return
View(model);
}
}
View:
@using Kendo.Mvc.UI
@{
ViewBag.Title = "Employee Info:";
}
<
h3
style
=
"margin-bottom: 10px;"
>Employee Info</
h3
>
<
input
id
=
"btnSearch"
type
=
"button"
value
=
"Search"
class
=
"btn_Search"
/>
<
div
class
=
"row"
>
<
div
class
=
"col-sm-12"
>
@(Html.Kendo().Grid<
MvcApplicatioin.Models.EmployeeResponse
>()
.Name("GridEmployee")
.Columns(columns =>
{
columns.Bound(e => e.Id).Width("170px").Visible(Model.EmployeeColumns.Id);
columns.Bound(e => e.FirstName).Width("190px").Visible(Model.EmployeeColumns.FirstName);
columns.Bound(e => e.LastName).Width("170px").Visible(Model.EmployeeColumns.LastName);
})
.ToolBar(tools =>
{
tools.Template(@<
text
>
<
div
class
=
"col-lg-4 col-md-5 col-sm-5 col-xs-7 pull-right"
style
=
"padding-right: 0;"
>
<
div
class
=
"form-group"
style
=
"margin-bottom: 0;"
>
@Html.Label("Grid View:", new { @class = "col-sm-3 col-xs-4 control-label view" })
<
div
class
=
"col-sm-7 col-xs-6"
style
=
"padding-left: 0;"
>
@Html.DropDownList("lstEmployeeViewNames", new SelectList(Model.EmployeeViewNames, "Value", "Text", Model.EmployeeSelectedViewId), "- Select View Name -", new { @class = "form-control", @style = "height: auto;" })
</
div
>
</
div
>
</
div
>
</
text
>);
})
.Pageable(x => x.PageSizes(new int[] { 10, 20, 50, 100 }).ButtonCount(4))
.AutoBind(false)
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.ServerOperation(false)
.Read(read => read.Action("SearchEmployee", "Employee")))
)
</
div
>
</
div
>
<!--//row-->
<
script
type
=
"text/javascript"
>
$('#btnSearch').click(function (e) {
e.preventDefault(); //This prevent the submit button onclick from submitting by itself
$('#GridEmployee').data('kendoGrid').dataSource.read();
});
//Change event for Dropdown placed inside the Grid's Toolbar - To Change the view
$("#lstEmployeeViewNames").change(function (e) {
var selectedViewId = $('select#lstEmployeeViewNames option:selected').val();
if (selectedViewId == null || selectedViewId == '') {
alert("Please select the view name from the dropdown first !!");
return;
}
$.post("/Employee/SetEmployeeColumnsCurrentPreferences", { viewId: selectedViewId }, function (data) {
window.top.location.reload();
});
});
</
script
>