Filter, Expert Footer, Expert ToolBar and more - Examples

Hi guys...i made some stuffs in my table and i want share.
Maybe u guys can help too.

EXPERT FOOTER: Define footer functions for each column, the result goes down.
EXPERT BARS: create bars and append in ur table, like FILTERBAR and TOOLBAR.
Expert Filter: AWESOME feature. U need see.
USE INTERNET EXPLORER to view. [i know]
Link: http://www.sonner.com.br/pc/ActiveWidgets/examples3/extendedGrid4.html

U can copy/modify my code.

Tkz Alex.

Paulo Cesar Silva Reis (PC from Brazil).

June 20,

lol, no one liked? :(

Paulo Cesar Silva Reis (PC from Brazil).

June 22,

looks very nice .... unfortunatelly only in IE. :(

change (un)visible rows in a listbox is my favourite feature.

great work

memory_imprint

June 23,

works in firefox too, but i need fix some bugs like:
- Columns Visible (combobox) close when user try to choose a option. (firefox).
- After doing filters, user got a PERMISSION DENIED in javascript (alex tould me its a bug).
- Need fix position X in group filter menu.

After fix this bugs, my features will work fine in firefox 1.5.

Paulo Cesar Silva Reis (PC from Brazil).

June 23,

That's very good example!

I especially like how one can select visible columns with checked list dropdown (press Enable/Disable toolbar -> Visible columns). Cool!

Alex (ActiveWidgets)

June 26,

-- New Modifications.
- English support
- 80% firefox compatible
- Filter bar fixed.

Paulo Cesar Silva Reis (PC from Brazil).

June 26,

Paulo ... REALLY nice.

I was wondering ... how do I just use the Expert Filter and the ability to select visible columns? I don't need all the other things.

I tried to read your web site, but alas, I only know English.
I can't figure out what js files I need and how to implement them.

Thanks, Carl

July 1,

ok, there we go:

<html>
<head>
<title>:: Sonner Components :: Example Extended GRID (v4) ::</title>
<script src="specialArray.js"></script>
<script src="../templates/templates.js"></script>
<script src="../runtime/lib/aw.js"></script>
<script src="gridController.js"></script>
<!-- bar language //-->
<script src="languages/extendedBars_enUS.js"></script>
<script src="extendedBars.js"></script>
<!-- filter language //-->
<script src="languages/extendedFilter_enUS.js"></script>
<script src="extendedFilters.js"></script>

<script src="cssexpr.js"></script>
<script src="xmenu.js"></script>
<!-- Filterbar //-->
<script src="bars/Filterbar.js"></script>
<!-- ToolBar //-->
<script src="bars/Toolbar.js"></script>
<script src="languages/components/columnsVisible_ptBR.js"></script>
<!-- Columns Visible Combo //-->
<script src="components/ColumnsVisibleCombo.js"></script>
<link rel="stylesheet" href="../runtime/styles/xp/aw.css">
<link rel="stylesheet" href="xmenu.css">
<link rel="stylesheet" href="xmenu.windows.css">
<style>
#gridExtendedSonner { width: 500px; height:340px;  margin: 0px; padding: 0px} 
#gridExtendedSonner .aw-footer-0 .aw-item-box {background-color:#CCCCCC; text-align:center}

#gridExtendedSonner .aw-alternate-even {background: #E7E7D6;} 
#gridExtendedSonner .aw-alternate-odd  {background: #F7F3E7;} 
#gridExtendedSonner .aw-rows-selected {background: #316ac5;} 
#gridExtendedSonner .aw-mouseover-row {background: lightblue;}
.aw-toolbar-normal {
    background-color:#CCCCCC;
    size:inherit;
    width:100%;
    height:22px;
    vertical-align:baseline;
    text-align:left;
}

.aw-filterbar-normal {
    background-color:#CCCCCC;
    overflow:auto;
    size:inherit;
    width:100%;
    height:150px;
}

</style>

</head>
<body>
<script>
var records = [
    ["99687542", "Microsoft Coorporation", "Jan", 0.10],
    ["99687542", "Microsoft Coorporation", "Feb", 0.05],
    ["99687542", "Microsoft Coorporation", "Mar", 1.0],
    ["10056957", "Monsters S.A INC", "Jan", 950],
    ["10056957", "Monsters S.A INC", "Feb", 960],
    ["10056957", "Monsters S.A INC", "Mar", 1400],
    ["45878954", "The Ice Age 2 (Brazil rulez)", "Jan", 1000],
    ["45878954", "The Ice Age 2 (Brazil rulez)", "Feb", 8000],
    ["54789658", "ActiveWidgets Company rulez", "Jan", 990],
    ["77845694", "ATI Company", "Jan", 890],
    ["01201201", "MSI Company", "Jan", 880]
];

var columnTitles = new array();
columnTitles.add("Company Code", "Company Name", "Month", "$ Capital");

var extendedGrid = new AW.Grid.Extended;
// Grid Controller
var exGridController = new GridController(extendedGrid, columnTitles);

extendedGrid.setCellFormat([new AW.Formats.Number, new AW.Formats.String, new AW.Formats.String, new AW.Formats.Number]);
extendedGrid.setId("gridExtendedSonner");
extendedGrid.setCellText(records);
extendedGrid.setRowCount(records.length);
extendedGrid.setHeaderCount(1);
extendedGrid.setSelectionMode("single-row");
extendedGrid.setFooterCount(0);
extendedGrid.setVirtualMode(true);
extendedGrid.setColumnWidth(100, 0);
extendedGrid.setColumnWidth(200, 1);
extendedGrid.setColumnWidth(60, 2);
extendedGrid.setColumnWidth(100, 3);

// bar controller
new BarController(extendedGrid);
// new version filterbar
// filterbar
var filterbar = new Filterbar(extendedGrid, "filterbar", "normal", 150, true);
exGridController.getController(BAR_CONTROL).addBar(filterbar);
// filter control
new ExtendedFilter(extendedGrid, filterbar);
exGridController.getController(FILTER_CONTROL).initDefaultFitersAndConditions();
exGridController.getController(FILTER_CONTROL).init();
// toolbar
var toolbar = new Toolbar(extendedGrid, "toolbar", "normal", 22, true);
// combo columns visible
toolbar.addComponent(new ColumnsVisibleCombo(extendedGrid));
// control navigation
exGridController.getController(BAR_CONTROL).addBar(toolbar);
exGridController.getController(BAR_CONTROL).init();
document.write(extendedGrid);

</script>
</body>
</html>

Paulo Cesar Silva Reis (PC from Brazil).

July 1,

Very cool. Thanks buddy.

Had one more question ... what do I set so the filterbat is not expanded when the page loads? I want it to be collapsed unless they click on the button to apply a filter - then have it expand.

I also noticed something strange in my testing. When I tried to set a filter, it allowed me to pick a column, then apply a condition, but the value-dropdown box was empty. And if I tried to type into the value box, it actually focused on the AW grid and I was editing the first column in the first row. Really strange.

I also noticed that there is a CSS error (it gave me an error generated by your code). But, I couldn't tell where or what it was referring to.

One last question, if I chose to use this filtering, how much would it cost to buy a copy and do you have documentation (in English?)

Again, thanks ... it is a really cool component. Alex (AW) should see if he can license it from you and make it a part of AW.

Oh, if you want to answer any of the above off line, my email address is schiavon@msn.com ... would like to get this working.

Carl

July 4,

Hi Carl, lets begin
first question: Init ur grid with filterbar "hidden":

var filterbar = new Filterbar(extendedGrid, "filterbar", "normal", 150, false);
// the last parameter (initial state, visible or not)

second question: in witch browser u get this error? Because i cant see.
About the CSS error, i'll check it.
My code is free (i made for my company and my boss hav no problem to share), so u can modify and use for ur own. About documentation, i dont hav yet but later, sure i need make one.

This is not the last version of my features, i made some modifications in newest version like:
- Separated Data Model (to work with all features, like footer, filter, navigation, etc).
- Expert Control Navigation (jump pages).
Ill post here later.

And tkz, someone liked its great :-)

Paulo Cesar Silva Reis (PC from Brazil).

July 4,

VERY nice.

I get the CSS error in IE 6.0
Because I'm trying to support firefox, there are some CSS attributes that need !Important and then the parameters.

If you want, I'm working on a way to integrate your filtering on the following page:
https://www.pjm.com/planning/project-queues/queue-gen-active.jsp

It's still a work in progress, so there are some problems. And it is a secured page - so it will ask you if you want to view secured/unsecured data.

I did notice on other thing. In trying to implement the filtering mechanism you create (awesome by the way), if I click on the "reset" button, it blanks my entire grid. FYI, I'm using an XML data source.

Any help you have time to offer would be great. I embedded everything (CSS/JS, etc) into the page above. So if you do a view sorce, you can see what I have (not pretty, but it's still being developed.)

Thanks a bunch.

Carl

July 5,

tomorow i'll post the newest version, maybe can fix ur problem with RESET Button & XML Model.

Paulo Cesar Silva Reis (PC from Brazil).

July 5,

My componentes re now under GPL license, so if u wanna modify u need keep GPL license.

Long life for GNU.

Paulo Cesar Silva Reis (PC from Brazil).

July 5,

** UPDATED
. DataModel Component (Separated)
. ControlNavigation (fixed)
. Some bugs with filter fixed.

http://www.sonner.com.br/pc/ActiveWidgets/examples3/extendedGrid4.html

Paulo Cesar Silva Reis (PC from Brazil).

July 11,

Great Job Paulo !!
My fovorite is Group-filtering. (dynamic groups is a fantastic feature).
Didn't get time to overview the code, but ... colud it be easy adapted for server-side querying ??
( As per my own experiences, I would suggest (a minnor) put all top-panel in a separate show/hide Div just to increase performance)
Anyway .. Excellent
Thanks

Carlos

July 12,

Tkz carlos.
About DIV in top-pannel, i hav a problem with this, when i try to add components, the AW.HTML.DIV insert a new line after every DIV added in your content so i choose span, example down:

<script>
var obj = new AW.HTML.DIV;
var b1 = new AW.UI.Input;
var b2 = new AW.UI.Input;
obj.setContent("first", function() { return b1; });
obj.setContent("second", function() { return "&nbsp;&nbsp;&nbsp;" + b2; });
obj.setContent("secret", function() { return ""; });
obj.setContent("br_now", function() { return "<br>";});

var secret = new AW.UI.Button;
var i = 0;
secret.setControlText("Secret?");
secret.setEvent("onclick", function() {
    var b = null;
    if( (i++%2) == 0) {
       b = new AW.UI.Input;
       alert('ADDEDD INPUT, NO NEW LINE BETWEEN COMPONENTS!');
   } else {
      b = new AW.HTML.DIV;
      b.setContent("secret_inside", function() { return new AW.UI.Input; });
       alert('ADDEDD DIV, NEW LINE BETWEEN COMPONENTS!');
    }	
   obj.setContent("secret", function() { return b; });
   obj.refresh();

});

document.write(obj);
document.write(secret);
</script>

About group server-side, what u mean? Filtering in server?

Paulo Cesar Silva Reis (PC from Brazil).

July 12,

Yeah, I know that ( no matter div or span) but just wondering about...
not using a top-panel, but a separate span container for that.

That could increase rendering speed, but give additional problems, cause need to use a global-span-container and control the two element's (filter-span + ExtendedGrid) resize & show/hide.

Yes, server-filter ( as I said did not check the code), but you mentioned that is ready to work with any data-model, so my question is about substitute current js-filter code with ajax/post without impact on the rest of the app.
Thanks

Carlos

July 12,

U can replace the default logical-function but its not possible yet send it for server, i need change somethings, ill try later.

Paulo Cesar Silva Reis (PC from Brazil).

July 12,

** UPDATED
1. Problems with VISUAL when using XML DATA MODEL. (component ColumnsVisibleCombo).
2. FIXED BUG #2 ControlNavigation (problem with 0 page).

- URLS for test:
* XML DATA MODEL: http://www.sonner.com.br/pc/ActiveWidgets/examples3/gridXML.html
* VECTOR DATA MODEL
http://www.sonner.com.br/pc/ActiveWidgets/examples3/extendedGrid4.html

If u want study my code, get the XML DATA MODEL Example, i made it for u :-)

cya.

Paulo Cesar Silva Reis (PC from Brazil).

July 14,

** UPDATED
1. Problems with VISUAL when using XML DATA MODEL. (component ColumnsVisibleCombo).
2. FIXED BUG #2 ControlNavigation (problem with 0 page).

- URLS for test:
* XML DATA MODEL: http://www.sonner.com.br/pc/ActiveWidgets/examples3/gridXML.html
* VECTOR DATA MODEL
http://www.sonner.com.br/pc/ActiveWidgets/examples3/extendedGrid4.html

If u want study my code, get the XML DATA MODEL Example, i made it for u :-)

cya.

Paulo Cesar Silva Reis (PC from Brazil).

July 14,

Where can I download the javascript files and examples? I'd like to try and implement the filtering. But I only read English and can't find it on your web site.

Thanks ... nice functions by the way.

October 12,

To: Paulo Cesar Silva Reis

When I used the paging function in your demo (http://www.sonner.com.br/pc/ActiveWidgets/examples3/gridXML.html), but it perhaps has a conflict with the "column sort".

The "column sort" only works in the single page, not in all the pages when I used the paging function. Any workaround?

Thanks.

January 9,

ok, im back, ill try to make a workaround for the last post.

About the code, ill put in another place so u guys can download it.

cya.

Pc (from Brazil)

January 17,

Hi Pc,

I'm searching the web to find your samples of filtering with ActiveWidgets. It's great features. I try to port your codes into my eclipse web project. But can't run due to missing some js files in your sample web page. Is it ok with you to share your codes with me to do some of POC in my project. Below is the url I refered to:

http://www.sonner.com.br/pc/ActiveWidgets/examples3/extendedGrid4.html

Thansk,
Rob
My mail: rochou@lehman.com

Paulo Cesar Silva Reis

March 20,

Cool stuff! where I can obtain the .js files Paulo??

Al

April 13,

This topic is archived.

Filter, Expert Footer, Expert ToolBar and more - Examples

See also:

Search

New Data Grid

Version 2