Hi ecatenate,

I want to update you that I am continuing to look at this issue. I need to do some further checking into this and will have an update on or before Tuesday.

Hi ecatenate,

For an example of applying the combo to be used as filter for the grid, replacing the editor initially assigned, you can consider this code: (the most relevant piece (replaceComboFilterEditor() is further below)

<script type="text/javascript">

    var dataSourceStr = "productsInventories";
        function createOptions()
        {
           var fields = ["width", "height", "defaultColumnWidth", "caption"];
           var checkBoxes = ["autoCommit", "virtualization", "autoGenerateColumns", "autoGenerateLayouts", "fixedHeaders"];
           var featuresCheckBoxes = ["Resizing", "Hiding", "GroupBy", "Filtering", "Paging", "Selection", "Sorting", "Summaries",
                "Tooltips", "Updating", "RowSelectors"]
           var options = {
                initialDataBindDepth: 1,
          dataSource: eval(dataSourceStr),
          dataSourceType: 'json',
          responseDataKey: "Records",
          loadOnDemand: false,
                primaryKey: "ProductID",

          autoGenerateColumns: false,
          autoGenerateLayouts: false,
          columns: [
     { key: "ProductID", headerText: 'Product ID', width: "100px",  "dataType": "number" },
     { key: "Name", headerText: 'Product Name', width: "250px", dataType: "string" },
     { key: "ProductNumber", headerText: 'Product Number', dataType: "string", width: "150px" },
     { key: "Color", headerText: 'Color', dataType: "string", width: "100px" },
    ],
          columnLayouts: [
     {
         //  Define looks and behavior for the second level in the hierarchy
         key: "ProductInventories",
         responseDataKey: "Records",
         autoGenerateColumns: false,
         generateCompactJSONResponse: false,
         primaryKey: "ProductID,LocationID",
         foreignKey: "ProductID",
         columns: [
       { key: "ProductID", headerText: 'Product ID',  "dataType": "number", width: "130px" },
       { key: "LocationID", headerText: 'Address ID', "dataType": "number", width: "130px" },
       { key: "Shelf", headerText: 'Shelf', width: "100px" },
       { key: "Bin", headerText: 'Bin', width: "60px" },
       { key: "Quantity", headerText: 'Quantity', width: "80px" }
      ],
                        features: [ ]
     },
    ],
          features:[ {name:"Filtering", "mode":"simple"} ],
            }
            for (var i = 0; i < fields.length;++i)
            {
                if ($("#" + fields[i]).val() != "") {
                    options[fields[i]] = $("#" + fields[i]).val();
                }
            }
            for (var i = 0; i < checkBoxes.length;++i)
            {
                if ($("#" + checkBoxes[i]).is(':checked')) {
                    options[checkBoxes[i]] = true;
                }
            }
            for (var i = 0; i < featuresCheckBoxes.length;++i)
            {
                if ($("#" + featuresCheckBoxes[i]).is(':checked')) {
                    options.features.push({name: featuresCheckBoxes[i]})
                    for (var j = 0; j < options.columnLayouts.length;++j) {
                        options.columnLayouts[j].features.push({name: featuresCheckBoxes[i]})
                    }
                   
                }
            }
            var output = $.extend({}, options);
            output["dataSource"] = dataSourceStr;
            output = JSON.stringify(output, null, "\t")
            output = output.replace('"'+dataSourceStr+'"', dataSourceStr);
            $("#options").val(output);
            return options;
        }
        function createGrid(options)
        {
            if ($("#hierarchical").is(':checked')) {
               $("#grid1").igHierarchicalGrid(options);  
               isHierarchical = true;
            } else {
               $("#grid1").igGrid(options);  
               isHierarchical = false;
            }
        }
        function destroyGrid()
        {
            if ($("#grid1").attr("class") && $("#grid1").attr("class").indexOf("ui-iggrid-root") !== -1) {
                $("#grid1").igHierarchicalGrid("destroy");
            } else {
                $("#grid1").igGrid("destroy");
            }
        }

function replaceComboFilterEditor() {
   $($('tr[data-role="filterrow"] td')[0]).children().hide()
   $($('tr[data-role="filterrow"] td')[0]).append("<div id='filterUserRoleCombo'></div>");

   $("#filterUserRoleCombo").igCombo({

    dataSource: [{"Name":"One", "Value":"1"}],

    textKey:"Name",

    valueKey:"Value",

    mode:"dropdown",

    width:"100%",

    selectionChanged:

    function (evt, ui) {

       var expressions = $("#grid1").data("igGrid").dataSource.settings.filtering.expressions;

       $("#grid1").data("igGrid").dataSource.settings.filtering.expressions = [];

       var newExpressions = [];

       if (expressions.length !== 0) {

        for (var i = 0; i < expressions.length; i++) {

         if (expressions[i].fieldName !== "ProductID") {

        newExpressions.push({

         fieldName: expressions[i].fieldName,

         expr: expressions[i].expr,

         cond: expressions[i].cond

        });

       }

      }

     }
     if ((ui.items !== null) && (ui.items.length === 1)) {

      newExpressions.push({

       fieldName:"ProductID",

       expr: parseInt(ui.items[0].value),

       cond:"equals"

      });
     }
     setTimeout(function() {
      $("#grid1").igGridFiltering("filter", newExpressions);
     }, 100);
    }
   });
  }

In my example I call to assign the igCombo with a button click:

$("#button2").button().bind("click", function (evt) {
       evt.preventDefault();
                destroyGrid();
                options = $("#options").val();
                options = options.replace(dataSourceStr, "\"" + dataSourceStr + "\"");
                options = jQuery.parseJSON( options );
               

                options["dataSource"] = eval(options["dataSource"]);
                createGrid( options );
      });

            createGrid(createOptions());
            replaceComboFilterEditor();

});

</script>

Please let me know if you need any additional assistance regarding this matter.

Martin,

I figured out how to get the combo box to display finally within a grid created in MVC by doing the following below.  My next question is how can I take the distict values already populated in the column and use in the newly created dropdown.  Additionally, how can this be done on the advance filter because the current solution only works for simple filtering.

$("#igGrid1").live("iggridrendered",function(event,ui)

{

    //Code to change from text box to combo box.

});

I saw that post but for some reason I cannot get it to work with a grid within a MVC view.  How do I customize the filter to to be a dropdown and take the distinct values within that column and prepopulate the drop down with them to be used to filter on the grid.  Any help is greatly appreciated.

@( Html.Infragistics().Grid<Models.Items>().ID("igGrid1")

.Columns(column.For(x => x.Category).HeaderText(

"Category").Width("150"

);

.Features(features =>

{

features.Filtering().Mode(FilterMode.Advanced).AdvancedModeEditorsVisible(true).FilterDialogMaxFilterCount("20").FilterDialogWidth("600").FilterDialogColumnDropDownDefaultWidth("175").FilterDialogFilterDropDownDefaultWidth("150").FilterDialogExprInputDefaultWidth("200").Type(OpType.Local).CaseSensitive(false).ColumnSettings(settings =>

{

settings.ColumnSetting().AllowFiltering(true);

});

});

})

.JQueryTemplating(

true

)

.ClientDataSourceType(

ClientDataSourceType

.JSON)

.DataSourceUrl(Url.Action(

"RetrieveItems", new

{ methodology = Model.Methodology, task = Model.Task, inputoutputid = Model.InputOutputId, category = Model.Category, clientfunction = Model.ClientFunction, sector = Model.Sector, omf = Model.OMF, module = Model.Module, gridfilter = Model.GridFilter, includegeneric = Model.IncludeGeneric }))

.AutoGenerateLayouts(

false

)

.HtmlAttributes(

new System.Collections.Generic.Dictionary<string, object>() { { "style", "font-size: 11px;"

} })

.RowVirtualization(

true

)

.VirtualizationMode(

VirtualizationMode

.Fixed)

.Height(

"400"

)

.Width(

"980"

)

.MergeUnboundColumns(

false

)

.GenerateCompactJSONResponse(

false

)

.LocalSchemaTransform(

false

)

.GenerateCompactJSONResponse(

false

)

.DataBind()

.Render()

)

I take that back it is able to find 'tr[data-role="filterrow"] td')[0] but it is not able to append the div for the combo filter.  Instead I am getting a 'Object[object Object] has no method igCombo' error message

I tried this example and it does not seem to work.  Should this work for advance filtering?  I tried to do this for simple filtering with a igGrid in MVC and it does not seem to find 'tr[data-role="filterrow"] td' to appedn the 'filterUserRoleCombo div