|
POST
|
I'm dynamically creating a dGrid/OnDemandGrid and I'm having a hard time getting the ColumnResizer extension to work. Maybe it doesn't do what I think it's supposed to do? I was expecting it to allow me to grab the edge of the header and drag the column to a larger size. Is that not what it does? I have the appropriate require definitions at the top for
"dgrid/OnDemandGrid", "dgrid/extensions/ColumnHider","dgrid/extensions/DijitRegistry","dgrid/extensions/ColumnResizer","dgrid/Selection",
My grids are generated based on the results of multiple queryTasks, coming out of a set of functions based on promise/all. I have a separate function, buildColumns, to generate the columns using the attributes of each layer. I assume this buildColumns function is where I should tell each column that it's resizable. The grids are populated with the correct data.
function queryGeometryResultsHandler_toGrid(results, idx) { //format the data for the data grid
//gridList.length = 0;
var featureAttributes = arrayUtil.map(results.features, function(feature){
return feature.attributes;
});
var currentMemory = new Memory ({data:featureAttributes, idProperty:'OBJECTID'});
var gridcolumns = [];
if (results.features.length > 0) {
gridcolumns = buildColumns(results.features[0]);
}
//create a titlePane in the floatingPane for each visible layer
var currentLayerId = qTaskNameList[idx];//a list of layers created in query task functions, array created previously
var currentQTask = qTaskList[idx];
var paneTitle = (currentLayerId.split('_').join(' '))+" ("+results.features.length+")";//formats string to make a nice title
tp = new TitlePane({
id: 'gridPane_'+currentLayerId,
title: paneTitle,
splitter:true});
tp.set('class', 'reportTitlePane');
registry.byId("reportContainer").addChild(tp);
tp.startup();
// Create Grid using structure and data defined above
if (results.features.length > 0) {
var grid = new (declare([Grid, ColumnHider, DijitRegistry, ColumnResizer]))({
id:currentLayerId+'_grid',
columns: gridcolumns,
store: currentMemory
});
grid.startup();
tp.set("content", grid);
grid.on('.dgrid-row:click', function(event){
highlightGridSelection(event, grid, currentQTask);
});
}else {
tp.set("content", "No features found");
}
}
function buildColumns(feature) {
var attributes = feature.attributes;
var columns = [];
for (var attribute in attributes) {
if (attributes.hasOwnProperty(attribute)) {
var objects = {};
objects.label = attribute;
objects.field = attribute;
objects.id = attribute;
objects.resizable = true;//is this in the right place??
if (attribute === "Shape.len" || attribute === 'Shape.area' || attribute === 'OBJECTID') {
objects.hidden = true;
}
columns.push(objects);
}
}
return columns;
}
... View more
12-02-2013
11:02 AM
|
0
|
2
|
2723
|
|
POST
|
I figured it out! I had been attempting to dynamically size the columns as they were created using addCssRule. IE didn't like this at all! Once I removed the related lines, it worked just fine. Of course now my column widths are all too small and I can't get the columnresizer to work properly. I guess that's another thread!
... View more
12-02-2013
10:41 AM
|
0
|
0
|
792
|
|
POST
|
I have a dGrid/OnDemandGrid that has a lot of columns. I'm having problems getting it to style correctly in IE 8, which is still our default browser. I have contents and scrollbars, but the contents extend a little over the bottom (left to right) scrollbar and cover up the side (top to bottom) scrollbar so that I can barely touch the bottom scrollbar and the side scroll is completely covered up. [ATTACH=CONFIG]29496[/ATTACH] These grids are in titlePanes, stacked inside a floatingPane. It displays just fine in Firefox and Chrome, but those are not our default. Here is how I have the styles defined. .dgrid { position: relative; overflow: auto; /* This is needed by IE to prevent crazy scrollbar flashing */ border: 1px solid #ddd; height: 30em; display: block; color:black; } .dgrid-grid { height: auto; width: auto; } .dgrid-header { font-weight: normal; font-size:11px; height: auto; } .dgrid-content { position: relative; margin-top: 18px; /* height: 80%; */ } .dgrid .dgrid-cell { width: 50px; } .dgrid .dgrid-scroller { max-height: 200px; overflow: true; position: relative; } .dgrid .field-OBJECTID, .field-Shape.len { width: 0px; }
... View more
12-02-2013
08:09 AM
|
0
|
1
|
1403
|
|
POST
|
That didn't generate an error, but it didn't save anything either. I just got multiple entries in the console.log of 'it worked' but it really didn't.
... View more
11-27-2013
09:33 AM
|
0
|
0
|
2495
|
|
POST
|
I"m not sure if it's just one submission allowed or if the first submission is just preventing the rest from completing. I'm thinking it's the behavior of the action of the form, because the script hasn't changed. I agree with the order of the processing being inconsistent across the browsers, that's why I'm seeing the first set of data in Firefox, but the last when I try it in Chrome. Incidently, I didn't write the csv.ashx script I'm using, I got it from here http://gis.stackexchange.com/questions/67862/export-dojo-datagrid-results-to-csv-in-javascript-web-application I don't know the scripting language at all and I'm not going to be learning it just to get this to work. All I know is it says c# in the header. I followed the instructions from that thread and it had been working (in a non-AMD version). Sometimes updating your code is a painful process...
... View more
11-27-2013
06:46 AM
|
0
|
0
|
2495
|
|
POST
|
Not exactly, no. You need to look at the samples for popupTemplate and maybe infoWindow, infoTemplate . There are several ways to go about displaying media like a photo.
... View more
11-26-2013
12:02 PM
|
0
|
0
|
670
|
|
POST
|
I don't find myself saying this very often, but it works fine in IE 8. In Firefox, it looks to be saving the first grid's data. In Chrome it looks to be the last grid's data. In IE, the titlePane containing the save button is not a separate pane! The button appears at the end of the previous titlePane. There must be something in the definition of the form that IE really doesn't like. BUT it works when I click it .... It just gets stranger and stranger.
... View more
11-26-2013
11:56 AM
|
0
|
0
|
2495
|
|
POST
|
qTaskNameList is created when I execute the queryTasks, which is based on the current number of visible layers in the TOC. It does seem to be looping the required number of times. I can put break points or console.log entries throughout and see that I'm generating multiple data strings, each starting with the correct column headers followed by rows of data. What I think should happen is that as soon as the string is formatted, it would be passed to the submitCSVprint function, where the data would be saved, and then loop back to process the next grid. At first I thought the function subCSVprint was only running one time, but I put some breakpoints into it as well and it is getting called multiple times. It's more like the form.submit is only executing once. That the act of the saving breaks out of the loop. It's probably a curly brace in the wrong place or something equally as hard to spot. Wouldn't that be nice?
... View more
11-26-2013
09:21 AM
|
0
|
0
|
2495
|
|
POST
|
That sounded promising, but it didn't help. I can put a console.log right before I call the function to submit the print and see that I have 4 different inputData strings corresponding with my 4 grids. Maybe my problem lies elsewhere. I have a form that I'm using to manage the call to the script that does the actual saving. I had to change it too to be in AMD format. I'm not familiar with forms, so maybe the change here is the problem. non-AMD - HTML
<div>
<form data-dojo-type="dijit.form.Form" method="post" action="" style="height: 0px; width: 0px; display:none;" class="dlform" id="downloadForm" target="_blank">
<input type="hidden" name="report" class="ri" id="reportinput" value="" />
<input type="hidden" name="filename" class="fn" id="filename" value="" />
</form>
<button id="btnExportGridCSVsubmit" dojotype="dijit.form.Button" onClick="exportGridCSV();"title="Save Search Results to CSV file">Save List</button>
</div>
function that executes on the click
function submitCSVprint(gridName, inputData) {
//opens the data in a hidden form used for printing and allows the user to either open or save the file.
var url = "webservices/csv.ashx";
var f = dojo.byId("downloadForm");
f.action = url;
dojo.byId("reportinput").value = inputData;
var distType = dijit.byId("distTypeSelect").value;
var distNum = dojo.byId("txtDistNumber").value;
dojo.byId("filename").value = distType+"Dist_"+distNum+"_"+gridName;
f.submit();
}
One of the things I had to do when I switch to AMD was put the action of the form in it's construction, it didn't like having it added as the action within a function. I was getting a 405 Server Error. AMD version - HTML
<div>
<form id="downloadForm" data-dojo-type="dijit/form/Form" method="post" action="webservices/csv.ashx" class="dlform" target="_blank">
<input type="hidden" name="report" class="ri" id="reportinput" value="" />
<input type="hidden" name="filename" class="fn" id="filename" value="" />
</form>
</div>
and the function
function submitCSVprint(gridName, inputData) {
var f = registry.byId("downloadForm");
dom.byId("reportinput").value = inputData;
var outFileName = setOutName(gridName);
dom.byId("filename").value = outFileName;
f.submit();
}
function setOutName (gridName) {
var distType = registry.byId("distTypeSelect").value;
var distNum = registry.byId("txtDistNumber").value;
var outFileName = distType+"Dist_"+distNum+"_"+gridName;
// console.log("outFileName is " + outFileName);
return outFileName;
}
Maybe the submit to a AMD dijit/form/Form behaves differently than the non-AMD version? I wish I had the hang of using gitHub, so I could post these there. I have these on our test server, which you should be able to get to. No guarantee that I haven't broken it worse before anyone gets a chance to look at it. non AMD version https://ogitest.oa.mo.gov/LEGIS/printExample/index.html AMD version https://ogitest.oa.mo.gov/LEGIS/LegislativeAnalysis/index.html You'll need to turn on some layers first and then do a search on a district number. The idea is to dynamically change what is queried and displayed. That part of working, but there's no way I'm going to get away with leaving out a print or save function.
... View more
11-26-2013
08:30 AM
|
0
|
0
|
2495
|
|
POST
|
I started this as a reply to the thread about printing/saving a grid to CSV, but I'm not sure my problem is with that portion of my code. I have several grids that I'd like to save as CSV. In my non-AMD version, I had a dojo.forEach loop. The data each grid is processed into a string, which is the input to the function that does the actual saving. in pseudoCode
function exportGridCSV() {
//where qTaskNameList is an array of the names of all the grids I created
dojo.forEach(qTaskNameList, function(gridName) {
var gridData = dijit.byId(gridName+"_grid");
...
code to that takes the data from the grid, creates output string called inputData;
...
submitCSVPrint (gridName, inputData);
});
}
In this non-AMD version, the function loop processes each of my grids and I end up a dialog for "Save As" or "Open With" for each of the grids I processed in the dojo.forEach loop. In the AMD version, I can put log entries and it seems to be looping through each grid, but I only ever get one "Save As" dialog. I think this is maybe because I'm now in asynchronous mode?
function exportGridCSV() {
arrayUtil.forEach(qTaskNameList, function(gridName) {
var gridData = registry.byId(gridName+"_grid");
...
code to that takes the data from the grid, creates an output string called inputData;
...
submitCSVPrint (gridName, inputData);
});
}
Do I need to set up some sort of deferred for this? I didn't expect this behavior, I thought dojo.forEach and arrayUtil.forEach were more the same.
... View more
11-26-2013
05:05 AM
|
0
|
9
|
6905
|
|
POST
|
I'm trying to update my code to AMD style. First I thought I could also switch from dojox/grid/dataGrid to dGrid/enhancedGrid. I'm not sure my problem is related to the type of grid I'm using. But I am having so many problems, I decided to leave it as my original grid type for now. This feels very close to the AMD version of what I posted earlier. But this version doesn't work. I can get all the way to the point where I can see my data formatted as a long string with the line returns in it. But the part where I use the form to submit the action to the csv.ashx fails. I'm getting an error 405 - HTTP verb used to access this page is not allowed. The page you are looking for cannot be displayed because an invalid method (HTTP verb) was used to attempt access. This is titlePane section
<div id="tp_print" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Print Options', closable:false, open:false">
<div>
<form data-dojo-type="dijit/form/Form" method="post" action="" style="height: 0px; width: 0px; display:none;" class="dlform" id="downloadForm" target="_blank">
<input type="hidden" name="report" class="ri" id="reportinput" value="" />
<input type="hidden" name="filename" class="fn" id="filename" value="" />
<input type="hidden" name="s" class="s" id="s" value="" />
<input type="hidden" name="numberofcolumns" class="rit" id="numberofcolumns" value="pdf" />
</form>
<button id="btnExportGridCSV" data-dojo-type="dijit/form/Button" data-dojo-props="title:'Save Search Results to CSV file', label:'Save List'"></button>
</div>
</div>
I have a click event added to the button btnExportGridCSV, which executes this function
//functions for printing
function exportGridCSV() {//creates a CSV file that can be saved by the user
var fieldValue = "";
dataArray.length = 0;
arrayUtil.forEach(qTaskNameList, function(gridName) {
dataArray.length = 0;
var gridData = registry.byId(gridName+"_grid");
var gridLength = gridData.rowCount;
var fields = gridData.layout.cells;
fieldNames.length = 0;
//populates an array with the field names used to find the values in the data store
if (fields.length > 0){
arrayUtil.forEach(fields, function (field) {
if (field.name) { //this skips the internal IDs, which don't have names
var lastField = fields[fields.length -1].name;
var fName = field.name;
fieldNames.push(fName);
if (fName != lastField) {
dataArray.push(fName);
} else {
dataArray.push(fName+" \n");
}
}
});
}
if (gridLength > 0) {//don't try to export if there were not values in that grid
var gridStore = gridData.store._arrayOfAllItems;//the store of one grid
//populates the array with the values for one record
for (var i=0; i< gridStore.length; i++) {
rowData.length = 0;
var gridRec = gridStore;
arrayUtil.forEach (fieldNames, function(fieldName) {
var lastField = fieldNames[fieldNames.length -1];
fieldValue = gridRec[fieldName];
var stringValue = String(fieldValue);
if (stringValue.indexOf(",") > 0) {
console.log ("Field Value before replace " + stringValue);
stringValue = stringValue.replace(/,/g , " ");
console.log ("Field Value after replace = " + stringValue);
}
if (stringValue.indexOf('\'') != -1 || stringValue.indexOf('\"') != -1 ) {
console.log ("Data has a slash in it. Not sure of this section of the code!");
if (stringValue.indexOf('\"') != -1) {
stringValue = stringValue.replace("\"", "\"\"");
}
stringValue = "\"" + stringValue + "\"";
}
if (fieldName == lastField) {
dataArray.push(stringValue + " \n");
}else{
dataArray.push(stringValue);
}
});
}//end of one row of datarecord
}
var data = dataArray.join();
var inputData = data.replace(/\n,/g, "\n");//some clean up to get rid of the leading commas in the data
submitCSVprint(gridName, inputData);//calls the form that is mostly hidden which runs the c# script
});
}
This is the function where it fails. I can see that it is populating the values so I have a string to act as a file name, I think it must be failing at f.submit. Is that not a valid way to use a form anymore? I don't typically execute C# scripts, nor do I use forms. Is there something new or different in the AMD style of form that doesn't work like this anymore? Maybe additional require statements that aren't obvious? I do have dijit/form/Form.
function submitCSVprint(gridName, inputData) {
//opens the data in a hidden form used for printing and allows the user to either open or save the file.
var url = "webservices/csv.ashx";
var f = registry.byId("downloadForm");
f.action = url;
dom.byId("reportinput").value = inputData;
var distType = registry.byId("distTypeSelect").value;
var distNum = registry.byId("txtDistNumber").value;
dom.byId("filename").value = distType+"Dist_"+distNum+"_"+gridName;
f.submit();
}
I am still using the same script as before, csv.ashx. Here that is again:
<%@ WebHandler Language="C#" Class="csv" %>
using System;
using System.Web;
public class csv : IHttpHandler {
public void ProcessRequest (HttpContext context) {
String content = "no data";
String filename = "MyFile";
if (context.Request["report"] != null)
{
try
{
content = context.Request["report"].ToString();
}
catch
{
}
}
if (context.Request["filename"] != null)
{
try
{
filename = context.Request["filename"].ToString() + "_" + DateTime.Now.ToString("MMdyyyy");
}
catch
{
}
}
context.Response.ContentType = "text/csv";
context.Response.AddHeader("Content-disposition","attachment;filename="+filename+".csv");
context.Response.Write(content);
}
public bool IsReusable {
get {
return false;
}
}
}
... View more
11-25-2013
10:22 AM
|
0
|
0
|
1246
|
|
POST
|
What parameters are in query you are using for selectFeatures? If your featureLayer isn't the same spatialReference as the map, you need to specify a query parameter for outSpatialReference to whatever the map is.
... View more
11-21-2013
05:47 AM
|
0
|
0
|
974
|
|
POST
|
I moved from FLEX to JavaScript a couple years ago and I've not seen anything. If you come up with a substitute, I'd like to know about it. In FLEX, I used a composite symbol pretty regularly, mostly as a way to highlight a feature when I did a mouse over on a grid row. I found a workaround for that, but that's not the same as what you're describing.
... View more
11-21-2013
05:09 AM
|
0
|
0
|
1223
|
|
POST
|
I haven't quite wrapped my brain around the difference, but it doesn't look like the exact same object type is getting returned from
queryTask.on("complete", function(results)
as opposed to the dojo non-AMD
dojo.connect(queryTask, "onComplete", function(featureSet)
What I noticed was in this section
queryTask.on("complete", function(featureSet) {
var inputInfo = {};
inputInfo.data = arrayUtils.map(featureSet.features, function(feature) {
var pointX = feature.geometry.x;
var pointY = feature.geometry.y;
var att = feature.attributes;
return {
"x": pointX,
"y": pointY,
"attributes": att
};
});
was the object 'featureSet' was not declared as a the class featureSet. Instead it was an object that contained the featureSet. I edited your code to this, and it works for me:
queryTask.on("complete", function(results) {
var inputInfo = {};
inputInfo.data = arrayUtils.map(results.featureSet.features, function(feature) {
var pointX = feature.geometry.x;
var pointY = feature.geometry.y;
var att = feature.attributes;
return {
"x": pointX,
"y": pointY,
"attributes": att
};
});
... View more
11-20-2013
05:21 AM
|
0
|
0
|
2815
|
|
POST
|
When I posted that example, 1001 was more than enough for what I had in my data. I'm not sure of the code off the top of my head, but maybe there would be a way to first determine the maximum and use that as a variable instead of hard coding it?
... View more
11-19-2013
11:35 AM
|
0
|
0
|
2815
|
| Title | Kudos | Posted |
|---|---|---|
| 1 | 06-02-2017 02:38 PM | |
| 2 | 03-18-2022 10:14 AM | |
| 2 | 02-18-2016 06:28 AM | |
| 1 | 03-18-2024 07:29 AM | |
| 4 | 08-02-2023 06:08 AM |
| Online Status |
Offline
|
| Date Last Visited |
02-25-2025
01:56 PM
|