I need an iterating component like a <h:datatable> which generates <div> elements on every iteration and adds pagination. Something like an <ui:repeat> with pagination.
Does it exist in PrimeFaces or any other library?
I think the p:dataTable element in PrimeFaces does what you want. It draws a pagination panel with first/prior/next/last control semantics. Here is the example for pagination.
What I recommend most is their "lazy data table loading" mode where you do not transfer any data from the server to the client that is not actually going to be displayed. In this way you can handle a data source with millions of records. Here is the example for lazy data loading.
If you want a grid and not a table, I think the PrimeFaces p:dataGrid implementation is the best in the business. Unfortunately my own application doesn't use it, but the example is here.
Related
I am using Infragistics(Ignite UI) controls in my ASP.NET MVC3 application.
I have grid which I've bound to 'Customer' data. Works fine.
Now I have button. On clicking I make an ajax call.
In the controller I write query which selects only a part of 'Customer' data.
I return the data using json.
I try to re-bind it using:
$("#CustomerGrid").igGrid("dataSourceObject", returnData);
But the grid continues to show old data. It doesn't refresh.
Call the data bind method like so:
$("#CustomerGrid").igGrid("dataSourceObject", returnData);
$("#CustomerGrid").igGrid("dataBind");
or even like so:
$("#CustomerGrid").igGrid("dataSourceObject", returnData).igGrid("dataBind");
Just a general note - changing the data source can be extra overhead and generally not ideal solution. If I understand correctly you are replacing it with a part of the original collection? If the collection is big and/or you need to reset back to original state - perhaps consider simply returning id-s to the ajax call and use the Filtering feature?
Ok, I'll explain. I need to create a datagrid in MVC on the fly (potentially multiple datagrids on a view) depending on a XML file being read in. The file gets looped through and may contain multiple grids of data, the headers and rows are set in the file. The problem being that my application won't know the content of the XML file before reading it so I can't apply it to an IEnumerable model. The idea being to make it generic so that it can read in any XML file I pass to it set up as below and put the data in a sortable datagrid. Is this at all possible with current controls out there? I have tried Teleriks MVC grid and while I can read the data into the grid, I cannot sort the data as this feature will only work when passed a DTO. I have a feeling what I'm looking for can't be done (unless I write a custom HTMLHelper or something) but no harm in asking I guess
My xml will be as such
<xml>
<REPORT>
<HEADERS>
<HEAD>Col1</HEAD>
<HEAD>Col2</HEAD>
</HEADERS>
<ROWS>
<ROW>Data1</ROW>
<ROW>Data2</ROW>
</ROWS>
</REPORT>
</xml>
Thanks
I would advise using the jquery grid. Then write a class to parse the xml and generate the grid javascript in the view, and a second action to parse the xml (again) and generate the json result. MVCCrud may help with the idea there is a generic jquery grid in there but it works off an IQueryable list so would need to be adapted.
I haven't seen a helper extension out there that does what you need.
There are some good ones that work with generic collections (such as Telerik's or MVCContrib's). The sample you provide cannot be translated in to a collection that would be handled by these however: the row needs to have cells that can be matched to the header elements.
<xml>
<REPORT>
<HEADERS>
<HEAD>Col1</HEAD>
<HEAD>Col2</HEAD>
</HEADERS>
<ROWS>
<ROW><CELL>Data1</CELL><CELL>Data2</CELL></ROW>
<ROW><CELL>Data2</CELL><CELL>Data4</CELL></ROW>
</ROWS>
</REPORT>
</xml>
If the XML can be deserialized into a generic collection, it is easy to populate the grid.
Hope this helps.
I'd look into the JQuery Grid. You have to munge the data into the format that it wants, but it gives you a lot of flexibility and nice UI for free. You will still need to write sort code, though.
Most of the ASP.NET MVC paging solutions I have found by googling look like they get all rows from a database table in the form of a IEnumerable collection, perform some paging conversion on the IEnumerable collection, and then return the results to the view. I want to be able to page on the DB side but still have some paging class to do the page number calculations and HTML generation. Is there a solution out there that does this? Or are the ones i've been looking at do this, but i'm not seeing it because i'm looking at them wrong?
here's what i've been looking at:
http://blogs.taiga.nl/martijn/2008/08/27/paging-with-aspnet-mvc/
http://www.codeproject.com/KB/aspnet/pagination_class.aspx
http://www.squaredroot.com/2009/06/15/return-of-the-pagedlist/
Look at the Gu's Nerdinner sample.
var upcomingDinners = dinnerRepository.FindUpcomingDinners();
var paginatedDinners = upcomingDinners.Skip(10).Take(20).ToList();
Even though FindUpcomingDinners() gets all the upcoming dinners, the query isn't executed at the database until you call ToList() in the next line. And that is after you Skip 10 rows and only get the next 20.
You're wrong. PagedList will do it on the DB server, as it has IQueryable extensions.
ScottGu has a very nice multi-part blog series on using LINQ in Asp.Net (including MVC). I recommend reading the entire series starting at Part 1, but Part 3 covers exectly what you're looking for -- the section titled "Paging our Query Results" specifically deals with paging in the database.
wouldn't it be more efficient to implement a stored procedure that takes #StartPage and #PageSize parameters?
this way you are only retrieving the subset of data that is actually being used
just have an out parameter called totalCount or something similar so that you know how many page links to create and each link onclick event will pass the page number to a javascript function that will asynchronously load the div or other HTML element with more data
easy
Ok, so this is an alternative to this question.
I'm trying to produce an MVC application using LinqToSql that allows for bulk editing of data on a single page.
Imagine a simple table Item with ItemId, ItemName, ItemPrice as fields.
There are many examples out there of extrmely simple MVC applications that show you a list of these items with an edit button next to each and an add button at the bottom.
From a UI perspective I find this very time consuming when a lot of data needs entering / updating.
I'm after a single page containing the items names and prices in textboxes that can all be edited in one go and then a single "Save" button pressed to update the data.
I've seen a number of examples that perform various stages of this but have yet to find one that implements the full solution. In particular the interaction with Linq.
I have a number of methods I've tried which all work, however, my gut feeling tells me my methods "smell" and therefore I'd like to see some examples of how other people have attempted this.
So, put simply, my question is can anyone provide some links to some examples please?
I have written about how to do this with MvcContrib's FluentHtml. Steve Sanderson has written about how to do it without FluentHtml. Both of our articles have a sample solution you can download and look at.
As far as LinqToSql, I would consider any interaction between bulk editing mechanism (controller and view) and LinqToSql to be a smell. That is to say, as far as possible your UI should be ignorant of your persistence mechanism.
What I would probably do to get around this is use jQuery to call a jsonResult when you switch rows. This jsonResult would call the code in the model to save the ItemId, ItemName, ItemPrice for only the row you are switching off of. More on general jsonResult w/ jQuery usage here : http://www.dev102.com/2008/08/19/jquery-and-the-aspnet-mvc-framework/
The other thing you could do is do model binding to a list of Items, iterating thru the list saving each item -- Phil Haack has an example of list binding here: http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx With either method you'll want to do something to signify the row has changed so you're not updating every field if you're just changing a handful of rows.
What is your goal exactly, are you trying to commit a series of information all at once? Or do you simply not want your page to postback every time you change something. In either case jQuery is your best bet. If you want to do everything in one pass it is going to get complex unless you use a jQuery control that will do this for you. There are some great ones out there such as the Flexigrid.
I have an application that has two dependent dropdown lists, where if the user selects a value in list box A, it updates the available set of inputs in list box B. Such as make/model of a car. when the user selects the manufacturer, the list of models would update accordingly.
In winforms, this would just be handled in the autopost back event. What technique/approach should I take in asp.net MVC? is done through AJAX ? just trying to get up to speed on MVC and looking to build strategies to handle common tasks I am asked to handle at work.
I wanted to thank everyone who contributed to answering this post.
I'd do this through ajax. If you have these controls:
<select id="makes" /> and <select id="models" />
then you can do this with jquery:
$().ready(function() {
$("select#makes").change(function() {
var make = this.value;
$.getJSON('models/list?make=' + make, function(data) {
//load 2nd dropdown with result
})
});
});
Then you'd just need an action on the ModelsController called List() that returns a JSON data structure.
That you are using ASP.NET MVC is somewhat irrelevant. You basically have three options for this type of UI mechanic on a web page.
If the data in your lists is relatively small and infrequently changing, it can be easiest just to pre-load all possible data on the page in the initial request either in something like a javascript array or hidden elements in the page markup. When the value of Box A changes, javascript just replaces the contents of Box B with the appropriate data. This all happens without any requests back to the server which makes it very fast. But this method breaks down when the size of your data impacts the response time of the initial page load.
If the data in your lists is large or frequently changing (within the time frame a user would be on the page making a decision), the legacy method is to just have the page get reloaded with the new query arguments when the value of Box A changes. Code on the back-end adjusts the output based on the new arguments. Depending on how complex the rest of the rendering code in your page is, this can be expensive.
This is a variation on option 2 and is basically the answer Ben Scheirman gave regarding ajax. You're still loading the contents of Box B on demand when Box A changes. The difference is that you're only reloading the piece of the page that has changed rather than the entire page.
Personally, if your data is small enough to use option 1, that's probably what I would go with due to its performance. Otherwise go with option 3, particularly if you've already got other ajax related things implemented already. Option 2 is seems to be considered a legacy mechanic by many people these days.
Functionally it would work to place those two drop lists in their own partial view and then return just that when the value in ListA is selected. If that isn't feasible for layout purposes, then Ben's method above looks good.