This question is locked. New answers and comments are not allowed.
Resizing and filtering is not working in telerik mvc grid.
Paging and Sorting is properly working.
I included following file js and css file.
JS :
<script src="@Url.Content("~/Scripts/telerik/telerik.grid.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/telerik/telerik.common.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/telerik/telerik.grid.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/telerik/telerik.grid.filtering.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/telerik/telerik.draganddrop.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/telerik/telerik.grid.resizing.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/telerik/telerik.grid.grouping.min.js")" type="text/javascript"></script>
CSS :
<link href="@Url.Content("~/Content/css/telerik/telerik.vista.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/css/telerik/telerik.rtl.min.css")" rel="stylesheet" type="text/css" />
View Code :
@model IEnumerable<Models.ConsultationActivitiesModel>
@{
var config = (IDictionary<string, int>)ViewData["config"];
}
@{ Html.BeginForm("columnresizing", "grid"); }
<p>
@{
int i = 0;
foreach (var setting in config)
{
// Create a hiden for the key and value of each item in the dictonary
@Html.Hidden("config[" + i + "].key", setting.Key)
@Html.Hidden("config[" + i + "].value", setting.Value)
i++;
}
}
<button class="t-button t-state-default" type="submit">Save Column Widths</button>
</p>
@{ Html.EndForm(); }
@(Html.Telerik().Grid(Model)
.Name("Grid")
.TableHtmlAttributes(new { style = "width:" + (config["GridWidth"] > 0 ? config["GridWidth"] + "px" : "100%") })
.Columns(column =>
{
column.Bound(p => p.action_type).Title("Activity").Width(400);
column.Bound(p => p.facility_name).Title("Facility Name").Width(350);
column.Bound(p => p.Due_Date).Format("{0:d}").Groupable(false).Title("Due Date").Width(100);
})
.Scrollable()
.Resizable(resizing => resizing.Columns(true))
.Sortable()
.Pageable()
.Filterable()
.ClientEvents(events => events.OnColumnResize("onResize"))
.DataBinding(dataBinding => dataBinding.Ajax().Select("_ColumnResizing", "Grid"))
.Resizable(c =>
{
c.Columns(true);
})
.Reorderable(c =>
{
c.Columns(true);
})
.ColumnContextMenu()
)
<script type="text/javascript">
function onResize(e) {
// update the hidden values which will be posted as IDictionary<string,int>
var grid = $('#Grid').data('tGrid');
$('#config_0__value').val(grid.$tbody.outerWidth());
var index = $.inArray(e.column, grid.columns) + 1;
$('#config_' + index + '__value').val(e.newWidth);
}
</script>
///////////////////////////////////////////////-------------------------------------------------------------------------------////////////////////////
Cs Code
[GridAction(GridName = "ActivityGrid")]
public ActionResult GetActivity(GridCommand command)
{
try
{
//LoginDetail.ProgramID = "TESTING";
ViewData["total"] = _activityRepository.GetActivityCount(LoginDetail.ProgramID);
List<ConsultationActivitiesModel> data = new List<ConsultationActivitiesModel>();
if (command.SortDescriptors.Count() > 0)
{
data = _activityRepository.GetConsultationActivitiesByProgramIdForSorting(LoginDetail.ProgramID, 20, command.Page == 0 ? 0 : ((command.Page - 1) * 20), command.SortDescriptors).ToList();
return View(data);
}
data = _activityRepository.GetConsultationActivitiesByProgramId(LoginDetail.ProgramID, 20, command.Page == 0 ? 0 : ((command.Page - 1) * 20)).ToList();
return View(data);
}
catch (Exception ex)
{
throw (ex);
}
}
Paging and Sorting is properly working.
I included following file js and css file.
JS :
<script src="@Url.Content("~/Scripts/telerik/telerik.grid.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/telerik/telerik.common.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/telerik/telerik.grid.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/telerik/telerik.grid.filtering.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/telerik/telerik.draganddrop.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/telerik/telerik.grid.resizing.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/telerik/telerik.grid.grouping.min.js")" type="text/javascript"></script>
CSS :
<link href="@Url.Content("~/Content/css/telerik/telerik.vista.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/css/telerik/telerik.rtl.min.css")" rel="stylesheet" type="text/css" />
View Code :
@model IEnumerable<Models.ConsultationActivitiesModel>
@{
var config = (IDictionary<string, int>)ViewData["config"];
}
@{ Html.BeginForm("columnresizing", "grid"); }
<p>
@{
int i = 0;
foreach (var setting in config)
{
// Create a hiden for the key and value of each item in the dictonary
@Html.Hidden("config[" + i + "].key", setting.Key)
@Html.Hidden("config[" + i + "].value", setting.Value)
i++;
}
}
<button class="t-button t-state-default" type="submit">Save Column Widths</button>
</p>
@{ Html.EndForm(); }
@(Html.Telerik().Grid(Model)
.Name("Grid")
.TableHtmlAttributes(new { style = "width:" + (config["GridWidth"] > 0 ? config["GridWidth"] + "px" : "100%") })
.Columns(column =>
{
column.Bound(p => p.action_type).Title("Activity").Width(400);
column.Bound(p => p.facility_name).Title("Facility Name").Width(350);
column.Bound(p => p.Due_Date).Format("{0:d}").Groupable(false).Title("Due Date").Width(100);
})
.Scrollable()
.Resizable(resizing => resizing.Columns(true))
.Sortable()
.Pageable()
.Filterable()
.ClientEvents(events => events.OnColumnResize("onResize"))
.DataBinding(dataBinding => dataBinding.Ajax().Select("_ColumnResizing", "Grid"))
.Resizable(c =>
{
c.Columns(true);
})
.Reorderable(c =>
{
c.Columns(true);
})
.ColumnContextMenu()
)
<script type="text/javascript">
function onResize(e) {
// update the hidden values which will be posted as IDictionary<string,int>
var grid = $('#Grid').data('tGrid');
$('#config_0__value').val(grid.$tbody.outerWidth());
var index = $.inArray(e.column, grid.columns) + 1;
$('#config_' + index + '__value').val(e.newWidth);
}
</script>
///////////////////////////////////////////////-------------------------------------------------------------------------------////////////////////////
Cs Code
[GridAction(GridName = "ActivityGrid")]
public ActionResult GetActivity(GridCommand command)
{
try
{
//LoginDetail.ProgramID = "TESTING";
ViewData["total"] = _activityRepository.GetActivityCount(LoginDetail.ProgramID);
List<ConsultationActivitiesModel> data = new List<ConsultationActivitiesModel>();
if (command.SortDescriptors.Count() > 0)
{
data = _activityRepository.GetConsultationActivitiesByProgramIdForSorting(LoginDetail.ProgramID, 20, command.Page == 0 ? 0 : ((command.Page - 1) * 20), command.SortDescriptors).ToList();
return View(data);
}
data = _activityRepository.GetConsultationActivitiesByProgramId(LoginDetail.ProgramID, 20, command.Page == 0 ? 0 : ((command.Page - 1) * 20)).ToList();
return View(data);
}
catch (Exception ex)
{
throw (ex);
}
}