Using a DataGrid as a simple list control

Anything beyond the basics in using the LiveCode language. Share your handlers, functions and magic here.

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

Simon Knight
Posts: 845
Joined: Wed Nov 04, 2009 11:41 am
Location: Gunthorpe, North Lincs, UK

Using a DataGrid as a simple list control

Post by Simon Knight » Mon May 21, 2018 10:00 am

I want to have a control that presents the user with a list of text that they have previously entered. One option is to use one of the field controls but I thought that I would try using a datagrid. I searched the internet for ideas but found none. So I have had a go at creating my own. I have attached a stack with my slightly modified datagrid to this post.

I am posting for two reasons - the first is to request expert overview to spot anything I have missed or most likely point out a better method way of implementing the functionality and the second is to have a small example available as a starting point for others to use.

I use a standard table type datagrid and have added the following code to the group script:

Code: Select all

# Note this code is close coupled with the column name which is a bit of a kludge
# See AddNewRow below

on mouseDoubleup
   # Identifies if the user wishes to add a new row or to delete an existing one.
   if the dgHeaderControl of the target is  empty AND \
         the dgHeader of the target is empty AND \
         the dgDataControl of the target is  empty then
      -- user clicked in a non header or data area
      AddNewRow
   end if
   
   if the dgDataControl of the target is not empty \
         AND the controlkey is down then
      -- delete the row
      put the dgHilitedIndex of the target into tIndex
      DeleteIndex tIndex
   end if
   
end mouseDoubleup

On AddNewRow
   # NOTE : Ensure the column name("path" in this example) matches a column in your datagrid
   put "Path" into tColumn
   put the dgNumberOfLines of the target + 1 into tLineNo
   
   # Edit next line to display default text or "" as required
   put "Test" && tLineNo into theRowData
   
   AddLine theRowData, tColumn, tLineNo
   dispatch "EditCell" to me with tColumn, tLineNo
end AddNewRow

Attachments
Using Dg as Scrolling list.livecode.zip
Zip archive of example stack
(6.86 KiB) Downloaded 210 times
best wishes
Skids

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 9567
Joined: Wed May 06, 2009 2:28 pm
Location: New York, NY

Re: Using a DataGrid as a simple list control

Post by dunbarx » Mon May 21, 2018 9:34 pm

Hi.

If you have jump started using DG's, then you are doing just fine.

But I always try to use a list field if I can. They are far easier to manage and set up, and far easier to program. If you do not really need the functionality of a DG, which certainly far exceeds that of a list field, I would stick with them. The example stack you posted does not need a DG at all.

The fact that it works fine for you notwithstanding, of course.

Craig

Simon Knight
Posts: 845
Joined: Wed Nov 04, 2009 11:41 am
Location: Gunthorpe, North Lincs, UK

Re: Using a DataGrid as a simple list control

Post by Simon Knight » Mon May 21, 2018 10:38 pm

Craig,

You raise some interesting points and I agree with the sentiment of keeping it simple. However, I looked at some documentation and could not see a way of implementing the functionality with a single simple control.

From the guide:
List and Table Field Controls
List fields allow you to display a set of choices. Users cannot edit list fields. You can specify whether the user is allowed to make a single selection or multiple selections.
The user cannot edit list fields put me off. The closest I achieved was using a table field with a single column. Is this what you are thinking of?

Lastly any idea what the "click to toggle" option does?
best wishes
Skids

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 9567
Joined: Wed May 06, 2009 2:28 pm
Location: New York, NY

Re: Using a DataGrid as a simple list control

Post by dunbarx » Tue May 22, 2018 2:16 am

Hi.

It is true that a user cannot edit a list field, because a list field is designed to appear to always have its lockText set to "true".

So you have to do it yourself. One way:

Code: Select all

on mouseUp
   ask "Modify this line" with the selectedText
   put it into the selectedLine
end mouseUp
There are others.

But what about a table field with perhaps only a single column? That control looks like a list field if you lose the H and V gridLines, and one can type directly into each "cell", if multi-columned, or into each line if single columned.

Maybe this is more work than you want to think about. Anyway, DG's look better, but you need to become fairly proficient if you want to get some of their power out, and that takes a bit of effort.

Mikey
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 755
Joined: Fri Jun 27, 2008 9:00 pm

Re: Using a DataGrid as a simple list control

Post by Mikey » Wed May 23, 2018 2:13 pm

Have a look at Bernd's ModTableField.

Simon Knight
Posts: 845
Joined: Wed Nov 04, 2009 11:41 am
Location: Gunthorpe, North Lincs, UK

Re: Using a DataGrid as a simple list control

Post by Simon Knight » Wed May 23, 2018 7:49 pm

I have used Bernd's ModTableField and like it a lot. I guess that I see so much information about datagrids that I feel that I have to use them. On reflection this is an odd attitude because they can and do bite.
best wishes
Skids

Simon Knight
Posts: 845
Joined: Wed Nov 04, 2009 11:41 am
Location: Gunthorpe, North Lincs, UK

Re: Using a DataGrid as a simple list control

Post by Simon Knight » Sun May 27, 2018 8:43 am

Hi again,

The comments in this thread have prompted me evaluate how I have been using datagrids in my projects. I tend to use livecode from time to time and have often used a datagrid in my project of the day for no better reason than I felt that I should coupled with a hope of learning and remembering how to use them on the next project. On reflection they have always caused me problems and delayed the development. Often this takes the form of what I call a silent failure where the datagrid code throws an error that is not normally displayed. Using the command "put true into grevdevelopment" is often the only way of getting a hint as to what just went wrong.

Craig's comments have prompted me to really consider the "stock" list controls as I have to admit not knowing what can be achieved with them. I have been reading the dictionary entries describing the properties of field controls. This is a challenge in LC9 as often the entries are missing words or complete lines when compared with the printed version of the LC8 dictionary but thats another issue.

Today I am going to try to program a list on a card to display a list of thumb nail images to the user and allow the user to enter text comments against each image as well as drag and drop the images into a new order using normal, non-datagrid, controls. I would welcome any advice or links to examples. My initial thoughts are to try and use the imagesource property of a character.
best wishes
Skids

bogs
Posts: 5435
Joined: Sat Feb 25, 2017 10:45 pm

Re: Using a DataGrid as a simple list control

Post by bogs » Sun May 27, 2018 2:27 pm

This should be a very good experiment for you, I think the basic field objects are much simpler to tackle and modify myself although I rarely use them for something like this.

Using the imageSource should work out fine, just take care in choosing the character itself, as a character you wouldn't normally use when typing could become necessary when users are typing something into the area. I don't remember if I ever tried using a null character or not for imageSource, but it would be ideal to use if possible since it can't be typed in accidently.

As to the dictionary entries, it is improving but the last time I checked it against older versions, my assessment was much the same. In those cases, I generally compare the entries against older versions of the IDE, or Max's excellent wiki, which is sometimes more complete, and can be edited very easily if information needs it, no sign in required.
Image

Simon Knight
Posts: 845
Joined: Wed Nov 04, 2009 11:41 am
Location: Gunthorpe, North Lincs, UK

Re: Using a DataGrid as a simple list control

Post by Simon Knight » Sun May 27, 2018 2:35 pm

I've managed to display a list of nice looking thumbnails, now I am trying to enable drag and drop to change the order. I found an old demo stack from Tactilemedia (circa 2007) it sort of works but I'm finding the code a little dense (or it could just be me!).
best wishes
Skids

bogs
Posts: 5435
Joined: Sat Feb 25, 2017 10:45 pm

Re: Using a DataGrid as a simple list control

Post by bogs » Sun May 27, 2018 3:45 pm

Simon Knight wrote:
Sun May 27, 2018 2:35 pm
I'm finding the code a little dense (or it could just be me!).
Don't feel bad, I often feel like a complete imbecile when reviewing Scott's code, what makes it worse is that I'm almost positive he feels (probably rightly so) that it should be easily understood :oops:
Image

Simon Knight
Posts: 845
Joined: Wed Nov 04, 2009 11:41 am
Location: Gunthorpe, North Lincs, UK

Re: Using a DataGrid as a simple list control

Post by Simon Knight » Sun May 27, 2018 11:37 pm

oh I'm so glad its not just me :?
best wishes
Skids

bogs
Posts: 5435
Joined: Sat Feb 25, 2017 10:45 pm

Re: Using a DataGrid as a simple list control

Post by bogs » Mon May 28, 2018 1:07 pm

His stuff is cool as all get out though :wink:
Image

Simon Knight
Posts: 845
Joined: Wed Nov 04, 2009 11:41 am
Location: Gunthorpe, North Lincs, UK

Re: Using a DataGrid as a simple list control

Post by Simon Knight » Mon May 28, 2018 7:48 pm

I feel like I have just finished some homework. Prompted by comments above I have created a list field that displays thumbnails and allows the rows to be reordered using the mouse. The ideas and some of the code come from the example stack that Scott Rossi published back in 2007. I have uploaded it on another thread but as it is only 5k in size I will also upload it here.

Please feel free to comment.

Thanks to Craig for the initial push and I now see what you mean about finding alternatives to datagrids.

While its not finished the example is populated with images and these may be reordered using the mouse.
Attachments
DemoListControl.livecode.zip
Example list field
(4.4 KiB) Downloaded 213 times
best wishes
Skids

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 9567
Joined: Wed May 06, 2009 2:28 pm
Location: New York, NY

Re: Using a DataGrid as a simple list control

Post by dunbarx » Tue May 29, 2018 4:57 am

Simon.

Try this experiment. On a new card, make a list field named "mainField" with a dozen different simple lines of text in it. Make another single line field named "xFer" of the same width and with the same left as fld "mainField". Lose the border in fld "xFer" and set its blendLevel to 50.

Put this in the script of fld "mainField":

Code: Select all

local startV,startLine

on mouseDown
   put word 2 of the clickLine into startLine
   put item 2 of the clickLoc into startV
   put the value of the clickLine into fld "xfer"
   show fld "xFer" at item 1 of the loc of fld "xfer" & "," & item 2 of the clickLoc
end mouseDown

on mouseMove x,y
   if the mouseLoc is within the rect of me and the mouse is down then
      set the loc of fld "xFer" to item 1 of the loc of fld "xFer" & "," & y
   end if
end mouseMove

on mouseUp
   put item 2 of the loc of fld "xFer" into endV
   put endV - startV  into vPixels
   put round(vPixels / the textHeight of me) into numLinesMoved
   put numLinesMoved - startLine into insertionLine
   put startLine + numLinesMoved into lineToInsert
   delete line startLine of fld "mainField"
   put return & fld "xfer" after line lineToInsert of fld "mainField"
   hide fld "xFer"
end mouseUp
Click on any line in "mainField", drag to any other line, above or below, and release the mouse. This drops the "original" line below the "target" line, and deletes the "original".

This handler is very, very verbose, so you can see what I am thinking. The field "xFer" could be any control, image or whatever.

Craig

Simon Knight
Posts: 845
Joined: Wed Nov 04, 2009 11:41 am
Location: Gunthorpe, North Lincs, UK

Re: Using a DataGrid as a simple list control

Post by Simon Knight » Tue May 29, 2018 9:18 am

Craig,

Thats a great example and exactly what I am interested in creating. If your code is verbose then heaven knows what mine is! I found your code easy to understand so it is obviously at the right level of complexity for me - thanks.

One oddity I found is that on several occasions an error has been thrown when the code attempts to read the text height of the field. Its something to do with my stackfile or possibly instance of Livecode as when I copied the code to a new stack it ran without any problem. I'm using LC9 and errors are being posted in a stack named revErrorDisplay rather than the code editor so I've broken something somewhere.

Last night I watched a video recording of a talk that Scott Rossi gave on interface design named "UI effects and Animation". His examples looked fantastic but unfortunately I find his code is several levels above mine. Still, its great to see what can be achieved and something to aim for.

Simon

Edit -> using the effective textheight seems to solve the divide by zero
best wishes
Skids

Post Reply

Return to “Talking LiveCode”