Datagrid form formatting driving me crazy

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller

Post Reply
cusingerBUSCw5N
Posts: 339
Joined: Wed Jul 11, 2012 9:24 pm

Datagrid form formatting driving me crazy

Post by cusingerBUSCw5N » Thu May 09, 2013 10:23 pm

I have been trying to format a datagrid form with variable height for hours without success. The fields keep disappearing or their location is all over the map. I have attached a sample stack so you can see the problem.

First, I would like the gray background that is on the top line to expand when the for expands.

Then, next to the number 3, there is supposed to be a field with the text "Priority" (the field name is Priority_label) On line 1 it doesn't appear at all, and in future lines it appears way down on the bottom - even though I told gave it the same instructions as the field next to it (with the number 3) - called Priority.

When I was trying to find my missing fields, I found that if I specifically labeled them, made them opaque, and gave them a background color, then they would appear. Without that, anything that wasn't loaded with data just disappeared. I've done datagrids before and have never had this happen...

The field "Date added" that is supposed to be next to the date, has relocated itself next to the button "Change/Delete"...and when I use the scrollbar, it will fade in and out. But even if it didn't fade, it's location is wrong and it isn't following the code.

Bottomline, my datagrid form is a disaster and I'm losing my mind. Please help!!

Here is the code (behavior script for the form) for the attached sample stack

Code: Select all

-- This script defines the behavior of your data grid's custom template. This behavior
-- only applies to 'forms' and not 'tables'.
on CalculateFormattedHeight pDataArray
   if pDataArray["expanded"] then
      return 99
   else
      return 77
   end if
end CalculateFormattedHeight     
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
on FillInData pDataArray

   -- This message is sent when the Data Grid needs to populate
   -- this template with the data from a record. pDataArray is an
   -- an array containing the records data.
   -- You do not need to resize any of your template's controls in
   -- this message. All resizing should be handled in resizeControl.
   
   -- Example:
   if pDataArray["label 1"] is not ""  and pDataArray["label 1"] is not " " then
      set the text of field "ID" of me to pDataArray["label 1"]
   set the text of field "Label" of me to pDataArray["label 2"]
 set the label of button "email" of me to pDataArray["label 3"]
   set the text of field "priority" of me to pDataArray["label 4"]

    put "Date added" into field "date_added_label" of me
    set the backgroundcolor field "date_added_label" of me to white
    set the vis of field "date_added_label" of me to false
    set the backgroundcolor field "date_added" of me to white
    set the vis of field "date_added" of me to false
    put "Priority" into field "priority_label" of me
    set the backgroundcolor field "priority_label" of me to white
    set the vis of field "priority_label" of me to false
   if pDataArray["label 5"] is "false" or pDataArray["label 5"] is empty then
      set the backgroundColor field "completed" of me to red
      put "Not complete" into field "completed" of me
   else
      set the backgroundColor  field "completed" of me to green
      put "Completed" into field "completed" of me
   end if
      set the text of field "date_added" of me to pDataArray["label 6"]

end if
   if pDataArray["expanded"] is "" then
      put false into pDataArray["expanded"]
   else
   end if
   set the hilite of button "change" of me to false


   set the visible of graphic "ArrowExpanded" of me to pDataArray["expanded"]
   set the visible of graphic "arrowcontracted"  of me to not pDataArray["expanded"]

   set the visible of button "email" of me to pDataArray["expanded"] 
   set the visible of field "date_added" of me to pDataArray["expanded"] 
      set the visible of field "date_added_label" of me to pDataArray["expanded"] 
   set the visible of field "completed" of me to pDataArray["expanded"] 
   set the visible of button "change" of me to pDataArray["expanded"] 
   set the visible of field "priority" of me to pDataArray["expanded"] 
      set the visible of field "priority_label" of me to pDataArray["expanded"] 


end FillInData


on LayoutControl pControlRect
   local theFieldRect
   
   -- This message is sent when you should layout your template's controls.
   -- This is where you resize the 'Background' graphic, resize fields and 
   -- position objects.
   -- For fixed height data grid forms you can use items 1 through 4 of pControlRect as
   -- boundaries for laying out your controls.
   -- For variable height data grid forms you can use items 1 through 3 of pControlRect as
   -- boundaries, expanding the height of your control as needed.
   
   -- Example:
   put the height of this stack into tstackheight
   if the environment is "mobile" and tstackheight >700 then
      set the width of graphic "arrowcontracted"   of me to 56
      set the height of graphic "arrowcontracted"  of me to 60
      set the width of graphic "arrowexpanded"  of me to 60
      set the height of graphic "arrowexpanded" of me to 56
   else if the environment is "mobile"  and tstackheight <=700 then
      set the width of graphic "arrowcontracted"   of me to 30
      set the height of graphic "arrowcontracted"    of me  to 36
      set the width of graphic "arrowexpanded"  of me to 36
      set the height of graphic "arrowexpanded" of me to 20
   else
      set the width of graphic "arrowcontracted"   of me to 36
      set the height of graphic "arrowcontracted"    of me  to 42
      set the width of graphic "arrowexpanded"  of me to 42
      set the height of graphic "arrowexpanded" of me to 36
   end if
   
   put the width of scrollbar "dgScrollbar" of group "datagrid 1" into scrollbarwidth
   put the width of this stack into tstackwidth
   put (tstackwidth*.95-scrollbarwidth)*.97 into tavailable
   if the environment is "mobile" and tstackheight >700 then
      
      set the textsize of field "label" of me to 18
      set the width of field "label" of me to 166
      set the height of field "label" of me to 32
      
      set the width of button "email" of me to 375
      
      
      set the textsize of button "change" of me to 18
      
   else if the environment is "mobile"  and tstackheight <=700 then
      
      set the textsize of field "label" of me to 12
      set the width of field "label" of me to 166
      set the height of field "label" of me to 32
      set the textsize of button "change" of me to 12
            set the width of button "email" of me to 250
      
   else
      
      set the textsize of field "label" of me to 18
      set the width of field "label" of me to 166
      set the height of field "label" of me to 32
      
      set the textsize of button "change" of me to 18
            set the width of button "email" of me to 325
   end if
   
  put item 1 of pControlRect into ttry
   

  put the width of graphic "background" of me  into twide
   
  set the width of field "label" of me to twide*.80

 set the left of field "label" of me to ttry + 55
  set the top of field "label" of me to the top of graphic "background" of me
    put the width of this stack into tstackwidth
    put tstackwidth*.02 into thorizontalspace
    put the height of this stack into tstackheight
   put tstackheight*.02 into tverticalspace
   
   
   set the top of button "email" of me to the bottom of field "Label" of me +tverticalspace
    set the left of button "email" of me to the left of field "label" of me
   set the top of field "date_added_label" of me to 200

   set the left of field "date_added_label" of me to the right of button "email" of me 
set the top of field "date_added" of me to top of button "email" of me
set the left of field "date_added" of me to the right of field "date_added_label" of me + thorizontalspace

set the top of field "priority_label" to the bottom of field "date_added" of me + tverticalspace
set the left of field "priority_label" of me to the left of button "email" of me
 set the top of field "priority" of me to the bottom of field "date_added" of me + tverticalspace
 set the left of field "priority" of me to the right of field "priority_label" + thorizontalspace
   
   
  set the top of field "completed" of me to the bottom of field "date_added" of me + tverticalspace
  set the left of field "completed" of me to the right of field "priority" of me + thorizontalspace
   
   
  set the top of button "change" of me to the top of field "completed" of me
   set the right of button "change" of me to the right of graphic "background" of me - 10
   


   

   put the right of field "label" of me + 10 into tright
   
put tright into item 3 of theFieldRect

   put the rect of field "label" of me into theFieldRect
   put item 3 of pControlRect - 5 into item 3 of theFieldRect
   set the rect of field "label" of me to theFieldRect
   
   put item 2 of theFieldRect + the formattedheight of field "label" of me - the bottommargin of field "label" of me into item 4 of theFieldRect
   set the rect of field "label" of me to theFieldRect
   put item 4 of theFieldRect into item 4 of pControlRect
   
   set the rect of graphic "Background" of me to pControlRect                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
end LayoutControl


on ResetData
    -- Sent when data is being emptied because the control is no longer being used to display data
    set the text of field "Label" of me to empty
end ResetData


on PreFillInData
    -- Sent right before new data is going to replace existing data in the control
end PreFillInData


setprop dgHilite pBoolean
    -- This custom property is set when the highlight of your custom template has
    -- changed. By default the "Background" graphic will be highlighted for you. 
    -- You only add script here if you want to further customize the highlight.
    
    -- Example:
 
 set the dgProp["hilited text color"] of the dgControl of me to "black"
   if pBoolean then

          set the foregroundcolor of me to the dgProp["hilited text color"] of the dgControl of me

    else
        set the foregroundColor of me to empty
     end if

end dgHilite


getprop dgDataControl
    -- Required by library so that it can locate your control.
    return the long ID of me
end dgDataControl


on mouseDoubleUp pMouseBtnNum
    local theKey
    
    -- Example of how to edit the contents of a field.
    -- By passing the index of the record associated with copy of this template being displayed and
    -- a key (array key) the data grid will automatically save the changes the user
    -- makes and refresh the UI by calling FillInData and resizeControl.
    if pMouseBtnNum is 1 then
        if the dgProps["allow editing"] of the dgControl of me then
            switch the short name of the target
                case "Label"
                    put "Label 1" into theKey
                    EditFieldText the long ID of the target, the dgIndex of me, theKey
                    break                 
            end switch
        end if
    end if
    
    pass mouseDoubleUp
end mouseDoubleUp

on mouseUp pMouseBtnNum
   if pMouseBtnNum is 1 then
 
      switch the short name of the target
         case "ArrowExpanded"
         case "ArrowContracted"
            ## Update internal data
            SetDataOfIndex the dgIndex of me, "expanded", the short name of the target is "ArrowContracted"
            ## Redraw so LayoutControl and FillInData can update UI
            RefreshIndex the dgIndex of me
            break
            
      end switch
   end if
end mouseUp
                                                                                                                                                                                                                                                                                                                                                                                                   
[\code]

cusingerBUSCw5N
Posts: 339
Joined: Wed Jul 11, 2012 9:24 pm

Re: Datagrid form formatting driving me crazy

Post by cusingerBUSCw5N » Thu May 09, 2013 10:39 pm

I realized that the Date added field is acting this way because I set it for a specific location - 200 - so it consistently is in the same place, regardless of whether the form is open or closed or scrolling.

But I did that because when I set it to be between the button and the date, it disappears! Here was the code that I thought should work:

set the top of button "email" of me to the bottom of field "Label" of me +tverticalspace
set the left of button "email" of me to the left of field "label" of me
set the top of field "date_added_label" to the top of button "email" of me
set the left of field "date_added_label" of me to the right of button "email" of me
set the top of field "date_added" of me to top of button "email" of me
set the left of field "date_added" of me to the right of field "date_added_label" of me + thorizontalspace

...now date_added_label completely disappears...but field "date_added" locates itself correctly.

cusingerBUSCw5N
Posts: 339
Joined: Wed Jul 11, 2012 9:24 pm

Re: Datagrid form formatting driving me crazy

Post by cusingerBUSCw5N » Fri May 10, 2013 12:47 am

OK...I solved a bit of it. I am posting the remainder on a separate post so it is simpler to understand.

First, one of my lines didn't have an "of me" on it...
set the top of field "priority_label" to the bottom of field "date_added" of me + tverticalspace

...so when I put "of me", it started to behave itself.

The other one, was probably the same error - but I corrected it by putting a set number for the height and that was a mistake. Once I put:
set the top of field "date_added_label" of me to the top of button "email"... it worked.

This is the code that made the background match...

Code: Select all

   put the left of graphic "ArrowExpanded" of me - 6 into item 1 of theFieldRect  
   put the top of field "label" of me into item 2 of theFieldRect 
   put the right of button "change" of me + 10 into item 3 of theFieldRect
   if the visible of button "email" of me is true then
      put the bottom of button "change" of me + 5 into item 4 of theFieldRect                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
   else
      put item 2 of theFieldRect + the formattedheight of field "label" of me - the bottommargin of field "label" of me into item 4 of theFieldRect

   end if
   set the rect of graphic "Background" of me to theFieldRect       

Post Reply

Return to “Getting Started with LiveCode - Complete Beginners”