Module: w2uiGridGadgetLight

Share your advanced knowledge/code with the community.
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Module: w2uiGridGadgetLight

Post 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)
Last edited by Peter on Tue Nov 14, 2017 1:56 pm, edited 1 time in total.
IdeasVacuum
Posts: 143
Joined: Tue Feb 25, 2014 1:27 pm

Re: Module: w2uiGridGadgetLight

Post by IdeasVacuum »

Excellent, thanks Peter!
karu
Posts: 40
Joined: Mon Feb 24, 2014 10:16 pm

Re: Module: w2uiGridGadgetLight

Post 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
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: Module: w2uiGridGadgetLight

Post 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
karu
Posts: 40
Joined: Mon Feb 24, 2014 10:16 pm

Re: Module: w2uiGridGadgetLight

Post by karu »

Thanks
Post Reply