Chrome ,IE 11 crashes when using jqxgrid

[rajneeshParticipant]

Hi,

I am using jqxGrid to load the data from api or remote source… first time it is loading correctly.. but second time it is not load .. taking too much time and showing a popup (wait, kill) from browser side… may i know what was the problem…?

below is my code..

source =
{
datatype: “json”,
datafields: [
{ name: ‘CorrelationId’ },
{ name: ‘Device’ },
{ name: ‘Type’ },
{ name: ‘DateReported’ },
{ name: ‘ErrorType’ },
{ name: ‘Error’ },
{ name: ‘Latitude’ },
{ name: ‘Longitude’ },
{ name: ‘Payloadurl’ }
],
id: ‘CorrelationId’,
url: ‘/xxxx/xxxxxxxxx/’,
type: ‘GET’,
data: { ddlDSVIN: ddlDevice, search: search, OEMType: OEMType, frmDate: frmDate, toDate: toDate }

};

var dataAdapter = new jQuery.jqx.dataAdapter(source);

var linkrenderer = function (row, column, value) {
if (value.indexOf(‘#’) != -1) {
value = value.substring(0, value.indexOf(‘#’));
}
var format = { target: ‘”_blank”‘ };
var html = $.jqx.dataFormat.formatlink(value, format);
return html;
}

jQuery(“#jqxgrid”).jqxGrid(
{
width: 950,
source: dataAdapter,
theme: ‘energyblue’,
columnsresize: true,
pageable: true,
autoheight: true,
autorowheight: true,
columnsresize: true,
sortable: true,
altrows: true,
enabletooltips: true,
selectionmode: ‘checkbox’,
ready: function () {
// called when the Grid is loaded. Call methods or set properties here.
var datainformations = $(“#jqxgrid”).jqxGrid(“getdatainformation”);
alert(datainformations);
var rowscounts = datainformations.rowscount;
if (rowscounts >=1) {
$(‘#hideandshow’).show();
}
else {
$(‘#hideandshow’).hide();
}
},
columns: [
{ text: ‘CorrelationId’, datafield: ‘CorrelationId’, width: 2, hidden:true },
{ text: ‘Device’, datafield: ‘Device’, width: 100 },
{ text: ‘Type’, datafield: ‘Type’, width: 80 },
{ text: ‘DateReported’, datafield: ‘DateReported’, width: 130 },
{ text: ‘ErrorType’, datafield: ‘ErrorType’, minwidth: 120 },
{ text: ‘Error’, datafield: ‘Error’, width: 180 },
{ text: ‘Latitude’, datafield: ‘Latitude’, minwidth: 80 },
{ text: ‘Longitude’, datafield: ‘Longitude’, width: 80 },
{ text: ‘Payloadurl’, datafield: ‘Payloadurl’, width: ‘auto’, cellsrenderer: linkrenderer }
]
});

});

[Peter StoevKeymaster]

Hi rajneesh,

The provided code is insufficient for testing your case. Please, share jqwidgets.com/jseditor example.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[rajneeshParticipant]

hi..

below is my design page

<div id=”tabs-1″>
<h4 class=”subHeading fontBold”>DataIn Payload Search</h4>
<div class=”clear-block”></div>
<div class=”box”>
<div class=”float-left width15 padLeft”>
<label class=”lbl”>Select Device/VIN/SN</label>
@Html.DropDownList(“Devicetitle”, null, new { @id = “ddlDevice”, @class = “widthBoxSmall” })

</div>
<div class=”float-left width15 padLeft”>
<label class=”lbl”>Enter Search Input</label>
<input type=”text” placeholder=”DeviceID,VIN,S/N” class=”userInputsmall” id=”searchId” required=”required” />
</div>

<div class=”float-left width15 padLeft”>
<label class=”lbl”>Select OEM </label>
@Html.DropDownList(“OEM”, null, new { @id = “ddlOEM”, @class = “widthBoxSmall” })
</div>
<div class=”fontMedium fontSize14 width33 float-left padLeft”>
<label class=”lbl”>Date Range (Max of 7 days)<span class=”lblDate”></span></label>
<label for=”from” class=”dateLabels”>From</label>
<input type=”text” id=”datepicker1″ class=”boxDate” placeholder=”MM/DD/YYYY” readonly=”readonly”>
  
<label for=”to” class=”dateLabels”>To</label>
<input type=”text” id=”datepicker2″ class=”boxDate” placeholder=”MM/DD/YYYY” readonly=”readonly”>
</div>

<button type=”button” value=”Search” class=”btnSearch” id=”btnResult”>Search</button>

</div>

<div class=”clear-block”></div>

<div class=”container”>

<div id=”hideandshow” style=”display:none;” class=”assetDetailRightBlock”>

<div class=”Buttons”>
<label id=”lblTotal” class=”lblfont”></label>
<button type=”button” value=”Export” class=”btnSearchbig” id=”btnexport” onclick = “exporToCsv()”>Export To CSV</button>
<button type=”button” value=”ErrorLog” class=”btnSearchbig” id=”btnlogxml” onclick = “ErrorLog()”>View ErrorLog XML</button>

</div>
</div>

<div class=”padding20″>
<div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
<div id=’payload’>
</div></div>
</div>
@* @Html.Partial(“DataInSearch”)

*@

</div>

</div>

=================================

below is my jqxgrid code in (datapayload.js file)

jQuery(document).ready(function () {

$(“#btnResult”).live(“click”, function (e) {

var ddlDevice = $(‘#ddlDevice :selected’).val();
var search = $(“#searchId”).val();
var OEMType = $(“#ddlOEM :selected”).text();
var frmDate = $(“#datepicker1”).datepicker(‘getDate’);
var toDate = $(“#datepicker2”).datepicker(‘getDate’);

//Get 1 day in milliseconds
var one_day = 1000 * 60 * 60 * 24;
var dateDiff = toDate – frmDate; //difference in milliseconds
var daysDiffofDate = Math.round(dateDiff / one_day);

alert(daysDiffofDate);

if (search == “” || search == null) {
jQuery(“#errorHolder”).html(“Please Enter Search Input”);
jQuery(“#errorDialog”).dialog(“open”);

}
else if (daysDiffofDate >= 1 && daysDiffofDate <= 7) {

assetSN = search;

$(‘#payload’).on(‘bindingcomplete’, function (event) {
var datainformations = $(“#payload”).jqxGrid(“getdatainformation”);

var rowscounts = datainformations.rowscount;
if (rowscounts >= 1) {
$(‘#hideandshow’).show();
}
else {
$(‘#hideandshow’).hide();
}
});

source =
{
datatype: “json”,
datafields: [
{ name: ‘CorrelationId’ },
{ name: ‘Device’ },
{ name: ‘Type’ },
{ name: ‘DateReported’ },
{ name: ‘ErrorType’ },
{ name: ‘Error’ },
{ name: ‘Latitude’ },
{ name: ‘Longitude’ },
{ name: ‘Payloadurl’ }
],
id: ‘CorrelationId’,
url: ‘/DataIn/DataInSearchResult/’,
type: ‘GET’,
data: { ddlDSVIN: ddlDevice, search: search, OEMType: OEMType, frmDate: frmDate.toDateString(), toDate: toDate.toDateString() }

};

var dataAdapter = new jQuery.jqx.dataAdapter(source);

var linkrenderer = function (row, column, value) {
if (value.indexOf(‘#’) != -1) {
value = value.substring(0, value.indexOf(‘#’));
}
var format = { target: ‘”_blank”‘ };
var html = $.jqx.dataFormat.formatlink(value, format);
return html;
}

jQuery(“#payload”).jqxGrid(
{
width: 950,
source: dataAdapter,
columnsresize: true,
pageable: true,
autoheight: true,
autorowheight: true,
columnsresize: true,
sortable: true,
altrows: true,
enabletooltips: true,
selectionmode: ‘checkbox’,
ready: function () {
// called when the Grid is loaded. Call methods or set properties here.
var datainformations = $(“#payload”).jqxGrid(“getdatainformation”);
var rowscounts = datainformations.rowscount;
if (rowscounts != 0) {
$(‘#hideandshow’).show();
}
else {
$(‘#hideandshow’).hide();
}
},
columns: [
{ text: ‘CorrelationId’, datafield: ‘CorrelationId’, width: 2, hidden: true },
{ text: ‘Device’, datafield: ‘Device’, width: 100 },
{ text: ‘Type’, datafield: ‘Type’, width: 80 },
{ text: ‘DateReported’, datafield: ‘DateReported’, width: 130 },
{ text: ‘ErrorType’, datafield: ‘ErrorType’, minwidth: 120 },
{ text: ‘Error’, datafield: ‘Error’, width: 180 },
{ text: ‘Latitude’, datafield: ‘Latitude’, minwidth: 80 },
{ text: ‘Longitude’, datafield: ‘Longitude’, width: 80 },
{ text: ‘Payloadurl’, datafield: ‘Payloadurl’, width: ‘auto’, cellsrenderer: linkrenderer }
]
});
}
else {

jQuery(“#errorHolder”).html(“Date Range should be max of 7 days “);
jQuery(“#errorDialog”).dialog(“open”);

}
});

});

in code behind i am calling web-api service…which returns json data as result. which is binding to jqxGrid…(i m using chrome Version 48.0.2564.116 m (64-bit) and IE 11 version)

now please let me know why this browser get crashed every 2nd time… or hang..

[PietervkParticipant]

Rajneesh,
when that happens to me, it is really useful press F12, and look at the console. Maybe you have done that, but probably there is an error given there.

[rajneeshParticipant]

hi,

thanks for reply,but i have done that.. there is no error or response ,it is showing “long running script” take time but for 2nd time execution..

regards,
rajneesh.

[Author]

Posts