locked
Wish list for the new HTML Client Table Control in LS 2013 RC RRS feed

  • General discussion

  • The new HTML Table control added to LS 2013 RC is a great addition to the HTML client. Rohit Agrawal from the LS team created a good overview article on the control here: The LightSwitch HTML Table Control

    This control would be even more awesome if it supported the following additional features:

    1. Allow the user to click on the column headers to allow server side ascending and descending sorting with an appropriate sort indicator icon .
    2. Allow an additional paging mode without continuous scrolling where it would show only the selected number of rows per page with [Next] and [Previous] buttons to move to the next /previous page of records.

    Number 2 above is required where you have large lists with hundreds or even thousands of rows. When using continuous scrolling the performance of the app becomes unacceptable after a few hundred records due to the fact that the DOM gets too large and if you open a popup dialog from a selected record there is a visible wait period when opening and when closing the dialog. Being able to only display a page of rows at a time will overcome this problem.

    I can see why continuous scrolling rows is a great idea in many cases, but in a lot of cases a simple paged table will work better.

    I believe that with some effort we could possibly implement both 1 and 2 above with some jQuery-based Javascript methods that we can call in the Table post-render event, but it would be better for this common scenario to be supported out of the box.

    I know that there is at least one 3rd party grid control that supports the above functionality, but unfortunately it is not a responsive grid, so the Table control is all we have to support a responsive table layout.

    Thoughts?


    Regards, Xander. My Blog

    • Edited by novascape Thursday, September 26, 2013 9:57 AM formatting
    Thursday, September 26, 2013 9:56 AM

All replies

  • I had noticed you posting to the C1 forums for the HTML LS controls.  What do you think about their LS grid?  Originally I didn't care much for it, but I've grown to like it more after using it.  The C1 grid and jQWidgets grids are the only ones I've really messed with at any length.

    In one of Michael's blog entries he implements paging in the Table reflow, but this was pre-2013RC and he had to do it all by scratch which was code-intensive.  Heinrich Wendel's blog post using Bing maps implemented paging too and was more straightforward.

    Thursday, September 26, 2013 5:49 PM
  • Xander,

    Thanks for this post.  I agree both server-side sort and paging should be available OOB. 

    Q: How can you do server-side sort in jQuery for large lists without sending the whole table to the client?  Then there's the complexity of paging and sorting together where you want to sort by a single column and take only page one having first x number of rows in that sort order.

    Seems like PreProcessQuery is the natural place for this in LS, but dynamic field names in Linq OrderBy can be a problem.  I tried to work around that using Dynamic Linq Library and it works.  Using this method, we could add JavaScript to header labels in table PostRender to do a true server side sort. 

    Have a look:

    HTML Server-Side Sort

    I think we could use .take and .skip to do paging as well. That's not to say, of course, this shouldn't be built-in out-of-box.  I'd love to see the Dynamic Linq Library included as well.

    Josh

    Thursday, September 26, 2013 7:13 PM
  • The paging and the sorting should be wayyyy easier now that the table is built into LightSwitch. If the team does not plan to do a Blog I will try to do one this week.

    Unleash the Power - Get the LightSwitch HTML Client book

    http://LightSwitchHelpWebsite.com

    Thursday, September 26, 2013 8:21 PM
  • One problem with the C1 grid is that it doesn't allow custom controls to be displayed within the grid, just the standard control types they've programmed.  I've not checked the LS grid yet to see if it has the same limitations.

    Free Visual Studio LightSwitch extensions: Elyl's Extensions

    Friday, September 27, 2013 10:43 AM
  • An optional search box, like in the Silverlight client, would be fantastic too.

    Free Visual Studio LightSwitch extensions: Elyl's Extensions

    Friday, September 27, 2013 10:44 AM
  • The C1 grid is also not responsive (i.e. doesn't support reflow tables like the built-in one).

    But, if you can live without the responsiveness the new version is quite nice. One of the biggest enhancements in the new version was to provide a way to access the value of invisible columns in the grid so you can use those in conditional display logic. The previous version only allowed you to access the visible column values which was quite limiting.

    @Elyl - I thought you could create custom cell templates in the C1 grid which should allow you to use the custom controls, no?

    @Josh - I only meant that you would use jQuery to add click events into the header and that you would re-execute the query in those events to be sorted at the server, by passing the column name and sort order. 

    @Michael - looking forward to your blog post as I imagine it would just be an extension of your previous excellent article on the same topic (but easier to do now as you've suggested).


    Regards, Xander. My Blog

    Friday, September 27, 2013 11:07 AM
  • @Xander,

    Understood.  I'm not aware of a way to pass field names to the server for sort order since Linq OrderBy requires lambda expressions.  The Linq Dynamic Query Library solves this by extending the OrderBy and Where methods to accept strings.  It converts t-SQL like strings to lambda expressions.

    I've seen some nice blogs about paging, but not combining paging with dynamic sort.  Look forward to a blog post as well.

    Regards,

    Josh

    Friday, September 27, 2013 11:53 AM
  • No idea, Xander.  The C1 team have been less than helpful on their forums.  On the whole, I've been extremely disappointed by C1's support.

    Free Visual Studio LightSwitch extensions: Elyl's Extensions

    Friday, September 27, 2013 12:56 PM
  • @Xander,

    Understood.  I'm not aware of a way to pass field names to the server for sort order since Linq OrderBy requires lambda expressions.  The Linq Dynamic Query Library solves this by extending the OrderBy and Where methods to accept strings.  It converts t-SQL like strings to lambda expressions.

    I've seen some nice blogs about paging, but not combining paging with dynamic sort.  Look forward to a blog post as well.

    Regards,

    Josh

    Josh, as you pointed out in a comment on my blog, a Preprocess query is actually the simplest way of doing this. You can use JavaScript but it is a lot of code. I will do a blog post, but I wanted to point out that I feel that you were right and this is basically what I plan to blog about:


    Unleash the Power - Get the LightSwitch HTML Client book

    http://LightSwitchHelpWebsite.com


    • Edited by ADefwebserver Saturday, September 28, 2013 9:37 PM spelling
    Saturday, September 28, 2013 9:34 PM
  • Thanks Michael.

    We look forward to your blog.  Take a look at the Linq Dynamic Query Library which does a great job of extending the orderby and where methods to handle string to lambda conversion.  With the library, we don't have to hardcode field name parameters in PreProcessQuery which can get convoluted.  Especially hard if you want runtime ability to sort by multiple fields and descending sorts.  If you like it, then maybe suggest to the team to include it OOB.

    Example:

    HTML Table Server Side Sort

    UV Suggestion:

    Enable Dynamic Queries

    PS...It would be nice too if someone from LS team could document some of the msls dataWorkspace JavaScript functionality.  For example, I can see there is a dataServiceQuery object having filter, orderby, skip and take methods, but how and when can we use those objects on collections at runtime(?)

    TIA,

    Josh


    • Edited by joshbooker Sunday, September 29, 2013 1:31 PM links
    Sunday, September 29, 2013 1:29 PM
  • Did you try using the dynamic linq library in LightSwitch? If it does not work, you should be able to use it in a WCF RIA Service.

    For HTML LightSwitch apps I would suggest using JavaScript as shown in:

    HUY Volume II - Visual Studio LightSwitch Advanced JavaScript Examples

    image


    Unleash the Power - Get the LightSwitch HTML Client book

    http://LightSwitchHelpWebsite.com

    Sunday, September 29, 2013 1:38 PM
  • Michael, Thanks for that blog and related thread from Huy.  Very helpful stuff. 

    I will dig around those examples some more, but I didn't see one that sets query filter then reloads the screen data.  The patient lookup example searches for duplicates, so that's like running a separate query.  How about affecting the query that the screen data collections are based on and 're-loading' the screen entities?

    Yes I tried the Dynamic Library, as you'll see in the example link above.  It works great in Lightswitch with SQL or SharePoint datasources.  It would be huge if this were included OOB.  I think the ability to provide tSQL-like OrderBy and Where strings is as parameters to LS queries is perfect for the target user of LS.

    Regards,

    Josh


    • Edited by joshbooker Sunday, September 29, 2013 2:03 PM link
    Sunday, September 29, 2013 2:00 PM
  •  How about affecting the query that the screen data collections are based on and 're-loading' the screen entities?

    You can apply any filter and then simply call a ".load()".

    I am doing that here:

    Paging and Sorting in LightSwitch HTML Client


    Unleash the Power - Get the LightSwitch HTML Client book

    http://LightSwitchHelpWebsite.com

    Sunday, September 29, 2013 2:05 PM
  • The paging and the sorting should be wayyyy easier now that the table is built into LightSwitch. If the team does not plan to do a Blog I will try to do one this week.

    Unleash the Power - Get the LightSwitch HTML Client book

    http://LightSwitchHelpWebsite.com

    The article is here:

    Paging and Sorting in LightSwitch HTML Client


    Unleash the Power - Get the LightSwitch HTML Client book

    http://LightSwitchHelpWebsite.com

    Sunday, September 29, 2013 2:06 PM
  • The LS Team posted an sample of how to dynamically sort table control using property names here:

    http://blogs.msdn.com/b/lightswitch/archive/2013/11/26/customizing-the-table-control-sortable-by-column-kevin-mehlhaff.aspx

    Similar to the Linq Dynamic Query Library, their approach is to create lambda expressions from property names.  However, it falls short compared because the Dynamic Library extends the existing OrderBy and Where methods rather than adding new methods and it handles multiple sort properties.

    Tuesday, November 26, 2013 8:46 PM
  • Dale Morrison has hugely enhanced the table control here:

    blog.ofanitguy.com/.../ls2013-html-enhancing-table-control-with-column-sort-and-filters

    multi-column sort AND FILTER

    immediate or delayed execution

    uses Dynamic Linq nuget package

    encapsulated for ease of reuse, etc, etc.

    Awesome job Dale!

    Thursday, February 27, 2014 7:02 PM