I've an ASP.Net MVC3 web app been using jQuery Form Plugin for ajaxSubmit. I've a grid and I use ajax postback to refresh it while filtering, sorting & paging - in simple words I just replace the grid html result I get from ajax postback. Works great for any kind of grid features because grid html is rendered on server side.
Now, I'm looking for a json based Grid with some basic features like sorting, paging and if possible grouping & server side paging! Editable Grid is not the main focus but it'll be an added advantage. I see most of the solutions would point towards Knockoutjs. I've been trying it out but it needs more homework esp for advance features like grouping, etc...
I've found some basic examples like
Knockoutjs basic grid (with add/delete)
The SimpleGrid component
jQgrid also supports json
jqxgrid
Along with that I also came across a new concept - JsonML + Browser-Side Templating (JBST) Basically, it works on json and before adding the elements to the page it allows us to alter the element's behavior. Browser side templating. Has anyone experienced it? Is it comparable to KO ?
I welcome suggestions and your expertise advice for my simple featured json based grid (assuming json would be the best way of passing the data). If you know another approach, do share it as well.
Have you checked out KoGrid, its a native KO grid
https://github.com/Knockout-Contrib/KoGrid
I did my homework and here's my final conclusion. To begin with - there's nothing like KO support - there has to be a ko binding handler for the plugin (except fo KOGrid).
DataTables - supports json but couldn't find native KO support (external plugin). Binding looks simple and straight fwd yet many diff script files.
SlickGrid - supports json but needs a bit post processing. Possible external KO binding feasible. Using ko.utils.unwrapObservable.
ko.SimpleGrid Implementation of binding ko.bindingHandlers.simpleGrid (supports paging) As seen in KO demo.(source) No native support for sorting but can be extended
My final choice -
KOGrid Probably the first pure KO based Grid! So obviously json compatible. Supports sorting natively (no extra scripting
needed). Also found server side paging for large data set. All in one!
function columnDefsVM() {
var self = this;
this.myData = ko.observableArray([{ name: "Moroni", age: 50 },
{ name: "Tiancum", age: 43 },
{ name: "Enos", age: 34 }]);
this.gridOptions = { data: self.myData,
columnDefs: [{field: 'name', displayName: 'Name'},{field: 'age', displayName: 'Age'}]
};
}
ko.applyBindings(new columnDefsVM());
Some others -
JsonML + Browser-Side Templating (JBST) couldn't infer too deep but it does pose an effective approach to use js for templating and runtime behavior modification!
Simple http://paramquery.com/demos
Feature rich jqGrid http://www.trirand.net/demoaspnetmvc.aspx (json & KO)
You might also take a look at the Grid samples here: jqxGrid with Knockout
Related
I want to display a grid of data. I'm using ASP.NET MVC.
I could just write some less than great code to loop through my view model and create a javascript string, something like:
var data = "[";
#foreach (var item in Model.items} {
<text>"{ Name: " + item.Name + "},";</text>
}
data += "]";
// outputs several lines of javascript to build up a data object that I can feed into jqgrid
However to avoid this I figure, why not just put the data into an ajax method? I have seen other questions floating around suggesting that you can use data: <ajax command of some sort> but the documentation has absolutely nothing on how to do this.
I am wondering if it's possible, and if so, what format should the return json be in in order to be used by the jqgrid free?
To load data with ajax you can use option url, and to add/edit/delete data you can use option editurl.
Example:
$("#grid").jqGrid({
url: '/your-url',
editurl: '/your-edit-url'
...
}
Note:
free-jqgrid is based on jqGrid. free-jqGrid is not fully documented but you can find help in older documentation of jqGrid.
For most of the options you will find documentation in:
wiki of tirand
demos from trirand
stack overflow
I use angular in many projects, specially in ASP.NET MVC, but i dont like angular-
router (also ui-router, this is not much problem indeed as it's just a plugin) - concept of web-apps kills all ASP.NET features
services and factories - as all of this can be done inside common controller. (This might sound tricky)
constants and values - as i dont think this is really needed if you use requirejs or other AMD
What i love in angular is just directives, and when i make big nested directive, i use same controller foreach, so there is no $scope interacting (less watchers)
.controller('BaseGridCtrl', function(){
//instead of
//$scope.value = 123;
var ctrl = this;
//this is for Table-base-directive
ctrl.value = 123;
//this is for Table-head-directive
ctrl.value2 = 123;
});
.directive('table-base', function(){
return {
template: '<div>{{bgc.value}}</div>',
controller: 'BaseGridCtrl',
controllerAs: 'bgc'
}
});
.directive('table-head', function(){
return {
template: '<div>{{bgc.value2}}</div>',
controller: 'BaseGridCtrl',
controllerAs: 'bgc'
}
});
.directive('table-foot', function(){
return {
template: '<div>{{bgc.value3}}</div>',
controllerAs: 'bgc',
controller: function(){
var ctrl = this;
ctrl.value3 = 123;
}
}
});
So the link function is used veeery rare. And specially i like that angular easily detects directive - which is great as you just write 1 tag <grid> instead of reactjs components (This also might sound tricky). In my projects i use DotLiquid for razor views (it's stored in database as string) Sample:
<grid theme="some" route="localhost:9000/some/action"></grid>
So dotLiquid just renders this string w/o problem, or even applies other bingings beside angularjs. And this is great as all stuff is self contained. Which cannot be achieved by reactjs - you need to bootstrap components by yourself
React.renderComponent(<Grid />, document.querySelector('#someId'))
resume
Currently it's heavy, about 100kb, but without all this unnecessary stuff it would be really light. I would like to use only directive and controller services, Also with server-side rendering angular gonna bootstrap itself on each request which is not wise, but with lighter version it's a bit tradeoff.
Has anybody tried to strip angular services succesfully? Or is there any consideration, any ideas?
edit
Angular-light looks promising, but:
it doesn't provide HTML tag detection, only attributes
really ugly, alight.directives.al.getValue this looks so bad only for me or someone else?
edit2
Ok, that 100kb might not play alot. But consider it as workout, as you might know, angular start only once, at page load, so it must build the app, pull all modules, configure each, then all services of module, then inject them where they are needed, then supply callbacks from factories and services to any who injects them, at least it gonna check if any exists (on each module), all of this happens at start, only once! By wiping up size, we also can minimize javascript execution(indeed it will), factory and service watchers, so we won't need any parts that aren't used. We can even get rid of controllers (and use them inline), only 1 service. angular.directive (which is best part of party). Have looked at mustache, handlebars, but they are just like reactjs.
You can try Angular Light ~15kb (gzipped), it doesn't have services, factories, constants, values, DI, router and so on.
In addition, it has helpful features like text-directives and a support of Object.observe (benchmark)
edit
It provides HTML tag detection, attributes and comments.
AngularJS is meant for full SPA development. This means that you are not making full round trips to the server all the time. If your application needs to pass data back and forth, utilize the WEB API controllers and pass JSON up to them.
An Asset Management System I am currently working on is full SPA with WEB API and MVC fully wrapped into its needs. User log-in is processed across a full page request everything else is SPA. Additionally, here is something to read more about using MVC/WebAPI and Angular together.
If you are trying to use AngularJS instead of something like BackboneJS then you should be using AngularJS Light which was started for this exact purpose. I haven't used this library specifically, but as it is suppose to be an alternative to libraries I do use. The suggestion, if you want Angular and not BackboneJS or KnockoutJS use AngularJS Light
I am using ASP.NET MVC with Kendo UI. I want to export grid to an HTML page and print it. Online help is not available. What have your done previously. Thanks in advance.
Did you find a solution to this? I'm looking at the same thing currently and have found a couple of options:
Firstly Telerik have a Javascript example which renders your grid to a new print window, see https://docs.telerik.com/kendo-ui/controls/data-management/grid/print-export
Just alter the name of
var gridElement = $('#grid'),
to your own existing grid name and omit the function:
$(function () {
var grid = $('#grid').kendoGrid({
...
};
};
However, this only renders what is currently displayed on screen (so if your grid has multi pages it may not be suitable).
The second option that I'm exploring is exporting to pdf (and then user can then print that if they wish). There are example of this at
https://demos.telerik.com/aspnet-mvc/grid/pdf-export and https://docs.telerik.com/kendo-ui/controls/data-management/grid/pdf-export
This does have multi-page printing support (although I haven't got it to work just yet, they have examples which show it working). They do mention potential problems if you have a lot of data as it needs to load all the data on the client side (even if you have paging). There are some example projects to work on data server side in the above links.
In the end our requirements didn't need the paging but I've gone with the pdf option as that delivers quite a nice layout that you can template further.
I'm in the middle of making this choice right now and I don't know what kinds of questions I should be asking. One that I believe is valid:
Do I need SEO / natively crawlable pages? If so, stick with MVC4.
One question that I'm not sure about is the impact on performance - I think this is valid:
Is initial load time very important? If so, stick with MVC4 (like stackoverflow).
What are some other questions that should be asked that can help point a developer in the right direction here?
PS - if this question is being asked in a way that doesn't meet quality standards, I'd appreciate any help modifying it so that it does.
I have been asked and had to be a part of decision making groups recently that made this same decision. Here is what was important for us -
How many of the devs that will be working are familiar with MVC4 vs Javascript?
How much is performance an issue? (Is single page app really necessary?)
How big is the data we will be working with? (Remember that extremely large data sets don't work well in a spa)
Durandal requires using a lot of different libraries - is it ok to have to learn each of the different usages? Each library is important in its own regard and you must know when and why to use each library.
Angular is very set in its ways and harder for a new javascript dev coming from c# and .net to understand, are you willing to provide time for learning?
Last, which browsers are you targeting? Ie6+ works great with mvc4 and durandal, angular needs some massaging.
Hope this is helpful!
Why not combine the best of both worlds? SPA and straight MVC!
I was also investigating a lot of time in durandal, sammyjs, angular frameworks. I then decided to go with sammy.js for just the routing. This way I could still make use of the easy MVC 4 razor view engine to generate my views at server side. Even though it would be more performant to generate your html and bindings at client side by using knockout, I felt more secure by doing this at the server side.
But then of course you have to deal with those hashbangs? Therefor I started to investigate more time into the history.js (or HTML 5 history API). And then things got clear to me.
My solution
What is the essential part of a SPA? Well, in fact, that your layout.cshtml is only loaded once right. From then on you you only want to load content from the server and display it in the main content div. Does it need to be json? No, in fact it does not.
By default MVC 4 controllers returns an html string. So what if your < a href="">< /a> tags would be intercepted by a simple jQuery script to get the html string from the controller and load it into a div.
I went even further and wrote my own jQuery engine on top of the HTML 5 history api. I just intercept every link that is clicked and load the content from its href attribute and then place it into the desired div. Further I push the URL with history api pushSate. Another big advantage of this approach is that your application is not broken when javascript is disabled or when HTML 5 is not supported.
My views have the following layout page:
#{
Layout = Request.IsAjaxRequest() ? null : "~/Views/Shared/_Layout.cshtml";
}
This way when javascript is disabled or html 5 is not supported, the view will render inside the _Layout.cshtml.
This also allows for URL linking. The link will hit the address bar and will be routed to the controller. As this is not an ajax request, the view will render with _Layout.cshtml.
But once your _Layout.cshtml and javascript is loaded correctly and once, all < a href="">< /a> will be intercepted, loaded by AJAX (partial with layout = null) into the content div and the url is pushed on the address bar. So it seems that you are at that location, but in fact you are not. It's just an illusion to make things more responsive and efficient. Et voila, SPA in straight MVC.
The minimum routing code would be something like this
Interception of Links
$('.spalink').click(function () {
$.ajax({
url: this.href,
success: function (content) {
$('body>#content').css({ opacity: 0 });
$('body>#content').html(content);
$('body>#content').animate({ opacity: 1 }, 300, 'swing');
history.pushState({ state : 'spa' }, null, this.href);
}
});
return false;
});
BACK and FORWARD event
window.addEventListener("popstate", function (e) {
if (e.state != null) {
$.ajax({
url: location.href,
success: function(content) {
$('body>#content').css({ opacity: 0 });
$('body>#content').html(content);
$('body>#content').animate({ opacity: 1 }, 300, 'swing');
},
cache: false
});
return false;
}
});
return true;
}
PS: if you don't feel like writing your own SPA engine, take a look at history.js (it does the same out of the box)
Ajaxify on top of History.js on top of HTML 5 history API
How to add FCKEditor in MVC application?
How to show database value comes in model, in FCKEditor?
That CodeProject website isn't ideal. It asks you to do alot of unneccessary code. All you really need to do is include the correct javascript file:
Then, in the page, render the FCKEditor, given any number of different ways. I prefer to replace a text area:
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'content' ) ;
oFCKeditor.ReplaceTextarea() ;
}
At that point, the editor should load just fine. You will probably need to edit the fckeditor configuration files to get the standardized behavior you want. At this point, however, everything should just work. Your FCKEditor instance will behave just like another form field, and you can treat it as such when you get values from it on the server side.
It's very easy to create the server side api's for it to use as well. I created an fckeditor control, and you just need to implement GetFolders, GetFoldersAndFiles, and GetFiles. Those only take a few lines and give you nearly all the functionality you need.
I think it's easier to integrate / customize fckeditor using MVC than it is on Classic ASP.NET.