Editable ListIconGadget

[LuckyLuke]

Hi,

Is it possible to make some of the cells in the ListIconGadget editable (and change the look and feel of the edited cells )?

Thanks

[LuckyLuke]

I found some information on
https://dojotoolkit.org/reference-guide ... aGrid.html

Editing cells
A cell can be defined as editable by setting its editable flag to be true. In the markup, this is achieved by adding the attribute editable="true" to the <th> definition.

But it's not working if I add this attribute.

[Peter]

But it's not working if I add this attribute.

do you have a sample-code?

Greetings ... Peter

[LuckyLuke]

This is a sample code trying to make the ListIconGadget editable.

Code: Select all

EnableExplicit

Enumeration
  #myWindow
  #myListIconGadget
EndEnumeration

Procedure.i GadgetElement(Gadget, UseJquery.b=#True)
  ; by eddy (http://forums.spiderbasic.com/viewtopic.php?p=320#p320)
  Protected gadgetObject=GadgetID(Gadget)
  !return (v_gadgetobject && v_gadgetobject.div)? v_usejquery? $(v_gadgetobject.div):v_gadgetobject.div:null;
EndProcedure

Procedure SetEditable(Gadget)
  Protected G = GadgetElement(Gadget)
  !v_g.find("th").attr("editable", "true");
EndProcedure

OpenWindow(#myWindow, #PB_Ignore, #PB_Ignore, 800, 600, "ListIconGadget", #PB_Window_ScreenCentered)

ListIconGadget(#myListIconGadget, 10, 10, WindowWidth(#myWindow) - 20, WindowHeight(#myWindow) - 20, "FirstColumn", 100)

AddGadgetColumn(#myListIconGadget, 1, "SecondColumn", 100)
SetEditable(#myListIconGadget)

Define Counter

For Counter = 0 To 9
  AddGadgetItem(#myListIconGadget, -1, "FirstColumnValue" + Str(Counter) + #LF$ + "SecondColumnValue" + Str(Counter))
Next

[LuckyLuke]

I was looking at the wrong docs
The correct information can be found on:
https://github.com/SitePen/dgrid/blob/v ... /Editor.md

Code: Select all

Enumeration
  #myWindow
  #myListIconGadget
EndEnumeration

OpenWindow(#myWindow, #PB_Ignore, #PB_Ignore, 800, 600, "ListIconGadget", #PB_Window_ScreenCentered)

ListIconGadget(#myListIconGadget, 10, 10, WindowWidth(#myWindow) - 20, WindowHeight(#myWindow) - 20, "FirstColumn", 100)
AddGadgetColumn(#myListIconGadget, 1, "SecondColumn", 100)

Define Counter, layout.s, Grid, Col

For Counter = 0 To 9
  AddGadgetItem(#myListIconGadget, -1, "FirstColumnValue" + Str(Counter) + #LF$ + "SecondColumnValue" + Str(Counter))
Next

Define GadgetID = GadgetID(#myListIconGadget)
! var grid = v_gadgetid.gadget;
! v_col = grid.column(1);
! v_col.editor = 'text';

But it's still not working...

[goomoo]

This is okay.

Code: Select all

Enumeration
  #myWindow
  #myListIconGadget
EndEnumeration

OpenWindow(#myWindow, #PB_Ignore, #PB_Ignore, 800, 600, "ListIconGadget", #PB_Window_ScreenCentered)

ListIconGadget(#myListIconGadget, 10, 10, WindowWidth(#myWindow) - 20, WindowHeight(#myWindow) - 20, "FirstColumn", 100)
AddGadgetColumn(#myListIconGadget, 1, "SecondColumn", 100)

Define Counter, layout.s, Grid, Col

For Counter = 0 To 9
  AddGadgetItem(#myListIconGadget, -1, "FirstColumnValue" + Str(Counter) + #LF$ + "SecondColumnValue" + Str(Counter))
Next

! document.getElementById("dgrid_0").contentEditable = true;

[Dirk Geppert]

Great, that's simple genius!

[jagermeister]

I would make a new thread but I want this one to lead down the right road for others

Okay so the last example made cells editable including the column headers. That's pretty close to the spreadsheet behavior needed with grids. Thanks, goomoo!

My question to the wizards is how would I go about making a grid behave like one generated from here https://dgrid.io/js/dgrid/test/Editor.html with the editOn click option? I suppose a charitable code sample will answer many questions, but will importing this dgrid conflict with SB's dgrid (if I'm even talking about the right thing)? SB's dgrid doesn't have all the js files found on dojo1-dgrid, such as Editor.js, so do I have to LoadScript all of those?

[jagermeister]

Mmmmkay, we'll start small. I know I can apply contentEditable attribute to the td cells. Problem is they aren't fully loaded before ! alert(document.getElementsByTagName("td").length); triggers. I can see the th and tr load but not the td(s):

Code: Select all

Enumeration
  #myWindow
  #myListIconGadget
EndEnumeration

;

OpenWindow(#myWindow, #PB_Ignore, #PB_Ignore, 800, 600, "ListIconGadget", #PB_Window_ScreenCentered)

ListIconGadget(#myListIconGadget, 10, 10, WindowWidth(#myWindow) - 20, WindowHeight(#myWindow) - 20, "FirstColumn", 100)
AddGadgetColumn(#myListIconGadget, 1, "SecondColumn", 100)

Define Counter, layout.s, Grid, Col

For Counter = 0 To 9
  AddGadgetItem(#myListIconGadget, -1, "FirstColumnValue" + Str(Counter) + #LF$ + "SecondColumnValue" + Str(Counter))
Next

! alert(document.getElementsByTagName("th").length);
! alert(document.getElementsByTagName("tr").length);
! alert(document.getElementsByTagName("td").length);