• How can I filter a dojo grid (Extension Library djxDataGrid) ?

    By Petter Kjeilen 1 decade ago
    Hi !</div>

&nbsp;</div>

When creating a dojo datagrid using pure script, I&#39;m able to filter the grid by saying: grid.filter({lname: filterValue},true).</div>

Filter is a function according to dojo documentation.</div>

&nbsp;</div>

But, I cannot do this when using the Extension Library dojo grid (djxDataGrid.)</div>

&nbsp;</div>

I&#39;ve tried this code:</div>

&nbsp;</div>

//first get value from input</div>

var filterValue = XSP.getElementById(&quot;#{id:inputText1}&quot;).value;</div>

function toProperCase(s)<br/>
{<br/>
&nbsp; return s.toLowerCase().replace(/^(.)|\s(.)/g,<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function($1) { return $1.toUpperCase(); });<br/>
};<br/>
filterValue = toProperCase(filterValue);<br/>
filterValue = filterValue + &quot;*&quot;;<br/>
&nbsp;</div>

//get a handle to the grid</div>

var gridMail = XSP.getElementById(&quot;#{id:djxDataGridMail}&quot;);<br/>
<br/>
gridMail.filter({&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Subject: filterValue<br/>
},true);</div>

&nbsp;</div>

&nbsp;</div>

This does not work.. I&#39;m getting:&nbsp; gridMail.filter is not a function..</div>

&nbsp;</div>

Anyone know how I can filter the Extension Library djxDataGrid clientside (without sending data to the server/making a new query) ?</div>

&nbsp;</div>

Any information would be greatly appreciated :-)</div>

&nbsp;</div>

Best regards,</div>

Petter</div>

    • Accessing the dijit works a little differently

      By Lorcan McDonald 1 decade ago

      You have a line of code that reads:

      var gridMail = XSP.getElementById("#{id:djxDataGridMail}");

      Change it to 

      var gridMail = dijit.byId("#{id:djxDataGridMail}");

      XSP.getElementById() returns a DOM node from the HTML document, not the Javascript object that represents the Data grid.

      • Response: Accessing the dijit works a little differently

        By Petter Kjeilen 1 decade ago

        Hi !

        Thanks for your quick reply. I now get a handle to the js object, and I'm able to call grid.filter.

        But, the grid is not filtered.. I can see it reloading, but displays the same set of documents.

        Also, I cannot sort the grid by clicking on the column headers. The grid is reloaded, and the up/down arrows indicating the sort direction changes, but the sort order remains the same..

        I cannot seem to find any settings regarding sort. I would like to have clientside sorting only. Possible ?

        I'm using the rest service with my dojo grid.

         

        Code for filter button:

        var filterValue = XSP.getElementById("#{id:inputText1}").value;
        function toProperCase(s)
        {
          return s.toLowerCase().replace(/^(.)|\s(.)/g,
                  function($1) { return $1.toUpperCase(); });
        };
        filterValue = toProperCase(filterValue);
        filterValue = filterValue + "*";

        var gridMail = dijit.byId("#{id:djxDataGridMail}");

        gridMail.filter({Subject: filterValue},true);

         

        Code for restservice + grid:


                           
                                                            viewName="xpMailByContactKey"
                                    defaultColumns="true"
                                    contentType="application/json"
                                    var="entry"
                                >
                                        return sessionScope.selContactKey;
        }
        else{
            return "N/A";
        }
        }]]>
                                   
                               
                           
                       
                                            id="djxDataGridMail"
                            storeComponentId="restServiceMail"
                            columnReordering="true"
                            rowsPerPage="5"
                            initialWidth="20px;"
                            style="width: 100%;height: 15em;padding: 0px;"
                        >
                                                    id="djxDataGridColumn31"
                                editable="false"
                                draggable="false"
                                field="Subject"
                                width="auto"
                                label="Subject"
                                formatter="formatMailLink"
                            >
                           
                                                    id="djxDataGridColumn32"
                                editable="false"
                                draggable="false"
                                field="DocumentCategories"
                                width="auto"
                                label="Categories"
                            >
                           
                                                    id="djxDataGridColumn33"
                                editable="false"
                                draggable="false"
                                width="auto"
                                field="Sent"
                                formatter="formatDate"
                            >
                           
                                                    id="djxDataGridColumn34"
                                editable="false"
                                draggable="false"
                                width="auto"
                                field="icon"
                            >
                           
                       

         

        Any information would be greatly appreciated :-)

         

        Best regards,

        Petter

        • Maybe this will help with the sorting

          By Alan Hurt 1 decade ago

          I may be wrong on this, but I think when using the REST services the column sorting is done on the server and then fed to the grid. If you look at the Extension Library example for Dojo Grid with REST you can see this type of call to the server when you sort a column

           

          http://localhost/Extensions/XPagesExt.nsf/REST_DojoGridJsonRest.xsp/?sortcolumn=LastName&sortorder=ascending&$$viewid=!cxvd259nd9!&$$axtarget=view:_id1:_id2:OneUIMainAreaCallback:restService1&sort(+LastName)

           

          Notice the &sort(+LastName) - that's the standard url format when sorting data from a REST store, so I would check to see if you're doing the same sort of thing.

           

           

           

          • Response: Maybe this will help with the sorting

            By Petter Kjeilen 1 decade ago

            Hi Alan,

            Thanks for your feedback. I understand that for my columns to be sortable, the underlaying view must have sortable columns.

            But, is there a way to have client side sorting only ?

            I would like to populate a store once, and then be able to sort/filter client side. A refresh button will then repopulate the store and refresh the grid.

            Is there a way to accomplish this ?

            Also, any idea on how to get a hold on the REST service javascript object ? I've tried dijit.byid, but my variable is still undeclared.

            I might need some casting ?

            Code:

                                                id="restServiceMail"
                                jsId="jsRestServiceMail"
                            >
                               
                                                                defaultColumns="true"
                                        var="entry"
                                        viewName="xpMailByContactKey"
                                    >
                                       
                                   
                               
                           


                           
                    var storeID = null; 
                    var MailStore = null;
                    var grid = null;

                            dojo.addOnLoad(function(){
                                    var storeID = "#{id:restServiceMail}";
                                   
                                    MailStore = dijit.byId(storeID);
                               
                                    alert(MailStore.id);
                                     
                                    var layout = [
                                            { field: "icon", name: "icon" , width: "25px" },
                                            { field: "Subject", name: "Subject", width: "350px", formatter: formatMailLink },
                                            { field: "DocumentCategories", name: "Category", width: "400px" },
                                            { field: "DocumentCategories", name: "Folder", width: "300px" },
                                            { field: "Sent", name: "Sent/ Recieved", width: "150px" },                                                                
                                            { field: "Sent", name: "Sent by", width: "250px" }
                                    ];
                                    
                                    function formatHTML(docUnid, rowIndex){
                                            var linkVal = "link";
                                            return linkVal;
                                    }
                                    
                                    
                                    grid = new dojox.grid.DataGrid({
                                            query: { Subject: '*' },
                                            store: MailStore,
                                            clientSort: true,                                  
                                            autoHeight: 10,
                                            autoWidth:true,
                                            columnReordering: true,
                                            noDataMessage: "No data matched the query",     
                                            onRowDblClick: function(evt) {    
                                                var index = grid.selection.selectedIndex;
                                                var item = grid.getItem(index);
                                                var store = grid.store;
                                                var tmpUrl = "PersonFormXPage.xsp?documentId=" + store.getValue(item, 'docUnid') +"&action=openDocument";
                                                                                                                     
                                                   if (this.getItem(evt.rowIndex).locked != "true") {
                                                     //alert(tmpUrl);
                                                      window.document.location = tmpUrl;
                                                   }
                                            },                          
                                            structure: layout
                                    }, '#{id:gridNode}');
                                                            
                                    grid.startup();
                                    
                            });

                  function Hello(){
                  alert("Hello");
                  }
                  
            ]]>
                                    
                             id="gridNode"
                        styleClass="DemoLeft"
                    >
                   

             

             

            Tips would be greatly appreciated :-) Thanks !

            regards,

            Petter

            • Maybe try a different store?

              By Alan Hurt 1 decade ago

              Again, I'm not really sure about REST services yet, but I'm not sure you can do client side sorting when getting data via REST. Anyone else out there know the answer to this?

              However, from the scenario you described, it sounds like you could simply use the basic dojo grid which uses the ItemFileReadStore instead of the RestStore. Then by default, you would download all of the data your grid needs at once and be able to do client side sorting. Also would be able to load new stores and refresh grid as needed.

              Sorry I can't be of more help at the moment. I'm just now getting ramped up on Xpages. I just know that what I described above is easily doable using dojo in traditional Domino dev using the dojo grid api. Maybe try a look at the Extension library example using the basic grid and see if that helps?

               

              -Alan

              • Thanks

                By Petter Kjeilen 1 decade ago

                Hi Alan,

                Thanks for your feedback on this. I'll look into it :-)

                regards,

                Petter