2
コンボボックスを含むエディタダイアログを読み込もうとしています。コンボボックスに負荷が設定されている必要があります。問題は、コンボボックスのデータソースがグリッドと同時にロードされず、データが最終的にサービスから完全に取り込まれると、データが初期化されず、空のドロップダウンリストが表示されることです。データがサービスから返されたときに、コンボボックスのcolumnSettingsデータソースを更新したいと思います。エディタダイアログ内でオンデマンドでiggridコンボボックスの列にデータを入力します
私は、editRowStartedイベントでコンボボックスに入力しようとしましたか？これは機能しましたが、コンボボックスの最初の表示では機能しませんでした。
<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>