Paging not working in my Telerik Grid - asp.net-mvc-3

I'm working on a grid currently that has an issue with paging. The grid fills up to the point it has 15 items within it. That is the Page Size max, however, pages are not added beyond that. I'm not entirely sure why it does not add pages. Below is my code.
View
var gridPageSize = EngineContext.Current.Resolve<Nop.Core.Domain.Common.AdminAreaSettings>().GridPageSize;
<table class="adminContent">
<tr>
<td>
#(Html.Telerik().Grid<CategoryModel.CategoryUnitsModel>()
.Name("categoryunits-grid")
.DataKeys(keys =>
{
keys.Add(x => x.Id);
keys.Add(x => x.CategoryId);
keys.Add(x => x.UnitId);
})
.DataBinding(dataBinding =>
{
dataBinding.Ajax()
.Select("CategoryUnitsList", "Category", new { categoryId = Model.Id })
.Insert("CategoryUnitsInsert", "Category", new { categoryId = Model.Id })
.Update("CategoryUnitsInsert", "Category", new { categoryId = Model.Id })
.Delete("CategoryUnitsDelete", "Category", new { categoryId = Model.Id });
})
.Columns(columns =>
{
columns.Bound(x => x.UnitId)
.Visible(false);
columns.Bound(x => x.UnitText);
columns.Command(commands =>
{
commands.Edit();
commands.Delete();
})
.Width(100);
})
.ToolBar(commands => commands.Insert())
.Pageable(settings => settings.PageSize(gridPageSize).Position(GridPagerPosition.Both))
.ClientEvents(events => events.OnRowDataBound("onRowDataBound"))
.ClientEvents(events => events.OnEdit("onEdit"))
.EnableCustomBinding(true))
<script type="text/javascript">
function onRowDataBound(e) {
$(e.row).find('a.t-grid-edit').remove(); //remove Delete button
}
function onEdit(e) {
$.getJSON('#Url.Action("LoadAvailableUnits", "Category")', { categoryId: $("#Id").val() }, function (data) {
var ddl = $("#UnitText").data("tDropDownList");
if (data.length > 0) {
ddl.dataBind(data);
ddl.reload();
}
else {
$('a[class="t-button t-grid-cancel"]').click();
alert("There are no Units left to select from");
}
});
}
</script>
</td>
</tr>
</table>
EditorTemplates\CategoryUnit
#using Telerik.Web.Mvc.UI;
#Html.Telerik().DropDownList().Name("UnitText")
Model (CategoryModel.CategoryUnitsModel)
public partial class CategoryUnitsModel : BaseNopEntityModel
{
public int CategoryId { get; set; }
public int UnitId { get; set; }
[NopResourceDisplayName("Admin.Catalog.Categories.Units.Fields.UnitText")]
[UIHint("CategoryUnit")]
public string UnitText { get; set; }
}
Controller
[HttpPost, GridAction(EnableCustomBinding = true)]
public ActionResult CategoryUnitsList(GridCommand command, int categoryId)
{
if (!_permissionService.Authorize(StandardPermissionProvider.ManageCatalog))
return AccessDeniedView();
var categoryUnits = _unitsService.GetCategoryUnits(categoryId, command.Page - 1, command.PageSize);
var categoryUnitsModel = PrepareCategoryUnitsModel(categoryUnits);
var model = new GridModel<CategoryModel.CategoryUnitsModel>
{
Data = categoryUnitsModel,
Total = categoryUnitsModel.Count
};
return new JsonResult
{
Data = model
};
}
public JsonResult LoadAvailableUnits(int categoryId)
{
var categoryUnits = _unitsService.GetAvailableUnits(categoryId);
var categoryUnitsModel = PrepareAvailableUnitsInModel(categoryUnits);
var returnData = new SelectList(categoryUnitsModel, "UnitId", "UnitText");
return Json(returnData, JsonRequestBehavior.AllowGet);
}
[GridAction(EnableCustomBinding = true)]
public ActionResult CategoryUnitsInsert(GridCommand command, CategoryModel.CategoryUnitsModel model)
{
if (!_permissionService.Authorize(StandardPermissionProvider.ManageCatalog))
return AccessDeniedView();
var searchForEntry = _unitsService.GetCategoryUnitByCategoryIdAndUnitId(model.CategoryId, Int32.Parse(model.UnitText));
if (searchForEntry != null)
{
return CategoryUnitsList(command, model.CategoryId);
}
var categoryUnit = new CategoryUnits
{
UnitId = Int32.Parse(model.UnitText),
CategoryId = model.CategoryId
};
_unitsService.InsertCategoryUnit(categoryUnit);
return CategoryUnitsList(command, model.CategoryId);
}
[GridAction(EnableCustomBinding = true)]
public ActionResult CategoryUnitsDelete(GridCommand command, CategoryModel.CategoryUnitsModel model, int id)
{
if (!_permissionService.Authorize(StandardPermissionProvider.ManageCatalog))
return AccessDeniedView();
var categoryId = model.CategoryId;
_unitsService.DeleteCategoryUnit(model.CategoryId, id);
return CategoryUnitsList(command, categoryId);
}
Any help would be much appreciated. Thanks all.
Kindest Regards,
Chad Johnson

Nevermind, I figured out the issue. In my Controller, when I set the Total when binding the grid, I was using the count of the data that had been bound to the Model instead of the total count that my Entity brought back.

Related

KendoUI (Telerik 2018) - TreeList is not showing newly created record till manual refresh

I am able to create new record in TreeList for MVC. But it shows newly created record only after refreshing the page. Edit and Delete works fine.
Razor Code
#(Html.Kendo().TreeList<KendoEx.Web.Models.Level>()
.Name("lvlTreeList")
.Toolbar(toolbar =>
{
toolbar.Create();
})
.Columns(columns =>
{
columns.Add().Field(e => e.LvlName).Title("Name").Width(120);
columns.Add().Field(e => e.LvlType).Title("Type").Width(80);
columns.Add().Field(e => e.Rating1).Title("Rating 1").Filterable(false).Width(100);
columns.Add().Field(e => e.Rating2).Title("Rating 2").Filterable(false).Width(100);
columns.Add().Command(c =>
{
c.CreateChild().Text("Add child");
c.Edit();
c.Destroy();
}).Width(180);
})
.Editable(e => e.Mode("inline"))
.DataSource(dataSource => dataSource
.Read(read => read.Action("GetLevel", "Level"))
.Create(create => create.Action("Save", "Level"))
.Update(update => update.Action("Save", "Level"))
.Destroy(delete => delete.Action("Remove", "Level"))
.Model(m =>
{
m.Id(f => f.Id);
m.ParentId(f => f.ParentLvl).DefaultValue(0);
m.Expanded(true);
m.Field(f => f.LvlName);
m.Field(f => f.LvlType);
m.Field(f => f.Rating1);
m.Field(f => f.Rating1);
}))
.Height(550))
Controller Methods
public JsonResult GetLevel([DataSourceRequest] DataSourceRequest request)
{
var lvlList = LoadLevels().ToTreeDataSourceResult(request);
return Json(lvlList, JsonRequestBehavior.AllowGet);
}
private IEnumerable<Level> LoadLevels()
{
IEnumerable<Level> lvlList = Enumerable.Empty<Level>(); ;
using (var client = new HttpClient())
{
client.BaseAddress = new Uri(ConfigurationManager.AppSettings["WebApiExUrl"]);
var responseTask = client.GetAsync("getlevel");
responseTask.Wait();
var result = responseTask.Result;
if (result.IsSuccessStatusCode)
{
var readTask = result.Content.ReadAsAsync<FormattedResult<Level>>();
readTask.Wait();
if (string.IsNullOrEmpty(readTask.Result.Error))
{
IEnumerable<Level> tempList = readTask.Result.Data;
lvlList = tempList.Select(m => new Level
{
Id = m.Id,
LvlName = m.LvlName,
LvlType = m.LvlType,
ParentLvl = m.ParentLvl,
Rating1 = m.Rating1,
Rating2 = m.Rating2,
hasChildren = tempList.Where(s => s.ParentLvl == m.Id).Count() > 0
});
}
}
}
return lvlList;
}
public JsonResult Save([DataSourceRequest] DataSourceRequest request, Level level)
{
if (level != null && ModelState.IsValid)
{
try
{
using (var client = new HttpClient())
{
client.BaseAddress = new Uri(ConfigurationManager.AppSettings["KpiApiUrl"]);
var postTask = client.PostAsJsonAsync("savelevel", level);
postTask.Wait();
var result = postTask.Result;
if (result.IsSuccessStatusCode)
{
var readTask = result.Content.ReadAsStringAsync();
readTask.Wait();
}
}
}
catch (Exception ex)
{
ModelState.AddModelError(string.Empty, "Unexpected error");
}
}
return Json(new[] { level }.ToTreeDataSourceResult(request, ModelState));
}
Model
public class Level
{
public int Id { get; set; }
public string LvlName { get; set; }
public string LvlType { get; set; }
public int? ParentLvl { get; set; }
[RegularExpression(#"^(\d{1,2}(\.\d{0,2})?)?(<|<=|>|>=)(\d{1,3}(\.\d{0,2})?)$", ErrorMessage = "Invalid")]
public string Rating1 { get; set; }
[RegularExpression(#"^(\d{1,2}(\.\d{0,2})?)?(<|<=|>|>=)(\d{1,3}(\.\d{0,2})?)$")]
public string Rating2 { get; set; }
}
If the 'Save' method returns
return Json(LoadLevels().ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);
instead of
return Json(new[] { level }.ToTreeDataSourceResult(request, ModelState));
the TreeList shows duplicate records
The 'Save' event of TreeList also behaves in the same way.
function onSave() {
$("#lvlTreeList").data("kendoTreeList").dataSource.read();
}
Version Info: Telerik 2018.1.221.545, MVC 5.2, .NET 4.6
Please advise on this. Thanks.
Demo Link: https://demos.telerik.com/aspnet-mvc/treelist/editing
Calling read() in Sync event of DataSource, refreshes the TreeList and displays newly created level.
Razor Code
#(Html.Kendo().TreeList<..>()
.Name("lvlTreeList")
/*..*/
.DataSource(dataSource => dataSource
.Events(e => e.Sync("lvlTreeList_Sync"))
/*...*/
))
Javascript
<script>
function lvlTreeList_Sync() {
this.read();
}
</script>
Refer: https://www.telerik.com/forums/refresh-after-upda

How to display the collection in the library dynamically Highcharts - Bind collection with Highcharts in MVC

The data from the model under the debugger is correctly displayed in the loop while the graph does not generate. I send two letters to the model - List of periods and a list of orders.
//Model
public class ChartsOrderViewModel
{
public List<DataInfo> ListPeriod { get; set; }
public List<DataInfo> ListQuantity { get; set; }
}
public class DataInfo
{
public string Data { get; set; }
public string Period { get; set; }
public int Quantity { get; set; }
public DataInfo()
{
this.Data = Data;
this.Period = Period;
this.Quantity = Quantity;
}
}
//Controller
public ActionResult ChartsOrder(ChartsOrderViewModel viewModel)
{
List<Order> listaZlecenUzytkownika = new List<Order>();
List<DataInfo> ListaData = new List<DataInfo>();
List<DataInfo> ListaDataPeriod = new List<DataInfo>();
List<DataInfo> ListaDataQuantity = new List<DataInfo>();
ArrayList xValue = new ArrayList();
ArrayList yValue = new ArrayList();
ArrayList ListaxValue = new ArrayList();
listOrderUser = db.Zlecenia.OrderBy(w => w.IdUser).ToList();
ListData = listOrderUser.OrderBy(p => p.DateOfAcceptance).Select(w => new DataInfo { Data = w.DateOfAcceptance.ToString().Substring(0, 7) }).ToList();
ListDataPeriod = ListData.GroupBy(c => c.Data).Select(z => new DataInfo { Period = z.Key }).ToList();
ListDataQuantity = ListData.GroupBy(c => c.Data).Select(z => new DataInfo { Quantity = z.Count() }).ToList();
viewModel.ListPeriod = ListDataPeriod;
viewModel.ListQuantity = ListDataQuantity;
// viewModel.ListPeriod.ToList().ForEach(p => xValue.Add(p.Period));
// viewModel.ListQuantity.ToList().ForEach(p => yValue.Add(p.Quantity));
// ViewData["ListaOkresowCzasowych"] = viewModel.ListaIlosc;
// ViewData["IloscZlecenWOkresie"] = viewModel.ListaIlosc;
return View(viewModel);
}
//View
#model AplikacjaHelpDesk.ViewModels.ChartsOrderViewModel
#{
ViewBag.Title = "Charts";
Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}
<script src="~/Scripts/Highcharts-4.0.1/js/highcharts.js"></script>
<script src="~/Scripts/Highcharts-4.0.1/js/modules/exporting.js"></script>
<h2>Charts Bar</h2>
<div id="chartsBar" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
<br />
<script type="text/javascript">
$(function () {
$('#chartsBar').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Period orders'
},
subtitle: {
text: 'Chart'
},
xAxis: {
categories:
[
#foreach (var item in Model.ListPeriod)
{
#item.Period
}
],
},
yAxis: {
min: 0,
title: {
text: 'Quantity'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
borderWidth: 0
}
},
series: ({
name: 'Ilość',
data: [
#foreach (var item in Model.ListQuantity)
{
#item.Quantity
}
]
})
});
});
</script>
How should the data in the view be displayed in order to display the graph correctly?.That is the number of orders in a given period. I am asking for an example with series data in MVC Highcharts.
Try changing the code responsible for generating categories to this:
categories:
[
#{
var result = "";
foreach (var item in Model.ListPeriod)
{
result += "'" + item.Period +"',";
}
result = result.Remove(result.Length - 1);
}
#Html.Raw(result)
],
and the block that creates data to this:
data: [
#{
var resultQ = "";
foreach (var item in Model.ListQuantity)
{
resultQ += item.Quantity + ",";
}
resultQ = resultQ.Remove(resultQ.Length - 1);
}
#Html.Raw(resultQ)
]

MVC 3 Model binding and No parameterless constructor defined for this object

I created a view that was working wonderfully until I added some JQuery to support cascading drop downs. I believe in doing that, I broke the binding between the view and the model. I'm getting the error "No parameterless constructor defined for this object." when the form is submitted. The obvious solution would be to add a parameterless constructor, but I'm assuming that the postmodel will be null? Code Snippets below.
Thanks in Advance for your help.
View:
<script type="text/javascript">
$(document).ready(function () {
$("#ddlCategories").change(function () {
var iCategoryId = $(this).val();
$.getJSON(
"#Url.Content("~/Remote/SubCategoriesByCateogry")",
{ id: iCategoryId },
function (data) {
var select = ResetAndReturnSubCategoryDDL();
$.each(data, function (index, itemData) {
select.append($('<option/>', { value: itemData.Value, text: itemData.Text }));
});
});
});
function ResetAndReturnSubCategoryDDL() {
var select = $('#ddlSubCategory');
select.empty();
select.append($('<option/>', { value: '', text: "--Select SubCategory--" }));
return select;
}
});
...
<div class="editor-field">
#Html.DropDownList("iCategoryID", Model.Categories,"--Select Category--", new Dictionary<string,object>{ {"class","dropdowns"},{"id","ddlCategories"}})
#Html.ValidationMessage("iCategoryID")
</div>
<div class="editor-label">
#Html.LabelFor(model => model.SubCategories, "SubCategory")
</div>
<div class="editor-field">
#Html.DropDownListFor(model => model.SubCategories, new SelectList(Enumerable.Empty<SelectListItem>(), "iSubCategoryID", "SubCategory",Model.SubCategories), "--Select SubCategory--", new { id = "ddlSubCategory" })
#Html.ValidationMessage("iSubCategoryID")
</div>
Controller:
[HttpPost]
public ActionResult Create(VendorCreateModel postModel)
{
VendorCreateEditPostValidator createValidator = new VendorCreateEditPostValidator(
postModel.iCategoryID,
postModel.iSubCategoryID,
postModel.AppliedPrograms,
m_unitOfWork.ProgramRepository,
new ModelStateValidationWrapper(ModelState));
if (ModelState.IsValid)
{
int categoryId = int.Parse(postModel.iCategoryID);
int subcategoryId = int.Parse(postModel.iSubCategoryID);
var programIds = postModel.AppliedPrograms.Select(ap => int.Parse(ap));
var programs = m_unitOfWork.ProgramRepository.GetPrograms(programIds);
Vendor vendor = postModel.Vendor;
vendor.Category = m_unitOfWork.CategoryRepository.GetCategory(categoryId);
vendor.SubCategory = m_unitOfWork.SubCategoryRepository.GetSubCategory(subcategoryId);
foreach (Program p in programs)
vendor.Programs.Add(p);
m_unitOfWork.VendorRepository.Add(vendor);
m_unitOfWork.SaveChanges();
return RedirectToAction("Index");
}
VendorCreateModel model = new VendorCreateModel(
postModel.Vendor,
postModel.iCategoryID,
postModel.iSubCategoryID,
postModel.AppliedPrograms,
User.Identity.Name,
m_unitOfWork.CategoryRepository,
m_unitOfWork.SubCategoryRepository,
m_unitOfWork.PermissionRepository);
return View(model);
}
RemoteController:
[AcceptVerbs(HttpVerbs.Get)]
public JsonResult SubCategoriesByCateogry(int id)
{
System.Diagnostics.Debug.WriteLine(id);
var SubCategories = db.SubCategories
.Where(v => v.iCategoryID == id)
.OrderBy(v => v.sDesc)
.ToList();
var modelData = SubCategories.Select(v => new SelectListItem()
{
Text = v.sDesc,
Value = v.iSubCategoryID.ToString()
});
return Json(modelData, JsonRequestBehavior.AllowGet);
}
VendorCreateModel:
public class VendorCreateModel
{
public VendorCreateModel()
{
}
public VendorCreateModel(
Vendor vendor,
string categoryId,
string subcategoryId,
IEnumerable<string> appliedPrograms,
string username,
ICategoryRepository categoryRepository,
ISubCategoryRepository subcategoryRepository,
IPermissionRepository permissionRepository)
{
UserHasProgramsValidator programValidator = new UserHasProgramsValidator(username, permissionRepository);
var availablePrograms = programValidator.AvailablePrograms;
HashSet<Category> applicableCategories = new HashSet<Category>();
foreach (var p in availablePrograms)
foreach (var c in categoryRepository.GetCategoriesByProgram(p.iProgramID))
applicableCategories.Add(c);
this.Vendor = vendor;
this.AppliedPrograms = appliedPrograms;
this.Categories = new SelectList(applicableCategories.OrderBy(x => x.sDesc).ToList(), "iCategoryID", "sDesc");
this.SubCategories = new SelectList(subcategoryRepository.GetAllSubCategories().OrderBy(x => x.sDesc).ToList(), "iSubCategoryID", "sDesc");
if (!string.IsNullOrEmpty(categoryId))
{
int temp;
if (!int.TryParse(categoryId, out temp))
throw new ApplicationException("Invalid Category Identifier.");
}
this.iCategoryID = categoryId;
this.iSubCategoryID = subcategoryId;
this.ProgramItems = availablePrograms
.Select(p => new SelectListItem()
{
Text = p.sDesc,
Value = p.iProgramID.ToString(),
Selected = (AppliedPrograms != null ? AppliedPrograms.Contains(p.iProgramID.ToString()) : false)
});
}
public Vendor Vendor { get; set; }
public SelectList Categories { get; set; }
public SelectList SubCategories { get; set; }
public string iCategoryID { get; set; }
public string iSubCategoryID { get; set; }
public IEnumerable<SelectListItem> ProgramItems { get; set; }
[AtLeastOneElementExists(ErrorMessage = "Please select at least one program.")]
public IEnumerable<string> AppliedPrograms { get; set; }
}
I correct the issue and wanted to share in case someone else was banging their head against their desk like Ihave been. Basically I changed the dropdownlistfor to reflect:
#Html.DropDownListFor(model => model.iSubCategoryID, new SelectList(Enumerable.Empty<SelectListItem>(), "iSubCategoryID", "SubCategory",Model.SubCategories), "--Select SubCategory--", new Dictionary<string,object>{ {"class","dropdowns"},{"id","ddlSubCategory"},{"name","iSubCategoryID"}})
Assuming here the problem is in your VendorCreateModel, you either need to add a parameterless constructor or remove it, and create an instance in your action method and populate it by TryUpdateModel. Or parse the form using FormsCollection (not a fan).
You don't have the code for your viewmodel posted here but the basic assumption is that it will map.

Load data in Telerik grid by dropdownlist selected value

I am a beginner in Telerik Grid in ASP.NET MVC3. I try to bind Grid with dropdownlist selected value. Please see my code below.
My web model class
public class CustomerEventRolesModels
{
public int Event { get; set; }
public IEnumerable<System.Web.Mvc.SelectListItem> Events { get; set; }
public Telerik.Web.Mvc.GridModel<CustomerEventRolesModel> GridData { get; set; }
}
public class CustomerEventRolesModel : BaseNopEntityModel
{
public string Customer { get; set; }
public bool Sponsor { get; set; }
public bool Speaker { get; set; }
}
My .cshtml
<table id="grdCustomerEventRoleData" class="adminContent" style="display: none">
<tr>
<td>
<p>
</p>
</td>
</tr>
<tr>
<td>
#(Html.Telerik().Grid<CustomerEventRolesModel>(Model.GridData.Data)
.Name("grdCustomerEventRoles")
.Columns(columns =>
{
columns.Bound(x => x.Customer);
columns.Bound(x => x.Speaker).Template(x => Html.CheckBox("spk", x.Speaker));
columns.Bound(x => x.Sponsor).Template(x => Html.CheckBox("spn", x.Sponsor));
}
) .Pageable(settings => settings.Total(Model.GridData.Total)
.PageSize(gridPageSize)
.Position(GridPagerPosition.Both))
.ClientEvents(events => events.OnDataBinding("onDataBinding"))
.DataBinding(dataBinding => dataBinding.Ajax().Select("FilterByDropdown", "Customer"))
.EnableCustomBinding(true))
) )
</td>
</tr>
<script type="text/javascript">
var initialLoad = true;
$("#select-event").change(function () {
if ($("#select-event option:selected").val() > 0) {
$("#grdCustomerEventRoleData").show();
$("#grdCustomerEventRoles").data("tGrid").rebind();
}
else {
$("#grdCustomerEventRoleData").show();
}
});
function onDataBinding(e) {
if (initialLoad == true) {
e.preventDefault();
initialLoad = false;
}
else {
var classificationId = $("#select-event option:selected").val();
if (classificationId != "")
e.data = $.extend(e.data, {
selEvent: classificationId
});
else {
e.preventDefault();
$("#grdCustomerEventRoleData").hide();
}
}
}
Actions in controller
public ActionResult FirstBind()
{
if (!_permissionService.Authorize(StandardPermissionProvider.ManageCustomers))
return AccessDeniedView();
var model = new CustomerEventRolesModels();
model.Event = 0;
List<Nop.Core.Domain.Catalog.Product> products = _productRepository.Table.Where(p => p.EventDate != null && p.EventDate >= DateTime.Now).ToList();
model.Events = products.Select(p => new System.Web.Mvc.SelectListItem
{
Text = p.Name,
Value = p.Id.ToString()
});
var grdmodel = new GridModel<CustomerEventRolesModel>
{
Data = null,
Total = 0
};
model.GridData = grdmodel;
return View(model);
}
[HttpPost, GridAction(EnableCustomBinding = true)]
public ActionResult FilterByDropdown(GridCommand command, int selEvent)
{
if (!_permissionService.Authorize(StandardPermissionProvider.ManageCustomers))
return AccessDeniedView();
if (selEvent == 0)
return View();
var model = new CustomerEventRolesModels();
model.Event = selEvent;
var roles = (from lst in _customerEventRoleRepository.Table
join cust in _customerRepository.Table on lst.CustomerId equals cust.Id
join product in _productRepository.Table on lst.EventId equals product.Id
join role in _customerRoleRepository.Table on lst.RoleId equals role.Id
orderby lst.Id descending
select new CustomerEventRolesModel
{
Id = lst.Id,
Customer = cust.Email,
Sponsor = (role.Name == "Sponsor") ? true : false,
Speaker = (role.Name == "Speaker") ? true : false
}).ToList();
var grdmodel = new GridModel<CustomerEventRolesModel>
{
Data = roles,
Total = roles.Count
};
model.GridData = grdmodel;
return new JsonResult
{
Data = model
};
}
FilterByDropdown action is works correctly but Grid is not binded.
I am clueless.
Please help.
If you want to add a dropdown to a Telerik MVC Grid when editing a row, you will need to follow next few steps (aside from making the grid ajax bound and the rows editable).
Let’s say we want the column representing a name (“Name” from the model) to be a dropdown, from which a name can be selected rather than typed. Add a folder named “EditorTemplates” to the folder containing the view that the grid is on. It will contain a separate partial view for each dropdown we want to show in the row that is being edited. Make a partial view (mentioned above), name it e.g. “ClientName.cshtml”, containing a Telerik DropDownList named “Name” and bound to required list of names.
#(Html.Telerik().DropDownList()
.Name("Name")
.BindTo(new SelectList((IEnumerable)ViewData["CustomerNames"], "Text", "Value"))
)
Add the following attribute to the “Name” property of the data type that the grid uses e.g. Grid uses “Customer” class, containing “string Name” field:
public class Customer{ [UIHint("ClientName"), Required] public string Name { get; set; } }
The UIHint property specifies which field template to use when a specific column is rendered.
Add the following java script to the page containing the grid function:
function onEditCustomerList(e) { if (e.dataItem != null) { $(e.form).find('#Name').data('tDropDownList').select(function (dataItem) { return dataItem.Text == e.dataItem['Name']; });
} }
This should do the trick.
You're returning the wrong model.
Try this in FilterByDropdown:
var grdmodel = new GridModel<CustomerEventRolesModel>
{
Data = roles,
Total = roles.Count
};
return new JsonResult
{
Data = grdmodel
};

Data binding MVC3

I have no idea what am i doing wrong.
Well i have this form, it's part of complex view.
#{
var filtersAjaxOptions = new AjaxOptions
{
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "clientList-body",
OnBegin = "clientList.filterRequestStart()",
OnComplete = "clientList.filterRequestComplete()",
OnSuccess = "clientList.filterRequestSuccess()"
};
}
<span class="clientFilters-filterValue inlineBlock">
#using (Ajax.BeginForm(
"Index",
"ClientList",
new {
ProductId = Model.ClientListViewModel.Filters.ProductId,
ClientFilter = Model.ClientListViewModel.Filters.ClientFilter,
BillFilter = Model.ClientListViewModel.Filters.BillFilter,
DateSortType = Model.ClientListViewModel.Filters.DateSortType,
SortDirection = Model.ClientListViewModel.Filters.SortDirection
},
filtersAjaxOptions,
new
{
id = "clientListDateFilter-form"
}
))
{
#Html.TextBoxFor(
m => m.ClientListViewModel.Filters.BeginDateRange,
new
{
#class = "dp-input textInput inlineBlock",
id = "dp-billDateFilterStart",
}
)
#Html.TextBoxFor(
m => m.ClientListViewModel.Filters.EndDateRange,
new
{
#class = "dp-input textInput inlineBlock",
id = "dp-billDateFilterEnd",
}
)
}
</span>
Here's the filters model
public class FilterModel
{
public FilterModel()
{
ClientFilter = ClientsEnum.All;
BillFilter = ClientBillsEnum.All;
}
public string ProductId { get; set; }
public ClientsEnum ClientFilter { get; set; }
public ClientBillsEnum BillFilter { get; set; }
public DateTime? BeginDateRange { get; set; }
public DateTime? EndDateRange { get; set; }
public DateSortType? DateSortType { get; set; }
public SortDirection? SortDirection { get; set; }
}
This part is ClientListController method Index:
public ActionResult Index(FilterModel filters)
{
var clientListViewModel = GetClientListViewModel(filters, 1, 1, PageSize);
if (ControllerContext.HttpContext.Request.IsAjaxRequest())
return PartialView("Partial/ClientListBody", clientListViewModel);
return View(clientListViewModel);
}
Whenever i submit the form above, it turns to me that fields "BeginDateRange" and "EndDateRange" are null and other fields are set properly. Although, when i insert Request.Form in Watch, i can see the whole data.
UPDATE 1
So i set the <globalisation> in Web.config as this:
<globalisation responseHeaderEncoding="utf-8" culture="en-US">
and yet it doesn't work. Very same result as before.
UPDATE 2
Also when i tried to put all the routevalues data into #Html.HiddenFor, controller saw only nulls. And again, Request.Form is filled prprly.
So the question is: how can i bind form data to incoming model?
TY
The default model binder uses the current culture datetime format when binding datetimes. This means that you have to enter the date into the proper format in your textboxes. On the other hand if you need a fixed format you could use a fixed culture in your web.config (<globalization> element) or write a custom model binder: https://stackoverflow.com/a/7836093/29407
UPDATE:
You need to specify the correct binding prefix because your input fields are named like ClientListViewModel.Filters.BeginDateRange but your controller action takes a FilterModel as parameter instead of the root view model:
public ActionResult Index([Bind(Prefix = "ClientListViewModel.Filters")] FilterModel filters)
{
...
}
But now this will break the other values, so you need to adjust your view as well:
#using (Ajax.BeginForm(
"Index",
"ClientList",
null,
filtersAjaxOptions,
new
{
id = "clientListDateFilter-form"
}
))
{
#Html.HiddenFor(x => x.ClientListViewModel.Filters.ProductId)
#Html.HiddenFor(x => x.ClientListViewModel.Filters.ClientFilter)
#Html.HiddenFor(x => x.ClientListViewModel.Filters.BillFilter)
#Html.HiddenFor(x => x.ClientListViewModel.Filters.DateSortType)
#Html.HiddenFor(x => x.ClientListViewModel.Filters.SortDirection)
#Html.TextBoxFor(
m => m.ClientListViewModel.Filters.BeginDateRange,
new
{
#class = "dp-input textInput inlineBlock",
id = "dp-billDateFilterStart",
}
)
#Html.TextBoxFor(
m => m.ClientListViewModel.Filters.EndDateRange,
new
{
#class = "dp-input textInput inlineBlock",
id = "dp-billDateFilterEnd",
}
)
}
or if you want to send them as part of the form url instead if using hidden fields:
#using (Ajax.BeginForm(
"Index",
"ClientList",
new RouteValueDictionary
{
{ "ClientListViewModel.Filters.ProductId", Model.ClientListViewModel.Filters.ProductId },
{ "ClientListViewModel.Filters.ClientFilter", Model.ClientListViewModel.Filters.ClientFilter },
{ "ClientListViewModel.Filters.BillFilter", Model.ClientListViewModel.Filters.BillFilter },
{ "ClientListViewModel.Filters.DateSortType", Model.ClientListViewModel.Filters.DateSortType },
{ "ClientListViewModel.Filters.SortDirection", Model.ClientListViewModel.Filters.SortDirection },
},
filtersAjaxOptions,
new RouteValueDictionary
{
{ "id", "clientListDateFilter-form" }
}
))
{
#Html.TextBoxFor(
m => m.ClientListViewModel.Filters.BeginDateRange,
new
{
#class = "dp-input textInput inlineBlock",
id = "dp-billDateFilterStart",
}
)
#Html.TextBoxFor(
m => m.ClientListViewModel.Filters.EndDateRange,
new
{
#class = "dp-input textInput inlineBlock",
id = "dp-billDateFilterEnd",
}
)
}
Try this:
public ActionResult Index(FilterModel filters, FormCollection collection)
{
UpdateModel(filters, "ClientListViewModel");
var clientListViewModel = GetClientListViewModel(filters, 1, 1, PageSize);
if (ControllerContext.HttpContext.Request.IsAjaxRequest())
return PartialView("Partial/ClientListBody", clientListViewModel);
return View(clientListViewModel);
}
And in view:
#Html.TextBoxFor(
m => m.ClientListViewModel.FilterModel.EndDateRange,
new
{
#class = "dp-input textInput inlineBlock",
id = "dp-billDateFilterEnd",
}
)
You have strange naming. Also it would be better to use hidden fields then passing values through routevalues.

Resources