Show Posts

This section allows you to view all posts made by this member. Note that you can only see posts made in areas you currently have access to.

Messages - jpantona

Pages: [1]

Help for ParamQuery Select / Re: Initialize pqselect with default values selected

« on: August 22, 2015, 12:53:06 am »

But what about when the pqgrid editor options are coming from a JSON array? The following does NOT work: { "value" : theValue, "text" : theText, "selected" : "selected" } or this { "value" : theValue, "text" : theText, "selected" : "true" }.

Or is the only way to handle this to override the column editor Type callback function? e.g. $( ".selector" ).pqGrid( "option", "colModel" )[6].editor.type

To answer my own question, I was able to solve it with the following, but it would be a plus to have it accept a JSON marker:

type: function (ui) {
var str = "<select multiple>",
options = ui.column.editor.options;
if (ui.cellData) {
$(options).each(function (i, option) {
var selected = '';
if (ui.cellData.indexOf(option.value) > -1) {
selected = 'selected';
}
str += "<option value='" + option.value + "' " + selected + " >" + option.text + "</option>";
});
str += "</select>"
ui.$cell.append(str);
} else {
return 'select';
}

},

Help for ParamQuery Pro / Re: editor not displaying list after ajax call

« on: December 12, 2013, 10:20:47 pm »

The key to resolving this was understanding that the autocomplete source property is a function that has two params, request and a callback, once the response comes back you need to call the callback.

Code: [Select]

$inp.autocomplete({
            source: function (request, callback) {
                  ... code here, including jquery ajax call....
             
                  callback(xjdata);
             }

Help for ParamQuery Pro / editor not displaying list after ajax call

« on: December 06, 2013, 02:54:53 am »

I've defined an editor for my column but the list of selection values is not displaying. I've confirmed that, after the ajax call, the JSON data is valid and the array is constructed correctly. In the focus() method for the autocomplete, I've confirmed that at the time focus happens, the data from the ajax call is correct and syntax is good. It seems like this is a problem where the async ajax call does not complete in time before the array is assigned to the source parameter of the autocomplete object. I've tried setting async : false on the ajax call to make sure it finished, but that did not have the desired affect.

Here is the column model definition for the particular column:

Code: [Select]

{title:"Apply Against (recoup)", width:150, dataType:"string", dataIndx: "apply_against", editor: { type: function (ui) { applyAgainstDropDownEditor(ui);}}},

Here is the function definition referenced in the above editor (note, the source value is jdata):

Code: [Select]

var applyAgainstDropDownEditor = function (ui) {
        //debugger;
        var $cell = ui.$cell,
            rowData = ui.rowData,
            dataIndx = ui.dataIndx,
            width = ui.column.width,
            cls = ui.cls;
        var dc = $.trim(rowData[dataIndx]);
		
        var $inp = $("<input type='text' name='" + dataIndx + "' class='" + cls + " pq-ac-editor' />")
            .width(width - 6)
            .appendTo($cell)
            .val(dc);
		
        $inp.autocomplete({
            source: jdata,
            minLength: 0
        }).focus(function () {
            //open the autocomplete upon focus
            $(this).data("uiAutocomplete").search($(this).val());
        });
    }

And this is how, earlier in the code, the jdata array gets defined and populated (in the onload event for the page):

Code: [Select]

var xrObjectId = jQuery('#contractObjId').val();
	var xsnjson = "{ r_object_id : '" + xrObjectId + "',  encryptedUsername : 'IL9ll', encryptedPassword : 'apx6TrB+Gc', encryptedRepository : 'QlRDcYjMxV' }";
	var xwebServiceURL = 'http://x.com/services/xDFS/AboveTheLineContractService';
	var xsoapMessage = '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:ser="http://service.prodagio.com"><soapenv:Header/><soapenv:Body><ser:getContractServiceNames><json>' + xsnjson + '</json></ser:getContractServiceNames></soapenv:Body></soapenv:Envelope>';
	
	var jdata = [];
	$.ajax({
	 url: xwebServiceURL, 
	 type: "POST",
	 dataType: "xml", 
	 data: xsoapMessage, 
	 processData: false,
	 contentType: "text/xml; charset=\"utf-8\"",
	 success : function(data, textStatus, jqXHR ) {
		//alert(jqXHR.responseText);
		xmlDoc = $.parseXML( jqXHR.responseText );
		$xml = $( xmlDoc );
		$rr = $xml.find( "return" );
		if ($rr.text().toLowerCase().indexOf("error") > -1 ) {
		  alert("Lookup unsuccuessful. An error occured: " + $rr.text());
		} else {
			//alert($rr.text());
			try {
				var rdata = $.parseJSON($rr.text());
			} catch ( eeee ) {
				alert("Lookup unsuccuessful. An error occured: " + eeee);
			}
			jdata = ' [ ';
			var i = 0;
			$.each(rdata,function(){
				if ( i == 0 ) {
					jdata = jdata + ' "' + this.objectName + '"';
				} else {
					jdata = jdata + ', "' + this.objectName + '"';
				}
				//alert(jdata);
				i++;
			});
			jdata = jdata + ' ] ';
			//alert(jdata);
		}
	 },
	 error : function(jqXHR, textStatus, errorThrown) {
		xmlDoc = $.parseXML( jqXHR.responseText );
		$xml = $( xmlDoc );
		$rr = $xml.find( "return" );
		if ($rr.text().toLowerCase().indexOf("error") > -1 ) {
		  alert("Report unsuccuessful. An error occured: " + textStatus + " " + $rr.text());
		} 			
	 }
	});

Help for ParamQuery Pro / Re: remote dataModel with Soap URL?

« on: December 05, 2013, 07:04:49 am »

The final code, working successfully:

Code: [Select]


var reportObj = {};
    reportObj.width = 1200;
    reportObj.height = 1000;
	reportObj.title = "Report";
    reportObj.colModel = <%= attributeComp.getReportColumnModel() %>;
    reportObj.dataModel = {
		location: "remote",
        sorting: "local",
        dataType: "XML",
        method: "POST",
		error: function(jqXHR, textStatus, errorThrown) {
			xmlDoc = $.parseXML( jqXHR.responseText ),
			$xml = $( xmlDoc ),
			$rr = $xml.find( "return" );
			if ($rr.text().toLowerCase().indexOf("error") > -1 ) {
			  alert("Report unsuccuessful. An error occured: " + textStatus + " " + $rr.text());
		    } 			
		},
		getData: function(response, textStatus, jqXHR) {
			//alert(jqXHR.responseText);
			xmlDoc = $.parseXML( jqXHR.responseText );
			$xml = $( xmlDoc );
			$rr = $xml.find( "return" );
			if ($rr.text().toLowerCase().indexOf("error") > -1 ) {
			  alert("Report unsuccuessful. An error occured: " + $rr.text());
		    } else {
				alert($rr.text());
				try {
					var rdata = $.parseJSON($rr.text());
				} catch ( eeee ) {
					alert("Report unsuccuessful. An error occured: " + eeee);
				}
				alert('5');
			}			
            return { data: rdata.data };
        }, 
		getUrl: function() {
			$.ajaxSetup({
				contentType : "text/xml"
			});
			var rObjectId = jQuery('#contractObjId').val();
			var rjson = "{ r_object_id : '" + rObjectId + "',  encryptedUsername : 'IL9ll', encryptedPassword : 'apx6TrB+', encryptedRepository : 'QlRDcYjMxVX2k' }";
			var soapMessage = '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:ser="http://service.prodagio.com"><soapenv:Header/><soapenv:Body><ser:refreshReport><json>' + rjson + '</json></ser:refreshReport></soapenv:Body></soapenv:Envelope>';
			var webServiceURL = 'http://x.com/services/xDFS/AboveTheLineContractService?wsdl';
			//alert(soapMessage);
			return { url : webServiceURL, data: soapMessage };
		}
	};
	reportObj.hoverMode = 'cell';
	reportObj.selectionModel = { type: 'cell' };
	reportObj.editModel = {
            saveKey: $.ui.keyCode.ENTER,
            select: false,
            keyUpDown: false,
            cellBorderWidth: 0                
        };
	//reportObj.editor = { type: "textbox" };
    var reportGrid = jQuery("#grid_contractReport").pqGrid( reportObj );

Help for ParamQuery Pro / Re: remote dataModel with Soap URL?

« on: December 05, 2013, 05:39:41 am »

OK. I was able to successfully send the SOAP request and receive a response by forcing the contentType of all $.ajax() calls to 'text/xml' as shown below:

Code: [Select]

getUrl: function() {
			$.ajaxSetup({
				contentType : "text/xml"
			});
			var rObjectId = jQuery('#contractObjId').val();
			var rjson = "{ r_object_id : '" + rObjectId + "',  encryptedUsername : 'IL9llv', encryptedPassword : 'apx6TrB+G', encryptedRepository : 'QlRDcYjMxVX' }";
			var soapMessage = '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:ser="http://service.prodagio.com"><soapenv:Header/><soapenv:Body><ser:refreshReport><json>' + rjson + '</json></ser:refreshReport></soapenv:Body></soapenv:Envelope>';
			var webServiceURL = 'http://x.com/services/prodagioDFS/AboveTheLineContractService?wsdl';
			//alert(soapMessage);
			return { url : webServiceURL, data: soapMessage };
		}

In particular, this was the key to success:

Code: [Select]

$.ajaxSetup({
				contentType : "text/xml"
			});

Help for ParamQuery Pro / remote dataModel with Soap URL?

« on: December 05, 2013, 03:01:48 am »

When I review the examples of remote dataModel, the URL parameters given always seems to suggest a REST web services approach. I don't see how to have a remote dataModel connection using SOAP web services... Is this possible? In particular, I want to pass JSON data in the SOAP envelope and receive JSON data back from the web service. I understand the server side of this operation but I don't see how to configure this in the paramquery grid dataModel parameters. Am I missing something?

So I tried to implement the getURL() method on the dataModel to send a soap request. Below is the code. See below for the error I receive when I execute this code.

Code: [Select]

 var reportObj = {};
    reportObj.width = 1200;
    reportObj.height = 1000;
	reportObj.title = "Report";
    reportObj.colModel = <%= attributeComp.getReportColumnModel() %>;
    reportObj.dataModel = {
		location: "remote",
        sorting: "local",
        dataType: "JSON",
        method: "POST",
		getData: function (dataJSON) {
			alert(dataJSON);
            var data = dataJSON.data;
            //expand the first row
            //data[0]['pq_detail'] = { 'show': true };                
            return { data: data };
        }, 
		getUrl: function() {
			var rObjectId = jQuery('#contractObjId').val();
			var rjson = "{ r_object_id : '" + rObjectId + "',  encryptedUsername : 'IL9llvk', encryptedPassword : 'apx6TrB+Gc', encryptedRepository : 'QlRDcYjMxVX2k' }";
			var soapMessage = '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:ser="http://service.prodagio.com"><soapenv:Header/><soapenv:Body><ser:refreshReport><json>' + rjson + '</json></ser:refreshReport></soapenv:Body></soapenv:Envelope>';
			var webServiceURL = 'http://x.com/services/prodagioDFS/AboveTheLineContractService';
			alert(soapMessage);
			return { url : webServiceURL, data: escapeHTML(soapMessage) };
		}
	};
	reportObj.hoverMode = 'cell';
	reportObj.selectionModel = { type: 'cell' };
	reportObj.editModel = {
            saveKey: $.ui.keyCode.ENTER,
            select: false,
            keyUpDown: false,
            cellBorderWidth: 0                
        };
	//reportObj.editor = { type: "textbox" };
    var reportGrid = jQuery("#grid_contractReport").pqGrid( reportObj );

Quote

SEVERE: Unsupported Content-Type: application/x-www-form-urlencoded; charset=UTF-8 Supported ones are: [text/xml]
com.sun.xml.ws.server.UnsupportedMediaException: Unsupported Content-Type: application/x-www-form-urlencoded; charset=UTF-8 Supported ones are: [text/xml]
at com.sun.xml.ws.encoding.StreamSOAPCodec.decode(StreamSOAPCodec.java:295)

Help for ParamQuery Pro / Re: Unable to edit cells

« on: November 07, 2013, 04:40:07 am »

The other key to success was adding clicksToEdit: 1, to the editModel for the table e.g.

Code: [Select]

eventObj.editModel = {
			clicksToEdit: 1,
            saveKey: $.ui.keyCode.ENTER,
            select: false,
            keyUpDown: false,
            cellBorderWidth: 0                
        };

Help for ParamQuery Pro / Re: Unable to edit cells

« on: November 07, 2013, 04:36:31 am »

Never mind. I figured this out. Below are the changes to the table config that made it work. IN summary, it appears the editor needs to be explicitely defined for each column model in the PRO version (but not in the standard version).

Code: [Select]

serviceObj.colModel = [{title:"Service Type", width:100, dataType:"string", dataIndx: "document_category", editor: { type: function (ui) { dropDownEditor(ui, arrServices);}} },
        {title:"Status", width:50, dataType:"string", align:"center", dataIndx: "document_status", editor: { type: function (ui) { dropDownEditor(ui, arrStatus);}} },
        {title:"Service Name", width:150, dataType:"string", align:"left", dataIndx: "object_name", editor: { type: "contenteditable" }},
		{title:"Opt", width:25, dataType:"string", align:"center", dataIndx: "optional", editor: {
                type: 'select',
                options: ['', 'X'] }},
		{title:"Ex'd", width:25, dataType:"string", align:"center", dataIndx: "exercised", editor: {
                type: 'select',
                options: ['', 'X'] }},
		{title:"objectId", width:16, dataType:"string", hidden:true, dataIndx: "r_object_id"},
		{title:"Sub Type", width:16, dataType:"string", dataIndx: "sub_type", editor: { type: function (ui) { dropDownEditor(ui, arrSubServices);}} },
		{title:"Start Date", width:16, dataType:"string",  dataIndx: "start_date", editor: { type: dateEditor}},
		{title:"End Date", width:16, dataType:"string",  dataIndx: "end_date", editor: { type: dateEditor}},
		{title:"Exercise Date", width:16, dataType:"string",  dataIndx: "exercise_date", editor: { type: dateEditor}},
		{title:"Date Exercised", width:16, dataType:"string",  dataIndx: "date_exercised", editor: { type: dateEditor}},
		{title:"Original Committed", width:16, dataType:"float", dataIndx: "original_committed", editor: { type: "contenteditable" }},
		{title:"Current Committed", width:16, dataType:"float",  dataIndx: "current_committed", editor: { type: "contenteditable" }},
		{title:"Optional", width:16, dataType:"float",  dataIndx: "optional_amount", editor: { type: "contenteditable" }},
		{title:"Applied Against $", width:16, dataType:"float", dataIndx: "applied_against", editor: { type: "contenteditable" }},
		{title:"parentId", width:16, dataType:"string", hidden:true, dataIndx: "parentId"},
		{title:"contractChronId", width:16, dataType:"string", hidden:true, dataIndx: "contractChronId"}];

Help for ParamQuery Pro / Unable to edit cells

« on: November 07, 2013, 02:41:51 am »

I have multiple pqgrids on one page. Everything was working as expected until I upgraded pqgrid to the PRO version. First, the column editors broke. I was able to fix that (for the first table on my page). Now, all the other tables are not editable. When I click on a cell, it doesn't go into edit mode. Here is some code:

This table works:

Code: [Select]

var titleRowIndex;
	var titleData = [ <%= attributeComp.getProjectTitlesTableData() %> ];
    var titleObj = {};
    titleObj.width = 900;
    titleObj.height = 200;
	titleObj.title = "Project Titles";
    titleObj.colModel = [{title:"Picture Title", width:200, dataType:"string", dataIndx: "picture", editor: { type: function (ui) { dropDownEditor(ui, arrPictures);}} },
        {title:"Project #", width:50, dataType:"string", align:"center", dataIndx: "project"},
        {title:"Business Unit", width:150, dataType:"string", align:"left", dataIndx: "bu", editor: { type : function (ui) { dropDownEditor(ui, arrBu);} }},
		{title:"objectId", width:16, dataType:"string", hidden:true, dataIndx: "objectId"},
		{title:"AKAs", width:300, dataType:"string", dataIndx: "aka"},
		{title:"Status", width:30, dataType:"string", dataIndx: "document_status"},
		{title:"parentId", width:16, dataType:"string", hidden:true, dataIndx: "parentId"},
		{title:"contractChronId", width:16, dataType:"string", hidden:true, dataIndx: "contractChronId"}];
    titleObj.dataModel = {data:titleData};
	titleObj.hoverMode = 'cell';
	titleObj.selectionModel = { type: 'cell' };
	titleObj.editModel = {
            saveKey: $.ui.keyCode.ENTER,
            select: false,
            keyUpDown: false,
            cellBorderWidth: 0                
        };
	titleObj.editor = { type: "textbox" };
    var titleGrid = jQuery("#grid_array").pqGrid( titleObj );
	jQuery("#grid_array").pqGrid( {
		rowDblClick : function (evt, srtobj) { 
			titleRowIndex = srtobj.rowIndx;
			var objId = srtobj.dataModel.data[srtobj.rowIndx].objectId;
			var picture = srtobj.dataModel.data[srtobj.rowIndx].picture;
			_title = picture;
			<%= attributeComp.getServiceDataOptions() %>
			serviceObj.dataModel = {data:serviceData};
			jQuery("#grid_service").pqGrid( serviceObj );
			jQuery("#grid_service").pqGrid( {title: picture + " - Services" } );
			jQuery("#grid_service").pqGrid( "refreshDataAndView" );
			jQuery("#currentTitleIndex").val(titleRowIndex);
			scrollTo('side-service');
		}
	});
	jQuery("#grid_array").pqGrid( {
		quitEditMode: function (evt, tobj) {
			//alert(titleRowIndex);
			prepareTitleSavePackage(tobj,titleRowIndex);
		}
	});
	jQuery("#grid_array").pqGrid( {
		rowClick: function (evt, tobj) {
			titleRowIndex = tobj.rowIndx;
			prepareTitleSavePackage(tobj,titleRowIndex);
			//alert(eventRowIndex);
		}
	});
	titleGrid.on("pqgridquiteditmode", function (evt, ui) {
        //exclude esc and tab            
        if (evt.keyCode != $.ui.keyCode.ESCAPE && evt.keyCode != $.ui.keyCode.TAB) {
            titleGrid.pqGrid("saveEditCell");
        }
    });
  });

This table does NOT work:

Code: [Select]

var serviceRowIndex;
	var serviceObj = {};
    serviceObj.width = 900;
    serviceObj.height = 200;
	serviceObj.title = "Services";
    serviceObj.colModel = [{title:"Service Type", width:100, dataType:"string", dataIndx: "document_category"},
        {title:"Status", width:50, dataType:"string", align:"center", dataIndx: "document_status"},
        {title:"Service Name", width:150, dataType:"string", align:"left", dataIndx: "object_name"},
		{title:"Opt", width:25, dataType:"string", align:"center", dataIndx: "optional"},
		{title:"Ex'd", width:25, dataType:"string", align:"center", dataIndx: "exercised"},
		{title:"objectId", width:16, dataType:"string", hidden:true, dataIndx: "r_object_id"},
		{title:"Sub Type", width:16, dataType:"string", dataIndx: "sub_type"},
		{title:"Start Date", width:16, dataType:"string",  dataIndx: "start_date", editor: { type: dateEditor}},
		{title:"End Date", width:16, dataType:"string",  dataIndx: "end_date", editor: { type: dateEditor}},
		{title:"Exercise Date", width:16, dataType:"string",  dataIndx: "exercise_date", editor: { type: dateEditor}},
		{title:"Date Exercised", width:16, dataType:"string",  dataIndx: "date_exercised", editor: { type: dateEditor}},
		{title:"Original Committed", width:16, dataType:"float", dataIndx: "original_committed"},
		{title:"Current Committed", width:16, dataType:"float",  dataIndx: "current_committed"},
		{title:"Optional", width:16, dataType:"float",  dataIndx: "optional_amount"},
		{title:"Applied Against $", width:16, dataType:"float", dataIndx: "applied_against"},
		{title:"parentId", width:16, dataType:"string", hidden:true, dataIndx: "parentId"},
		{title:"contractChronId", width:16, dataType:"string", hidden:true, dataIndx: "contractChronId"}];
	var serviceData = [];
	serviceObj.hoverMode = 'cell';
	serviceObj.selectionModel = { type: 'cell' };
	serviceObj.editModel = {
            saveKey: $.ui.keyCode.ENTER,
            select: false,
            keyUpDown: false,
            cellBorderWidth: 0                
        };
	serviceObj.editor = { type: "textbox" };
	var serviceGrid = jQuery("#grid_service").pqGrid( serviceObj );
	jQuery("#grid_service").pqGrid( {
		rowDblClick : function (evt, stobj) {
			serviceRowIndex = stobj.rowIndx;
			var objId = stobj.dataModel.data[stobj.rowIndx].r_object_id;
			var serviceName = stobj.dataModel.data[stobj.rowIndx].object_name;
			_service = serviceName;
			<%= attributeComp.getStepDataOptions() %>
			stepObj.dataModel = {data:stepData};
			jQuery("#grid_step").pqGrid( stepObj );
			jQuery("#grid_step").pqGrid( {title: _title + " - " + serviceName + " - Steps" } );
			jQuery("#grid_step").pqGrid( "refreshDataAndView" );
			jQuery("#currentServiceIndex").val(serviceRowIndex);
			scrollTo('side-step');
		}
	});
	jQuery("#grid_service").pqGrid( {
		quitEditMode: function (evt, srobj) {
			//alert(serviceRowIndex);
			prepareServiceSavePackage(srobj,serviceRowIndex);
		}
	});
	jQuery("#grid_service").pqGrid( {
		rowClick: function (evt, srobj) {
			serviceRowIndex = srobj.rowIndx;
			prepareServiceSavePackage(srobj,serviceRowIndex);
			//alert(eventRowIndex);
		}
	});
	serviceGrid.on("pqgridquiteditmode", function (evt, ui) {
        //exclude esc and tab            
        if (evt.keyCode != $.ui.keyCode.ESCAPE && evt.keyCode != $.ui.keyCode.TAB) {
            serviceGrid.pqGrid("saveEditCell");
        }
    });

Help for ParamQuery Pro / Re: cell editor broke when upgraded to PRO version

« on: November 06, 2013, 11:48:07 pm »

Ok. That helped. Thank you. However, it took awhile to get that to work because, depending on the verion of jQuery, this portion of the sample:

Code: [Select]

 $inp.autocomplete({
            source: (dataIndx == "books" ? books : countries),
            minLength: 0
        }).focus(function () {
            //open the autocomplete upon focus
            $(this).data("autocomplete").search($(this).val());
        });

Needs to change to:

Code: [Select]

$inp.autocomplete({
            source: arr,
            minLength: 0
        }).focus(function () {
            //open the autocomplete upon focus
            $(this).data("uiAutocomplete").search($(this).val());
        });

In summary, 'autocomplete' needed to change to uiAutocomplete.

Help for ParamQuery Pro / cell editor broke when upgraded to PRO version

« on: October 18, 2013, 05:52:40 am »

I had the datePicker editor and the dropDownList editor working as shown in the above example. Then I upgraded to the pqgrid PRO and it stopped working... any ideas?

Pages: [1]