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
Related
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'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
I have an ASP.NET MVC application with a page that displays a large table of rows & columns of information.
I have a textbox at the top of the page allowing a user to filter the results in the table. I want the user to be able to start typing a word in the textbox and with each keypress, the results in the table to be updated based on the users filter text.
I've done similar things where I simply return a JsonResult response from my Controller, with a couple of small bits of data, but am not sure of the recommended approach if I want to essentially re-render my whole table (with the new data within it) upon each keypress?
I should also mention that the ViewModel I intend to use when the page is first loaded (prior to any ajax stuff happening) contains an IPagedList, as the table data needs to be paginated and sortable.
What I would do is to work with JQuery ajax API and also with partial views.
Have a look at following article. It displays how you can be able to manipulate your html seamlessly on ASP.NET MVC :
Working With JQuery Ajax API on ASP.NET MVC 3.0 - Power of JSON, JQuery and ASP.NET MVC Partial Views
http://www.tugberkugurlu.com/archive/working-with-jquery-ajax-api-on-asp-net-mvc-3-0-power-of-json-jquery-and-asp-net-mvc-partial-views
Also, following question might help :
How to pass an array through in JQuery Ajax and how to concieve it in server side?
You can use the templates to render the html.
i.e Parametrized html + json = to be rendered html
MicroTemplates
Have a look at http://knockoutjs.com/ it could be a very good fit for you
Take a look at the DataTables plug-in for jQuery. It may match your requirements and provide exactly what you need.
I know I am missing something conceptually here and it keeps tripping me up but I will present a use case and would appreciate a best practice response.
$.ajax({
type: "POST",
url: "/myapp/FilterRecord.action",
data: "pageSource=list_edit_add&table=" + table + "&output=" + output + "&selectedIds=" + json_text,
success: function(data) {
document.close();
document.open();
document.write(data);
}
});
In this case, the ajax method of jquery is being called. A Struts 2 action is being performed using the default result type, that is Dispatcher Result. Upon Action.SUCCESS, the success function above is entered. The data being passed in is a complete jsp page, head and body both. In the code above, we are sort of manipulating document.write() in a way which it is not necessarily meant to be used for. The aim of the above is to get both the head section and body section. Some other approaches for setting parts of the page which jquery is better set up for are:
document.all[0].innerHTML = data
${'#someRandomSection'}.html(data)
but neither of them capture the full content being passed to us. What then is the proper way to display the result of a DispatcherResult, that is the entire jsp page which is passed back to us? I have some involved javascript going on for this page, and it is not correctly rendering with the approach I presented in the use case above.
first of all the way you are passing the data is incorrect.. it looks like you are passing it as if its a querystring.. you need to change it to follows:
data: {
pageSource:list_edit_add,
table:table,
output:output,
selectedIds: json_text
}
and you need to specify the dataType
dataType: "html".
Can you setup a jsfiddle for your page..
So I found some great info on Autocomplete for Rails 3, it looks really easy to use. But I have a use case that doesnt fit and I need some advice.
I want to give the user the ability to add Products and Services to an Invoice through a simple form. I'd like them to be able to type into the Item field and have it autocomplete from both Product.name and Service.name as a single set.
I'm thinking of trying to write a parent model that overlays all three, but I still don't think that solves my problem since I can't use a function in the autocomplete definition from what I understand.
Any advice on how I might try to accomplish this? Even with the simple search examples that are out there they seem to be restricted to a single model.
If you're not opposed to introducing Redis into the mix, have a look at https://github.com/seatgeek/soulmate -- From the README:
Soulmate is a tool to help solve the common problem of developing a fast autocomplete feature. It uses Redis's sorted sets to build an index of partially completed words and the corresponding top matching items, and provides a simple sinatra app to query them. Soulmate finishes your sentences.
Soulmate was designed to be simple and fast, and offers the following:
Provide suggestions for multiple types of items in a single query (at SeatGeek we're autocompleting for performers, events, and venues)
Results are ordered by a user-specified score
Arbitrary metadata for each item (at SeatGeek we're storing both a url and a subtitle)
An item is a simple JSON object that looks like:
{
"id": 3,
"term": "Citi Field",
"score": 81,
"data": {
"url": "/citi-field-tickets/",
"subtitle": "Flushing, NY"
}
}
Where id is a unique identifier (within the specific type), term is the phrase you wish to provide completions for, score is a user-specified ranking metric (redis will order things lexicographically for items with the same score), and data is an optional container for metadata you'd like to return when this item is matched (at SeatGeek we're including a url for the item as well as a subtitle for when we present it in an autocomplete dropdown).
See Soulmate in action at SeatGeek.
If nothing else, maybe it'll give you some ideas on how to structure the data in a way that makes sense.
I did not write or have anything to do with soulmate. It's just a library I discovered when trying to solve a similar problem. Hope it helps!
If client-side autocomplete is an option (e.g. you have few products and services), you could go with JQuery autocomplete:
controller:
#keys = #categories.map { |x| x.name } + #entries.map { |x| x.description }
#autocomplete_categories = #keys.to_json.html_safe
view:
<script type="text/javascript">
$(document).ready(function() {
var data = <%= #autocomplete_categories %>;
$("#auto").autocomplete( { source: data } );
});
</script>
<input type="text" name="auto" id="auto" />