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 the code sample will answer many questions, but will importing this dgrid conflict with SB's dgrid?