Alpha Software Mobile Development Tools:   Alpha Anywhere    |   Alpha TransForm subscribe to our YouTube Channel  Follow Us on LinkedIn  Follow Us on Twitter  Follow Us on Facebook

Announcement

Collapse

The Alpha Software Forum Participation Guidelines

The Alpha Software Forum is a free forum created for Alpha Software Developer Community to ask for help, exchange ideas, and share solutions. Alpha Software strives to create an environment where all members of the community can feel safe to participate. In order to ensure the Alpha Software Forum is a place where all feel welcome, forum participants are expected to behave as follows:
  • Be professional in your conduct
  • Be kind to others
  • Be constructive when giving feedback
  • Be open to new ideas and suggestions
  • Stay on topic


Be sure all comments and threads you post are respectful. Posts that contain any of the following content will be considered a violation of your agreement as a member of the Alpha Software Forum Community and will be moderated:
  • Spam.
  • Vulgar language.
  • Quotes from private conversations without permission, including pricing and other sales related discussions.
  • Personal attacks, insults, or subtle put-downs.
  • Harassment, bullying, threatening, mocking, shaming, or deriding anyone.
  • Sexist, racist, homophobic, transphobic, ableist, or otherwise discriminatory jokes and language.
  • Sexually explicit or violent material, links, or language.
  • Pirated, hacked, or copyright-infringing material.
  • Encouraging of others to engage in the above behaviors.


If a thread or post is found to contain any of the content outlined above, a moderator may choose to take one of the following actions:
  • Remove the Post or Thread - the content is removed from the forum.
  • Place the User in Moderation - all posts and new threads must be approved by a moderator before they are posted.
  • Temporarily Ban the User - user is banned from forum for a period of time.
  • Permanently Ban the User - user is permanently banned from the forum.


Moderators may also rename posts and threads if they are too generic or do not property reflect the content.

Moderators may move threads if they have been posted in the incorrect forum.

Threads/Posts questioning specific moderator decisions or actions (such as "why was a user banned?") are not allowed and will be removed.

The owners of Alpha Software Corporation (Forum Owner) reserve the right to remove, edit, move, or close any thread for any reason; or ban any forum member without notice, reason, or explanation.

Community members are encouraged to click the "Report Post" icon in the lower left of a given post if they feel the post is in violation of the rules. This will alert the Moderators to take a look.

Alpha Software Corporation may amend the guidelines from time to time and may also vary the procedures it sets out where appropriate in a particular case. Your agreement to comply with the guidelines will be deemed agreement to any changes to it.



Bonus TIPS for Successful Posting

Try a Search First
It is highly recommended that a Search be done on your topic before posting, as many questions have been answered in prior posts. As with any search engine, the shorter the search term, the more "hits" will be returned, but the more specific the search term is, the greater the relevance of those "hits". Searching for "table" might well return every message on the board while "tablesum" would greatly restrict the number of messages returned.

When you do post
First, make sure you are posting your question in the correct forum. For example, if you post an issue regarding Desktop applications on the Mobile & Browser Applications board , not only will your question not be seen by the appropriate audience, it may also be removed or relocated.

The more detail you provide about your problem or question, the more likely someone is to understand your request and be able to help. A sample database with a minimum of records (and its support files, zipped together) will make it much easier to diagnose issues with your application. Screen shots of error messages are especially helpful.

When explaining how to reproduce your problem, please be as detailed as possible. Describe every step, click-by-click and keypress-by-keypress. Otherwise when others try to duplicate your problem, they may do something slightly different and end up with different results.

A note about attachments
You may only attach one file to each message. Attachment file size is limited to 2MB. If you need to include several files, you may do so by zipping them into a single archive.

If you forgot to attach your files to your post, please do NOT create a new thread. Instead, reply to your original message and attach the file there.

When attaching screen shots, it is best to attach an image file (.BMP, .JPG, .GIF, .PNG, etc.) or a zip file of several images, as opposed to a Word document containing the screen shots. Because Word documents are prone to viruses, many message board users will not open your Word file, therefore limiting their ability to help you.

Similarly, if you are uploading a zipped archive, you should simply create a .ZIP file and not a self-extracting .EXE as many users will not run your EXE file.
See more
See less

How to align summary values in List Control with Client Side Grouping.

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    How to align summary values in List Control with Client Side Grouping.

    The Issue
    • I have a List Control in a UX with several columns of numeric data.
    • I use Client Side Grouping to summarize the data.
    • How can I align the summary data in the group header with the data in the list?


    HTML Header code snip...
    group+' '+
    Number(this.groupSummary(data,'Budget:N','sum')).toFormat('$#,##0.00;$ (#,##0.00);------')+' '+
    Number(this.groupSummary(data,'Budget_Modifications:N','sum')).toFormat('$#,##0.00;$ (#,##0.00);------')

    Produces...
    ClientSideGroupHeader.PNG

    #2
    Re: How to align summary values in List Control with Client Side Grouping.

    I have not figured out a way that I am real happy with yet, but what works for me is to set the alignment to right and add a padding value to get it to line up. I guess you could add a padding value from the left as well. Another way is to create a table with in your case I would say 4 columns then set the td width to a percentage or a hard number.
    Win 10 64 Development, Win 7 64 WAS 11-1, 2, Win 10 64 AA-1,2, MySql, dbForge Studio The Best MySQL GUI Tool IMHO. http://www.devart.com/dbforge/mysql/studio/

    Comment


      #3
      Re: How to align summary values in List Control with Client Side Grouping.

      Ah, so I am not the only one! Thanks for sounding off Frank. I have been working with <span> and <div> tags, but it simply does not work. This is especially true if the re-size column option is enabled. I sent a note to Dave McCormak, showing how systems such as Lotus Notes could do this with a click and a choice from a drop down.

      Alpha Development, help!

      Comment


        #4
        Re: How to align summary values in List Control with Client Side Grouping.

        If you have the same problem, please help! Please go to Idea Scale and vote for this issue, or drop a comment!

        Click here to help. http://alphasoftware.ideascale.com/a...e/688596-14754

        Comment


          #5
          Re: How to align summary values in List Control with Client Side Grouping.

          Thank the gods of programing that I wasn't the only one having this issue! I'm not using the resizing option but I have 25 columns rather than 4 so you can imagine how rough it is trying to get the summary columns to line up correctly (seems like this shouldn't be so hard). I have dropped a comment on the Idea Scale so hopefully we'll see progress on this soon!

          Comment


            #6
            Re: How to align summary values in List Control with Client Side Grouping.

            Thanks for the vote Josh. Alpha, we need this! BTW I too have way more than 4 columns.

            Comment


              #7
              Re: How to align summary values in List Control with Client Side Grouping.

              This is still a painful issue!

              Comment


                #8
                Re: How to align summary values in List Control with Client Side Grouping.

                one way would be to set explicit widths for each column in the list (i.e. do NOT use flex() widths)

                then say you have these columns

                column1 (width 200px)
                column2 (width 300px)
                column3 (width 150px)

                and you want to position a control in the header above column 3, you would add this markup to the group header

                Code:
                <table>
                <tr>
                      <td style="width:200px"></td>
                     <td style="width:300px"></td>
                    <td style=width: 150px">value above column3 here</td>
                </tr>
                </table>

                Comment


                  #9
                  Re: How to align summary values in List Control with Client Side Grouping.

                  here is another technique that will work with flex column widths.

                  in the definition of the group header or group header you would include javascript like this:


                  Code:
                  (function(lObj,data) {
                  	var cnt = lObj.groupSummary(data,'City','count');
                  	
                  	var id = lObj.contId;
                  	id = id.replace(/\W/g,'');
                  	var t = '<div class="' + id + 'C0" style="float:left;">&nbsp;</div>'+
                  	'<div class="' + id + 'C1" style="float:left;" >&nbsp;</div>'+
                  	'<div class="' + id + 'C2" style="float:left;">&nbsp;</div>'+
                  	'<div class="' + id + 'C3" style="float:left;">'+'Count: ' + cnt+'</div>'+
                  	'<br style="clear:both;">';
                  	return t;
                  }(this,data))

                  this example assumes that there are 4 columns (C0 through C3).

                  note that to compute summary values you use lObj.groupSummary() not this.groupSummary()

                  Comment


                    #10
                    Re: How to align summary values in List Control with Client Side Grouping.

                    This is the closest I can come to getting the summary section aligned. At least without tweaking every control and field individually.

                    The list has some alignment problems that I can't figure out. The header and my summary section align perfectly. I have the header alignment set to right for the numeric fields but as you can see the header and data columns do not align. The list is wider than the header and summary. I have examined the HTML in firebug but I don't understand where the CSS for the list is defined which I am guessing is the issue.

                    2015-04-07_16-47-26.png

                    As you can see the header and my summary footer are aligned but the list is wider.
                    If I tweak the fields in the list by adding right padding of 10px The columns align better. But quite honestly this is a pain in the @$$ (actually my poor mouse driving arm) and the table width of my summary section is still not as wide.

                    What I have is a list which has the data footer property enabled. In the data footer HTML I am using content from an injectible container, In the injectible container I have a freeform container control that has the html for the summary data footer. In the afterClientSideSummaryCompute event I set the innerHTML of the div with id of "totalChargesDiv" in the freeform container with the summary value.

                    Code:
                    <table style="background-color:#c0c0c0;">
                    	<tr>
                    	<td style="width:200px">&nbsp;</td>
                    	<td style="width:250px">&nbsp;</td>
                    	<td style="width:60px">&nbsp;</td>
                    	<td style="width:180px;text-align:right;" colspan="2">TOTAL CHARGES:</td>
                    	<td style="width:120px;text-align:right;"><div id="totalChargesDiv">0.00</div></td>
                    	<td style="width:40px">&nbsp;</td>
                    </tr>
                    </table>
                    This table has the same number of columns with the same widths as the column in the list layout.

                    This problem is not a deal breaker but I wish it were easier to align columns.
                    Attached Files
                    Win 10 64 Development, Win 7 64 WAS 11-1, 2, Win 10 64 AA-1,2, MySql, dbForge Studio The Best MySQL GUI Tool IMHO. http://www.devart.com/dbforge/mysql/studio/

                    Comment


                      #11
                      Re: How to align summary values in List Control with Client Side Grouping.

                      we have added a genie to the pre-release build (available in tomorrow's pre-release build) that makes it easy to generate the javascript code that aligns the columns

                      here is the video explaining the new genie

                      UX Component - List Control
                      Client-side Summary Values - Aligning Summaries with List Columns
                      The List control allows you to insert client-side group breaks in a List and to display summary values in the group headers and footers. In a columnar List layout you typically want to align these summary values with the appropriate List columns.

                      In this video we show how a genie can generate the necessary Javascript to make it easy to align the summary data with the corresponding List column.

                      http://www.ajaxvideotutorials.com/V1...lumn_align.swf


                      Requires build 4465 or above
                      Date added: 2015-04-07

                      Comment


                        #12
                        Re: How to align summary values in List Control with Client Side Grouping.

                        Now that's very cool!

                        Comment


                          #13
                          Re: How to align summary values in List Control with Client Side Grouping.

                          A HUGE Thank You to Selwyn Rabins and all the Alpha Developers for helping make this easier in a future version, and getting this version to work now! I have new found respect for how much is done for developers in the Alpha Anywhere app server.

                          While I have not yet reviewed the video, I got the work around posted at 1:20 today to work for all 9 of my columns. The code is placed directly in the HTML expression of the Client Side Group Break. No calling external functions.
                          Last edited by westridge; 04-07-2015, 10:50 PM.

                          Comment


                            #14
                            Re: How to align summary values in List Control with Client Side Grouping.

                            Maybe I am not understanding something here. Don't summary values typically go in the footer area?
                            Anyhow I was able to simplify my process by eliminating the injectible container and inserting the HTML directly into the footer HTML. Either that was not available when I first tried this or I could not get that to work. I still have the slight alignment issue.
                            Win 10 64 Development, Win 7 64 WAS 11-1, 2, Win 10 64 AA-1,2, MySql, dbForge Studio The Best MySQL GUI Tool IMHO. http://www.devart.com/dbforge/mysql/studio/

                            Comment


                              #15
                              Re: How to align summary values in List Control with Client Side Grouping.

                              "Don't summary values typically go in the footer area?" - Frank Bicknell.
                              Yes, typically summaries appear in the footer.
                              We are working toward a "drill down" report that is "live." In other words, users would see roll-up summaries at the start. Then they could explore the detail data by clicking on the summary values. In this way, it's more intuitive to show the summary values at the top.

                              Comment

                              Working...
                              X