I have kendo grid loading data from action
#(Html.Kendo().Grid<trwib_cct.Models.ViewModels.ApplicationUsersVM>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(au => au.FirstName).Title("First Name").Width(200);
columns.Bound(au => au.Roles).Title("CIP Code").Width(150);
columns.Bound(au => au.StateID).Title("Status").Width(50);
columns.Bound(au => au.StateName).Title("State").Width(50);
columns.Bound(au => au.KeystoneID).Title("Keystone ID").Width(50);
columns.Bound(au => au.IsWIAEligible).Title("Is WIA Eligible").Width(150);
//columns.Bound(au => au.StateID).Visible(false);
columns.Bound(au => au.ID).Visible(false);
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("datasource_read_Users", "dashboard", new { trainingProgramID = ViewBag.trainingProgramID }))
)
.Pageable(pager => pager
.Refresh(true)
.Messages(messages => messages.Empty("No Users Found")).PageSizes(true).ButtonCount(1))
)
And the action is
public ActionResult DataSource_Read_Users([DataSourceRequest] DataSourceRequest requestUsers, int trainingProgramID)
{
List<ApplicationUsersVM> results = LoadUsersGridData(trainingProgramID);
DataSourceResult dsr = results.ToDataSourceResult(requestUsers);
return Json(dsr);
}
everything looks good and working but don't know why its not loading the data. even i did not get any error.
Thanks
Related
I'm trying to add an kendo autocomplete column to my kendo grid and its not working. I tried using the telerik example with a datasource function instead of view bag as there will be lots of data to pull from.
i used an kendo autocomplete widget outside the grid and it worked. all i need is to get it to work on the grid column.
i tried the editor templates and its not working. i cant even see the column "Vendor" appearing on the grid.Here's my code.
#(Html.Kendo().Grid<Budget.ProductFieldsTRC>().Name("GridProductsTrc").Columns(columns =>{columns.Bound(p => p.ValidationErrors).Title("Validation Errors").Width(300);columns.Bound(p => p.VendorNo).Title("Vendor No").Width(250);columns.Bound(p => p.Vendor).EditorTemplateName("VendorEditor");columns.Bound(p => p.VendorName).Title("Vendor Name").Width(250);columns.Bound(p => p.Project).Title("Project").Width(250);columns.Bound(p => p.ZZZValue).Title("Prefix").Width(250);columns.Bound(p => p.Manf).Title("Manf").Width(250);columns.Bound(p => p.Type).Title("Type").Width(250);columns.Bound(p => p.Component).Title("Component").Width(250);columns.Bound(p => p.Description).Title("Description").Width(250); columns.Command(command =>
{
command.Edit();
}
)
.Width(200);
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Navigatable()
.Pageable()
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple)
.Type(GridSelectionType.Cell))
.HtmlAttributes(new { style = "height:400px" })
.Resizable(conf => conf.Columns(true))
.Scrollable()
.Pageable(pager => pager
.PageSizes(true)
.Messages(messages => messages.ItemsPerPage("items are currently displayed"))
)
.Reorderable(reorder => reorder.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("error_handler"))
.Update(update => update.Action("UpdateGridTrc", "Customer"))
.PageSize(20)
.Model(model =>
{
model.Id(x => x.RowID);
model.Field(fld => fld.VendorNo).Editable(true);
model.Field(fld => fld.Vendor).Editable(true);
model.Field(fld => fld.VendorName).Editable(true);
model.Field(fld => fld.Project).Editable(true);
model.Field(fld => fld.ZZZValue).Editable(true);
model.Field(fld => fld.Manf).Editable(true);
model.Field(fld => fld.Type).Editable(true);
model.Field(fld => fld.Component).Editable(true);
model.Field(fld => fld.Description).Editable(true);
model.Field(fld => fld.ValidationErrors).Editable(false);
})
.Read(read => read.Action("ViewProductGridTRC", "Customer"))
)
)
MY EDITOR TEMPLATE -in the views/ shared/ editor template folder - called VENDOREDITOR
#model string#(Html.Kendo().AutoComplete().Name("Vendor").DataTextField("VendorName").Placeholder("Type a vendor name").Template("#= VendorNo # | For: #= VendorName #").ValuePrimitive(true).Filter("contains").MinLength(1).DataSource(source =>{source.Read(read =>{read.Action("GetVendorList", "Customer").Data("onAdditionalData");}).ServerFiltering(true);}))
my filtering method for the autocomplete onAdditionalData method
function onAdditionalData() {
return {
text: $("#Vendor").val()
};
}
MY CONTROLLER ACTION METHOD FOR THE AUTOCOMPLETE DATASOURCE
public JsonResult GetVendorList(string text)
{
var result = GetVendors();
if (!string.IsNullOrEmpty(text))
{
result = result.Where(p => p.VendorName.Contains(text)).ToList();
}
return Json(result, JsonRequestBehavior.AllowGet);
}
AND
private static IEnumerable<Vendor> GetVendors()
{var result = Enumerable.Range(0, 10).Select(i => new Vendor{VendorNo = "" + i,VendorName = "Vendor " + i}); return result;
}
I'm using Kendo MVC grid to display data. I have to filter the data based on the url clicked by the user. Below is the code for Kendo grid
View
#(Html.Kendo().Grid<WebApplication2.ApplicationViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.ApplicationStatus).Width(150);
columns.Bound(c => c.StartDate).Width(150).Filterable(ftb => ftb.Cell(cell => cell.Operator("equals")));
columns.Bound(c => c.EndDate).Width(150).Filterable(ftb => ftb.Cell(cell => cell.Operator("equals"))).Groupable(false);
})
.HtmlAttributes(new { style = "height: 500px;width:100%" })
.Groupable()
.Scrollable()
.Filterable(ftb => ftb.Mode(Kendo.Mvc.UI.GridFilterMode.Row)) // Filter Code
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true))
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(true)
.Read(read => read.Action("FetchData", "Home"))
.Filter(f => f.Add(p => p.ApplicationStatus).IsEqualTo(ViewBag.ApplicationStatus))
.Filter(f => f.Add(p => p.StartDate).IsGreaterThanOrEqualTo(Convert.ToDateTime(ViewBag.FromDate)))
.Filter(f => f.Add(p => p.StartDate).IsLessThanOrEqualTo(Convert.ToDateTime(ViewBag.ToDate)))
.PageSize(KendoGridConstants.KendoGridDefaultPageSize)
)
)
Controller Code:
public ActionResult ApplicationGrid(string ApplicationStatus, string fromDate, string toDate)
{
ViewBag.ApplicationStatus = ApplicationStatus == null ? "All" : ApplicationStatus;
ViewBag.FromDate = fromDate == null ? DateTime.Now.ToShortDateString() : Convert.ToDateTime(fromDate).ToShortDateString();
ViewBag.ToDate = toDate == null ? DateTime.Now.ToShortDateString() : Convert.ToDateTime(toDate).ToShortDateString();
return View();
}
public ActionResult FetchData([DataSourceRequest]DataSourceRequest request)
{
var applicationList = Dbcontext.ApplicationStatus;
return Json(applicationList.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
If I keep only one filter on StartDate it works fine but if I keep both the filters, it is showing me some irrelevant data. I need to filter on date range. Any other alternative is also fine.
I know this is really old, but I had the same problem, couldn't find documentation, and ended up, as always, on Stack Overflow. So I'm contributing my solution.
Need to add additional and / or operators to the Filter statement on the DataSource:
.Read(read => read.Action("FetchData", "Home"))
.Filter(f => f.Add(p => p.StartDate).IsGreaterThanOrEqualTo(Convert.ToDateTime(ViewBag.FromDate)))
.And().IsLessThanOrEqualTo(Convert.ToDateTime(ViewBag.ToDate)))
I create a kendo TreeList like this
#(Html.Kendo().TreeList<BEL.EmpTreeBEL>()
.Name("treelist")
.Columns(columns =>
{
columns.Add().Field(e => e.EmpName).Width(250).Title("First Name");
columns.Add().Field(e => e.EmpDept).Title("Departemen Name");
})
.DataSource(dataSource => dataSource
.ServerOperation(false)
.Read(read => read.Action("All", "Home"))
.Model(m => {
m.Id(f => f.EmpId);
m.ParentId(f => f.ReportTo);
m.Field(f => f.EmpName);
m.Field(f => f.EmpDept);
m.Field(f => f.ReportTo);
m.Expanded(true);
})
)
)
and the data populate from this
public JsonResult All([DataSourceRequest] DataSourceRequest request)
{
var result = new EmployeeBLL().EmpListTree.ToTreeDataSourceResult(request,
e => e.EmpId,
e => e.ReportTo
);
return Json(result, JsonRequestBehavior.AllowGet);
}
The problem is, my kendo TreeList only show the parent, and not the child
I get that code from the telerik documentations, there is some code that i don't understand
var result = GetDirectory().ToTreeDataSourceResult(request,
e => e.EmployeeID,
e => e.ReportsTo,
e => id.HasValue ? e.ReportsTo == id : e.ReportsTo == null,
e => e.ToEmployeeDirectoryModel() //i don't understand this part
);
What i'm doing wrong?
Should i create kendo TreeList from javascript? Instead of using Html.Kendo().TreeList?
Thank You
Sorry for My bad english
I am trying to bind a Kendo Grid in Asp.Net MVC but the paging doesn't work. The PageSize and the Total records are correct, the problem is that it isn't possible to navigate to the next page. All the buttons are displayed but they are disabled.
The view's code is:
<% Html.Kendo().Grid(Model)
.Name("PartListGrid")
.Columns(columns =>
{
columns.Bound(p => p.Id).Title("Id").Visible (false);
columns.Bound(p => p.Quantity).Title("Quantity")).Width(130);
columns.Bound(p => p.PartNumber).Title("Part Number").Width(130);
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p=>p.Id))
.PageSize(5)
.ServerOperation(false)
)
.Pageable()
.Render();
%>
The Controller's code :
public ActionResult GetPartListInfo(string id)
{
List<PartListViewModel> partList = new List<PartListViewModel>();
XrmServiceContext xrmServiceContext = new XrmServiceContext();
f1_workorder workOrder = xrmServiceContext.f1_workorderSet.Where(i => i.Id == new Guid(workOrderId)).FirstOrDefault();
PartListViewModel partViewModel = null;
foreach (f1_workorderproduct workorderproduct in xrmServiceContext.f1_workorderproductSet.Where(i => i.f1_WorkOrder.Id == workOrder.Id).ToList())
{
Product product = xrmServiceContext.ProductSet.Where(j => j.Id == workorderproduct.f1_Product.Id).FirstOrDefault();
partViewModel = new PartListViewModel();
partViewModel.Id = workorderproduct.f1_Product.Id.ToString();
partViewModel.Quantity = workorderproduct.f1_EstimateQuantity.GetValueOrDefault(0);
partViewModel.PartNumber = workorderproduct.f1_name;
partList.Add(partViewModel);
}
return View("PartList",partList);
}
Any advice is appreciated!
Thank you very much for your help!
Mimi
I bet you have to throw in a data source read configuration so that the dataset can fetch the data on paging when needed.
.DataSource(dataSource => dataSource
...
.Read(read => read.Action("YourAction", "YourController))
...
In an MVC project i have the following view where i use the Kendo Grid
<%: Html.Kendo().Grid<Milestone>()
.Name("MilestonesGrid")
.Columns(columns =>
{
columns.Bound(p => p.ContractMilestoneID).Hidden();
columns.Bound(p => p.MilestoneSN).Title("Κωδικός οροσήμου");
columns.Bound(p => p.EstimatedDate).Title("Εκτιμώμενη ημερομηνία");
columns.Bound(p => p.RealDate).Title("Πραγματική ημερομηνία");
columns.Bound(p => p.MilestoneDescription).Title("Περιγραφή");
columns.Bound(p => p.Payment).Title("Πληρωμή");
columns.Bound(p => p.PaymentRate).Title("Ποσοστό πληρωμής");
columns.Bound(p => p.IsCompleted).Title("Έχει ολοκληρωθεί");
columns.Command(command =>
{
command.Edit()
.Text("Επεξεργασία")
.CancelText("Ακύρωση")
.UpdateText("Αποθήκευση");
command.Destroy()
.Text("Διαγραφή");
});
})
.ToolBar(toolbar => toolbar.Create().Text("Προσθήκη νέου οροσήμου"))
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Sortable()
.Pageable()
.Filterable()
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(true)
.Model(model => model.Id(o => o.ContractMilestoneID))
.Model(model => model.Field(o => o.MilestoneSN))
.Model(model => model.Field(o => o.EstimatedDate))
.Model(model => model.Field(o => o.RealDate))
.Model(model => model.Field(o => o.MilestoneDescription))
.Model(model => model.Field(o => o.Payment))
.Model(model => model.Field(o => o.PaymentRate))
.Model(model => model.Field(o => o.IsCompleted))
.Batch(true)
.Create(create => create.Action("CreateMilestone", "Milestones"))
.Read(read => read.Action("DetailsJson", "Milestones",
new { id = ViewBag.ID }))
.Update(update => update.Action("UpdateMilestone", "Milestones"))
.Destroy(delete => delete.Action("DeleteMilestone", "Milestones")))
%>
Also i have a controller where i want to save a new entry in the Kendo Grid.
[HttpPost]
public ActionResult CreateMilestone([DataSourceRequest] DataSourceRequest request,
Milestone milestone)
{
if (milestone != null && ModelState.IsValid)
{
using (TADCEntities database = new TADCEntities())
{
tblSymvaseisOrosima item = new tblSymvaseisOrosima
{
fldEstimatedDate = milestone.EstimatedDate,
fldIsCompleted = milestone.IsCompleted,
fldMilestoneDescription = milestone.MilestoneDescription,
fldMilestoneSN = milestone.MilestoneSN,
fldPayment = milestone.Payment,
fldPaymentRate = milestone.PaymentRate,
fldRealDate = milestone.RealDate,
fldStoixeioYpoergouID = milestone.ElementSubProjectID
};
database.tblSymvaseisOrosima.Add(item);
database.SaveChanges();
return Json(new[] { item }.ToDataSourceResult(request, ModelState));
}
}
return View();
// should also return json
}
The problem is that the Milestone type (the parameter in the controller) is always null even if i enter data when i create a new entry in the grid and press save. Any idea what to do in order to pass the entered data in the milestone parameter? Thank you in advance
As I saw in the Fiddler the parameters is posting with models prefix, thus you must access them like this:
public ActionResult CreateMilestone([DataSourceRequest] DataSourceRequest request,
[Bind(Prefix="models")] List<Milestone> milestons)
{
Milestone milestone = milestons[0];
.
.
.
}