This question is locked. New answers and comments are not allowed.
I created every thing, paging and sorting is working fine, but resizing and filtering is not working.
For resizable, i find that <div class=t-resize-handle"><div> is not adding in my grid.
I added folowing css and js file.
CSS
<link href="@Url.Content("~/Content/css/telerik/telerik.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/css/telerik/telerik.vista.min.css")" rel="stylesheet" type="text/css" />
JS
/////////////////////////-------------------------------------------------------------------------------------//////////////////////////////
Action code
public ActionResult ColumnResizing(IDictionary<string, int> config)
{
ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";
var activityModelList = new List<ActivityModel>();
activityModelList.Add(new ActivityModel {action_type_code =12, activity_id = "ere", activity_no = "3odod" });
activityModelList.Add(new ActivityModel { action_type_code = 12, activity_id = "ere", activity_no = "3odod" });
activityModelList.Add(new ActivityModel { action_type_code = 12, activity_id = "ere", activity_no = "3odod" });
activityModelList.Add(new ActivityModel { action_type_code = 12, activity_id = "ere", activity_no = "3odod" });
activityModelList.Add(new ActivityModel { action_type_code = 12, activity_id = "ere", activity_no = "3odod" });
activityModelList.Add(new ActivityModel { action_type_code = 12, activity_id = "ere", activity_no = "3odod" });
if (config != null)
{
config = new Dictionary<string, int>
{
{"GridWidth", 0},
{"OrderIDWidth", 100},
{"ContactNameWidth", 200},
{"ShipAddressWidth", 450},
{"OrderDateWidth", 130}
};
}
ViewData["config"] = config;
return View(activityModelList);
}
//////////////////////////-------------------------------------------------------------------------------------//////////////////////////////
View Code
@model IEnumerable<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++;
}
}
</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>
is not working fine for resizing.
Kindly help.
Thanks
Pravin
For resizable, i find that <div class=t-resize-handle"><div> is not adding in my grid.
I added folowing css and js file.
CSS
<link href="@Url.Content("~/Content/css/telerik/telerik.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/css/telerik/telerik.vista.min.css")" rel="stylesheet" type="text/css" />
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>
/////////////////////////-------------------------------------------------------------------------------------//////////////////////////////
Action code
public ActionResult ColumnResizing(IDictionary<string, int> config)
{
ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";
var activityModelList = new List<ActivityModel>();
activityModelList.Add(new ActivityModel {action_type_code =12, activity_id = "ere", activity_no = "3odod" });
activityModelList.Add(new ActivityModel { action_type_code = 12, activity_id = "ere", activity_no = "3odod" });
activityModelList.Add(new ActivityModel { action_type_code = 12, activity_id = "ere", activity_no = "3odod" });
activityModelList.Add(new ActivityModel { action_type_code = 12, activity_id = "ere", activity_no = "3odod" });
activityModelList.Add(new ActivityModel { action_type_code = 12, activity_id = "ere", activity_no = "3odod" });
activityModelList.Add(new ActivityModel { action_type_code = 12, activity_id = "ere", activity_no = "3odod" });
if (config != null)
{
config = new Dictionary<string, int>
{
{"GridWidth", 0},
{"OrderIDWidth", 100},
{"ContactNameWidth", 200},
{"ShipAddressWidth", 450},
{"OrderDateWidth", 130}
};
}
ViewData["config"] = config;
return View(activityModelList);
}
//////////////////////////-------------------------------------------------------------------------------------//////////////////////////////
View Code
@model IEnumerable<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++;
}
}
</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>
is not working fine for resizing.
Kindly help.
Thanks
Pravin