Rendering Issues in Chrome

[lenniehParticipant]

A bit of background, I’m trying to use jqxGrid in a similar way to the spreadsheet example.
The idea is that I present a grid with a 1000 empty rows and the user can paste into these from excel and then fire off the lot to the server.

So I’ve got an MVC5 version of this working fine, but because I’m using an unbound source, and using the exportdata functionality to get a json object to send to my server, I have to rely on the columns all having the right spellings, no spaces etc.

I probably won’t be able to use the tag helpers because the target website will be MVC5, but I thought I would give it a go anyway, obviously it’s better to be able to bind to my server model.

I have a really simple page, but it won’t render properly on Chrome it just displays a blank panel where the grid should be.
Works ok in Internet Explorer. If I use F12 in Chrome I can see that $(“#entryGrid”) line throws an error, the id on the jqx-grid div is generated “jqxWidgete264da9a” but in Explorer it is “entryGrid”.

My page source looks like this

@model jqxTestWebCore.Models.ReportParamsVM
@{
ViewData[“Title”] = “Home Page”;
}

@Html.HiddenFor(m => m.MaxRequests)

@section scripts {
<script type=”text/javascript”>

$(document)
.ready(function() {

var maxRequests = $(“#MaxRequests”).val() || 10;
var rows = new Array();
for (var i = 0; i < maxRequests; i++) {
var datarow = { SPID: “”, AnnualWaterConsumption: “”, RateableValue: “” }
rows.push(datarow);
}
$(“#entryGrid”).jqxGrid(‘addrow’, null, rows);

});

</script>

}

<h2>Index</h2>
<jqx-grid id=”entryGrid” auto-height=”true” width=”780″ source=”Model.TestData.RequestParams” alt-rows=”true” editable=”true” columns-resize=”true” selection-mode=”multiplecellsadvanced”>
<jqx-grid-columns>
<jqx-grid-column datafield=”SPID” width=”100″ text=”SPID”></jqx-grid-column>
<jqx-grid-column datafield=”AnnualWaterConsumption” width=”200″ text=”Annual Water Consumption”></jqx-grid-column>
<jqx-grid-column datafield=”RateableValue” width=”200″ text=”Rateable Value”></jqx-grid-column>
</jqx-grid-columns>
</jqx-grid>

Any ideas?

[Peter StoevKeymaster]

Hi lennieh,

The result of the generated code in Chrome with latest version of jQWidgets is:

$(function () {var entryGrid= new jqxGrid($('#entryGrid'), { autoHeight: true, altRows: true, editable: true, columnsResize: true, selectionMode: 'multiplecellsadvanced', columns: [{ text: 'SPID', dataField: 'SPID', width: 100 }, { text: 'Annual Water Consumption', dataField: 'AnnualWaterConsumption', width: 200 }, { text: 'Rateable Value', dataField: 'RateableValue', width: 200 }] });});

Things you can check are whether you use the latest version of the tag helpers and the latest version of jQWidgets. I was not able to test with your data source so this could be the reason of the issue. Another possible reason could be missing references to required javascript files.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts