jQWidgets Forums
Forum Replies Created
-
Author
-
May 29, 2015 at 5:30 am in reply to: error occurs when load grid again error occurs when load grid again #71762
Hi ,
Its working fine with dynamic parameter.May 29, 2015 at 4:09 am in reply to: error occurs when load grid again error occurs when load grid again #71758Hi dimitar,
I think this could be solve by using dynamic parameter(pass with datadapter),please tell me how to pass dynamic parameter.
May 28, 2015 at 10:26 am in reply to: error occurs when load grid again error occurs when load grid again #71723Hi Dimitar,
I have checked by using this code(given in my previous reply),my code hits two times server.with initial value. i can not understand why it is happening.
May 28, 2015 at 9:08 am in reply to: error occurs when load grid again error occurs when load grid again #71713Hi Dimitar,
I am sharing my full code here, please check it
///My Code
@{
Layout = “~/Views/Shared/_ReportLayout.cshtml”;
}
@section scripts {
<script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
debugger;
var yearMonthFromVal = 0;
var yearMonthThruVal = 0;
var auditeeIdListVal = null;
var checkedItems = null;//Prepare Source
var source =
{
datatype: “json”,
datafields: [
{ name: ‘YearMonth’ },
{ name: ‘YearMonthDesc’ }
],
url: ‘../Auditee/GetReport’
};//Bind Year Month DropDownList
var dataAdapter1 = new $.jqx.dataAdapter(source);
$(“.jqxWidget”).jqxDropDownList({
selectedIndex: 0, source: dataAdapter1, displayMember: “YearMonthDesc”, valueMember: “YearMonth”, width: 200, height: 20, theme: ‘energyblue’
});//check all
$(“#CheckAll”).jqxButton({
theme: ‘energyblue’, width: ’80’, theme: ‘energyblue’
});
$(‘#CheckAll’).on(‘click’, function () {
$(“.jqxWidget1”).jqxDropDownList(‘checkAll’);});
//Print Button
$(“#print”).jqxButton({ theme: ‘energyblue’});$(“#print”).click(function () {
var gridContent = $(“#jqxgrid”).jqxGrid(‘exportdata’, ‘html’);
var newWindow = window.open(”, ”, ‘width=800, height=500’),
document = newWindow.document.open(),
pageContent =
‘<!DOCTYPE html>\n’ +
‘<html>\n’ +
‘<head>\n’ +
‘<meta charset=”utf-8″ />\n’ +
‘<title>jQWidgets Grid</title>\n’ +
‘</head>\n’ +
‘<body>\n’ + gridContent + ‘\n</body>\n</html>’;
document.write(pageContent);
document.close();
newWindow.print();
});// Create a Export jqxDropDownList
var download = [
“Export”,
“XML”,
“CSV”,
“PDF”,
“Excel”
];
$(“#ddlExport”).jqxDropDownList({
source: download, selectedIndex: 0, width: 80, height: 20, theme: ‘darkblue’
});
//Code for export page
$(‘#ddlExport’).on(‘change’, function (event) {
var args = event.args;
var index = args.index;
switch (index) {
case 1: $(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xml’, ‘Auditee_Error_Report’);
break;
case 2: $(“#jqxgrid”).jqxGrid(‘exportdata’, ‘csv’, ‘Auditee_Error_Report’);
break;
case 3: $(“#jqxgrid”).jqxGrid(‘exportdata’, ‘pdf’, ‘Auditee_Error_Report’);
break;
case 4: $(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xls’, ‘Auditee_Error_Report’);
break;
}
});//From Month DropDown Text Change Event
var dataAdapter1 = new $.jqx.dataAdapter(AuditeeName);
$(‘#DropDownListFromMonth’).on(‘change’, function (event) {
var args = event.args;
yearMonthFromVal = $(‘#DropDownListFromMonth’).jqxDropDownList(‘getItem’, args.index).value;
GetAuditeeName(yearMonthFromVal, yearMonthThruVal);
});//To Month DropDown Text Change Event
$(‘#DropDownListToMonths’).on(‘change’, function (event) {
var args = event.args;
yearMonthThruVal = $(‘#DropDownListToMonths’).jqxDropDownList(‘getItem’, args.index).value;
GetAuditeeName(yearMonthFromVal, yearMonthThruVal);
});//Check Change event of Auditee name drop down
$(“#AuditeeName”).on(‘checkChange’, function (event) {
if (event.args) {
var item = event.args.item;
if (item) {
var items = $(“#AuditeeName”).jqxDropDownList(‘getCheckedItems’);
checkedItems = “”;
$.each(items, function (index) {
checkedItems += this.value + “, “;
});
}
}
});
var AuditeeErrorResult = {
cache: false,
datatype: “json”,
datafields: [{
name: ‘Auditee’
}, {
name: ‘ErrorCount’
}, {
name: ‘FunctionDesc’
}, {
name: ‘FunctionErrorCode’
}, {
name: ‘FunctionErrorDesc’
}, {
name: ‘FunctionGroupDesc’
}],
url: ‘../Auditee/GetAuditeeErrorJson’,
data: {
yearMonthFrom: yearMonthFromVal,
yearMonthThru: yearMonthThruVal,
auditeeIdList: checkedItems
}
};var dataAdapter = new $.jqx.dataAdapter(AuditeeErrorResult);
//dataError.dataBind();$(‘#jqxgrid’).on(‘bindingcomplete’, function (event) {
loading = false;
alert(“Binding is completed”);
$(“#jqxgrid”).jqxGrid(‘expandallgroups’);
$(“#jqxgrid”).jqxGrid(‘showgroupsheader’, false);
$(“#jqxgrid”).jqxGrid(‘autoresizecolumns’);
});$(“#jqxgrid”).jqxGrid({
width: 1200,
autoheight: true,
source: dataAdapter,
theme: ‘darkblue’,
altrows: true,
enabletooltips: true,
groupable: true,
pageSize: 10,
sortable: true,
filterable: true,
columnsresize: true,
pagesizeoptions: [’10’, ’20’, ’30’, ’40’, ’50’],
pageable: true,
columns: [{
text: ‘Auditee’,
dataField: ‘Auditee’,
width: 200
}, {
text: ‘Error Count’,
dataField: ‘ErrorCount’,
width: 200
}, {
text: ‘Function Group’,
dataField: ‘FunctionGroupDesc’,
width: 160
}, {
text: ‘Function’,
dataField: ‘FunctionDesc’,
width: 220
}, {
text: ‘Error Code’,
dataField: ‘FunctionErrorCode’,
width: 120
}, {
text: ‘Error Description’,
dataField: ‘FunctionErrorDesc’
}],
groups: [‘Auditee’]
});$(“#jqxgrid”).on(‘pagechanged’, function () {
$(“#jqxgrid”).jqxGrid(‘expandallgroups’);
});//view Report Click event
loading = false;
$(“#viewReport”).jqxButton({ width: ’90’, theme: ‘darkblue’ });
$(“#viewReport”).click(function () {
debugger;
if (loading === false) {
loading = true;
$(‘#ReportTitle’).empty();
$(‘#ReportTitle’).append(‘<h2><div style=”margin-top: 5px;”>Auditee Report <br/>’ + yearMonthFromVal + ‘-‘ + yearMonthThruVal + ‘<br/>Errors</div><h2>’);AuditeeErrorResult = {
cache: false,
datatype: “json”,
datafields: [{
name: ‘Auditee’
}, {
name: ‘ErrorCount’
}, {
name: ‘FunctionDesc’
}, {
name: ‘FunctionErrorCode’
}, {
name: ‘FunctionErrorDesc’
}, {
name: ‘FunctionGroupDesc’
}],
url: ‘../Auditee/GetAuditeeErrorJson’,
data: {
yearMonthFrom: yearMonthFromVal,
yearMonthThru: yearMonthThruVal,
auditeeIdList: checkedItems
}
};
//dataAdapter = new $.jqx.dataAdapter(AuditeeErrorResult);
dataAdapter.dataBind();
$(“#jqxgrid”).jqxGrid(‘updatebounddata’);
}
});
});//Function to bind Auditee name dropdown
function GetAuditeeName(yearMonthFromValT, yearMonthThruValT) {
var AuditeeName =
{
datatype: “json”,
datafields: [
{ name: ‘AuditeeID’ },
{ name: ‘Auditee’ }
],
url: ‘../Auditee/GetAuditeeNameJson’,
data: { yearMonthFrom: yearMonthFromValT, yearMonthThru: yearMonthThruValT }
};
var dataAdapter1 = new $.jqx.dataAdapter(AuditeeName);
$(“.jqxWidget1”).jqxDropDownList({
checkboxes: true, source: dataAdapter1, displayMember: “Auditee”, valueMember: “AuditeeID”, width: 200, height: 20, theme: ‘energyblue’
});
$(“.jqxWidget1″).jqxDropDownList(‘checkIndex’, 0);
}</script>
<body class=’default’>
<div id=’content’ style=”background-color: white; width: 100%; padding: 10px; height: 800px”>
<table style=”width: 100%”>
<tr>
<td>
<h1>Report</h1>
</td>
</tr>
<tr>
<td>
<table style=”border: solid; border-color: darkgrey” width=”90%”>
<tr>
<td>
<br />
</td>
<td>
<br />
</td><td>
<br />
</td><td>
<br />
</td>
</tr>
<tr>
<td width=”25%”><b>YearMonth From:</b></td>
<td width=”25%”>
<div id=’DropDownListFromMonth’ class=”jqxWidget”>
</div>
</td>
<td width=”25%”>
<b>YearMonth Thru:</b>
</td>
<td width=”25%”>
<div id=’DropDownListToMonths’ class=”jqxWidget”>
</div>
</td>
</tr>
<tr>
<td width=”25%”><b>Auditee Name:</b></td>
<td width=”25%”><div id=’AuditeeName’ class=”jqxWidget1″>
</div></td>
<td width=”25%”>
<input type=”button” id=’CheckAll’ value=”Check all” />
<input type=”button” value=”View Report” id=’viewReport’ />
</td>
<td width=”25%”></td>
</tr>
<tr>
<td width=”25%”>
</td>
<td>
<div id=”ddlExport”></div>
</td>
<td width=”25%”>
<input type=”button” value=”Print” id=’print’ />
</td>
<td width=”25%”>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<br />
</td>
</tr>
<tr>
<td>
<br />
<table style=”border: solid; border-color: darkgrey” width=”90%”>
<tr>
<td>
<b>
<div id=”ReportTitle”></div>
</b></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>
<br />
<div id=”jqxgrid”></div>
</td>
</tr></table>
</td>
</tr></table>
</div></body>}
May 28, 2015 at 8:20 am in reply to: error occurs when load grid again error occurs when load grid again #71704hi Dimitar,
I made change, but on grid data update grid bind with my previous parameter.i did not resolve this.
May 28, 2015 at 5:48 am in reply to: error occurs when load grid again error occurs when load grid again #71696Hi Dimitar,
Now getting this error “Unable to get property ‘data Bind’ of undefined or null reference jqwidget”.How to solve this.
May 27, 2015 at 8:38 am in reply to: error occurs when load grid again error occurs when load grid again #71629Hi Dimitar,
Thanks for your fast reply,This is my code
var loading = false;
$(‘#jqxgrid’).on(‘bindingcomplete’, function (event) {
loading = false;
alert(“Binding is completed”);
});
$(“#viewReport”).click(function () {
debugger;if (loading === false) {
loading = true;
$(‘#ReportTitle’).empty();
$(‘#ReportTitle’).append(‘<h2><div style=”margin-top: 5px;”>Auditee Report <br/>’ + yearMonthFromVal + ‘-‘ + yearMonthThruVal + ‘<br/>Errors</div><h2>’);
var AuditeeErrorResult =
{
cache: false,
datatype: “json”,
datafields: [
{ name: ‘Auditee’ },
{ name: ‘ErrorCount’ },
{ name: ‘FunctionDesc’ },
{ name: ‘FunctionErrorCode’ },
{ name: ‘FunctionErrorDesc’ },
{ name: ‘FunctionGroupDesc’ }
],
url: ‘../Auditee/GetAuditeeErrorJson’,
data: { yearMonthFrom: yearMonthFromVal, yearMonthThru: yearMonthThruVal, auditeeIdList: checkedItems },
};
var dataError = new $.jqx.dataAdapter(AuditeeErrorResult, {
loadComplete: function () {
$(“#jqxgrid”).jqxGrid(‘expandallgroups’);
$(“#jqxgrid”).jqxGrid(‘showgroupsheader’, false);
$(“#jqxgrid”).jqxGrid(‘autoresizecolumns’);
},
});$(“#jqxgrid”).on(‘pagechanged’, function () {
$(“#jqxgrid”).jqxGrid(‘expandallgroups’);
});$(“#jqxgrid”).jqxGrid( // error occurs here in second time of button click event.
{
width: 1200,
autoheight: true,
source: dataError,
theme: ‘darkblue’,
altrows: true,
enabletooltips: true,
groupable: true,
pageSize: 10,
sortable: true,
filterable: true,
columnsresize: true,
ready: function () {
$(“#jqxgrid”).jqxGrid(‘expandallgroups’);
},
pagesizeoptions: [’10’, ’20’, ’30’, ’40’, ’50’],
pageable: true,
columns: [
{ text: ‘Auditee’, dataField: ‘Auditee’, width: 200 },
{ text: ‘Error Count’, dataField: ‘ErrorCount’, width: 200 },
{ text: ‘Function Group’, dataField: ‘FunctionGroupDesc’, width: 160 },
{ text: ‘Function’, dataField: ‘FunctionDesc’, width: 220 },
{ text: ‘Error Code’, dataField: ‘FunctionErrorCode’, width: 120 },
{ text: ‘Error Description’, dataField: ‘FunctionErrorDesc’ }],
groups: [‘Auditee’]
});
}});
May 27, 2015 at 8:27 am in reply to: error occurs when load grid again error occurs when load grid again #71627Hi Dimitar,
Yes,i implement that solution and its work fine. bindingcomplete event fire correctly but when grid going to bind again(second time on button click) it through this error message.Actually got this in jqxgrid.sort.js file.
sortby:function(d,g,f,e,b){if(this._loading&&b!==false)
Column number – 3813May 27, 2015 at 7:36 am in reply to: error occurs when load grid again error occurs when load grid again #71618Actually got this in jqxgrid.sort.js file.
sortby:function(d,g,f,e,b){if(this._loading&&b!==false)
Column number – 3813May 27, 2015 at 7:06 am in reply to: error occurs when load grid again error occurs when load grid again #71610I still have this error, bindingcomplete event fire correctly and when grid going to bind it through this error message.
<0x800a139e – JavaScript runtime error: jqxGrid: The data is still loading. When the data binding is completed, the Grid raises the ‘bindingcomplete’ event. Call this function in the ‘bindingcomplete’ event handler.>
Used this code in mvc and bind the grid from controller data is in json format.Hi,
I also need to do this , is their are any other way to this.
-
AuthorPosts