在编辑器对话框中按需填充 iggrid 组合框列

Question

我正在尝试加载包含组合框的编辑器对话框。组合框应在加载时填充。问题是组合框数据源没有与网格同时加载，当数据最终从服务中完全填充时，数据没有初始化并显示一个空的下拉列表。当我的数据从服务返回时，我想更新组合框 columnSettings 数据源。

我尝试在 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>

Answer 1

我在这里找到了答案api documentation

然后我能够调用网格并在成功从服务器检索组合框数据后获取 columnSettings 对象。

    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;
          }
        });

      });
    }

在编辑器对话框中按需填充 iggrid 组合框列

Populate an iggrid combo box column on demand inside Editor dialog

javascript

jquery

infragistics

ignite-ui

iggrid