Page 1 of 1

Module: w2uiGridGadgetLight

Posted: Sat May 20, 2017 3:44 pm
by Peter
Hello

this is a rudimentary code to show how to use the w2ui-Grid with SpiderBasic

Image

Prerequisites:

Download the the necessary css- und js-files from http://w2ui.com/web/ and extract them under resources/w2ui in your application directory

w2uiGridGadgetLight.sbi

Code: Select all

EnableExplicit

DeclareModule w2uiGrid
  
  Global IsInitialized
  
  Declare Init(Callback)
  Declare Gadget(Gadget, x, y, Width, Height)
  
  Declare SetColumns(Gadget, Columns)
  Declare GetColumns(Gadget)
  
  Declare GetRecords(Gadget)
  Declare SetRecords(Gadget, Records)
  
EndDeclareModule

Module w2uiGrid
  
  EnableExplicit
  
  Macro GetSelector
    !  var selector = $(spider_GadgetID(v_gadget).div).find('.dijitContentPane');
  EndMacro
  
  Procedure Init(Callback)
    
    ! $('<link rel="stylesheet" type="text/css">').attr('href','resources/w2ui/w2ui-1.5.rc1.min.css').appendTo('head');
    
    ! require(["resources/w2ui/w2ui-1.5.rc1.min.js"], 
    !   function() {
    IsInitialized = #True
    ! v_callback();
    !   }
    ! );   
    
  EndProcedure  
  
  Procedure Gadget(Gadget, x, y, Width, Height)
    
    If Gadget = #PB_Any
      Gadget = ContainerGadget(Gadget, x, y, Width, Height)
    Else
      ContainerGadget(Gadget, x, y, Width, Height)
    EndIf
    
    CloseGadgetList()
    
    GetSelector
    
    !  if (typeof w2ui['g_' + v_gadget] != 'undefined') w2ui['g_' + v_gadget].destroy();

    !  selector.w2grid({
    !    name: 'g_' + v_gadget,
    !    show: {
    !      toolbar: true,
    !      toolbarAdd: true,
    !      toolbarEdit: true,
    !      toolbarDelete: true,
    !      toolbarSave: true,
    !    },
    !  });
    
    ; Workaround...
    
    ! w2ui["g_" + v_gadget].show.toolbar = false;
    ! w2ui["g_" + v_gadget].toolbar.hide("w2ui-add");
    ! w2ui["g_" + v_gadget].toolbar.hide("w2ui-edit");
    ! w2ui["g_" + v_gadget].toolbar.hide("w2ui-delete");
    ! w2ui["g_" + v_gadget].toolbar.hide("w2ui-save");
    
    ProcedureReturn Gadget
    
  EndProcedure
  
  Procedure SetRecords(Gadget, Records)
    ! w2ui["g_" + v_gadget].records = v_records;
    ! w2ui["g_" + v_gadget].refresh();  
  EndProcedure
  
  Procedure GetRecords(Gadget)
    ! return w2ui["g_" + v_gadget].records;
  EndProcedure  
  
  Procedure SetColumns(Gadget, Columns)
    ! w2ui["g_" + v_gadget].columns = v_columns;
    ! w2ui["g_" + v_gadget].refresh();  
  EndProcedure
  
  Procedure GetColumns(Gadget)
    ! return w2ui["g_" + v_gadget].columns;
  EndProcedure
  
  Procedure Refresh(Gadget)
    ! w2ui["g_" + v_gadget].refresh();  
  EndProcedure
  
  Procedure Clear(Gadget)
    ! w2ui["g_" + v_gadget].clear();
    ! w2ui["g_" + v_gadget].columns = [];
    ! w2ui["g_" + v_gadget].refresh();
  EndProcedure
  
EndModule
Example:

Code: Select all

XIncludeFile "w2uiGridGadgetLight.sbi"

Enumeration
  #Window
  #GridGadget
EndEnumeration

Procedure SizeWindowEvent()
  
  ResizeGadget(#GridGadget, #PB_Ignore, #PB_Ignore, WindowWidth(#Window), WindowHeight(#Window))
  
EndProcedure

Procedure Main()
  
  OpenWindow(#Window, #PB_Ignore, #PB_Ignore, 800, 600, "w2uiGridGadgetTest", #PB_Window_SizeGadget | #PB_Window_ScreenCentered | #PB_Window_SystemMenu)
  
  BindEvent(#PB_Event_SizeWindow, @SizeWindowEvent(), #Window)
  
  w2uiGrid::Gadget(#GridGadget, 0, 0, WindowWidth(#Window), WindowHeight(#Window))
  
  ; Columns
  
  Protected Columns
  
  !  v_columns = [
  !    { field: 'recid', caption: 'ID', size: '50px', sortable: true, attr: 'align=center' },
  !    { field: 'lname', caption: 'Last Name', size: '30%', sortable: true, resizable: true },
  !    { field: 'fname', caption: 'First Name', size: '30%', sortable: true, resizable: true },
  !    { field: 'email', caption: 'Email', size: '40%', resizable: true },
  !    { field: 'sdate', caption: 'Start Date', size: '120px', resizable: true },
  !  ];
  
  w2uiGrid::SetColumns(#GridGadget, Columns)
  
  ; Records
  
  Protected Records
  
  ! v_records = [
  !   { recid: 1, fname: 'John', lname: 'doe', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
  !   { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
  !   { recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
  !   { recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
  !   { recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
  !   { recid: 6, fname: 'Francis', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
  !   { recid: 7, fname: 'Mark', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
  !   { recid: 8, fname: 'Thomas', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
  !   { recid: 9, fname: 'Sergei', lname: 'Rachmaninov', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
  !   { recid: 20, fname: 'Jill', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
  !   { recid: 21, fname: 'Frank', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
  !   { recid: 22, fname: 'Peter', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
  !   { recid: 23, fname: 'Andrew', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
  !   { recid: 24, fname: 'Manny', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
  !   { recid: 25, fname: 'Ben', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
  !   { recid: 26, fname: 'Doer', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
  !   { recid: 27, fname: 'Shashi', lname: 'bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' }
  ! ];
  
  w2uiGrid::SetRecords(#GridGadget, Records)
  
  Records = w2uiGrid::GetRecords(#GridGadget)
  
  ! v_records.push({ recid: 28, fname: 'Av', lname: 'Rachmaninov', email: 'jdoe@gmail.com', sdate: '4/3/2012' });
  
  w2uiGrid::SetRecords(#GridGadget, Records)
  
EndProcedure

w2uiGrid::Init(@Main())
Greetings ... Peter

Edit: Add destroy-Command to avoid 'The parameter "name" is not unique' - Message (see posting from karu below)

Re: Module: w2uiGridGadgetLight

Posted: Sat May 20, 2017 6:06 pm
by IdeasVacuum
Excellent, thanks Peter!

Re: Module: w2uiGridGadgetLight

Posted: Tue Nov 14, 2017 1:09 pm
by karu
This old post but maybe someone can answer. I try to use this w2uiGrig, but stuck in situation where i must close window where the grid is, and open it again. Igot error: The parameter "name" is not unique. There are other objects already created with the same name (obj: g_1).
And the question is, how i can deinitialize this grid component.

Thanks
Raimo

Re: Module: w2uiGridGadgetLight

Posted: Tue Nov 14, 2017 2:01 pm
by Peter
@Raimo:

(the code above has been updated)


insert the following line between GetSelector and ! selector.w2grid({

Code: Select all

!  if (typeof w2ui['g_' + v_gadget] != 'undefined') w2ui['g_' + v_gadget].destroy();
Greetings ... Peter

Re: Module: w2uiGridGadgetLight

Posted: Wed Nov 15, 2017 1:07 pm
by karu
Thanks