Kendo TreeList Datasource From Controller - asp.net-mvc

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

Related

mvc Kendo grid with an kendo autocomplete column not working

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;
}

How do I use different datasources for kendo UI grid?

I'm not too familiar with Kendo and have watched some tutorials but even following exactly I do not get the same result. I made a page using cached data and pass it as a datasource to the grid in different ways.
In this code, the read method is not being called at all. I have no idea why.
#(Html.Kendo().Grid<TestCategory>().Name("TCategory1").Columns(c =>
{
c.Bound(p => p.Name);
c.Bound(p => p.Id);
})
.DataSource(d => d.Ajax().Read(r => r.Action("Read", "Category").Type(HttpVerbs.Get))
.PageSize(3))
.Pageable()
.Sortable()
.Filterable()
)
In the second grid, I am able to get the data to display but not able to edit
#(Html.Kendo().Grid(Model).Name("TCategory").Columns(c =>
{
c.Bound(p => p.Name);
c.Bound(p => p.Id);
c.Command(com => { com.Edit(); com.Destroy(); });
})
.DataSource(d => d.Ajax().ServerOperation(false).PageSize(3)
.Update(u => u.Action("Edit", "Category"))
.Create(c => c.Action("Create", "Category"))
.Destroy(c => c.Action("Delete", "Category"))
.Model(m => { m.Id(p => p.Id); })
)
.Pageable().Editable(e => e.Mode(GridEditMode.InCell)).Sortable().Filterable().ToolBar(t => t.Create()) )
Read method:
[HttpPost]
public JsonResult Read([DataSourceRequest]DataSourceRequest request)
{
IQueryable<TestCategory> cat = context.Collection();
return Json(cat.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

Kendo Grid edit command not reaching controller

Can someone please help with my question:
The edit command in kendo grid isn't reaching my controller.
Am I missing something?
#(Html.Kendo().Grid<WEEKLY_ORDERS_LINES>()
.Name("orderDetails_edit" + Model.OrderID)
.Columns(columns =>
{
columns.Bound(e => e.ID).Hidden(true);
columns.Bound(e => e.INGRED_NAME).Title("Ingredient Name").Width(120).HeaderHtmlAttributes(new { style = "text-align: center;" }).HtmlAttributes(new { style = "text-align: center;" });
columns.Command(command => { command.Edit(); }).Width(60);
})
.Editable(e => e.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
.Ajax()
.Sort(sort => sort.Add("INGRED_NAME").Ascending())
.Model(model =>
{
model.Id(p => p.ID);
model.Field(p => p.ID).DefaultValue(new Guid());
model.Field(f => f.INGRED_NAME).Editable(true);
})
.Update(update => update.Action("Update", "Food"))
.Read(read => read.Action("Read", "Food").Data("additionalInfo"))
)
.Events(events => events.Cancel("refreshView"))
)
And my controller is like this:
public ActionResult Update([DataSourceRequest] DataSourceRequest request, WEEKLY_ORDERS_LINES model)
{
if (model != null && ModelState.IsValid)
{
WEEKLY_FOOD dbFood = _db.WEEKLY_FOOD.Find(model.ID);
dbFood.INGRED_NAME = model.INGRED_NAME;
_db.SaveChanges();
}
ActionResult a = Json(new[] { model }.ToDataSourceResult(request, ModelState));
return a;
}
I'm a colleague of Rute.
The problem that was ocurring was that the kendo Update was calling other controller and not the right one. This was happening because all the results of the data that were being rendered didn't have an unique identifier.
This unique identifier is now assign to the model.Id and the problem is solved. I understood this after seeing this link http://www.telerik.com/forums/wrong-methods-are-fired.
Thanks for the help.

Kendo Datasource filter not working as expected

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)))

Kendo UI Grid not loading data from datasource ASP.NET MVC

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

Resources