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

Module: w2uiGridGadgetLight

by Peter Sat May 20, 2017 3:44 pm

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: 135
Joined: Tue Feb 25, 2014 1:27 pm

Re: Module: w2uiGridGadgetLight

by IdeasVacuum Sat May 20, 2017 6:06 pm

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

Re: Module: w2uiGridGadgetLight

by karu Tue Nov 14, 2017 1:09 pm

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: 479
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1

Re: Module: w2uiGridGadgetLight

by Peter Tue Nov 14, 2017 2:01 pm

@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

by karu Wed Nov 15, 2017 1:07 pm

Thanks
Return to Tricks 'n' Tips

Who is online

Users browsing this forum: No registered users and 1 guest