CODEWITHSUNDEEP
javascriptdojoxpagesdojox.grid.datagrid
Arun
Arun

Reputation: 329

XPages Dojo Enhanced Data Grid Filterbar enable AutoComplete

I wanted to check if someone has tried any option where in we can add custom properties to Dojo Datagrid Column tag in xpages. I want to show a drop-down of column entries when user tries to filter the column. i can do this if I am creating grid programatically i.e. define layout and grid options in Javascript client-side library. But I am clueless about how to add 'autoComplete' attribute to column definition when using extension library controls. This is my CSJS code to create datagrid if it helps you. I am calling paintGrid function on onclientLoad event of xpage.

function paintGrid(store){
    var layout = [
                { field: "AccessRequestFor", datatype:"string",autoComplete:true},
                { field: "UserName", datatype:"string",autoComplete:true},
                { field: "UserEmail", datatype:"string",autoComplete:true},
                { field: "UserAccess", datatype:"string",autoComplete:true},
                { field: "UserExtraAccess", datatype:"string",autoComplete:true},
                { field: "AccessRequestDate", datatype:"string",autoComplete:true},
                { field: "AccessRequestor", datatype:"string",autoComplete:true},
                { field: "RemedyRef", datatype:"string",autoComplete:true},
                { field: "Status", datatype:"string",autoComplete:true}
              ];
    var grid = new dojox.grid.EnhancedGrid({
        id: 'grid',
        store: store,
        structure: layout,
        plugins: {
            filter: {
                // Show the closeFilterbarButton at the filter bar
                closeFilterbarButton: true,
                // Set the maximum rule count to 5
                ruleCount: 5,
                // Set the name of the items
                itemsName: "Access Requests"
            }
        }
    });
    grid.placeAt('view:_id1:_id2:panel1');
    grid.startup();
}

Upvotes: 0

Views: 534

Answers (1)

Peter Della-Nebbia
Peter Della-Nebbia

Reputation: 827

You first need to set the dojoType for the Dojo Data Grid to dojox.grid.EnhancedGrid. You can then add the dojoAttributes for the filter plugin like so:

        <xe:djxDataGrid id="djxDataGrid1"
        storeComponentId="restService1" autoHeight="10" jsId="gridObj"
        dojoType="dojox.grid.EnhancedGrid">
        <xe:this.dojoAttributes>
            <xp:dojoAttribute name="autoWidth" value="true"></xp:dojoAttribute>
            <xp:dojoAttribute name="plugins"
                value="{filter: {
            closeFilterbarButton: true,
            ruleCount: 5
        }}">
            </xp:dojoAttribute>
        </xe:this.dojoAttributes>

For a description of how to create a Dojo Data Grid via the control, and how to enable the EnhancedGrid filter plugin see the recording of this webinar with Brad Balassaitis :

Dojo Data Grid with Brad Balassaitis - June 27, 2013

Upvotes: 0

Related Questions