Column Header DropdownBox Filter Example Required

Please show code example on how to implement filter based on Column Header DropdownBox.

First array element in the DropdownBox should be blank which would convey no filter, other values in list once selected should filter matching rows only.

Thank You,

I have two problems (Windows7) :-

1) Spacing above and below combo display text in grid header as well as the combo list row data text spacing is wrong (text decenders are cut off). This is the same problem I had with the grid, after changing styles to Vista the grid header corrected itself (with the exception of the replacement combo in the header) but the grid data rows still have this same problem. How can I correct both the combo and grid row text display taking into account the descender spacing ?

2) The following code (in HEAD of HTML page) which is bound to a button onclick event fails to rebuild grid (grid has previously been built and displayed in the BODY along with the button [all works fine], the event clears the grid, headers are built and displayed but no row data is displayed [data exists]) ?

function fetch_order() {
var newrequest = new AW.HTTP.Request;
newrequest.setURL("../test/mysql_fetch.php");
newrequest.request();
var doc="NORESPONSE";
newrequest.response = function(doc) {
if (doc != '') {
alert(doc);
} else {
var myHeaders = <?= $header ?>
var myCells = <?= $cells ?>
grid.clear();
grid.setHeaderText(myHeaders);
grid.setCellText(myCells);
grid.setColumnCount(myHeaders.length);
grid.setRowCount(myCells.length);
grid.setColumnIndices([0,1,2,3,4]);
// set grid read/write columns
var columns = grid.getColumnCount();
var rows = grid.getRowCount();
for (var row = 0; row <= rows; row++) {
for (var col = 0; col <= columns; col++) {
if (col == 1) {
grid.setCellEditable(true, col, row);
} else {
grid.setCellEditable(false, col, row);
}
} // for
} // for
grid.refresh();
} // doc
} // response
} // end

Please advise.

Try moving the request line here:

} // response
newrequest.request();
} // end

Sorry, no idea about IE7 issues.

Carlos, my javascript / html / php and intial grid programming / display is all working fine - it is the grid.clear() that makes the grid go haywire and no longer programable ?

Then try to replace the whole clear with it's models like in :

http://www.activewidgets.com/javascript.forum.10753.2/clear-grid-before-reloading-with.html

I think the clear SelectionModel() is now clear SelectedModel() , and try to refresh after the clear as suggested in above post.
Also test if defining the arrays variables at page level makes any difference (var myHeaders , var myCells)
I would place some dummy vars to check which one is failing or... maybe some other things to try...

http://www.activewidgets.com/javascript.forum.20459.1/how-can-i-clear-the.html
http://www.activewidgets.com/javascript.forum.18246.5/is-posible-load-a-new.html

HTH

Thank You Carlos.

I am still trying to resolve

1) Spacing above and below combo display text in grid header as well as the combo list row data text spacing is wrong (text decenders are cut off). This is the same problem I had with the grid, after changing styles to Vista the grid header corrected itself (with the exception of the replacement combo in the header) but the grid data rows still have this same problem. How can I correct both the combo and grid row text display taking into account the descender spacing ?

I can send screen shot, can you contact me directly at andyhill@axfitecom.au so I can send this - thanks.

I should have typed

andyhill@axfite.com.au

Andy, it might be easier to just put up your example on the web so others can have a look. If it only happens with W7, could it just be the font you're using?

Anthony, I see no way to attach a screen shot to show the issue ?

Also, default browsers running on current O/S' should be taken into consideration in the widgets code so that they render correctly don't you think ? Windows7 is now the current O/S.

I am looking for a Javascript/PHP professional to liase with (any serious work I am happy to pay for) to resolve anomolies.

eg.

I have a PHP function that Javascipt fails to recieve the echo'd results (return variable claims it is undefined) and yet the function is firing and returning ?

Also $_SESSION['init'] = '1'; fails to reflect the updated changes from within that function ?

php

session_start();
function global_session($var){
if(!array_key_exists($var,$_SESSION)) $_SESSION[$var]='';
$GLOBALS[$var]=&$_SESSION[$var];
}
global_session('init');

...

$_SESSION['init'] = '0';
//
function fetch_data($var) {
$args = func_get_args();
//if ($var == '1') {
//if ($args[0] == '1') {
//if ($_SESSION['init'] == '1') {
...
$_SESSION['init'] = '1';
//}
echo "".$_SESSION['init'].";\n";
}

...

html

...

javascript in head tag

...
var myret = '';
try
{
//myret = <?= fetch_data('1') ?>
//myret = <?= fetch_data($_SESSION['init']) ?>
var myret = <?= fetch_data($_SESSION['init']) ?>
}
catch(err)
{
//myret = '';
var myret = '';
}
alert('JavaScript Return Code recieved from PHP function '+myret);
...

and yet php variables that are updated within that function are fetched correctly ?

var myHeaders = [];
try
{
myHeaders = <?= $_SESSION['header'] ?>
}
catch(err)
{
myHeaders = [];
}
alert('JavaScript Header fetched from PHP variable '+myHeaders);

Andy,

> I see no way to attach a screen shot to show the issue ?

I meant a HTML page at a publicly accessible web location you have control over. Its rather hard to debug an image, so I wouldn't recommend bothering.

Anthony, I am working on a mockup here :-

http://www.axfite.com.au/test/grid_from_mysql-d.php

var myHeaders = [];
var myCells = [[]];
var mycategory = [];
var max = 0;
var max2 = 0;
var myret = '';
var bypasscombo1 = 0;
var bypasscombo2 = 0;
//
function fetch_order() {
//
try
{
myret = <?= fetch_data($_SESSION['init']) ?>
}
catch(err)
{
myret = '';
alert('JavaScript return code from PHP function ERROR !');
}
alert('JavaScript return code from PHP function '+myret);
//
try
{
myHeaders = [];
myHeaders = <?= $_SESSION['header'] ?>
}
catch(err)
{
myHeaders = [];
alert('JavaScript myHeaders fetch from PHP ERROR !');
}
alert('JavaScript data from PHP variable $Header '+myHeaders);
//
try
{
myCells = [[]];
myCells = <?= $_SESSION['cells'] ?>
}
catch(err)
{
myCells = [[]];
alert('JavaScript myCells fetch from PHP ERROR !');
}
alert('JavaScript data from PHP variable $cells '+myCells);
//
try
{
mycategory = [];
mycategory = <?= $_SESSION['category'] ?>
}
catch(err)
{
mycategory = [];
alert('JavaScript mycategory fetch from PHP ERROR !');
}
alert('JavaScript data from PHP variable $category '+mycategory);
//

Here is the PHP return

echo "".$_SESSION['init'].";\n";

Andy, OK, I can access your example.

Can you inform us which of the two dropdowns has the descender problem? Or is it both?

That is, from first accessing the page, what would we do to see the problem. I tried inspecting it with FireFox and noticed no problem so I'm assuming its a font problem limited to W7 and IE???

A couple of other suggestions -

The calendar looks rather hideous. Consider changing its colours to suit the rest of the page. I note that some of its images don't show up (I'm assuming you didn't upload them).

You don't need the table wrapping around your displayed elements. You can just use simple CSS rules for vertical/horizontal element alignment and do away with the table.

Anthony, I have wrestled with the spacing for weeks, late yesterday after digging into the aw.css file I found and applied the following:-

.aw-header-0 .aw-grid-header {border: 0px;}
.aw-header-0 .aw-grid-header .aw-item-box {border: 0px;}
.aw-header-0 .aw-input-box .aw-item-box {border: 0px;}
.aw-header-0 .aw-combo-box {border: 0px;}
.aw-header-0 .aw-combo-box .aw-item-box {border: 0px;}

This has improved the results quite a bit, and yes it seems to be a W7 issue (same IE version on Vista does not have the problem to the same degree) so it must have something to do with the fonts as well.

You did not comment on why the PHP echo'd return shows up under javascript as undefined ? This is a real problem for me as well as changing the $_SESSION['init'] does not reflect it's changes ?

Also "calendar looks rather hideous", according to the calendar people I have to use a form in order to use it modally. I would be happy for any pointers on how to make the calendar look good (I have left that till last as I had to get the grid working properly first) - all correspondance to them has not been answered.

Andy,

> You did not comment on why the PHP echo'd return shows up under javascript as undefined ?

I don't know much PHP, sorry.

> according to the calendar people I have to use a form in order to use it modally.

I expect you'd also need the form to handle your button (although there are other methods).

> I would be happy for any pointers on how to make the calendar look good

Can you post a link to the calendar site? There seem to be some JavaScript settings for it in your code.

Having a look at the grid, I found that there are some differences between its display on IE (IE8 on Vista) and other browsers (FF and Google Chrome). In IE, the first column isn't displayed. This appears to be due to a CSS rule setting its width to 1px. This doesn't work with other browsers. For some reason, it affects most of the other CSS column rules too.

I'll try a stripped down version of your page if I get a chance to see what's going on.

Andy,

I thought I'd go through a copy of your code to see what was happening with the font. Unfortunately, I don't have W7 so I couldn't duplicate it. It looks OK on Vista with IE8, FF and Google Chrome.

You can find my copy here -

http://www.users.on.net/~asm/andy/

I also went through the CSS rules and set things back to simplify them. Row sizes are at their default, etc.

I also removed the table to show you how simple the code is without it. I also cleaned up a lot of the JavaScript code. One interesting thing I found was that while the filters work correctly with IE, they don't with other browsers. Its a refresh/clear issue but I didn't bother fixing it.

Lastly, I think there's some suspect data in your array. Look at row ids 4256 and 4257. The description includes the text "(12]". I think that should be "(12)".

Thank You Anthony, Can we see code on input1 event when ENTER is pressed ?

Question: I need "id" for SQL but do not want to see it in the grid.

My way of handling that was to make the "id" column width 1px which on some browsers works well but on others does not according to some feed back.

If I hide the "id" column then it is not available for iteration when walking through the grid's contents.

How would you handle this ?

Also I need to resolve filter / browser refresh issue ?

Do you do PHP work $

Can I email you directly ?

>Also I need to resolve filter / browser refresh issue ?
try replacing the filter line:
grid.refresh();
with:
grid.getRowsTemplate().refresh();

Andy,

> Can we see code on input1 event when ENTER is pressed ?

Sorry, I stripped out all your code because I didn't know where to find the calendar widget on the net (see my earlier question). I thought I'd add the AW input widget instead. I could try to flesh it out on the weekend, if you like.

> I need "id" for SQL but do not want to see it in the grid.

The easier way of doing that is to hide the column. I make some code changes and let you know when ready. It really very simple.

> My way of handling that was to make the "id" column width 1px which on some browsers works well but on others does

Yes, that's correct. I noticed an alignment problem. Hiding the column is the right way to do that.

> If I hide the "id" column then it is not available for iteration when walking through the grid's contents.

That's true but keep in mind that you also have the original JavaScript array.

> Do you do PHP work

No, not really. I'm primarily Sybase on Unix. So I mostly write my CGI scripts in POSIX shell or Perl.

Carlos,

Yes, I'll do that (I should remember all this from last year with my own calendar attempt).

"you also have the original JavaScript array"

OK, please show me how to access original JavaScript array elements and will they be in sync with grid changes ?

Also, please show me how to set up an event that fires when a cells value has been changed (edited). It needs to paint a footer cell's summary. eg qty x sell = total.

It would be good if you did both on the adjust code that you made - thanks.

Andy,

> please show me how to access original JavaScript array elements and will they be in sync with grid changes ?

Ah, yes, I didn't think of that. If you change the grid, you'd need to maintain the original array. Perhaps there's an easier way, depending on what your needs are.

> please show me how to set up an event that fires when a cells value has been changed

Its all in the docs. Look at -
http://www.activewidgets.com/aw.ui.grid/cell-edit-events.html

> It needs to paint a footer cell's summary. eg qty x sell = total.

You'd need the other value to multiply against. I'll try putting up a footer and an event function that you can build from.

Anthony, why does footer fail to paint ? Do we have to insert text box into footer first ?

Please show example - thanks.

Andy,

Check http://www.users.on.net/~asm/andy/ again.

I've added a simple footer, rearranged the column display so that column 0 is displayed at the end and hidden. I've also added a simple validation function. You'll need to modify it to accept only correct values and update the footers.

I also changed the save button to be an AW object.

Thanks Anthony.

I managed to get the footer to work correctly only if I added a label to it.

I noticed in your example that you put static text in the footer during creation. I needed dynamic text at runtime and the label did the trick.

http://www.axfite.com.au/test/grid_from_mysql-d.php

Thanks for the tip on placing the "id" column at the end so I can set it's width to 1px and most browsers will live with it that way.

In this way I have the "id" present at all times for SQL assembly but hidden to end users. I might add that placing the "id" as the first column and width 1px worked fine on Vista and Windows7 (32/64) IE.

What is the progress on ActiveWidgets 3 ?

When will it be available ?

Will it have a Calendar ?

You can find a 'quite simple' calendar done with AW here:

http://www.activewidgets.com/javascript.forum.20603.10/activewidgets-custom-calendar-experiment-3.html

I have almost finished a enhanced version of it,
that include month/year combo selection, calendar size (3) , first-day-of week, and date-validation, but I have not decided yet if I should put this one availabe for purchasing.

Thanks Carlos.

Could I suggest some features:-

Ability to make any day of week (say Sunday) invalid

Ability to make any date < valid dates (say <= now() ) invalid

In this way we could prevent user from selecting an undesireable date.

Sure, this kind of featrures are very easy to add ( just two more properties defined at object creation), cause I forgot to say that it also supports multiple instances with different configurations.
I hope it'll be complete in a few days, then some tests and ...who knows :)
Thanks