Focal Point
[SOLVED] Maintain JS Grid Functonality

This topic can be found at:
https://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/678106025

September 02, 2010, 07:11 PM
dcjohnson3
[SOLVED] Maintain JS Grid Functonality
I'm admittedly new to Maintain, and I'm working on an inventory management system. What I'm trying to accomplish is a JavaScript read/write grid where the first column is populated with check boxes for removal of the item from the inventory. I've been able to get the check boxes in the activeX grid using the function

for (var x = 0; x{
document.getElementById("Grid").GetCell(0,x);
document.getElementById("Grid").CellSetCellType(2);
document.getElementById("Grid").CellSetCellTypeEx(4096);
document.getElementById("Grid").SetCell(0,x);
document.getElementById("Grid").RedrawCell(0,x);
}
}

where i is equal to the focIndex of my stack. But I was unable to figure out how to check what boxes were checked vs unchecked. I need to use the JavaScript grid though because the end users are using macs and this same function returns the error Object doesn't support this property or method I'm thinking the JS grid is supported differently by the DOM or something. I know the JS grid supports HTML elements so I've embedded the following .js file in the form

function JSGridOnload() {
InventoryManagmentForm.Grid1.ColumnSetContentType(0,1);
}

This sets the column content type to HTML but I've been unable to determine how to edit the actual HTML content of the cells. Once this is accomplished it is my understanding from the hep files I need to use the GetHTMLfield command to check whether or not the boxes were checked. But there is not much documentation on the subject and I was unable to find anything of use on the forums. Is there more thorough documentation of the JS grid other than the help files? Any help would be greatly appreciated I've been stuck on this for a while now. Thanks in advance

This message has been edited. Last edited by: dcjohnson3,
September 03, 2010, 03:26 AM
GamP
Sorry, I do not have any experience yet with the js grid. But ...
In the older releases of maintain there was no js-grid. The only choices we had were the actice-X object or the html table object. Since a number of customers back then did not allow active-X, we had to make do with html table objects. These maintains simulated the active-X behaviour of displaying and modifying the data using checkboxes and dropdown boxes and input fields from within the html table object. Sample code for creating an input field:
Compute current_stk(i).infld = "<input type=text name='infld" | i | "' value='" | current_stk(i).value | 
"' size=15 maxlength=20 style='font-family:verdana;font-size:8pt; text-align:right;'" |
" onblur='javascript:if (isNaN(this.value)){alert(this.value + " | quote | ": is not numeric!" |
quote | ");this.focus();} if (this.value != 0){document.forms.StartScreen.checkbox" |
i | ".checked = false;}' />";

As you can see you can do whatever you like using javascript in the html table object. Just don't forget to specify that the content of the field is html. Retrieving values is indeed done with the gethtmlfield method:
Compute valn = StartScreen.GetHTMLField('infld' | i);
In these examples i is the index in the stack, controlled with a repeat loop.

Hope this helps a bit ...


GamP

- Using AS 8.2.01 on Windows 10 - IE11.
in Focus since 1988
September 03, 2010, 03:26 AM
Alan B
Welcome to Maintain.

This link may help as a starting point. Though it is not what you need exactly, the principle is there.

Basically every checkbox on the grid needs to have a unique name to be able to populate and then collect with GetHTMLField.


Alan.
WF 7.705/8.007
September 03, 2010, 09:38 AM
Maintain Wizard
quote:
Originally posted by Maintain Wizard:
The New JS Grid has some great features. The techniques that Alan refered to for the HTMLTable can be used in the new grid. First of all you need to build the field in your stack for every row of the grid:

  
Compute i/i2=1
  Repeat stk.foccount
  Compute Stk(I).cbox/a100 = "<input type=checkbox name=check" || I | " value=1>";
  Compute i=i+1;
  endrepeat


Then you need to add that column to the grid. This creates the field check1 ... checkn as unique objects on your form. In order to retrieve the values from the grid you need to use:

Compute I=1;
Repeat stk.foccount
Compute Stk(I).Sel/a3 = Form1.GetHTMLField('check' || I);
Compute I=I+1;
Endrepeat

You can then screen on that field. A value of 1 is checked.

But now you have to tell the grid that that field is HTML and not text. In 7.72 there is a field in the dialogue box that does this for you. In 7.70 / 7.71 you have to do it. In order to make sure the grid looks correct when the form appears create a file called JSGridOnload.js (font matters) and place this command in it:

ColumnSetContentType(col, contentType)
contentType: 0 – Text 1 – HTML 2 - Image
ex. Form1.Grid1.ColumnSetContentType(1,0);

That's it. Create the field with HTML commands in your stack. Place the stack / field in the grid. Tell Maintain that that cell is HTML, and retrieve your values.

Mark

September 07, 2010, 12:36 PM
dcjohnson3
Hi guys,

First off I would like to thank you for your fast and helpful responses. That is exactly what I was looking for but I'm unable to make it work. I have used the following for the fields initialization

Compute i/i3=1;
Repeat RemoveItemsStk.focCount
Compute RemoveItemsStk(I).cbox/a100 = "<input type=checkbox name=check" || I | " value=1>";
Compute i=i+1;
endrepeat

and the following .js is embedded to set the column content type to HTML

function JSGridOnload() {
InventoryManagmentForm.RemoveGrid.ColumnSetContentType(0,1);
}

I believe the Onload function is working properly as the column color change I have specified is ignored when I change the content type to HTML. I have tried variations of the actual HTML command including such things as follows

'<input type="checkbox" name="check' || I || '" value="1" />';

But on the column still renders as read/write cells. There are no js errors thrown. Any advice would be greatly appreciated. Thanks in advance.

David

This message has been edited. Last edited by: dcjohnson3,
September 07, 2010, 04:38 PM
dcjohnson3
Thanks to the wizard I have solved my issue.
for any who encounter a need for this you need to place the following code in the GetItems case instead of the Top case as I was doing.

Compute i/i3=1;
Repeat RemoveItemsStk.focCount
Compute RemoveItemsStk(I).cbox/a100 = "";
Compute i=i+1;
endrepeat

Thank you guys again for the help.

David
September 08, 2010, 02:57 AM
Alan B
Glad you have this working. However as others may also have noticed, the JS Grid might do with some improvements.

Mark, how about an NFR to allow a grid cell to have further attributes, such as checkbox, selects, buttons and images, rather than having to manually code them. The current version, whilst a huge improvement for non-ActiveX users, could be even more user friendly, cutting out a myriad of user code.

Thoughts anyone.


Alan.
WF 7.705/8.007
September 08, 2010, 08:10 AM
Maintain Wizard
Alan
I can discuss these ideas with programming at our next New Feature meeting. Please note though, that in 7.72, you will be able to change the cell content to HTML or Image, just like with the HTMLTable. There is a section in the Column Dialogue box to do this. It makes life very easy.

Mark

PS Our current enhancement push is to support double-byte characters such as Kanji. We are in full on translation mode!!