nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Using two Datagrids

NumaGremling

Hi everyone,

I am using two dgrids in my application and either grid should show the result of a different query. I get both queries to work, and I get both to show up in the respective grid, but I do not get them to work at the same time. I am most likely missing a little detail and I would appreciate any advice on how to fix it.

I have attached two scripts. QuerySchedule shows the query I want to incorporate into the other script (FinalApp). How to test this? The bottom grid will populate when clicking on one of the buttons in the Query Database tab and the second one, in the North Parcel Schedule tab, should automatically populate after the map loads. I realize that when I remove lines 548-561 and 628-681 then the query in the North tab will show up. Therefore I think that both grids or queries are interfering with each other, and that I am not implementing them correctly.

Thank you very much.

dGrid.zip

Vind meer berichten getagd met

Accepted answers

TracySchloss

I rearranged your function and added some styles, just to make sure you had something defined on your grid. I've had problems with grids if I don't have some of these defined:

    .resultsGrid { } .resultsGrid .dgrid-cell {     width: 100px; } .resultsGrid .dgrid-scroller {     max-height: 200px;     overflow: auto;     position: relative; }

Here's the rearranged function. It is populating now for me. I moved the definition of the grid into the function as well. Don't forget you need startup after you declare your grid.

 function populateNorthGrid() {             // create query task             var queryTaskNorth = new QueryTask(window.northParcelSched);             // create query             var queryNorthTable = new Query();             queryNorthTable.where = "1=1"; //SQL Query: use the field name like in the attribute table, and then the attibute you want to pull out             //queryNorthTable.outFields = ["*"];             queryNorthTable.outFields =  ["Date", "Event", 'OBJECTID'];              queryNorthTable.spatialReference = new SpatialReference({wkid: 102100 });                     // execute the query task             // create an object that holds the data from table             queryTaskNorth.execute(queryNorthTable, function(results) {               var northTableData = array.map(results.features, function(feature) {                  return {                   // the fields in order as they are shown on the attribute table                   "dateField": feature.attributes.Date,                   "eventField": feature.attributes.Event,                   "id":feature.attributes.OBJECTID                 };                //  return feature.attributes;               });               // create new memory store to hold data               // use tableData object to populate it            //   console.log(northTableData);               var northMemoryStore = new Memory({ data: northTableData, idProperty:'OBJECTID' });                               var northSchedGrid = new (declare([Grid, Selection]))({                     bufferRows: Infinity,  // make sure all rows from table show up                         columns: {                           //"id": "OBJECTID",                           "dateField": "Date",  // specify the display names                           "eventField": "Event"                         },                         store: northMemoryStore,                         class: 'resultsGrid'                       }, "northSchedGridDIV");               //  northSchedGrid.set("store", northMemoryStore);             northSchedGrid.startup();             });           }

All comments

TracySchloss

I rely on the user forums so much when I'm trying to learn a new API, so I've been working to give back a little. Glad it helped. Grids are hard in particular, I think, because the 3 I see regularly, dojox/grid/datagrid, dojox/grid/EnhancedGrid and dGrid look so much the same at a glance, but they are not!

NumaGremling

Thank you, Tracy, I used your suggestions and I got it to work. As a JavaScript beginner I appreciate such help, and I thank you for pointing out unnecessary parts such as using Memory as an argument. As a beginner I depend on samples and sometimes I am not entirely sure what I can or cannot take out. Thank you so much and have a great weekend. Now adding a third grid... let's see if I can do it.

TracySchloss

I rearranged your function and added some styles, just to make sure you had something defined on your grid. I've had problems with grids if I don't have some of these defined:

    .resultsGrid { } .resultsGrid .dgrid-cell {     width: 100px; } .resultsGrid .dgrid-scroller {     max-height: 200px;     overflow: auto;     position: relative; }

Here's the rearranged function. It is populating now for me. I moved the definition of the grid into the function as well. Don't forget you need startup after you declare your grid.

 function populateNorthGrid() {             // create query task             var queryTaskNorth = new QueryTask(window.northParcelSched);             // create query             var queryNorthTable = new Query();             queryNorthTable.where = "1=1"; //SQL Query: use the field name like in the attribute table, and then the attibute you want to pull out             //queryNorthTable.outFields = ["*"];             queryNorthTable.outFields =  ["Date", "Event", 'OBJECTID'];              queryNorthTable.spatialReference = new SpatialReference({wkid: 102100 });                     // execute the query task             // create an object that holds the data from table             queryTaskNorth.execute(queryNorthTable, function(results) {               var northTableData = array.map(results.features, function(feature) {                  return {                   // the fields in order as they are shown on the attribute table                   "dateField": feature.attributes.Date,                   "eventField": feature.attributes.Event,                   "id":feature.attributes.OBJECTID                 };                //  return feature.attributes;               });               // create new memory store to hold data               // use tableData object to populate it            //   console.log(northTableData);               var northMemoryStore = new Memory({ data: northTableData, idProperty:'OBJECTID' });                               var northSchedGrid = new (declare([Grid, Selection]))({                     bufferRows: Infinity,  // make sure all rows from table show up                         columns: {                           //"id": "OBJECTID",                           "dateField": "Date",  // specify the display names                           "eventField": "Event"                         },                         store: northMemoryStore,                         class: 'resultsGrid'                       }, "northSchedGridDIV");               //  northSchedGrid.set("store", northMemoryStore);             northSchedGrid.startup();             });           }

TracySchloss

You're losing me here. Which one are you trying to troubleshoot? The one called finalApp.html? I can see that the query task isn't executing at all with the map.on load event. I'm not sure you have specified all the minimum parameters you need in your Query, so you have no results because the querytask isn't ever executing.

I added a "esri/SpatialReference" and added this to the definition of queryNorthTable

            queryNorthTable.spatialReference = new SpatialReference({wkid: 102100 });

At least now it executes. Why are you passing Memory as a argument to the populateNorthGrid function? I don't see that it's necessary at all. I also believe that an idProperty is required for your Memory definition. You should probably include that in your outFields definition.

              var northMemoryStore = new Memory({ data: northTableData, idProperty:'OBJECTID' });

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.