(MVC4 2012.2 current updates) If you load a div with a partial view containing a grid. (Inside the partial view document ready event a call to load the grid data is made, in order to show some other data first).
Then use jquery dialog for the div. (divSelector.dialog("open"))
You can click to edit the row for edit mode = "row" but you can't edit any values in the grid. I can edit only one column which is a combo column but the other numeric and text columns will not let you edit them. I use this same grid on a page but not in a dialog so I know it works.
Something to do with the dialog. You can't even click in the cells. I ended up having to pop a div up in front of an overlay.
Here is the grid:
$.ig.loader(function () {
$gridJobService.igGrid({
dataSource: results["gridData"],
dataSourceType: "json",
autoCommit: false,
aggregateTransactions: true,
responseDataKey: "",
autoGenerateColumns: false,
renderCheckboxes: true,
enableHoverStyles: true,
width: "100%",
height: "100%",
fixedHeaders: false,
primaryKey: "JobServiceID",
caption: "Services",
columns: [
{ headerText: "JobServiceID", key: "JobServiceID", hidden: true, dataType: "string" },
{ headerText: "JobID", key: "JobID", hidden: true },
{ headerText: "Name", key: "ServiceID", dataType: "string", formatter: lookupServiceName },
{ headerText: "Description", key: "Description", dataType: "string" },
{ headerText: "UOM", key: "UnitOfMeasure", dataType: "string", width: "80" },
{ headerText: "Qty", key: "Quantity", dataType: "number", format: "########.##", width: "60" },
{ headerText: "Est Price", key: "EstUnitPrice", dataType: "number", format: "currency", width: "60" },
{ headerText: "Est Ext Price", key: "EstExtPrice", dataType: "number", format: "currency", width: "60" },
{ headerText: "Price", key: "UnitPrice", dataType: "number", format: "currency", width: "60" },
{ headerText: "Ext Price", key: "ExtPrice", dataType: "number", format: "currency", width: "60" }
],
features: [
{
name: 'Tooltips', visibility: "always", columnSettings: [
{ columnKey: "ServiceID", allowTooltips: false }
]
},
{ name: 'Selection', mode: 'row', multipleSelection: false, activation: true },
{ name: 'Resizing', deferredResizing: false, allowDoubleClickResize: true },
name: 'Updating',
enableAddRow: true,
editMode: "row",
enableDeleteRow: true,
dataDirty: function (evt, ui) {
return false;
rowAdding: function (evt, ui) {
ui.values["JobID"] = $("#PEF_JobID").val();
editCellEnding: function (evt, ui) {
if (ui.update) {
if (ui.columnKey == "Quantity" || ui.columnKey == "UnitPrice" || ui.columnKey == "EstPrice") {
var quantityEditor = $gridJobService.igGridUpdating("editorForKey", "Quantity");
var UnitPriceEditor = $gridJobService.igGridUpdating("editorForKey", "UnitPrice");
var estUnitPriceEditor = $gridJobService.igGridUpdating("editorForKey", "EstUnitPrice");
var ExtPriceEditor = $gridJobService.igGridUpdating("editorForKey", "ExtPrice");
var estExtPriceEditor = $gridJobService.igGridUpdating("editorForKey", "EstExtPrice");
var theQuantity = $(quantityEditor).igEditor("value");
var theEstUnitPrice = $(estUnitPriceEditor).igEditor("value");
var theUnitPrice = $(UnitPriceEditor).igEditor("value");
var theExtPrice = parseFloat(theUnitPrice) * parseFloat(theQuantity);
var theEstExtPrice = parseFloat(theEstUnitPrice) * parseFloat(theQuantity);
$(ExtPriceEditor).igEditor("value", theExtPrice);
$(estExtPriceEditor).igEditor("value", theEstExtPrice);
}
editRowStarted: function (evt, ui) {
if (!ui.rowAdding) {
var editor = $gridJobService.igGridUpdating("editorForKey", "ServiceID");
$(editor).igCombo("setFocus");
generatePrimaryKeyValue: function (evt, ui) {
var n = Math.max.apply(Math, MST.GetNewID) + 1;
MST.GetNewID.push(ui.value);
var z = '0';
var n = n + '';
var width = 12;
var last12 = n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
ui.value = "00000000-0000-0000-0000-" + last12;
columnSettings: [{
columnKey: "ServiceID",
editorType: 'combo',
required: true,
editorOptions: {
dataSource: results["selectList1"],
textKey: 'Text',
valueKey: 'Value',
enableClearButton: true,
nullText: "<--enter-->",
filteringType: "local",
renderMatchItems: "multi",
filteringCondition: "contains",
autoComplete: false,
caseSensitive: false,
selectionChanged: function (evt, ui) {
if (ui.items != null) {
var value = ui.items[0].value;
var item = theServiceList[value];
if (value != "") {
var descriptionEditor = $gridJobService.igGridUpdating("editorForKey", "Description");
var unitOfMeasureEditor = $gridJobService.igGridUpdating("editorForKey", "UnitOfMeasure");
$(descriptionEditor).igEditor("value", item.Name);
$(unitOfMeasureEditor).igEditor("value", item.UnitOfMeasure);
$(UnitPriceEditor).igEditor("value", theUnitPrice);
$(ExtPriceEditor).igEditor("value", theExtPrice );
columnKey: "Description",
editorType: 'text',
button: "clear",
maxLength: 255,
toUpper: true,
textMode: "text",
type: "text",
validatorOptions: getValidationOptions
columnKey: "UnitOfMeasure",
readOnly: false,
keydown: function (evt, ui) {
var key = ui.key;
if (key == 9 || key == 16) {
return true;
else {
columnKey: "Quantity",
editorType: 'numeric',
defaultValue: 1,
maxDecimals: 2,
nullValue: 1,
maxValue: 99999999.99,
validatorOptions: getValidationOptions,
valueChanged: function (evt, ui) {
var value = ui.value;
var theExtPrice = parseFloat(theUnitPrice) * parseFloat(value);
var theEstExtPrice = parseFloat(theEstUnitPrice) * parseFloat(value);
columnKey: "EstUnitPrice",
defaultValue: 0,
nullValue: 0,
var theEstExtPrice = parseFloat(value) * parseFloat(theQuantity);
columnKey: "UnitPrice",
var theExtPrice = parseFloat(value) * parseFloat(theQuantity);
columnKey: "EstExtPrice",
columnKey: "ExtPrice",
}]
});
Hello mhead1,
Which version of jQuery and jQuery UI are you using?
Thank you for using Infragistics forums!
Best regards,
Stamen Stoychev
jquery 1.8.3
jqueryui 1.9.2
This is the highest combination that I have got to work with most of all the 2012.2 controls.