[SJParticipant]

Hi dimitar,

I am able to figured it out. It was problem in my code caused by jQuery bubble events. I have resolved it.

Thank you for your time and patience.

Shweta

[SJParticipant]

Hi Dimitar,

in jsp page, i have below:
<div id=”jqxFileUpload” class=”windowDiv”></div>

<div style=”float: left; margin-left: 50px;”>
<div>Events log:</div>
<div id=”eventsPanel”></div>
</div>

Thanks,
Shweta

[SJParticipant]

Hi Dimitar,

Sorry for the late response. I have upgraded with the latest version 6.0.5 and used the jqxfileupload feature outside the jqxwindow, the problem is still coming ie. all the upload events call twice. :-(.

Please HELP!

var token = $("input[name='_csrf']").val();
			var header = "_csrf";
			var uu = 'uploadFile?' + header + "=" + token + "&selectedProjectId=" + document.getElementById("selectedProjectId").value + "&libName=" + selectedLibrary;

			$('#jqxFileUpload').jqxFileUpload({
				width : 300,
				theme : 'bootstrap',
				browseTemplate : 'default',
				uploadTemplate : 'default',
				cancelTemplate : 'default',
				accept : '.txt,.xlsx,.xls,.xpt,.sas7bdat,.sas7bcat,.csv,.zip',
				fileInputName : 'fileInput',
				uploadUrl : uu

			});

			$('#eventsPanel').jqxPanel({
				width : 300,
				height : 150,
				theme : 'bootstrap',
			});
		}

	});

----
Click a button to open window:
if (!uploadViewDatButton.jqxButton('disabled')) 
{
  $("#uploadDatViewWindow").jqxWindow('open');
  $('#eventsPanel').jqxPanel('clearcontent');
}
-------
Server side code:

	@RequestMapping(value = "uploadFile", method = RequestMethod.POST)
	public @ResponseBody String uploadFile(HttpServletRequest request, @RequestParam("fileInput") MultipartFile fileInput, @RequestParam String selectedProjectId, @RequestParam String libName) {

		if (!fileInput.isEmpty()) {
			try {
				byte[] bytes = fileInput.getBytes();

				// Creating the directory to store file

				File dir = new File("\\\\sas-vm\\" + selectedProjectId + "\\Data\\" + libName + File.separator + "other");
				if (!dir.exists())
					dir.mkdirs();

				// Create the file on server
				File serverFile = new File(dir.getAbsolutePath() + File.separator + fileInput.getOriginalFilename());
				BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(serverFile));
				stream.write(bytes);
				stream.close();

				logger.info("Server File Location=" + serverFile.getAbsolutePath());

				return fileInput.getOriginalFilename() + " :Successfully uploaded ";
			} catch (Exception e) {
				return fileInput.getOriginalFilename() + ": Failed to upload! " + e.getMessage();
			}
		} else {
			return fileInput.getName() + ": Empty file, Failed to upload! ";
		}
	}

[SJParticipant]

Hi Dimitar,

Please see my comments:

Thanks,

[SJParticipant]

Hi Dimitar,

I have handled the csrf issue but i am getting this exception and because of this issue all the upload events call twice.
Please let me know where i need to set the fileName value.

Uncaught TypeError: Cannot read property 'fileName' of undefined
    at HTMLIFrameElement.<anonymous> (jqxfileupload.js:formatted:703)
    at HTMLIFrameElement.dispatch (jquery-1.11.1.js:4641)
    at HTMLIFrameElement.elemData.handle (jquery-1.11.1.js:4309)

var token = $("input[name='_csrf']").val();
var header = "_csrf";
var uu = 'uploadFile?' + header + "=" + token + "&selectedProjectId=" + document.getElementById("selectedProjectId").value + "&libName=" + selectedLibrary;

$(‘#jqxFileUpload’).jqxFileUpload({
width : 300,
theme : ‘bootstrap’,
browseTemplate : ‘default’,
uploadTemplate : ‘default’,
cancelTemplate : ‘default’,
accept : ‘.txt,.xlsx,.xls,.xpt,.sas7bdat,.sas7bcat,.csv,.zip’,
fileInputName : ‘fileInput’,
uploadUrl : uu
});

Thanks,
Shweta

[SJParticipant]

Well the example doesn’t solve the problem. But allowDrop:false solved the problem.

[SJParticipant]

Thank you Hristro! it works!

[SJParticipant]

Hi Hristo,

Finally i am able to populate the table but still unable to load dynamic columns. when i hard code the columns, it works but not the dynamic way.
Please suggest!
Thanks,
SJ
json:
readDatViewFilejsonArray{
“columns”: [{
“datafield”: “PATCD”,
“text”: “PATCD”,
“width”: 100
},
{
“datafield”: “AETERM”,
“text”: “AETERM”,
“width”: 100
},
{
“datafield”: “AEBODSYS”,
“text”: “AEBODSYS”,
“width”: 220
}],
“rows”: [{
“PATCD”: “0”,
“AETERM”: “0001”,
“AEBODSYS”: “1”
},
{
“PATCD”: “1”,
“AETERM”: “0002”,
“AEBODSYS”: “2”
},
{
“PATCD”: “0”,
“AETERM”: “0004”,
“AEBODSYS”: “1”
}]
}

Code:
var source = {
dataType : “json”,
url : “readDatViewFile.do”
};
var columns;

var dataAdapter = new $.jqx.dataAdapter(source, {
formatData : function(data) {
data.$skip = data.pagenum * data.pagesize;
data.$top = data.pagesize;
data.$inlinecount = “allpages”;
return data.rows;
},
downloadComplete : function(data, status, xhr) {
if (!source.totalRecords) {
source.totalRecords = data.rows.length;
}
},
loadError : function(xhr, status, error) {
throw new Error(“http://services.odata.org: ” + error.toString());
},
beforeLoadComplete : function(records, original) {
columns = original.columns;
return original.rows;
}
});

$(“#viewDataTable”).jqxDataTable({
width : ‘99%’,
theme : ‘bootstrap’,
autoRowHeight : true,
altRows : true,
height : “98%”,
columnsHeight : 50,
source : dataAdapter,
sortable : true,
editable : false,
columnsResize : true,
columns : columns,//not work:dynamic
columns : [ {//worked
text : ‘PATCD’,
dataField : ‘PATCD’,
width : 100,
filterable : false,
editable : false
}, {
text : ‘AETERM’,
dataField : ‘AETERM’,
width : 100,
editable : false
} ],
pageable : true,
pageSize : 100,
pagerButtonsCount : 5,
serverProcessing : true,
filterable : true,
filterMode : ‘simple’

});

[SJParticipant]

Thank you Hristo for quick reply.

I followed as you suggested but in dataAdapter , datafield is empty (i saw in debug mode) thats the reason my table is empty. Please correct me where I am wrong.

Note:- Columns and datafield are generated dynamically. I dont know how many columns, rows and dataField will be there in my dynamic datatable. In other words, datatable is generated on fly with serverPRocessing so when user will do sorting, filtering it will hit the server to get more data.

Please help!
Thanks,

var datafields = new Array();
source = {
dataType : “json”,
datafields : datafields,
url : “readDatViewFile.do”,
beforeprocessing : function(data) {
columns = obj.columns;
rows = obj.rows;
for (var i = 0; i < columns.length; i++) {
datafields.push({
name : columns[i].datafield
});
}
}

};

var dataAdapter = new $.jqx.dataAdapter(source, {
formatData : function(data) {
data.$skip = data.pagenum * data.pagesize;
data.$top = data.pagesize;
data.$inlinecount = “allpages”;

return data;
},
downloadComplete : function(data, status, xhr) {
if (!source.totalRecords) {
source.totalRecords = data.rows.length;
}
},
loadError : function(xhr, status, error) {
throw new Error(“http://services.odata.org: ” + error.toString());
}
});

$(“#viewDataTable”).jqxDataTable({
width : ‘99%’,
theme : ‘bootstrap’,
autoRowHeight : true,
altRows : true,
height : “98%”,
columnsHeight : 50,
source : dataAdapter,
sortable : true,
editable : false,
columnsResize : true,
columns : columns,
pageable : true,
pageSize : 100,
pagerButtonsCount : 5,
serverProcessing : true,
filterable : true,
filterMode : ‘simple’

});

[SJParticipant]

Thank you

[SJParticipant]

Thank you Hristo!

I need to make the button enable/disable based on the row level permission and my permission code is outside the renderToolbar function.
when the user change the row, i refreshed the grid with the new data rather than create the grid again. so i need to make the toolbar buttonss enable/disable.

Are you suggesting me to add the id like below:

var editButton = $(<div id=”editButton” style=’float: left; padding-bottom: 4px; ‘><div style=’margin-bottom: 8px; width: 100%; height: 80%; ‘></div></div>);
var hideButton = $(<div id=”hideButton” style=’float: left; padding-bottom: 4px; ‘><div style=’margin-bottom: 8px; width: 100%; height: 80%; ‘></div></div>);
var deleteButton = $(<div id=”deleteButton” style=’float: left; padding-bottom: 4px; ‘><div style=’margin-bottom: 8px; width: 100%; height: 80%; ‘></div></div>);
var historyButton = $(<div id=”historyButton” style=’float: left; padding-bottom: 4px; ‘><div style=’margin-bottom: 8px; width: 100%; height: 80%; ‘></div></div>);

Please let me know , if you have any other suggestion.

Thank you very much!

[SJParticipant]

Hi
I have added a boolean variable to check if the dropdownlisted is loaded or not. So this way I have achieved the thing I want, but not sure is that a correct way. Please let me know, if there is any other way. Thank you for your help.
Thanks

addButton.click(function (event) {
if (!addButton.jqxButton(‘disabled’)) {
$(“#userIDText”).val(selectedUserID);
var isDropdownLoaded=false;
$(‘#sectionDropDown’).on(‘open’, function (event) {
if(!isDropdownLoaded){
var sectionDropdownUrl=”getSectionName?userId=”+selectedUserID;
var source =
{
datatype: “json”,
cache:false,
datafields: [
{ name: ‘reportNumber’, map : ‘reportPK>reportNumber’,type: ‘string’ }
],
url: sectionDropdownUrl//,
//async: false
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#sectionDropDown”).jqxDropDownList({ source: dataAdapter, selectedIndex: 0, autoDropDownHeight: true, displayMember: “reportNumber”, valueMember: “reportNumber”});
isDropdownLoaded=true;
}
});

$(“#teamPermwindow”).jqxWindow(‘open’);
}
});

[SJParticipant]

Hi Nadezhda,

Thanks for replying. I added the coded in “open” event as you suggested, its calling the database everytime when the dropdown expanded or open (as event suggested).I don’t want to call the database every time , it makes the event slow and not able to select the value from the dropdown or may be I am doing something wrong in the below code. Could you please have a look and help me to get the correct value in dropdown list from the database, not to call everytime the database.

addButton.click(function (event) {
if (!addButton.jqxButton(‘disabled’)) {
$(“#userIDText”).val(selectedUserID);
$(‘#sectionDropDown’).on(‘open’, function (event) {

var sectionDropdownUrl=”getSectionName?userId=”+selectedUserID;
var source =
{
datatype: “json”,
cache:false,
datafields: [
{ name: ‘reportNumber’, map : ‘reportPK>reportNumber’,type: ‘string’ }
],
url: sectionDropdownUrl//,
//async: false
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#sectionDropDown”).jqxDropDownList({ source: dataAdapter, selectedIndex: 0, autoDropDownHeight: true, displayMember: “reportNumber”, valueMember: “reportNumber”});
});

$(“#teamPermwindow”).jqxWindow(‘open’);
}
});

Thanks,
SJ

[SJParticipant]

Hi,

Looks like it solved my modal problem but generate another issue. Now my dynamic dropDown content is not executing. First time the sectionDropDown is getting the data from the backend or populating correctly but next time is not calling to the server. ie. getSectionName() is not executing or not getting the data it shows the old information.
I can see initContent() initialize first time, is there any way to refresh the dropdown list or call again and get the fresh records from the backend.

Thank you in advance.

$(“#teamPermwindow”).jqxWindow({ maxHeight: 350, maxWidth: 600, minHeight: 30, minWidth: 250,height: 250, width: 500, theme: ‘summer’, resizable:false, isModal: true, autoOpen: false,
initContent: function () {
var permissionlist = [“Read”, “Write”, “No Access”];
$(“#permissionDropDown”).jqxDropDownList({ source: permissionlist, selectedIndex: 0, autoDropDownHeight: true});

var sectionDropdownUrl=”getSectionName?userId=”+selectedUserID;
var source =
{
datatype: “json”,
cache:false,
datafields: [
{ name: ‘reportNumber’, map : ‘reportPK>reportNumber’,type: ‘string’ }
],
url: sectionDropdownUrl//,
//async: false
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#sectionDropDown”).jqxDropDownList({ source: dataAdapter, selectedIndex: 0, autoDropDownHeight: true, displayMember: “reportNumber”, valueMember: “reportNumber”});

}
});

Thanks,
SJ

[SJParticipant]

Thank you. its working now.

[Author]

Posts