Alpha Video Training
Results 1 to 23 of 23

Thread: Grid Detail Column Heading JS syntax

  1. #1
    Volunteer Moderator Peter.Greulich's Avatar
    Real Name
    Peter Greulich
    Join Date
    Apr 2000
    Location
    Boston, MA
    Posts
    11,649

    Default Grid Detail Column Heading JS syntax

    That's a mouthful. I need to be able to dynamically change the label (i.e. column heading) of certain fields in a grid's detail section. I have a radio button control which has a JavaScript OnChange event which works perfectly. e.g. It is easy to change another field's value:
    Code:
    vStatus = {grid.Object}._getValue('D','CHARG_STAT');
    
    switch (vStatus)
    {
    case 'Charge':
      vCode = 'A';
      break;
    case 'Credit':
       vCode = 'B';
      break;
    case 'N/C':
      vCode = 'C';
      break;
    case 'N/C-Exclude':
      vCode = 'D';
      break;
    default:
      vCode = 'A';
    }
    
    {grid.Object}._setValue('D','CHARG_CODE',vCode);
    Alpha gives us the syntax to read/write a field value w. the {grid.Object}._getValue() & {grid.Object}._setValue(). But I don't see any similar functionality to get at the field's column heading. Are there any JS experts out there who know how to read/write the label?


    P.S. I think the xbasic equivalent is: detailField_info[60].Column.Heading = "Hours". But I need client side functionality, so xbasic doesn't work.

  2. #2
    "Certified" Alphaholic peteconway's Avatar
    Real Name
    Peter Conway
    Join Date
    Oct 2005
    Location
    Melbourne, Australia
    Posts
    2,669

    Default Re: Grid Detail Column Heading JS syntax

    This should do it.

    http://support.alphasoftware.com/Wha...le%20Languages

    Sorry - didn't see the Java Request. Handy link anyhow.
    Last edited by peteconway; 10-22-2009 at 07:09 AM.
    Insanity: doing the same thing over and over again and expecting different results.
    Albert Einstein, (attributed)
    US (German-born) physicist (1879 - 1955)

  3. #3
    Volunteer Moderator Peter.Greulich's Avatar
    Real Name
    Peter Greulich
    Join Date
    Apr 2000
    Location
    Boston, MA
    Posts
    11,649

    Default Re: Grid Detail Column Heading JS syntax

    Quote Originally Posted by peteconway View Post
    This should do it.

    http://support.alphasoftware.com/Wha...le%20Languages

    Sorry - didn't see the Java Request. Handy link anyhow.
    Thanks, Actually, I tried using the language support, but I couldn't get it to fire in the context of a field's OnChange event. I don't believe that language support is dynamic in that context.

  4. #4
    "Certified" Alphaholic mmaisterrena's Avatar
    Real Name
    Mauricio Maisterrena
    Join Date
    Nov 2006
    Location
    Torreon, Mexico
    Posts
    1,435

    Default Re: Grid Detail Column Heading JS syntax

    Yes Peter it can be used to change labels to any value you want, Instead of defining a language you just define a second option for your labels.
    but do you want the labels to change in real time? (no page refresh)
    Cheers
    Mauricio


  5. #5
    Volunteer Moderator Peter.Greulich's Avatar
    Real Name
    Peter Greulich
    Join Date
    Apr 2000
    Location
    Boston, MA
    Posts
    11,649

    Default Re: Grid Detail Column Heading JS syntax

    Quote Originally Posted by mmaisterrena View Post
    Yes Peter it can be used to change labels to any value you want, Instead of defining a language you just define a second option for your labels.
    but do you want the labels to change in real time? (no page refresh)
    Thanks, Mauricio. Yes. Like I said I tried it. I need to be able to dynamically change the label based upon a field value. But I found the answer (I think):

    http://support.alphasoftware.com/Wha...0Field%20Label

    Just have to test it in the context of a detail section.

  6. #6
    Volunteer Moderator Peter.Greulich's Avatar
    Real Name
    Peter Greulich
    Join Date
    Apr 2000
    Location
    Boston, MA
    Posts
    11,649

    Default Re: Grid Detail Column Heading JS syntax

    Quote Originally Posted by Peter.Greulich View Post
    For anyone interested...

    The sample JavaScript code in the above link works as advertised for the grid part of a grid, but not for the detail part. Here is the difference:

    GRID PART:
    $('{grid.componentname}.LBL.R' + data.rowNumber + '.' + 'HRS_QTY' + '').innerHTML = vHrs_Qty_Label;

    DETAIL PART:
    $('{grid.componentname}.D.LBL.R' + data.rowNumber + '.' + 'HRS_QTY' + '').innerHTML = vHrs_Qty_Label;

    In the above example HRS_QTY (CAPS required) is the field and
    vHrs_Qty_Label is the variable.

    Thanks to Selwyn for clarifying this!

  7. #7
    Member
    Real Name
    ralph
    Join Date
    Dec 2009
    Posts
    30

    Default Re: Grid Detail Column Heading JS syntax

    Quote Originally Posted by Peter.Greulich View Post
    For anyone interested...

    The sample JavaScript code in the above link works as advertised for the grid part of a grid, but not for the detail part. Here is the difference:

    GRID PART:
    $('{grid.componentname}.LBL.R' + data.rowNumber + '.' + 'HRS_QTY' + '').innerHTML = vHrs_Qty_Label;

    DETAIL PART:
    $('{grid.componentname}.D.LBL.R' + data.rowNumber + '.' + 'HRS_QTY' + '').innerHTML = vHrs_Qty_Label;

    In the above example HRS_QTY (CAPS required) is the field and
    vHrs_Qty_Label is the variable.

    Thanks to Selwyn for clarifying this!
    I discovered this syntax ony works in a watch event for DB fields, non-DB fields were not shown in selection window. I need a solution that you can use in a Button/Image/Static Text OnClick event.
    Last edited by graycoder63; 02-07-2010 at 06:16 PM.

  8. #8
    Volunteer Moderator Peter.Greulich's Avatar
    Real Name
    Peter Greulich
    Join Date
    Apr 2000
    Location
    Boston, MA
    Posts
    11,649

    Default Re: Grid Detail Column Heading JS syntax

    Quote Originally Posted by graycoder63 View Post
    I discovered this syntax ony works in a watch event. Did you find a solution that you can use in a field's OnClick event.
    No. I use it in a watch event.

  9. #9
    Member Bob Moore's Avatar
    Real Name
    Robert Moore
    Join Date
    Jul 2003
    Location
    Boston, MA
    Posts
    443

    Default Re: Grid Detail Column Heading JS syntax

    Here's a neat little trick that I will make into a short video when I get a chance.

    Instead of entering the label text, create a div for the label text, then populate that div by setting the innerHTML property of the div through one of the many available Javascript events.

    So for the label enter something like :

    <div id="label_1"></div>

    Now through any applicable Javascript event enter:

    $('label_1').innerHTML='My New Label';

  10. #10
    Member
    Real Name
    ralph
    Join Date
    Dec 2009
    Posts
    30

    Default Re: Grid Detail Column Heading JS syntax

    I can get this to work in a grid but not in Detail View.
    Firefox traced the error to A5.JS line 3166
    else return this._newDVValues[colNum];
    with error code this._newDVValues is undefined
    Build 3523
    I created a DB with 3 fields
    MemberID N4
    Company C10
    Zip C10

    Code in watch event Detail View for Company is:
    var COMPANY = *gv('COMPANY');
    var labelValue = 'Zip code';
    if( COMPANY != 'USA') labelValue = 'Postal Code';
    $('{grid.componentname}.D.LBL.R' + data.rowNumber + '.'+'ZIP'+'').innerHTML = labelValue;

  11. #11
    Member
    Real Name
    ralph
    Join Date
    Dec 2009
    Posts
    30

    Default Re: Grid Detail Column Heading JS syntax

    Thanks Bob

    Works.

    I really appreciate you and the other guru's gracious contributions.

    You must not have a life outside of Coding and Photography.

    Ralph

  12. #12
    Member
    Real Name
    ralph
    Join Date
    Dec 2009
    Posts
    30

    Default Re: Grid Detail Column Heading JS syntax

    Quote Originally Posted by Bob Moore View Post
    Here's a neat little trick that I will make into a short video when I get a chance.

    Instead of entering the label text, create a div for the label text, then populate that div by setting the innerHTML property of the div through one of the many available Javascript events.

    So for the label enter something like :

    <div id="label_1"></div>

    Now through any applicable Javascript event enter:

    $('label_1').innerHTML='My New Label';
    I am using this technique to change field labels but have not found a way to initialize them during the onDetailViewRender Event.

    Need to have the defaults labels displayed during the initial render until changed.

    Row label for First Name is
    <div id="FNLABEL1"></div>
    paried with
    e._setElement.FNLABEL1.value = ("First Name")

    <div id="{grid.componentname}.FNLABEL1"></div>
    paried with
    e._setGridElement.FNLABEL1.value = "First Name"

    Tried both of these in onDetailViewRender Event

    e._setGridElement.FNLABEL1.value = "First Name"
    e._setElement.FNLABEL1.value = ("First Name")

    Any suggestions where and with what code.

    Thanks
    Ralph

  13. #13
    Member Bob Moore's Avatar
    Real Name
    Robert Moore
    Join Date
    Jul 2003
    Location
    Boston, MA
    Posts
    443

    Default Re: Grid Detail Column Heading JS syntax

    Here's a video describing the technique I outlined earlier.

    http://www.screencast.com/t/YmMxMzFkNzA

  14. #14
    Member
    Real Name
    ralph
    Join Date
    Dec 2009
    Posts
    30

    Default Re: Grid Detail Column Heading JS syntax

    Quote Originally Posted by Peter.Greulich View Post
    No. I use it in a watch event.
    Peter:
    Did you get your Radio Button to work in the Detail view's watch event?

  15. #15
    Member
    Real Name
    ralph
    Join Date
    Dec 2009
    Posts
    30

    Default Re: Grid Detail Column Heading JS syntax

    Quote Originally Posted by Peter.Greulich View Post
    No. I use it in a watch event.
    Attached are 3 PNGs that show a radio button, in a Detail View, being used to change field labels to match user's language selection. Since I am using a Radio Button their selection is stored in this record, so when they visit this gird the labels change to match their selected language.
    The A5 language process requires a grid refresh and would increase server traffic, which defeats some of the purpose of using Ajax.
    My grid in this app. is unfortunately very large.
    I haven't figured how to change button and tab text. But this is a start.
    You can see in the PNG's the record # increment and the labels dynamically change.
    Last edited by graycoder63; 02-10-2010 at 10:21 PM.

  16. #16
    "Certified" Alphaholic mmaisterrena's Avatar
    Real Name
    Mauricio Maisterrena
    Join Date
    Nov 2006
    Location
    Torreon, Mexico
    Posts
    1,435

    Default Re: Grid Detail Column Heading JS syntax

    good job

    BTW
    In mexico we actually say "codigo postal" no "zona postal" but maybe they use that in Spain who knows
    Cheers
    Mauricio


  17. #17
    Member
    Real Name
    Kim Gillan
    Join Date
    Apr 2011
    Location
    Denver
    Posts
    106

    Default Re: Grid Detail Column Heading JS syntax

    Quote Originally Posted by Peter.Greulich View Post
    For anyone interested...

    The sample JavaScript code in the above link works as advertised for the grid part of a grid, but not for the detail part. Here is the difference:

    GRID PART:
    $('{grid.componentname}.LBL.R' + data.rowNumber + '.' + 'HRS_QTY' + '').innerHTML = vHrs_Qty_Label;

    DETAIL PART:
    $('{grid.componentname}.D.LBL.R' + data.rowNumber + '.' + 'HRS_QTY' + '').innerHTML = vHrs_Qty_Label;

    In the above example HRS_QTY (CAPS required) is the field and
    vHrs_Qty_Label is the variable.

    Thanks to Selwyn for clarifying this!
    Dynamic Heading & Grid Sort

    I need to be able to select the Grid Column to display and sort fieldnamevalue for that column based on a dynamic fields in the SEARCH PART.

    From the SearchPart, the Grid Column Field name is selected, along with a value (these are done through combo/box dynamic lookups).

    Is there an easier way to transform these variables into a Grid Column and Sort value?

    GridColumntitle = Search defined fieldname
    GirdColumn search/sort = Search defined fieldvalue

    If using the Variables in the quoted example, HRS_QTYfield would be a variable that is selected from a combo/box lookup in the SEARCHpart. varHRS_QTY then needs to be become a column in the corresponding grid that is searchable based on the varHRS_QTYvalue that is also selected from a combo/box lookup in the SEARCHpart.

    Thank you! appreciate all the help from everyone! Kim

  18. #18
    Member
    Real Name
    Kim Gillan
    Join Date
    Apr 2011
    Location
    Denver
    Posts
    106

    Default Re: Grid Detail Column Heading JS syntax

    I have the Grid column Label working now (fairly easy to do), dynamically computed.
    In the Gid Column Heading field I have:
    <div id="muni_label"> </div>

    And I placed the following code in
    <Grid><events>AfterSearchSubmit

    var muni_label = '';

    window['muni_label'] = {grid.object}._getValue('S','MUNI_CATEGORY')
    if(window['muni_label']) muni_label = window['muni_label'];
    else muni_label=' ';

    $('muni_label').innerHTML = muni_label;

    NOW, if I can just get the correct fieldname & fieldvalue for the SEARCH to work on this column, grabbing the correct field from the table.

  19. #19
    Member
    Real Name
    Bob Alston
    Join Date
    Feb 2012
    Location
    Dallas
    Posts
    180

    Default Re: Grid Detail Column Heading JS syntax

    Bob Moore and others.

    I need to be able to change the labels in a Detail grid view based on some system defined parmeters that I have in a table. I can easily read them in xbasic and save them as session variables. How can I get these values available to me to use in Javascript? I am new to javascript and new to web apps so the "how to move data from the host to the client" is still something I don't understand well.

    bob
    Bob Alston
    -------------------------------------------------------------------
    http://webpages.charter.net/bobalston/bob1.htm
    Alpha five v11 Tips

  20. #20
    Member
    Real Name
    Kim Gillan
    Join Date
    Apr 2011
    Location
    Denver
    Posts
    106

    Default Re: Grid Detail Column Heading JS syntax

    Ha ! Welcome to my world! I'm still trying to figure out the javascript stuff. Most the time I seem to accidentally stumble on to something that works, or I copy others work from here ! :))

    You could modify the following for the detailview

    <Grid><events>AfterSearchSubmit

    var varname = '';

    window['varname'] = {grid.object}._getValue('D','FIELD_NAME')
    if(window['varname']) varname = window['varname'];
    else varname =' ';

    $('varname').innerHTML = varname;
    ~ Instead of the "AfterSearchSubmit" you would need to use the appropriate Event for the DetailView
    ~ _getvalue is a 'D' for "detailview" : this returns the VALUE of the FIELD for the 'FIELDNAME'
    ~ put it in a "window['varname']" to pass to other events

    then, for the TITLE of your LABEL field try:

    <div id="varname"> </div>

    This might not be exactly what you are looking for, but maybe it will give you a start. Like I said, i'm no expert in this, just kind of stumble my way through all the javascript stuff.

  21. #21
    Member
    Real Name
    Bob Alston
    Join Date
    Feb 2012
    Location
    Dallas
    Posts
    180

    Default Re: Grid Detail Column Heading JS syntax

    I am trying to get this to work for the Detail part

    DETAIL PART:
    $('{grid.componentname}.D.LBL.R' + data.rowNumber + '.' + 'HRS_QTY' + '').innerHTML = vHrs_Qty_Label;

    Seems to me it is unclear on the single and double quotes. looks like a single double quote right before the ")". If I treat as a single double quote character, I get an error. If i treat as two adjacent single quotes, no error but it doesn't work. unfortunately the syntax is still greek to me.

    Any suggestions?

    bob

    P.s. possible that mine is different is that the detail view is alone and is not from a grid, so the rownumber field may be wierd.

    I am also confused as to why Bob Moore's technique in his video worked then but not now?????
    Last edited by bobalston; 03-06-2012 at 10:19 PM.
    Bob Alston
    -------------------------------------------------------------------
    http://webpages.charter.net/bobalston/bob1.htm
    Alpha five v11 Tips

  22. #22
    Member
    Real Name
    Kim Gillan
    Join Date
    Apr 2011
    Location
    Denver
    Posts
    106

    Default Re: Grid Detail Column Heading JS syntax

    I have not directly checked the syntax for this statement, but it appears that you have an
    extra ' + " ' at the end.

    $('{grid.componentname}.D.LBL.R' + data.rowNumber + '.' + 'HRS_QTY' + '').innerHTML = vHrs_Qty_Label;

  23. #23
    Member
    Real Name
    Bob Alston
    Join Date
    Feb 2012
    Location
    Dallas
    Posts
    180

    Default Re: Grid Detail Column Heading JS syntax

    I now have resolved the issue in my using the Bob Moore technique. I had to use a different event ( I use onGridRender) but it works great.

    bob
    Bob Alston
    -------------------------------------------------------------------
    http://webpages.charter.net/bobalston/bob1.htm
    Alpha five v11 Tips

Similar Threads

  1. Dynamic Column Heading Question
    By Tommy Thompson in forum Application Server Version 9 - Web/Browser Applications
    Replies: 5
    Last Post: 06-24-2016, 12:06 AM
  2. Changing Value of Column Heading
    By Rhett Scott in forum Alpha Five Version 4
    Replies: 15
    Last Post: 08-11-2013, 11:05 AM
  3. Dynamically change detail column heading
    By Peter.Greulich in forum Application Server Version 10 - Web/Browser Applications
    Replies: 6
    Last Post: 10-21-2009, 07:59 PM
  4. Where is the browse property for column heading color when column selected?
    By rmcgaffic in forum Alpha Five Version 9 - Desktop Applications
    Replies: 2
    Last Post: 05-14-2009, 04:50 PM
  5. Cannot delete Browser Column Heading in Vs 8
    By dpara01 in forum Alpha Five Version 8
    Replies: 0
    Last Post: 03-21-2007, 04:00 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •