Alpha Video Training
Results 1 to 10 of 10

Thread: Is there a way to assign a different style to the detail view of a grid?

  1. #1
    Member
    Real Name
    Josh Cole
    Join Date
    Jun 2012
    Posts
    678

    Default Is there a way to assign a different style to the detail view of a grid?

    I have a somewhat unique grid with a detail view. I applied styling that works well for the RO part but it makes the detail view look awful. Is there an easy way to apply a different style to the detail view?

    Thanks for any feedback!

  2. #2
    Member
    Real Name
    Josh Cole
    Join Date
    Jun 2012
    Posts
    678

    Default Re: Is there a way to assign a different style to the detail view of a grid?

    I think I should be able to use javascript to affect the changes I need. In my detail view I want to set the background color of the detail view popup windows to a different color than what is specified in the stylsheet using

    $('GRID1.DETAILVIEW_PART.FORM').style.background ='#013668'

    It is not working though. No errors, it just doesn't do anything for me. Using a pop-up window to display detail.

  3. #3
    Member
    Real Name
    Josh Cole
    Join Date
    Jun 2012
    Posts
    678

    Default Re: Is there a way to assign a different style to the detail view of a grid?

    When I select the element with firebug. This is the html for that specific element.

    <table id="GRID1.DETAILVIEW_PART.FORM" class="ProjectMgmtProjectsGrid" cellspacing="0" cellpadding="2" a5isdirty="false" a5dataregion="A5DataRegion" a5ondirty="GRID1_GridObj._setDVControlDirty()" a5focuscontrol="V.R1.NAME">

    I am not sure if I need to somehow also reference the window object as well since I am using a pop window to affect the change. This is the grid part of the window that I've pasted the html in for.

  4. #4
    Member
    Real Name
    Josh Cole
    Join Date
    Jun 2012
    Posts
    678

    Default Re: Is there a way to assign a different style to the detail view of a grid?

    Tried $('GRID1.DETAILVIEW_PART.FORM').addClass('NewClass') also but to no avail

  5. #5
    "Certified" Alphaholic
    Real Name
    Andy Gill
    Join Date
    Jul 2011
    Location
    Barbados
    Posts
    1,028

    Default Re: Is there a way to assign a different style to the detail view of a grid?

    Try the $ss helper function.
    http://wiki.alphasoftware.com/Gettin...+in+Version+10
    Also try altering some of the divs within the form until you can make something look different.
    Remember, it's about basic javascript / CSS rules, not Alpha's.

  6. #6
    "Certified" Alphaholic TheSmitchell's Avatar
    Real Name
    Sarah
    Join Date
    Apr 2012
    Posts
    1,301

    Default Re: Is there a way to assign a different style to the detail view of a grid?

    Quote Originally Posted by coleresources View Post
    Tried $('GRID1.DETAILVIEW_PART.FORM').addClass('NewClass') also but to no avail
    You may want to use '{grid.componentName}.DETAILVIEW_PART.FORM' --- so you can reference everywhere without worrying about what the system may name your grid. This is just a tip. It actually won't fix your issue.

    ...

    But the below will help:

    In your Grid's style sheet section (Properties > Miscellaneous > Local CSS definitions), add the following:
    Code:
    .nobackground {
    background: none;
    }
    And put this in the Grid Properties > Layout Options > Class map:
    Code:
    [class.gridData]=nobackground
    This will remove the background for both the grid and the detail view.

    If you want your grid to have the original background, then you would need to add this to the onGridRenderComplete client-side event:
    Code:
    $('{grid.componentName}.GRID_PART.DATAREGION').style.background = '#ffffff';
    ...or whatever variant of style function call you want to make. Change #ffffff to whatever your old grid background color was.

    Now, you can put this in your onDetailViewRender event:

    Code:
    $('{grid.componentName}.DETAILVIEW_PART.FORM').style.background='#013668';
    UPDATE: [class.gridData] defines the CSS for each row in the grid. The super to [class.gridData] is [class.gridPart]. {grid.componentName}.GRID_PART.DATAREGION contains all the rows in the grid. Setting the background for it will set the background for all rows --- since their background color is now nothing.

    Good luck.
    ---
    Sarah
    Last edited by TheSmitchell; 02-03-2013 at 12:45 PM. Reason: Had incorrect grid ID in original

  7. #7
    "Certified" Alphaholic TheSmitchell's Avatar
    Real Name
    Sarah
    Join Date
    Apr 2012
    Posts
    1,301

    Default Re: Is there a way to assign a different style to the detail view of a grid?

    I should elaborate more.

    In the Style Builder in Parts > Grid, there's a property called the "Grid Data" selector. Every row of data in the Grid and Detail View has this Grid Data selector. The [class.gridData] is this Grid Data selector. If you set [class.gridData] = someOtherClass, every row of data in the Grid and Detail View will use that class instead of the "Grid Data selector defined in the style builder for your project's style.

    If you wanted to be precise about setting the background on your detail view and minimize side-effects, you could do this:

    In the onDetailViewRender event:
    Code:
    $acn('{grid.componentName}.DETAILVIEW_PART.FORM', 'myBackgroundOverride');
    In the Grid > Properties > Miscellaneous > Local CSS definitions
    Code:
    .myBackgroundOverride .GrBlueGridData {
    background-color: #013668;
    }
    "GrBlueGridData" will need to be replaced with whatever the name for the Grid Data selector is defined as in your project's style. In GrBlue, it's called "GrBlueGridData". This attribute is assigned to every TD in a grid data row --- this includes the Detail View.

    The method described in my earlier post will break highlight & select events in your grid. So if you had row highlighting on mouse-over and selection, it will cease to function. It may also kill alternate row highlighting --- I cannot confirm this, though, since I didn't bother testing it. However, using this method will only affect your Detail and will leave the grid parts alone.

    Hope that is more helpful.
    ---
    Sarah

  8. #8
    Member
    Real Name
    Josh Cole
    Join Date
    Jun 2012
    Posts
    678

    Default Re: Is there a way to assign a different style to the detail view of a grid?

    Sarah,

    That is extremely helpful and I have made progress. When I open the detail view for an existing record it looks just like I want it to but when I create a new record, the detail view window does not reflect the changes I've made. When I inspect the element in firebug it appears to be the same element that exists to view detail for an existing record. Any ideas?

    Thanks you for your help!

  9. #9
    Member
    Real Name
    Josh Cole
    Join Date
    Jun 2012
    Posts
    678

    Default Re: Is there a way to assign a different style to the detail view of a grid?

    I see now that it's a different event if I am creating a new record. Thanks!

  10. #10
    "Certified" Alphaholic TheSmitchell's Avatar
    Real Name
    Sarah
    Join Date
    Apr 2012
    Posts
    1,301

    Default Re: Is there a way to assign a different style to the detail view of a grid?

    Quote Originally Posted by coleresources View Post
    I see now that it's a different event if I am creating a new record. Thanks!
    Yes. The onDetailViewRender is not called when an new record view is opened. You'll need to also include your CSS code in the afterDetailViewNewRecord event.

Similar Threads

  1. "Conditional style" view of Grid not recalculated after submitting Detail part
    By agillbb in forum Application Server Version 11 - Web/Browser Applications
    Replies: 1
    Last Post: 11-23-2011, 10:07 AM
  2. How to Change Just the Detail View Style in Tabbed UI
    By forskare in forum Application Server Version 11 - Web/Browser Applications
    Replies: 0
    Last Post: 11-09-2011, 05:33 PM
  3. Detail View from Grid or Detail View from Hyperlink on Grid
    By Turnbullca in forum Application Server Version 10 - Web/Browser Applications
    Replies: 2
    Last Post: 03-06-2011, 04:42 PM
  4. Assign value to grid's detail
    By Peter.Greulich in forum Application Server Version 10 - Web/Browser Applications
    Replies: 15
    Last Post: 03-30-2010, 03:14 PM
  5. Grid View with Detail View To Add New Records
    By Jeff Benson in forum Web Application Server v7
    Replies: 2
    Last Post: 05-26-2006, 10:28 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
  •