PowerBuilder ‘Gotcha’ – Grid Datawindows with Picture Controls - CodeProject 10,436,295 members (70,087 online) Sign in Email Password Forgot your password? Sign in using home articles Chapters and Sections> Search Latest Articles Latest Tips/Tricks Top Articles Beginner Articles Technical Blogs Posting/Update Guidelines Article Help Forum Article Competition Submit an article or tip Post your Blog quick answers Ask a Question about this article Ask a Question View Unanswered Questions View All Questions... C# questions ASP.NET questions VB.NET questions C#4.0 questions Javascript questions discussions All Message Boards... Application Lifecycle> Running a Business Sales / Marketing Collaboration / Beta Testing Work & Training Issues Design and Architecture ASP.NET JavaScript C / C++ / MFC> ATL / WTL / STL Managed C++/CLI Adobe Technologies C# Free Tools Objective-C Ruby On Rails Database Hardware & Devices> System Admin Hosting and Servers Java .NET Framework Android Mobile Sharepoint Silverlight / WPF Visual Basic Web Development Site Bugs / Suggestions features CodeProject.TV Discuss CodeProject.TV Component & Service Catalog Competitions News The Insider Newsletter The Daily Build Newsletter Newsletter archive Surveys Product Showcase Research Library CodeProject Stuff community The Insider News The Lounge ? The Weird & The Wonderful The Soapbox Press Releases Who's Who Most Valuable Professionals Company Listings Non-English Language > General Indian Topics General Chinese Topics help What is 'CodeProject'? General FAQ Ask a Question Bugs and Suggestions Article Help Forum Site Map Advertise with us Employment Opportunities About Us Search within: Articles Videos Quick Answers Messages Product Catalog Articles » General Programming » Programming Tips » General Next ArticleBrowse CodeStatsRevisions (4)Alternatives Comments & Discussions (3) PowerBuilder ‘Gotcha’ – Grid Datawindows with Picture Controls By Matt Balent, 29 Jun 2012 0.00 (No votes) Rate this: Please Sign up or sign in to vote. So I’m working on a ‘dashboard’ style datawindow in an application which shows a grid of data along with some graphics so the user can easily see changes/important stuff. There are a number of reasons to use a grid datawindow for this, especially since they can easily be changed by the user to suit their particular tastes and preferences. Since the individual columns can be resized by the user, I can’t use the ‘display as bitmap’ option on a column to display my graphics since they can be resized which screws up the image on the datawindow. Fine, I’ll use picture objects placed on the individual columns and then use expressions to control the positioning of them automatically. Gee, isn’t PowerBuilder great? Now in my particular situation I have a series of picture objects placed on a column with the value of the column itself determining which of them is visible. This is standard stuff achieved via an expression on the visual property of the picture objects . The next thing to do is to set the X position on the picture objects based on the column it is placed upon; I’d like the position of the picture to change dynamically as the column itself changes due to the user dragging the column to a different position or if they make it larger/smaller in width. So far, so good – I’m starting to count my chickens… I fire up the app and ‘wha, wha, wha, wha, whaaaa…‘. Here is the application when I launch it. Looks fine, my visible expressions are correct. I resize the Mood column to make it larger and… Something’s not working as expected. Okay, lets try re-arranging the columns by dragging Name after Mood. Well this sucks, grrrr…. What happens if I make the Mood column smaller? Sigh. Okay boss, when is the deadline for this? First let’s tackle the positioning issue. To make the expressions on the pictures work correctly, each has to be unique. So these expressions will not work: long(describe("custmood.X")) + 100 long(describe("custmood.X")) + 100 long(describe("custmood.X")) + 100 These are the X position expression for my three picture objects on the datawindow column. To make them unique I change them to: long(describe("custmood.X")) + 100 // p_1.X long(describe("custmood.X")) + 100 + 0 // p_2.X long(describe("custmood.X")) + 100 * 1 // p_3.X Note also that ‘+ 100′ is different from ‘+100′ as far as this goes Now when I run the app and I change the order of the columns in the grid I get: Moving Name to after Mood. Cool One thing of note. If you are going to use a Modify to change the X position expressions at runtime rather than within the datawindow definition, each of the ‘New’ expressions must be different from those in the original. Thanks to my manager for this tidbit. The second issue is a bit trickier and is one I’ve encountered at various times in my PB career. You can look and look and look online for answers to this and find either nothing or many suggestions which don’t work too well. Often you are faced with preventing the user from resizing the column which eliminates one of the main reasons you choose the grid datawindow in the first place. Since we are dealing with controls which we have created in the datawindow painter to be the size we want them to be when they appear to the user, all we have to do is capture their widths and then re-apply them once the user has resized the columns on the datawindow. However, we have to create a user event on the datawindow to do this since there is no standard event which is triggered when the user resizes a grid column. First define an instance variable to hold the modify information on the picture objects for the datawindow. Next capture the initial values of the widths of the picture objects once the window opens; a ‘post open’ style event is good for this. If your application dynamically changes these for some reason during run time, you will have to reset this after the change so the property is set to the correct value. Define a user event on the datawindow in question which will perform the modify on the picture objects. Define a user event mapped to pbm_dwnlbuttonup which will post the first user event. This event is triggered when a user releases the left mouse button on the datawindow (which happens when the are finished resizing the column). //instance var and postopen event type variables string is_picture_widths end variables event we_postopen();// triggered from open of window string ls_objects, ls_object, ls_type long ll_col_pos, ll_col_start, ll_len // load picture settings to instance variable ls_objects = dw_1.Object.DataWindow.Objects // go through tab separated list ll_col_pos = pos(ls_objects, '~t') ll_col_start = 1 ll_len = len(ls_objects) DO WHILE ll_col_start < ll_len ls_object = mid(ls_objects, ll_col_start, ll_col_pos - ll_col_start) ls_type = dw_1.describe(ls_object + '.type') IF ls_type = 'bitmap' then //only concerned about bitmaps (picture objects) is_picture_widths += ls_object + '.width = ' + dw_1.describe(ls_object + '.width') + '~r' END IF ll_col_start = ll_col_pos + 1 ll_col_pos = pos(ls_objects, '~t', ll_col_start) IF ll_col_pos = 0 then ll_col_pos = ll_len + 1 END IF LOOP end event event ue_lbuttonup;// call event to resize pictures if needed, mapped to PBM_DWNLBUTTONUP on datawindow this.setredraw(FALSE) this.event post ue_checkmodified() end event event ue_checkmodified();// posted from ue_lbuttonup string ls_mess IF this.object.datawindow.syntax.modified = "yes" THEN ls_mess = modify(is_picture_widths) // re apply the picture widths IF Len(ls_mess) > 0 THEN // error condition END IF END IF setredraw(true) //was set to false in calling event end event So now when run the application we get this. Resize the column with the picture controls Now make it smaller. Ahhhh, all is good again. I’ve attached a sample application (PB12.5.1) demonstrating how the resizing does not work and how it can be corrected. Exports of the objects are included as well if you need to create your own version. When running the example, first resize/reposition the columns after the window opens. This will show the problems with the picture objects. When you click on the ‘Modify Bitmap X Expressions’ button the changes in the X position expressions for the picture objects will be displayed in the multi line edit control. The ‘Reset DWO’ button resets the datawindow object if you need to. CodeProject License This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL) About the Author Matt Balent Software Developer (Senior) United States PowerBuilder MVP based in Charlotte, NC Article Top Comments and Discussions You must Sign In to use this message board. Search this forum Profile popups Spacing RelaxedCompactTight Noise Very HighHighMediumLowVery Low Layout NormalOpen TopicsOpen AllThread View Per page 102550 First Prev Next Needed an expression on the Width property. Paul Horan29-Jun-12 10:25 Turns out that none of that code is necessary. But I wasn't aware of the whole "expressions must be unique" thing, I have to admit. I noticed you didn't have expressions on the width property, so I gave this a try: - Commented out the entire ue_lbuttonUp event, so that none of your PowerScript Modify statements would be executed. - Added an expression on the Width property of the three bitmap controls. p_1.width = 96 + 0 P_2.width = 95 + 1 p_3.width = 97 - 1 Now they all behave nicely. They move with the Mood column, and don't resize as the column stretches or shrinks. Paul Horan[TeamSybase] Sign In·View Thread·Permalink Re: Needed an expression on the Width property. Matt Balent29-Jun-12 13:45 Yea, I put the code in the example to demonstrate a 'before' and 'after'. You could just as easily define the picture objects in the DWO with unique expressions. Sign In·View Thread·Permalink My Similar Experience brother.gabriel28-Jun-12 18:10 I did something similar in one of my projects. I was loading a csv file into a gridview, where the first two columns were booleans only. In my gridview I wanted them to show as checkmarks instead. So when the application starts, it loads the csv file and adds two more columns. For each value in the two boolean columns, it loaded a checkmark or a red x into the new columns - when it was finished, the two textual boolean columns are hidden. Now, when the user clicks on the checkmarks or x's, it toggles the image and also sets the boolean value in the hidden columns. When the information is saved, it saves the booleans as text again, just like they were when they were loaded. This way, all the info is saved in a simple csv file. The reason I did it this way was so that I could have a column that had only a checkmark or a red x - and the entire column could be formatted to just display graphics - it doesn't have to deal with text at all. Likewise, the boolean columns are really only text entries with "true" and "false". It looks real sharp, and works like a charm. Nice article, however! I wish I had it before I worked on my own project! Sign In·View Thread·Permalink Last Visit: 31-Dec-99 18:00 Last Update: 4-Mar-14 2:36Refresh1 General News Suggestion Question Bug Answer Joke Rant Admin Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages. About Article So I’m working on a ‘dashboard’ style datawindow in an application which shows a grid of data along with some graphics so the user can easily see changes/important stuff. There are a number of reasons to use a grid datawindow for this, especially since they can easily be changed by Type Article Licence CPOL First Posted 28 Jun 2012 Views 6,995 Bookmarked 2 times WindowsDevBeginnerIntermediateAdvanced, + Top News News on the future of C# as a language Get the Insider News free each morning. Related Videos Related Articles Case Study: Refactoring a PowerBuilder Classic Application Service-Based Architecture for the DataWindow Refactoring Corner: Partitioning DataWindow Technology Web Services DataWindows Merging Newer Technology into an Existing Code Line Sybase PowerBuilder Meets Microsoft .NET RESTful Web Services: A Quick-Start How-to Guide - Part 1 DataWindow Magic: Master_Detail Object Peering Behind the PowerBuilder .NET Assembly Curtain Using the Tag Property – Part 1 Introduction to Pocket PC Development Slicing the Pie with PowerBuilder .NET 12.1 EBF Project Partitioning Roll your own ASP.NET Chart Control CP2 Universal Gui LibrarY (UGLY) Project - MAIN PAGE The Missing Link Catel - Part 2 of n: Using WPF Controls and Themes The Grid Control Using the Tag Property – Part 3 GridPanel COMET (or Reverse AJAX) based Grid Control for ASP.NET Web Applications - Scalable, High Performance and Low Latency Grid Control Related Research The Essential Guide to iPhone & iPad App Testing: A Guide for Developers in USA and Canada Essential Keys to Mobile Usability Learn Agile: Ten Tips for Launching and Testing High Quality Apps for the American Market Insider Secrets on API Security From Experts at Securosis [Webinar] Permalink | Advertise | Privacy | Mobile Web01 | 2.8.140227.1 | Last Updated 29 Jun 2012 Article Copyright 2012 by Matt BalentEverything else Copyright © CodeProject, 1999-2014 Terms of Use Layout: fixed | fluid