I am attempting to load an editor dialog that contains a combo box. The combo box should be populated onload. the problem is that the combobox datasource doesn't get loaded the same time as the grid and when the data is finally fully populated from service the data is not intialized and displays an empty drop down list. I want to update the combobox columnSettings datasource when my data is returned from service.
I tried populating the combo box on the editRowStarted event? This worked but not for the initial display of the combo box.
<script>
var userDirectoryViewModel = @Html.Raw(Json.Encode(@Model));
</script>
<script id="dialogTemplate" type="text/html">
<div class="row-edit-dialog-container-head"><strong>${Name}</strong></div>
<div class="row-edit-dialog-container-cols">
<div style="float: left;">
<table>
<colgroup>
<col style="width: 30%;" />
<col style="width: 70%;" />
</colgroup>
<tbody data-render-tmpl="true"></tbody>
</table>
<button>Select</button>
</div>
@*<div style="width: 160px; float: right;">
<img width="100" height="90" src="${ImageUrl}" alt="${Name}" title="${Name}" style="float:right;" />
</div>*@
</div>
</script>
<script id="editorsTemplate" type="text/html">
<tr>
<td style="text-align:right;color:#777;"><strong>${headerText}</strong></td>
<td><input data-editor-for-${key}="true" /></td>
</tr>
</script>
<script type="text/javascript">
var mappingTypeList = [
{ Name: "GrantAdministratorRole", Number: "0" }, { Name: "GrantSupervisorRole", Number: "1" }, { Name: "MapToUserGroup", Number: "2" },
{ Name: "MapToTeam", Number: "3" }
];
//load on demand.
var mapToTeamList = [];
var mapToUserGroupList = [];
//Formatting for igGrid cells to display igCombo text as opposed to igCombo value
function formatMappingTypeCombo(val) {
var i, mappingType;
for (i = 0; i < mappingTypeList.length; i++) {
mappingType = mappingTypeList[i];
if (mappingType.Number == val) {
val = mappingType.Name;
}
}
return val;
}
function formatMapToUserGroupCombo(val) {
var i, userGroup;
for (i = 0; i < mapToUserGroupList.length; i++) {
userGroup = mapToUserGroupList[i];
if (userGroup.UserGroupID == val) {
val = userGroup.Name;
}
}
return val;
}
function formatMapToTeamCombo(val) {
var i, team;
for (i = 0; i < mapToTeamList.length; i++) {
team = mapToTeamList[i];
if (team.Number == val) {
val = team.Name;
}
}
return val;
}
function populateUserDirectoryMappings() {
console.log("calling populateUserDirectoryMappings()");
$.ajax({
type: "GET",
url: '/userdirectory/GetUserDirectoryMappings',
dataType: "json",
success: function (childData) {
mapToUserGroupList = childData.UserGroups;
mapToTeamList = childData.Teams;
return childData;
},
error:function() {
alert("error");
}
}).done(function(data) {
mapToUserGroupList = data.UserGroups;
});
}
function getUserGroups() {
var data = populateUserDirectoryMappings();
return data.UserGroups;
}
$( function () {
$("#groupMappingTable")
.igGrid({
dataSource: userDirectoryViewModel.GroupMappings,
primaryKey: "UserDirectoryGroupID",
width: "85%",
autoCommit: true,
autoGenerateColumns: false,
localSchemaTransform: false,
columns: [
{ headerText: "UserDirectoryGroupID", key: "UserDirectoryGroupID", dataType: "number", hidden: true },
{ headerText: "UserDirectoryID", key: "UserDirectoryID", dataType: "number", hidden: true },
{ headerText: "OrganizationID", key: "OrganizationID", dataType: "number", hidden: true },
{ headerText: "ExternalGroup", key: "Name", dataType: "string" },
{ headerText: "MappingType", key: "MappingType",formatter: formatMappingTypeCombo,width: "20%" },
{ headerText: "MapToUserGroup", key: "MapToUserGroup",formatter: formatMapToUserGroupCombo,width: "20%" },
{ headerText: "MapToTeam", key: "MapToTeam",formatter: formatMapToTeamCombo,width: "20%" }
],
rendered: function (evt, ui) {
},
features: [
{
name: "Updating",
enableAddRow: true,
enableDeleteRow: true,
editMode: "dialog",
columnSettings: [
{
columnKey: "OrganizationID",
readOnly: true
},
{
columnKey: "MappingType",
required:true,
editorType:"combo",
editorOptions: {
mode:"dropdown",
dataSource:mappingTypeList,
textKey:"Name",
valueKey:"Number"
}
},
{
columnKey: "MapToUserGroup",
required:false,
editorType:"combo",
editorOptions: {
mode:"dropdown",
id: 'mapToUserGroupComboID',
dataSource: mapToUserGroupList,
textKey:"Name",
valueKey:"UserGroupID"
}
},
{
columnKey: "UserDirectoryID",
readOnly: true
},
{
columnKey: "UserDirectoryGroupID",
readOnly: true
}
],
rowEditDialogOptions: {
width: "530px",
height: "410px",
dialogTemplateSelector: "#dialogTemplate",
editorsTemplateSelector: "#editorsTemplate",
showReadonlyEditors: false
},
rowAdding: function (evt, ui) {
ui.values["OrganizationID"] = userDirectoryViewModel.OrganizationID;
ui.values["UserDirectoryID"] = userDirectoryViewModel.UserDirectoryID;
},
rowAdded: function (evt, ui) {
console.log("row added event");
var ds = $("#groupMappingTable").igGrid("option", "dataSource");
},
editRowStarted: function(evt, ui) {
},
editRowEnded: function (evt, ui) {
//alert(ui.rowId);
}
}
]
});
});
</script>I found the answer here api documentation
and I was then able to call into the grid and get the columnSettings object upon successfully retrieving the combo box data from the server.
function populateUserDirectoryMappings() {
console.log("calling populateUserDirectoryMappings()");
$.ajax({
type: "GET",
url: '/userdirectory/GetUserDirectoryMappings',
dataType: "json",
success: function(childData) {
mapToUserGroupList = childData.UserGroups;
mapToTeamList = childData.Teams;
return childData;
},
error: function() {
alert("error");
}
}).done(function(data) {
console.log("done");
console.log(data);
mapToUserGroupList = data.UserGroups;
var grid = $('#groupMappingTable').data('igGridUpdating');
var updating = grid.options.columnSettings;
console.log(updating);
console.log("map to user group list");
console.log(mapToUserGroupList);
$.each(updating, function(index, data) {
console.log("column");
console.log(data);
if (data.columnKey == "MapToUserGroup") {
data.editorOptions.dataSource = mapToUserGroupList;
}
});
});
}