jQWidgets Forums
-
Search Results
-
<jqx-grid id=”grid” width=”100%” columns-height=”50″ rows-height=”60″ alt-rows=”true” sortable=”true” pageable=”true” auto-height=”true” row-details=”true” row-details-template=”{{currentSprint.template}}” init-row-details=”currentSprint.initRowDetails()” source-id=”TFSId” columns-resize=”true” filterable=”true” source=”Model.WorkItems”>
<jqx-grid-columns>
<jqx-grid-column datafield=”TFSId” text=”TFS ID” width=”5%”>></jqx-grid-column>
<jqx-grid-column datafield=”EVId” text=”EV ID” width=”5%”></jqx-grid-column>
<jqx-grid-column datafield=”Type” text=”Type” width=”5%”></jqx-grid-column>
<jqx-grid-column datafield=”Title” text=”Title” width=”30%”></jqx-grid-column>
<jqx-grid-column datafield=”TFSStatus” text=”TFS Status” width=”10%”></jqx-grid-column>
<jqx-grid-column datafield=”EVStatus” text=”EV Status” width=”10%”></jqx-grid-column>
<jqx-grid-column datafield=”IterationPath” text=”Iteration Path” width=”10%”></jqx-grid-column>
<jqx-grid-column datafield=”ReleaseNumber” text=”Release” width=”5%”></jqx-grid-column>
<jqx-grid-column datafield=”AssignedTo” text=”AssignedTo” width=”10%”></jqx-grid-column>
<jqx-grid-column datafield=”PullRequests” text=”PUll Requests” width=”10%”></jqx-grid-column>
</jqx-grid-columns>
</jqx-grid>
The Title text in the list has string like “ACLD – this is complete [Dev Complete, Ready for Release]”I am getting error
Uncaught SyntaxError: Unexpected identifier
when I remove [ and ] from the title it works fine.
any help would be appreciatedTopic: jqx grid sorting not working
Hi,
I have a grid who is loaded via JSON. I have implemented paging which is working fine.But when i implemented sorting, its not working locally and remote both.
I wanted to apply remote sorting to it which is not reflecting.Even when i try to sort on client side it doesnt work.I tried by applying to one column for eg-name ,its not getting sorted.And when i remove
sortcolumn: ‘name’,
sortdirection: ‘asc’,my data doesn’t appear in grid.
For backend i am using spring mvc and hibernate,mysql to integrate.
Please let me know where i am missing.
Please find my code for fileUpload.jsp-
<%@ page language=”java” contentType=”text/html; charset=ISO-8859-1″
pageEncoding=”ISO-8859-1″%>
<%@ taglib prefix = “c” uri = “http://java.sun.com/jsp/jstl/core” %>
<!DOCTYPE html>
<html>
<head>
<meta charset=”ISO-8859-1″>
<title>Titanic Passengers Detail</title>
<link rel=”stylesheet” href=”<c:url value=”/resources/css/jqx.base.css”/>”>
<script src=”<c:url value=”/resources/js/jquery-1.11.1.min.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxcore.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxdata.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxbuttons.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxscrollbar.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxmenu.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxgrid.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxgrid.selection.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxlistbox.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxdropdownlist.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxgrid.columnsresize.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxgrid.filter.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxgrid.filter.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxgrid.sort.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxgrid.pager.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxgrid.grouping.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxgrid.columnsreorder.js”/>”></script>
<script src=”<c:url value=”/resources/js/jqxgrid.edit.js”/>”></script></head>
<body>
<h1> File Upload </h1><form id=”uploadFile” method=”post” onsubmit=”return false;” enctype=”multipart/form-data” >
<input type=”file” name=”csvfile” id=”csvfile” required><br/>
<button value=”Submit” onclick=”onUploadClick()”>Upload</button>
</form>
<br/>
<br/><div class=”form-search”>
<form id=”searchForm” method=”post” onsubmit=”return false;” >
Search By Gender: <input type=”text” name=”searchField” placeholder=”Search” class=”form-control” id=”searchByGender”><br/>
<button type=”button” id=”searchButton” value=”Submit” onclick=”onSearchByGenderClick()”>Search</button>
</form>
</div><br/>
<br/><div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
<div id=”jqxgrid”></div>
</div><script type=”text/javascript”>
myList=””;
function onUploadClick() {
var data = new FormData();
data.append(“file”, csvfile.files[0]);
console.log(‘data’,data.values.length);$.ajax({
url:’uploadFile’,
data: data,
cache: false,
contentType: false,
processData: false,
type:’POST’,
success: function(response){
if(response.status == “200”){
alert(response.filename+” “+response.message);}else{
alert(‘File Not Uploaded.Please try again’);
}}
});
}function onSearchByGenderClick() {
var genderValue=$(“#searchByGender”).val();
if(genderValue.length==0)
{
alert(‘Please enter Gender value’);
}
else{
$.ajax({
url : “search”,
type : “GET”,
data : {“searchByGender” : genderValue
},
success : function(data) {
console.log(data);
var source =
{
datatype: “json”,
datafields: [
{ name: ‘passenger_id’,type: ‘int’},
{ name: ‘passenger_class’ , type: ‘string’},
{ name: ‘name’, type: ‘string’ },
{ name: ‘sex’ , type: ‘string’},
{ name: ‘age’, type: ‘string’ },
{ name: ‘sib_sp’ , type: ‘string’},
{ name: ‘parch’, type: ‘string’ },
{ name: ‘ticket’ , type: ‘string’},
{ name: ‘fare’ , type: ‘string’},
{ name: ‘cabin’ , type: ‘string’},
{ name: ’embarked’, type: ‘string’ }],
cache: false,
url: ‘getPassengers?searchByGender=’+genderValue,
sort: function () {
// update the grid and send a request to the server.
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
},
root: ‘Rows’,
sortcolumn: ‘name’,
sortdirection: ‘asc’,beforeprocessing: function (data) {
if (data != null)
{
source.totalrecords = data.TotalRows;
}
}};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadError: function(xhr, status, error)
{
alert(error);
}
}
);
$(“#jqxgrid”).jqxGrid(
{
width: 900,
source: dataAdapter,
sortable: true,
autoheight: true,
pageable: true,
columnsresize: true,
virtualmode: true,
rendergridrows: function (params) {
return params.data;
},
columns: [
{ text: ‘Passenger ID’, datafield: ‘passenger_id’, width: 120 },
{ text: ‘Class’, datafield: ‘passenger_class’, width: 120 },
{ text: ‘Name’, datafield: ‘name’, width: 250 },
{ text: ‘Gender’, datafield: ‘sex’, width: 120,sortable: false },
{ text: ‘Age’, datafield: ‘age’, minwidth: 120 },
{ text: ‘Sib_sp’, datafield: ‘sib_sp’, minwidth: 120 },
{ text: ‘Parch’, datafield: ‘parch’, minwidth: 120 },
{ text: ‘Ticket’, datafield: ‘ticket’, minwidth: 120 },
{ text: ‘Fare’, datafield: ‘fare’, minwidth: 120 },
{ text: ‘Cabin’, datafield: ‘cabin’, minwidth: 120 },
{ text: ‘Embarked’, datafield: ’embarked’, minwidth: 120 }
]
});
} ,
error : function() {
console.log(“There was an error”);
}});
}
}</script>
</body>
</html>Please let me know if i am missing any information from my side.
Looking forward for your reply
Thanks
Hi, I would like to know how I can get the data of the nested grid after having expanded a row.
The first time I expand the row it appears as undefined and when I get the row it is where I recover the data.
I would like to know if there is any method of the jqxGrid to obtain the data of the nested grid when expanding the row?
�
This is the code of my main grid I am working with dynamic columns.function obtener_datos() { var persona = $("[id*=ddlPersona]").val(); var Sucursal = ""; if (persona != 0) { var valores; var datafields = new Array(); var columns = new Array(); var columnsArray = []; $.ajax({ type: "POST", dataType: "json", url: "frmPersona.aspx/Intervalo", contentType: "application/json; charset=utf-8", data: '{id_persona:"' + persona + '",Sucursal:"' + Sucursal + '"}', async: false, success: function(data) { if (data != '') { valores = JSON.parse(valores[0]); for (var i in valores[0]) { datafields.push({ name: i, type: 'string' }); columns.push({ text: i, datafield: i, filtercondition: 'CONTAINS', align: 'center', minwidth: 100 }); } for (var j = 1; j < columns.length; j++) { columnsArray.push(columns[j]); } } var gridSource = { datatype: "json", datafields: datafields, localdata: valores, async: false }; var gridDataAdapter = new $.jqx.dataAdapter(gridSource); $("#gvDatos").jqxGrid({ source: gridDataAdapter, width: '100%', columnsresize: true, autoheight: false, autorowheight: false, pageable: true, showfilterrow: true, filterable: true, rowdetails: true, initrowdetails: initrowdetails_BI2, rowdetailstemplate: { rowdetails: "<div id='grid' style=' margin: 10px; '></div>", rowdetailsheight: 250, rowdetailshidden: true }, handlekeyboardnavigation: function(event) { var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0; if (key == 13) { return true; } else if (key == 27) { return true; } }, columns: columnsArray }); /******************* Nested grid data is only displayed when the row collapses ********************************/ $('#gvDatos').on('rowcollapse', function(event) { console.log("Resultado con columnas subgrid fila contraida: ", col_detalle_subgrid); }); /************** Here I show the data of the grid nested in the console. The first time I expand the row it shows me undefined in the console. *********/ $('#gvDatos').on('rowexpand', function(event) { console.log("Result: ", col_detalle_subgrid); }); }, error: function(error) { alert(error.responseText); console.log(error.responseText); jsonValue = jQuery.parseJSON(Error.responseText); alert(error.respose.Text); alert("Error"); } }); } else { $('#PopupDatos').modal('show'); } }Hi, I have a main grid with a nested grid like in your demo. I am working with dynamic columns and within my main grid I have a button type column called Edit.
How can I get the data from the nested grid to show them in the textbox of my modal?
This is my code.
Thank you very much for your help.
function obtener_datos() { var persona = $("[id*=ddlPersona]").val(); var Sucursal = ""; if (persona != 0) { var valores; var datafields = new Array(); var columns = new Array(); var columnsArray = []; $.ajax({ type: "POST", dataType: "json", url: "frmPersona.aspx/Intervalo", contentType: "application/json; charset=utf-8", data: '{id_persona:"' + persona + '",Sucursal:"' + Sucursal + '"}', async: false, success: function(data) { if (data != '') { valores = JSON.parse(valores[0]); for (var i in valores[0]) { datafields.push({ name: i, type: 'string' }); columns.push({ text: i, datafield: i, filtercondition: 'CONTAINS', align: 'center', minwidth: 100 }); } for (var j = 1; j < columns.length; j++) { columnsArray.push(columns[j]); } } var gridSource = { datatype: "json", datafields: datafields, localdata: valores, async: false, updaterow: function(rowid, rowdata, commit) {}, async: false, success: function(data, status, xhr) { commit(true); }, }); } }; var gridDataAdapter = new $.jqx.dataAdapter(gridSource); var editrow = -1; columnsArray.push({ text: 'Edit', datafield: 'Edit', filtercondition: 'CONTAINS', align: 'center', minwidth: 100, columntype: 'button', cellclassname: "color_especial", cellsrenderer: function() { }, buttonclick: function(row) { //*************************** <strong> Here I want to get the data from the nested grid </strong> **********************// $("#Popup_Update").modal('show'); } }); $("#gvDatos").jqxGrid({ source: gridDataAdapter, width: '100%', columnsresize: true, autoheight: false, autorowheight: false, pageable: true, showfilterrow: true, filterable: true, rowdetails: true, initrowdetails: initrowdetails_BI2, rowdetailstemplate: { rowdetails: "<div id='grid' style=' margin: 10px; '></div>", rowdetailsheight: 250, rowdetailshidden: true }, handlekeyboardnavigation: function(event) { var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0; if (key == 13) { return true; } else if (key == 27) { return true; } }, columns: columnsArray }); //Button html input type button $("#buttonUpdate").click(function() { $("#Popup_Update").modal('hide'); } }); }, error: function(error) { alert(error.responseText); console.log(error.responseText); jsonValue = jQuery.parseJSON(Error.responseText); alert(error.respose.Text); alert("Error"); } }); } else { $('#PopupDatos').modal('show'); } }