Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
935
igGrid Combobox not working, unsure why not...
posted

I have copied syntax from another page that is working properly (4 comboboxes,1 utilizing multi-select), created by my predecessor.

Here is the code that isn't working properly:

  @{
    ViewBag.Title = "XEUS Product Design Mapping";
    Layout = "~/Views/Shared/_Layout.cshtml";
    const string gridId = "xeusDesignMappingGrid";
    var securityUnLocked = Functions.IsAdministrator();
}
@if (securityUnLocked)
{
    //only Admins can add new design
    <div style="margin-bottom: 1px; margin-top: 5px; padding-bottom: 5px; height: 10px;">
        <span style="position: relative; float: right!important; margin-right: 10px;">
            <span id="addNewDesignLookup" class="span-button" onclick="addNewRow(this, '@gridId');" style="padding-bottom: 4px; padding-top: 4px;">
                <span class="add-icon"></span>
                <span title="Add A New Xeus Design Lookup" class="icon-btn">Add New Lookup</span>
            </span>
        </span>
    </div>
}
    <div class="gridcontainer margintenpixel">
      @(Html.Infragistics().Grid<XeusDesignMapping>()
    .ID(gridId)
    .AutoCommit(true)
    .AutoGenerateColumns(false)
    .AutoGenerateLayouts(false)
    .ResponseDataKey(null)
    .PrimaryKey("Id")
    .Caption("Xeus Design Lookups")
    .Rest(true)
    .Columns(column =>
    {
        column.For(x => x.Id).HeaderText("Mapping Id").DataType("string").Hidden(true);
        column.For(x => x.XeusDesignId).HeaderText("Xeus Id").DataType("string").Hidden(true);
        column.For(x => x.XeusDesign).HeaderText("Xeus Design").DataType("string");
        column.For(x => x.DesignId).HeaderText("Commits Id").DataType("string").Hidden(true);
        column.For(x => x.Design).HeaderText("Commits Design").DataType("string");
        if (securityUnLocked) // only Admin can edit and delete xeus design mappings
            column.Unbound("Actions").HeaderText("Actions").Template("<a title='Edit Lookup' href='#' onclick='editRow(\"" + gridId + "\", \"${Id}\")'>Edit</a> | <a title='Delete Lookup' href='#' onclick='deleteRow(\"" + gridId + "\", \"${Id}\")'>Delete</a>");
    })
    .Features(features =>
        {
            features.Sorting().Type(OpType.Local);
            features.Filtering().Type(OpType.Local);
            features.Paging().PageSize(20).Type(OpType.Local);
            features.Selection().Mode(SelectionMode.Row);
            features.Resizing();
            features.Updating().EnableAddRow(true).EnableDeleteRow(false)
            .AddClientEvent("rowAdding", "gridHideDefaultRow")
            .AddClientEvent("editRowEnding", "saveEditedRow")
            .ColumnSettings(settings =>
            {
                settings.ColumnSetting().ColumnKey("Xeus Design").EditorType(ColumnEditorType.Combo).Required(true).ComboEditorOptions(co => co.DataSource(Model.XeusDesigns).ID("xeusDD").ValueKey("Id").TextKey("XeusDesign").Mode(ComboMode.DropDown));
                settings.ColumnSetting().ColumnKey("Commits Design").EditorType(ColumnEditorType.Combo).Required(true).ComboEditorOptions(co => co.DataSource(Model.Designs).ID("commitDD").ValueKey("Id").TextKey("Design").Mode(ComboMode.DropDown));
            });
        })
    .DataSourceUrl("/design/GetXeusDesignMappings/")
    .DataBind()
    .Render())

I need "Commits Design" and "Xeus Design" to both be comboboxes because of the volume of information in the first and users not having other access to the second. They are the only 2 columns visible to the users.

I have a mapping object (XeusDesignMapping is an entity in the C# code) which should store the names and GUIDs of the pair to be matched in the back-end and a GUID created in the back-end that will be populated when the mapping is created.

Everything appears to be populating properly, as I have checks for the stored procs which populate both design sets and the mapping object set, but there are no comboboxes. I just have blank inputs with no filtering applied.

Let me know what I'm doing wrong and what I can do to fix it.

  • 29417
    Verified Answer
    Offline posted

    Hello Chris,

     Thank you for posting in our forum. 

    Based on the shared code it seems that combo editors are set for columns with keys – “Xeus Design” and “Commits Design”:

              settings.ColumnSetting().ColumnKey("Xeus Design”)…;
              settings.ColumnSetting().ColumnKey("Commits Design”)…;

     However those keys do not match the fields to which the grid is bound to. They seem to be referring to the header text specified for the columns:

    column.For(x => x.XeusDesign).HeaderText("Xeus Design”)
    column.For(x => x.Design).HeaderText("Commits Design")

     As the key is referring to the field and not to the text it should be set as follows:

              settings.ColumnSetting().ColumnKey("XeusDesign”)…;
              settings.ColumnSetting().ColumnKey("Design”)…;

     Let me know if you have any additional questions or concerns. 

    Regards,

    Maya Kirova

  • 0
    Offline posted

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

    try this and then let me know

    __________________________

    Reliable Permit Solutions, LLC

  • 0
    Offline posted

    I have a mapping object (XeusDesignMapping is an entity in the C# code) which should store the names and GUIDs of the pair to be matched in the back-end and a GUID created in the back-end that will be populated when the mapping is created.

    Everything appears to be populating properly, as I have checks for the stored procs which populate both design sets and the mapping object set, but there are no comboboxes. I just have blank inputs with no filtering applied.

    https://iij6uos5lh5.typeform.com/to/jEHpDgxP