I am using Kendo UI Grid with Asp.net MVC web api.
I have a web api controller which receives datasource request object
Public DataSourceResult GetCustomers(DataSourceRequest request) {
return customerService.GetCustomers().ToDataSourceResult(request);
}
which returns the data to the client side.
I have Angular controller for listing the customers which uses Kendo ui web grid.
I want to implement server side pagination sorting filtering and nice feature called grouping.
The pagination works fine. The result returned contains the data object and the count of the total number of records which is very fine for normal use...
The datasource of the grid has the transport property which takes in the url rather than using the read property of transport objects.
I am calling my angular service which takes in the parameters and fires the query to the web api controller when returned it the success function is passed with the data from the request.
All this works fine with normal pagination.
I have not hardcoded any column names but the schema of the data source is
schema :{data:"data",count:"count"}
which also works fine but I am implementing the server side grouping which requires passing in of the column name
the data returned from the server when grouping applied on the web api controller is totally different in schema than what is returned when grouping is not applied
which causes the data like aggregates and items being displayed as the column name.
What should be done to display the grouped data into the grid am I missing something?
Related
Im building an asp .net MVC application that has a kendo grid. Users will be able to log in and customize the grid like group data using drag and drop or filter based on his/her needs. What I need to know is that is there an ability to save the changes a user makes to the grid so that the next time he logs in, he can directly see the customized grid instead of making the changes all over again.
thanks.
One possible way I can think of.
On Grid Events like group, select, sort fire a function that will collect grid properties as
JSON object
[{
sortable: true,
group : columnName,
OrderBy: asc
}]
call a event function
build a setting JSON object
Make a Ajax post to customer table
update gridSettings varchar(Max) field with the JSON object you built.
next time when customer logs in load grid properties from the field.
I am having some issues around the patterns needed to bring my application into the WebApi + Knockout world. The following scenario has thrown be a bit.
I have a very basic grid partial view (_grid.cshtml). It uses a GridViewModel, which only has a QueryID. The Grid partial passes the QueryID using Ajax (which is defined in the ko ViewModel) to a WebApi method which returns a collection of objects in JSON. I then use knockout to bind the columns of the grid based on the returned JSON, and then loads the rows in.
This all works fine, but I'm uncertain if this is the correct approach.
// When the query is changed update the grid data.
self.selectedQueryID.subscribe(function (newQuery) {
self.SelectQuery(newQuery.ID());
});
// Execute the query and set the results as the rows of the table
self.SelectQuery = function (queryID) {
$.ajax({
url: '/api/Query/Execute?ID=' + queryID,
type: 'POST',
contenttype: 'application/json',
success: function (result) {
self.gridData(result);
}
});
};
The complexity comes when I have another partial view which is a list of available Queries that a user can choose from. This partial view sits adjacent to the grid partial view. I want to be able to somehow send the clicked query across to the grid so it can then shoot another ajax request off to get the data of the new query. I know this is completely the wrong way to think about an MVC application, but I just don't know enough about WebApi.
#Html.Partial("~/Views/Shared/_Grid.cshtml", Model.GridViewModel)
#Html.Partial("~/Views/Shared/_Queries.cshtml", Model.User)
This is all in an effort to implement some sort of default query for the grid, then give the user the option to select other queries.
I have also started looking into Backbone and Knockback but don't know (enough about them or) if this is the right direction.
I´m starting a Proof-of-concept SPA using the new Web API and Knockout, so far I´ve managed to create the API controller, consume it with Knockout and map entities and arrays using Knockout mapping.
I´m now trying to create a simple CRUD, but I can´t get my head around as to how to implement the ViewModels.
So far I´ve come up with 2 options, listed below:
I can define a ViewModel on the server, that contains the entity´s attributes, plus an array of the same entity. When I enter the CRUD functionality, I call the server and retrieve that ViewModel, with the entity list and the attributes for creating a new entry.
I can define 2 ViewModels, one with the grid data, and another with the entity´s attributes. When I call the CRUD functionality, I get the grid data, and when I want to edit/create a new entry, I call the server and retrieve the ViewModel for that.
On both options I use one single view, which contains the grid definition, and the edit/create form format, which I display on a JQuery pop-up.
I can´t figure out which would be the best option, I´m starting to lean towards the 2nd one, but some guidance would be appreciated.
Thanks in advance!
Do you really need to call the server at the point that you launch the Create / Edit dialog? Could you not have, say, an ObservableArray of EntityVM (a Knockout view model) as the binding source of your grid, and when you either click Add New or click an existing item, the Create / Edit dialog is made visible (that could be done with binding too) with either an empty EntityVM as its data source or a populated EntityVM copied from the grid source's item? Then when you click Save, Ajax the entity as JSON to the server and return a JSON response representing the updated grid data? Or is that not the right understanding of your context?
I have a view that inherit the following:-
#model MvcApplication.Models.Application
But i need to know if it is possible to pass JSON objects to my view in the same way i am passing the model objects?
Since i have the following Controller:-
public ActionResult ListPackages()
{
using (var client = new WebClient())
{
var query = HttpUtility.ParseQueryString(string.Empty);
//code goes here ....
return Content(json, "application/json");
}
}
which returns JSON using a API call, and then i am displaying the JSON on the view using JavaScript as follow:
$.ajax({
url: $('#geturl').data('url'),
type: 'GET',
cache: false,
success: function (result) {
$.each(result.data, function (key, val) {
var str = val.packageName;
$('<li/>', { text: str })
.appendTo($('#products'));
});
}
The problem with displaying the JSON using JavaScript is that it will make too difficult for me to work easily with the JSON objects, such as creating links based on the returned JSON or creating table that contain the JSON. So my question is: Is it possible to pass a JSON object instead of a Model object from my controller to my view?
Server- vs client-side confusion
You're talking two things here:
Creating a view: controller passes model to the view on the server side and it doesn't make much sense to do so using JSON, because an in-memory object is being passed to view engine.
Consuming JSON data on the client: what you're talking about here is client-server Ajax communication where you request data from the client and get JSON returned from the server. This has arguably nothing to do with model data being passed to the view
Best solution using JSON
In order to easily consume JSON data (in your case it's an array of packages) on the client to generate resulting populated HTML is to use some sort of templating on the client side. jQuery used to have non-final templating plugin which is now a separate project. I've had great experience with it but there are other plugins as well. Use the one that you feel most comfortable with its syntax.
Where to put those templates?
If you know the structure of your JSON objects passed from the server at the point of creating your view, you can put templates in the view itself and they'll just wait untill being used on the client.
If you don't know the structure of your JSON objects then you'll have to pass templates either along JSON object or as a separate request.
The first approach is the usual one, the second one is rarely used and is much more dynamic.
Best solution not using JSON
If you don't like parsing JSON to HTML results (either manually or using templates), you can always make Ajax requests to your controller action, which would return a prepared HTML as a partial view instead of JSON result. This way, you could easily just put that HTML onto your page without any JSON data manipulation.
What do you gain here? Well suppose you have this functionality in your app:
You have a view that displays a paged list of packages.
When user first accesses the page first page of packages are being returned
Paging to next page is done via Ajax and the list is being replaced by returned data
If you'd create a partial view for your subsequent Ajax request, you can use the same partial view in your main view to display the first page of packages. This will ensure that you only have to change one partial view and display would change on inital page load as well as subsequent package paging.
If you used view + JSON + templating that means that you have to maintain two presentations of package list: the one being used in the view for the first page and the template that displays subsequent paging.
Which one then?
All things being equal it makes the second solution better. But the choice of course depends on your case (of things not being equal) and you should be able to determine which one is best in your scenario.
No, you can't. A view must be strongly typed to a model. So one solution would be to deserialize this JSON into a model object before passing it to the view:
public ActionResult ListPackages()
{
using (var client = new WebClient())
{
var query = HttpUtility.ParseQueryString(string.Empty);
//code goes here ....
var model = new JavaScriptSerializer().Deserialize<MyViewModel>(json);
return View(model);
}
}
where MyViewModel would of course reflect the JSON structure that you are working with.
In my ASP.NET MVC application I have a view that displays a list of Products in the system. I would like to implement an option for users to filter the list of Products by selecting parametes, similar to the way it's done on www.codeplex.com. I would like to know how you would go about doing this in the most efficient and simple way? Any links to tutorials or guides are appreciated.
In our application we load up a list of all of the products into the web page, and use the Quicksearch jQuery plugin to filter the list. This allows the user to enter a word or two into a textbox, which collapses the list to only those entries matching what the user typed.
Basically, for a search of this type (server-side), you need:
Fields in a <form> for the user to fill out to perform the search request.
A button to post the form fields to your controller method
A repository for the Linq queries that will return the proper records.
A Method in the repository that accepts the parameters you have captured, and executes a linq query returning your filtered result, using Where clauses to filter the returned records.
The result of the query gets returned to the view for display.
If you need dynamic capabilities (i.e. the user may omit one or more parameters, and you need the flexibility to specify those parameters in the Linq query at runtime), then have a look at Dynamic Linq.