Is there a way to define the parameterMap option for a Kendo UI Grid via the server side ASP.NET MVC wrappers?
I need to change local time into UTC time before sending up a filter command to the server, and this appears to be the only way to do it.
Sort of...
You can specify a string as the parameterMap setting, and this string can either be a JavaScript function directly, or the name of a JavaScript function that is found on the page.
.parameterMap("myParamMapFunction");
or
.parameterMap("function(data){ /* do stuff with the data */}");
Related
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?
I am using Asp.Net MVC Kendo Grid. While doing sorting, I am not getting anything on FormCollection at controller. But all other postbacks other than kendo controllers sends FormCollection to the controller. Please advice.
If your DataSource is set to use HTTP GET then the FormCollection would be empty.
Inside your MVC controller you could use var x = Request["paramName"]; instead, which would get you values sent to the server whether GET or POST was used.
The Read method on Kendo Grid can be used for doing anything related to Kendo Grid like Sorting or Paging etc..Even postback is not required when doing sorting on Kendo Grid. In new dll of Kendo,
everythin can be done without doing postback.
I am starting a new project, and keen to make use of the KnockoutJS + Web Api which are new to me, I have a good understanding of the Web Api, but Knockout is tough to get my head around at the moment.
This is my initial thoughts of how I want my app to work:
I have a standard MVC controller such as LeadsController
LeadsController has an Action called ListLeads, this doesn't actually return any data though, but just returns a view with a template to display data from Knockout.
The ListLeads view calls my api controller LeadsApiController via ajax to get a list of leads to display
The leads data is then mapped to a KnockoutJs ViewModel (I don't want to replicate my view models from server side into JavaScript view models)
I want to use external JavaScript files as much as possible rather than bloating my HTML page full of JavaScript.
I have seen lots of examples but most of them return some initial data on the first page load, rather than via an ajax call.
So my question is, how would create my JavaScript viewModel for Knockout when retrieved from ajax, where the ajax url is created using Url.Content().
Also, what if I need additional computed values on this ViewModel, how would I extend the mapped view model from server side.
If I haven't explained myself well, please let me know what your not sure of and I'll try and update my question to be more explicit.
I think your design is a good idea. In fact, I am developing an application using exactly this design right now!
You don't have to embed the initial data in your page. Instead, when your page loads, create an empty view model, call ko.applyBindings, then start an AJAX call which will populate the view model when it completes:
$(function () {
var viewModel = {
leads: ko.observableArray([]) // empty array for now
};
ko.applyBindings(viewModel);
$.getJSON("/api/Leads", function (data) {
var newLeads = ko.mapping.fromJS(data)(); // convert to view model objects
viewModel.leads(newLeads); // replace the empty array with a populated one
});
});
You'll want to put a "Loading" message somewhere on your page until the AJAX call completes.
To generate the "/api/Leads" URL, use Url.RouteUrl:
<script>
var apiUrl = '#Url.RouteUrl("DefaultApi", new { httproute = "", controller = "Leads" })';
</script>
(That's assuming your API route configured in Global.asax or App_Start\RouteConfig.cs is named "DefaultApi".)
The knockout mapping plugin is used above to convert the AJAX JSON result into a knockout view model. By default, the generated view model will have one observable property for each property in the JSON. To customise this, such as to add additional computed properties, use the knockout mapping plugin's "create" callback.
After getting this far in my application, I found I wanted more meta-data from the server-side view models available to the client-side code, such as which properties are required, and what validations are on each property. In the knockout mapping "create" callbacks, I wanted this information in order to automatically generate additional properties and computed observables in the view models. So, on the server side, I used some MVC framework classes and reflection to inspect the view models and generate some meta-data as JavaScript which gets embeded into the relevant views. On the client side, I have external JavaScript files which hook up the knockout mapping callbacks and generate view models according the meta-data provided in the page. My advice is to start out by writing the knockout view model customisations and other JavaScript by hand in each view, then as you refactor, move generic JavaScript functions out into external files. Each view should end up with only the minimal JavaScript that is specific to that view, at which point you can consider writing some C# to generate that JavaScript from your server-side view model annotations.
For the url issue add this in your _Layout.cshtml in a place where it is before the files that will use it:
<script>
window._appRootUrl = '#Url.Content("~/")';
</script>
Then you can use the window._appRootUrl to compose urls with string concatenation or with the help of a javascript library like URI.js.
As for the additional computed values, you may want to use a knockout computed observable. If that is not possible or you prefer to do it in .Net you should be able to create a property with a getter only, but this won't update when you update other properties on the client if it depends on them.
Before I start, I want to make it clear that my code is working properly, and this is more of a "general best practice" question. I'm using knockout.js to load in my ASP.NET MVC2 model into knockout's viewModel.
In my aspx page I have:
<script>
var model = <%= new JavaScriptSerializer().serialize(Model) %>;
// the above line will display in my page's "View Source". Is this bad? slow?
</script>
Then in my JavaScript include file at the top I have:
$(document).ready(function() {
var viewModel = new MyViewModel();
ko.applyBindings(viewModel);
viewModel.modelProp(model);
});
The code totally works fine, but the concern I have with this is that the JSON output is viewable in the "View Source" option from the browser in the HTML output. I'm curious about two things:
Does this also happen in ASP.NET MVC3? I'm using ASP.NET MVC2, hence I can't use #Html.Raw(Json.Encode(Model)); -- But does the MVC3 method result in the same issue?
Is this something I should be concerned about? Is it a security issue? Is it a performance issue? The page's source will be larger because I'm outputting the JSON into a JavaScript variable, no? Again, maybe it's not an issue in MVC3?
If I hear you correctly, you want to now if you should be concerned that people can see your json. I would not be concerned about that. In fact, not only can they see the json by viewing source, but they can also see it via a network sniffer like fiddler, httpwatch, or browser developer tools (F12). I'm not sure why you care if the json is visible because once it gets data bound to the UI, it will be there too.
As a side note, by loading your KO viewmodel from MVC, that means your viewmodel will only refresh its model data when you post. If you load it via an ajax call (to perhaps an MVC action since you use asp.net mvc) you could avoid that page refresh. Just another option.
I am creating an asp.net MVC application in which I want to provide a functionality to add a controls dynamically. I have a form in which there are 2 text boxes for First Name and Last name which serve as a single control. Now an user can add any number of this group of controls. I am able to add these controls on the page using java script. But I do not know how to access the values of these control when the user submits.
Please help in this or suggest another approach
Thanks
Look at using a Jquery AJAX call for the submit operation.
You can interate through your controls (easy with jquery class selector and $.each) and push the variables into a js variable.
Parse it as JSON and pass the data back to the controller using the ajax call..
Have a read of the article Editing a variable length list, ASP.NET MVC 2-style by Steve Sanderson. It shows you how to do what you are looking for in a clean, MVC style.
If you're coming from a webforms perspective, you're accustomed to adding those new controls programmatically in the codebehind. Using ASP.NET MVC, you're better off doing this with javascript.
It should be trivial to write a javascript function that adds FirstName1, FirstName2, FirstName3, etc. In the Controller, inspect the Request.Form.AllKeys to determine how many fields were added by the user.
You could also iterate a number in a hidden field called "txtNumFields", then use that as your controlling value in a for loop:
int numFields = int.Parse(Request.Form["txtNumFields"]);
for (i==0;i<numFields ;i++)
{
string firstName = Request.Form["FirstName" + i.ToString()];
...
}