(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",
}]
});
I don't have time right now. Thanks for trying. I just noticed the issues and avoided the dialog for that.
It would take me a while to reproduce the exact same issue. I am using mvc 4 with a repository design with interfaces. I have to install an application over the holiday weekend so I am pressed on time.
When I get time, I will try again.
Thanks again.
Hello mhead1,
Unfortunately I was not able to reproduce the issue with the information given. If it is not a problem for you, could you please create a small sample reproducing the behavior and attach it to the thread? It will be of great help.
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.
Which version of jQuery and jQuery UI are you using?
Thank you for using Infragistics forums!