locked
Has anyone successfully integrated a 3rd party data grid with the HTML client? RRS feed

  • General discussion

  • I'm looking for a grid component and wondering whether anyone has successfully integrated any of jqxGrid, Kendo Grid, SlickGrid or any other suitable grid and would be willing to share some code? I'm looking for the following features:

    • virtual scrolling
    • ability to show images/thumbnails in cells (image selection driven by other non-visual column values)
    • ability to add anchor tags in cells to open other screens/clients from
    • single row selection
    • visually fit with the built-in LS theme

    It is my understanding that the HTML client will be getting a data grid in future, just not sure when and whether I can wait.

    ps. I've already looked at the Wijmo grid. I would also prefer to not use the built-in tile or list view as users need to be able to sort by column. Oh and this is predominantly for large form factors.


    Regards, Xander

    • Edited by novascape Monday, July 29, 2013 10:15 PM further clarification
    • Changed type novascape Tuesday, August 6, 2013 9:06 PM Probable better suited to a discussion
    Monday, July 29, 2013 10:08 PM

All replies

  • Since you mentioned that you looked at the Wijmo grid, could you share what about it was lacking?  Others looking for grid options (like myself!) would be happy to hear about what it's not currently a good fit for. :)

    Since ComponentOne has created the extensions/templates to integrate Wijmo into the LightSwitch HTML Client, it seems like it would be the least-friction option available.  At least, conceptually it seems to make sense that their jQueryMobile basis would mean a better LS HTML integration. :)

    WRT "the HTML client will be getting a data grid in the future", is that referring to the jQueryMobile 1.3 widgets like tables and panels being surfaced in the LS HTML Client designer?  Is there a thread or post talking about the upcoming grid support in the HTML client?

    Tuesday, July 30, 2013 8:15 PM
  • Hi James,

    I've not ruled out the Wijmo grid as yet, I'm just exploring alternatives. See this support question about the Wijmo gird:

    http://our.componentone.com/groups/topic/how-to-display-a-conditional-image-in-wijmo-grid-in-lightswitch-html-client/#post-240385

    One of the options I'm looking at again (despite discarding it earlier) is to use the built-in list view where each row contains a combination of Columns Layout and Row Layouts or even just custom rendering. I would then have a dropdown above the grid to allow the user to select the sort order. The list view layout is actually growing on me but I need to work out a nice way to allow the user to set the sort order.

    Maybe my understanding about "the HTML client will be getting a data grid in future" is stretching it a bit (we will have to wait and see) but look at Joe Binder's post in this thread (about 2/3 way down) where he says "There are a broad set of styling and shell changes and additional controls in development that will make the app more applicable to larger form factors—less padding, more tabular views of data, and so on." 

    LOB HTML5

    As a side note, I'm getting more and more impressed with the HTML client's capabilities. See this screenshot where I was able to replace the default header with my own logo & title, JQM button control group and HTML Kickstart tabs (to replace the built-in tabs) and this is all still responsive. You can also see my list view approach here:


    Regards, Xander

    Tuesday, July 30, 2013 10:51 PM
  • Hi Xander,

    That screenshot looks fantastic!

    When you say you have replaced the default header with your own logo and title and JQM button group, are you putting the button group in the header itself?  

    Could I ask how you have done this, as I am looking to create a global navigation menu for my own app and what you have done looks like it might fit the bill?

    Regards,
    Richard

    Tuesday, July 30, 2013 11:04 PM
  • Hi Richard,

    I do not mind sharing how to do that as I believe it will help with the adoption of LS for larger LOB apps which should be good for everyone. I will do a separate forum post in the next 36 hours or so on how to achieve this and post a link here when done.

    As a heads up, I use a concept of loading the header from an external template file (like partials in ASP.NET MVC). Everything above the two dropdowns (Demo & Default) and search box is in the header. The top-level buttons in this specific screenshot (copied from another screen that does require toolbar butons) will actually be replaced by pull-down menus (probably this one if I can get it to work: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxmenu/index.htm#demos/jqxmenu/defaultfunctionality.htm)

    I also use three LS HTML clients where each client represents a different module in the application. That allows me to select a service user in the control center module (for example) and open that service user in a different browser tab in a different module. This allows the user to simultaneously edit multiple "service users" (for example) - a key requirement in a lot of LOBs.

    This is of course still early days for me with this app and the HTML client and there will no doubt be many more challenges, but there always seems to be a way around those :)

    Hope this helps


    Regards, Xander

    • Edited by novascape Tuesday, July 30, 2013 11:48 PM further clarification
    Tuesday, July 30, 2013 11:22 PM
  • I do not mind sharing how to do that as I believe it will help with the adoption of LS for larger LOB apps which should be good for everyone. I will do a separate forum post in the next 36 hours or so on how to achieve this and post a link here when done.


    Regards, Xander


    Please do!

    Unleash the Power - Get the LightSwitch HTML Client book

    http://LightSwitchHelpWebsite.com

    Tuesday, July 30, 2013 11:24 PM
  • Michael, got your HTML client book as well btw and is highly recommended to everyone working with the HTML client! 

    Regards, Xander

    Tuesday, July 30, 2013 11:37 PM
  • Thank You.

    Also anything you post on the subject, even if it is just here in the forums, post to: LightSwitch Community Announcements so I can tweet it out.

    Thanks


    Unleash the Power - Get the LightSwitch HTML Client book

    http://LightSwitchHelpWebsite.com

    Tuesday, July 30, 2013 11:42 PM
  • Thank You.

    Also anything you post on the subject, even if it is just here in the forums, post to: LightSwitch Community Announcements so I can tweet it out.

    Thanks


    Unleash the Power - Get the LightSwitch HTML Client book

    http://LightSwitchHelpWebsite.com

    OK, will do.

    Regards, Xander

    Tuesday, July 30, 2013 11:44 PM
  • OK, will do.

    Regards, Xander

    I just sent out a tweet with your screen shot linking to this post...

    Novascape is working on LOB #LightSwitch applications http://t.co/etIYkZ0HDT pic.twitter.com/78pyanRGya

    — Michael Washington (@ADefWebserver) July 30, 2013

    Unleash the Power - Get the LightSwitch HTML Client book

    http://LightSwitchHelpWebsite.com

    Tuesday, July 30, 2013 11:50 PM
  • Hi guys, as promised added a forum post here:

    A LightSwitch HTML client header for a desktop browser LOB application look and feel 

    Hope you find it helpful.


    Regards, Xander

    • Edited by novascape Wednesday, July 31, 2013 11:20 AM formatting
    Wednesday, July 31, 2013 10:28 AM