Other [ABMaterial]: MashTable (A Preview)

Hi there...

View in HD for better quality...

I'm kinda excited about this but it's still a long way to go. This got more complicated than I thought.

So far..

1. Insert rows and get the JSON out to your WebApp
2. Update existing row
3. Delete functionality.
4. Copy to clipboard
5. Print to PDF
6. Print to Excel (CSV and XLSX)

4,5,6 use built in functionality for the jQuery.DataTables

This is DonationWare, to be part of the MashPlugIns. Started as part of a shopping cart I need to complete.

 

[joulongleu]

Very nice ,Can provide examples?

 

[Mashiane]

Very nice ,Can provide examples?

I always do however this is still wip (work in progress).

 

[Mashiane]

You can Dropbox MashPlugsIns here.

I started creating this component after so many failed attempts to have the Date input working on the ABMTableGrid component. I had tried to make it flexible in terms of adding dynamic fields etc, its a group project afterall. #handclap. After giving up I started this. I on the other hand wish I knew better. I am at most frustrated with this. Yes the jsgrid library used for this is superb however there is no working example anywhere of how you can adopt that component to suit your needs, in this case adding a date and everything else that can work with it. Jsgrid's website indicates how it can be done but no working example on how its actually done. Perhaps lack of skill on my part to understand it. I just hate giving up on things that dont speak. Case in point this. I guess you win some and loose some.

In BuildPage:

MashPlugIns.NeedsDataTable(page)

Option 1: Content Editable

Above is content editable mode. In this mode, one is able to copy, csv, excel, pdf and print the table. You can, update and delete row data, you can trap the events and then save your stuff to an underlying database. The content though is just basic text. Nothing else. Nada.

mashtable.UseInputControls = False

Option 2: Input Controls

When using the input controls, one sacrifices the copy, you sacrifice the niceties. A lot is happening with this thing..

One of the frustrations with this is the Select control. For some reason, it just never works. Pheew... Now, the date and time input controls are very tricky. You can use jquery ones but I wanted something cooler and fancier, comes in the MashDateDropper and also the time, the MashTimeDropper did justice. I'm just sorting out the checkbox change event things. This is one elusive control, this checkbox has attr checked=checked and value. As some of these controls are created at runtime, event trapping needs to be at document level, otherwise they dont fire at all. Again, the select control just couldnt budge.

mashtable.UseInputControls = True

Option 3: Material Controls

I can't get the custom date and timepicker working at all without including the materializecss js and css here. I would really not like to do that at all and its reloading everything again even stuff that wont work with ABMaterial. It would be nice if when creating custom components one can just be able to use existing ABMaterial components without having to clone things, because I would just do that here.

In BuildPage

MashPlugIns.NeedsMaterialize(page)

When creating your table...

mashtable.UseInputControls = True
    mashtable.MaterialControls = True

Even after trying so hard, again the select control just does not budge and play well. Now I'm considering using an autocomplete text input but that is not the solution I want. I need a property table with ABMaterial controls.

Reproduction Example...

Event trapping:

Sub mashtable_delete(value As Map)
    Dim valuex As String = value.GetDefault("value","")
    Dim valuem As Map = mashtable.RowToMap(valuex)
    page.Msgbox("",valuem,"Delete","OK",True,"","")
End Sub

Sub mashtable_insert(value As Map)
    Dim valuex As String = value.GetDefault("value","")
    Dim valuem As Map = mashtable.RowToMap(valuex)
    page.Msgbox("",valuem,"Insert","OK",True,"","")
End Sub

Sub mashtable_update(value As Map)
    Dim valuex As String = value.GetDefault("value","")
    Dim valuem As Map = mashtable.RowToMap(valuex)
    page.Msgbox("",valuem,"Update","OK",True,"","")
End Sub

Initializing the table...

mashtable.Initialize(page,"mashtable")
    mashtable.ZDepth = ABM.ZDEPTH_2
    mashtable.SetTableType(mashtable.EnumTableType.DataTable)
    mashtable.IsResponsive = True
    mashtable.DataTableKeys = False
    mashtable.UseInputControls = True
    mashtable.MaterialControls = True
    mashtable.DataTableSaveState = False
    mashtable.AddColumn("id","id",mashtable.EnumDataType.istext,True,True,True,False)
    mashtable.AddColumn("Name","Name",mashtable.EnumDataType.istext,True,True,True,True)
    mashtable.AddColumn("JobTitle","Job Title",mashtable.EnumDataType.istext,True,True,True,True)
    mashtable.AddColumn("Location","Location",mashtable.EnumDataType.istext,True,True,True,True)
    mashtable.AddColumn("Age","Age",mashtable.EnumDataType.isnumeric,True,True,True,False)
    mashtable.AddColumn("StartDate","Start Date",mashtable.EnumDataType.isdate,True,True,True,False)
    mashtable.AddColumn("StartTime","Start Time",mashtable.enumdatatype.istime,True,True,True,True)
    mashtable.AddColumn("Gender","Gender",mashtable.EnumDataType.isselect,True,True,True,True)
    mashtable.AddColumn("Active","Active",mashtable.EnumDataType.ischkbox,True,True,True,True)
    'mashtable.AddColumn("Email","Email",mashtable.EnumDataType.isemail,True,True,True,True)
    'mashtable.AddColumn("History","History",mashtable.EnumDataType.istextarea,True,True,True,True)
  
    'add the data
    mashtable.AddRow(1,Array As String(1,"Anele Mashy Mbanga","Chief Software Architect","East London","44","2017-01-01","10:00","Male","1","[email protected]","A little about Mashy"))
    mashtable.AddRow(2,Array As String(2,"Usibabale Ozzie Mbanga","Apprentice","East London","14","2017-02-01","11:00","Male","0","[email protected]","A little about Ozzie"))
    mashtable.AddRow(3,Array As String(3,"Olothando Orio Mbanga","PA","East London","8","2017-03-02","12:00","Female","0","[email protected]","A little about Orio"))
    mashtable.AddRow(4,Array As String(4,"Esona Ernesto Mbanga","Assistant","East London","7","2017-04-01","13:00","Female","0","[email protected]","A little about Ernesto"))
    mashtable.DataTableSelect = True
    mashtable.DataTablePageSize = 3
    page.Cell(1,1).AddComponent(mashtable.ABMComp)

I have uploaded the source code for the control here. The resource files are in the MashPlugIns library, herein included.

 

[joulongleu]

Hi Mashiane:Test the results as follows:

 

[Mashiane]

@joulongleu can you please use google chrome / firefox developer, right click on the - (dash) where the button is supposed to be and then click Inspect Object, I need to see what is shown, also check your console, are there any errors?

 

[joulongleu]

Hi Mashiane:Found 1 error

 

[Mashiane]

I see the problem, in BuildPage please add MashPlugIns.NeedsDataTable(page)

 

[Mashiane]

This component is incorporated into MashPlugIns now

 

[joulongleu]

Hi @Mashiane Thank you for your help, the calendar component is very powerful, but Gender choose and Active checkbox can not use. Can you teach me how to use it?

 

[Harris]

I'm just sorting out the checkbox change event things. This is one elusive control, this checkbox has attr checked=checked and value.

I know your frustration with this one... It is a bugger trying to get and set its' state...

 

[Mashiane]

Hi @Mashiane Thank you for your help, the calendar component is very powerful, but Gender choose and Active checkbox can not use. Can you teach me how to use it?

Calendar component? Is that a typo? Perhaps you meant the table as in this post. I'm still cleaning out this component as its very buggy with the combo and checkboxes, see Option 3 above.

 

[joulongleu]

Hi @Mashiane Sorry unclear description of the problem, the problem is as follows attachment

 

[Mashiane]

Yes I got you, check my response on post #12, and also in Option 2 I said...

One of the frustrations with this is the Select control. For some reason, it just never works. Pheew... Now, the date and time input controls are very tricky. You can use jquery ones but I wanted something cooler and fancier, comes in the MashDateDropper and also the time, the MashTimeDropper did justice. I'm just sorting out the checkbox change event things. This is one elusive control, this checkbox has attr checked=checked and value. As some of these controls are created at runtime, event trapping needs to be at document level, otherwise they dont fire at all. Again, the select control just couldnt budge.

For now please comment the line MashPlugIns.NeedsMaterialize(page) out, this is an known issue that I am attending to.