Below is a sample of MVC Kendo UI Grid bound via Ajax to a WebAPI. The WebAPI uses OpenAccess ORM as data model.
The below code loads the grid with the auto generated columns as per the model and the WebAPI is called successfully and data returned in JSON as given below.
The issue seems to be in grid data binding. The data is not visible in the grid but the columns are loaded successfully. What is missing in the MVC code?
JSON Data:
[{"DC_ID":51234,"DATAACCESS_ID":79238,"MASTERDATA_FLG":"Y","INPUT_TYPE_CD":"QRY","FILE_PATH":"D:\","DESCR":"AAA DATA CAPTURE","STATUS":"A","CREATED_BY":"SYSTEM","CREATED_DTTM":"01-JAN-2013"},{"DC_ID":79238,"DATAACCESS_ID":79238,"MASTERDATA_FLG":"Y","INPUT_TYPE_CD":"QRY","FILE_PATH":"D:\","DESCR":"TEST DATA CAPTURE","STATUS":"A","CREATED_BY":"SYSTEM","CREATED_DTTM":"01-JAN-2013"}]
MVC code:
#(Html.Kendo().Grid<eConverge.DomainModel.Datacapture>()
.Name("Grid")
.Columns(columns =>
{
columns.AutoGenerate(true);
})
.ToolBar(tools =>
{
tools.Create();
})
//.Sortable()
//.Pageable()
//.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.DC_ID);
})
.Read(read => read.Url("http://localhost/econ/econ.webapi/api/datacaptures").Type(HttpVerbs.Get))
.Create(create => create.Url("http://localhost/econ/econ.webapi/api/datacaptures").Type(HttpVerbs.Post))
.Update(update => update.Url("http://localhost/econ/econ.webapi/api/datacaptures").Type(HttpVerbs.Put))
.Destroy(destroy => destroy.Url("http://localhost/econ/econ.webapi/api/datacaptures").Type(HttpVerbs.Delete))
)
)
There is some more code required to bind the grid to Web API controller. I recommend checking the following resources:
http://www.kendoui.com/blogs/teamblog/posts/12-11-29/the_facts_on_using_kendo_ui_with_asp_net_webapi.aspx
http://www.kendoui.com/code-library/mvc/grid/binding-to-a-web-apicontroller.aspx
Related
I am binding Kendo Grid from ASP.NET MVC as follows:
#(Html.Kendo().Grid<My.Web.Models.Generated.CustomerSearch01.CityInfo>()
.Name("gridCities")
.Columns(columns =>
{
columns.Bound(c => c.Text).Width(140).Title("City");
})
.Scrollable()
.Selectable(selectable => selectable.Type(GridSelectionType.Row))
.BindTo(Model.CitiesList)
.DataSource(ds => ds.Server().Model(m => m.Id(p => p.Value)))
)
That works fine and the grid shows up on the page with data and I have no problems with above. However, using browser developer tools, if I try to get the data of the above grid using the following statement, it returns empty:
jQuery("#gridCities").data("kendoGrid").dataSource.data()
What am I missing?
Thanks in advance
Solution (based the answer):
replace the following:
.DataSource(ds => ds.Server().Model(m => m.Id(p => p.Value)))
with
.DataSource(ds => ds.Ajax().ServerOperation(false).Model(m => m.Id(p => p.Value)))
You Grid is configured to use ServerBinding which means the TR / TD elements are rendered from the server. If you want to have the JavaScript objects of your model on the client side and do not perform separate Ajax request configure your DataSource to be
ds.Ajax().ServerOperations(false)
This will not perform any Ajax requests, data will be serialized from the server int JSON.
I want to turn on the endless scrolling on a kendo grid, called in this framework as virtual scrolling.
Abstract:
1) I load the page => the Action Virtualization_Read is called (OK)
2) I scroll down the Grid till bottom => the Action Virtualization_Read is called anothter time in order to get more data (KO)
The result is that when I reach the bottom of the grid, with scrollbar, the Action method that retrives the data is not hit anymore.
This is my grid, it shows the traces generated in my application:
#(Html.Kendo().Grid<Credit.Entity.ServiceObjects.MsgBlock>(Model.ListadoTrazas)
.Name("grdTrazas")
.Columns(columns =>
{
columns.Bound(c => c.LogID).Filterable(true);
columns.Bound(c => c.Timestamp).Filterable(false);
columns.Bound(c => c.FormattedMessage).Filterable(false).Width("80%");
})
.Scrollable(s => s.Virtual(true))
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(100)
.ServerOperation(true)
.Read(read => read.Action("Virtualization_Read", "Logging"))
)
)
And this is the MVC3 Action that fetches the data. This Action is called only the first time, when the page is loaded:
public ActionResult Virtualization_Read([DataSourceRequest] DataSourceRequest request)
{
return Json(GetData(request.Page, request.PageSize).ToDataSourceResult(request));
}
[NonAction]
private List<MsgBlock> GetData(int page, int getCount)
{
MVCLogging model = new MVCLogging();
// Fetches the data
return model.ListadoTrazas;
}
The Model MsgBlock has the same properties defined in the Grid Columns method:
LogId
TimeStamp
FormattedMessage
Do I forget anything?
The only potential issue I see here is that you are leveraging server operations on the grid, but initializing the grid with a collection of data instead of letting it fetch the initial data. In the Kendo demo for virtualization using the MVC extensions, the grid definition looks like:
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(o => o.OrderID).Width(60);
columns.Bound(o => o.CustomerID).Width(90);
columns.Bound(o => o.ShipName).Width(220);
columns.Bound(o => o.ShipAddress).Width(280);
columns.Bound(o => o.ShipCity).Width(110);
columns.Bound(o => o.ShipCountry).Width(110);
})
.Sortable()
.Scrollable(scrollable => scrollable.Virtual(true))
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(100)
.Read(read => read.Action("Virtualization_Read", "Grid"))
)
)
Notice that after the type is supplied (Kendo.Mvc.Examples.Models.OrderViewModel) there is no initial set of data supplied, whereas your initialization attempts to give the grid the data it needs to render (Model.ListadoTrazas). Perhaps this is confusing the grid into thinking it has all the data is needs? I would try taking out Model.ListadoTrazas and letting the grid reach out for the data from the get go.
I've recently purchased a Kendo subscription, I'm having trouble getting an AJAX bound grid to operate as expected, hoping someone here can help.
I have followed the Kendo docs tutorial # http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/ajax-binding
and could get the AJAX binding working nicely.
I've tried to now implement it into an existing MVC solution, and whenever I click the New or Edit command button, I get a string of JSON returned to the browser. Similiar to issue (JSON data to KENDO UI Grid ASP.NET MVC 4) But the answer in that problem didn't work for me.
Here is my Controller code...
public ActionResult Index()
{
// non-important code removed here //
var viewModel = newReferenceViewModel();
ViewBag.TradeReferences = TradeReferenceWorker.Get(applicationId);
return View(viewModel);
}
public ActionResult TradeReferences_Read([DataSourceRequest]DataSourceRequest request)
{
var applicationId = GetCurrentApplicationId();
DataSourceResult result = TradeReferenceWorker.Get(applicationId).ToDataSourceResult(request);
return Json(result, "text/x-json", JsonRequestBehavior.AllowGet);
}
And the View ....
#(Html.Kendo().Grid((IEnumerable<TradeReference>)ViewBag.TradeReferences)
.Name("gridTradeReference")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(tradeReference => tradeReference.TradeReferenceId);
model.Field(tradeReference => tradeReference.TradeReferenceId).Editable(false);
})
.Read(read => read.Action("TradeReferences_Read", "References"))
.Create(create => create.Action("TradeReference_Create", "References"))
.Update(update => update.Action("TradeReference_Update", "References"))
.Destroy(destroy => destroy.Action("TradeReference_Destroy", "References"))
)
.Columns(columns =>
{
columns.Bound(tref => tref.TradeReferenceId).Visible(false);
columns.Bound(tref => tref.Name);
columns.Bound(tref => tref.Phone);
columns.Command(commands =>
{
commands.Edit();
commands.Destroy();
}).Title("").Width(200);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Sortable()
)
So to sum up... the Grid will load perfectly the first time. I haven't wired up anything on the Edit / Delete actions, just trying to get Create operational. Clicking Add New, or even Edit for that matter will make the browser simply display Json to the screen.
It is hopefully something simple - thanks in advance
Solved it - the problem was the kendo js files were not being referenced correctly.
In my particular case, the bundling wasn't done 100% correctly so the Kendo javascript files were never getting included in the page.
They must also appear in a certain order, as described in the troubleshooting guide http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/troubleshooting
I am trying to dynamically add grid filters in my view using the html helper via datasource configuration, like this example from the kendo documentation:
#(Html.Kendo().Grid<Product>()
.Name("grid")
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Products_Read", "Home"))
.Filter(filters =>
{
if (someCondition){
// Show products whose ProductName property contains "C"
filters.Add(product => product.ProductName).Contains("C");
// and UnitsInStock is greater than 10
filters.Add(product => product.UnitsInStock).IsGreaterThan(10);
}
})
)
)
The filters are added, but the filterdescriptor.Value in each case is always null (the Member and Operator are fine).
Any help much appreciated.
Thanks!
--Berry
Make sure you have included kendo.aspnetmvc.min.js. Missing it would lead to similar symptoms.
I am using ASP.Net Mvc 4 with Kendo UI grid.
I would like to perform more advanced features on the kendo UI grid (like exporting the sorted data from the grid to excel, adding filters, etc.). I need to configure the DataSource in my View and the "Read" method in the Controller. The grid is populated from a LINQ query and stored in the ViewBag.
Here is the razor code in my view Index.cshtml
#(Html.Kendo().Grid((IEnumerable<Reports.Models.Company>)ViewBag.ActComp)
.Name("grid")
.Columns(columns =>
{
columns.Bound(comp => comp.Name);
columns.Bound(comp => comp.DateCreated);
columns.Bound(comp => comp.Quarter).Sortable(false);
columns.Bound(comp => comp.Code);
columns.Bound(comp => comp.Enabled).Column.Title = "Active";
})
.Sortable()
.Groupable()
.Scrollable(src => src.Height(500))
)
Here is the Controller ActiveCompController.cs
namespace Reports.Controllers
{
public class ActiveCompController : Controller
{
private FSLContext fslData = new FSLContext();
public ActionResult Index()
{
ViewBag.ActComp = from b in fslData.Companies
where b.Enabled == true
orderby b.Name
select b;
return View();
}
I have seen a couple of different examples with .Ajax() like:
.DataSource(dataSource => dataSource // Configure the grid data source
.Ajax() // Specify that ajax binding is used
.Read(read => read.Action("Products_Read", "Home")) // Set the action method which will return the data in JSON format
However, it didn't work as my data is from a LINQ query not formatted in JSON. Also, I don't know what to write in the "Read" method.
Any thoughts on how to configure the Datasource and the controller with my configuration ?
It looks like your code is similar to the example for the Kendo Grid at
http://demos.kendoui.com/web/grid/index.html
I would start by setting up a ViewModel class for Company that would hold all of your columns for the grid similar to how they have a ProductViewModel in their example. For instance, you would have the following in your ViewModel:
Name, DateCreated, Quarter, Code, Enabled
If you navigate to ASP.NET MVC > IndexController.cs you'll see where they've defined their method:
public ActionResult Products_Read([DataSourceRequest] DataSourceRequest request)
From there you'll see that they wrapped their LINQ results into their ViewModels and returned them in JSON format. You're on the right track for setting up the DataSource for your grid. As far as the Controller goes, you would change
.Read(read => read.Action("Products_Read", "Home"))
to
.Read(read => read.Action("<YourMethodHere>", "Home"))
Which will allow you to modify the logic for the read. However, note the Read operation is simply used for populating the table, any other functionality (such as sorting) would be handled differently. For more information on sorting take a look here
http://demos.kendoui.com/web/grid/sorting.html