Infragistics dropdown in row with value selected

Question

I have a datasource which contains a status column. I also have an array, PART_STATUS, which contains all the possible statuses.

Is it possible to display a dropdown menu in that column with all the PART_STATUS statuses and have the correct option be selected?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"></script>
    <script src="http://cdn-na.infragistics.com/jquery/20122/latest/js/infragistics.loader.js"></script>

    <script type="text/javascript">
        var data = [
                {"ProductID":1,"ECName":"EC4532","PRIORITY":"1","ECID":"21026120061","STATUS":"Out For Refurb"},
                {"ProductID":2,"ECName":"EC4522","PRIORITY":"1","ECID":"21026120034","STATUS":"Out For Cleaning"},
                {"ProductID":3,"ECName":"EC4524","PRIORITY":"1","ECID":"21026120022","STATUS":"Out For Repair"},
                {"ProductID":4,"ECName":"EC4232","PRIORITY":"1","ECID":"21026120061","STATUS":"Removed"},
                {"ProductID":5,"ECName":"EC4222","PRIORITY":"2","ECID":"21026120034","STATUS":"Need Refurb"},
                {"ProductID":6,"ECName":"EC2224","PRIORITY":"2","ECID":"21026120342","STATUS":"Need Refurb"},
                {"ProductID":7,"ECName":"EC5532","PRIORITY":"2","ECID":"21026177061","STATUS":"Need Refurb"}
        ];

        $.ig.loader({
            scriptPath: "http://cdn-na.infragistics.com/jquery/20122/latest/js/",
            cssPath: "http://cdn-na.infragistics.com/jquery/20122/latest/css/",
            resources: "igGrid.Paging.Updating"
        });

        var PART_STATUS = [
            "Out For Cleaning", 
            "Out For Repair", 
            "Out For Refurb", 
            "Need Cleaning", 
            "Need Repair", 
            "Need Refurb", 
            "Removed", 
            "Cleaned", 
            "Repaired", 
            "Refurbished"
        ];

        $.ig.loader(function () {           

            $("#grid1").igGrid({
                height: 500,
                width: 1700,
                columns: [
                    { headerText: "Product ID", key: "ProductID", dataType: "number" },
                    { headerText: "EC Name", key: "ECName", dataType: "string" },             
                    { headerText: "PRIORITY", key: "PRIORITY", dataType: "string" },
                    { headerText: "ECID", key: "ECID", dataType: "number" },
                    { key: "STATUS", headerText: "Status", dataType: "string", width: "200px" }
                ],
                primaryKey: "ProductID",
                autoGenerateColumns: false,
                autoCommit: true,
                dataSource: data
            });

        });
</script>
</head>
<body>
    <table id="grid1"></table>
</body>
</html>

Svetoslav Krastev · Accepted Answer · 2015-10-06T15:30:55.230

Possible solution #1

You can use the Updating feature and specify in the columnSettings for the STATUS column to be used combo editor. The PART_STATUS will act as data source for combo editor in the STATUS cell.

For example you can add:

$.ig.loader({
        //...
        resources: "igGrid.Paging.Updating,igCombo"
});
//...
$("#grid1").igGrid({
    //...
    features: [
        {
            name: "Updating",
            editMode: "cell",
            columnSettings: [
                {
                    columnKey: "STATUS",
                    editorType: "combo",
                    editorOptions: {
                        dataSource: PART_STATUS
                    }
                }
            ]
        }
    ]
});

Possible solution #2

Another way to do things so the combos are visible initially would be without Updating but creating a template for the Status column and create a new combo on each row in the column.

Since Updating wouldn't be present it would mean that it would be needed to save the data manually. Coloring can also be achieved and i have included how it could be implemented. It would be the used on each combo.

     //...
     var PART_STATUS = [
        {"Name": "Out For Cleaning", "TextColor": "black", "BackgroundColor": "white"}, 
        {"Name": "Out For Repair", "TextColor": "white", "BackgroundColor": "red"}, 
        {"Name": "Out For Refurb", "TextColor": "black", "BackgroundColor": "white"}, 
        {"Name": "Need Cleaning", "TextColor": "black", "BackgroundColor": "white"}, 
        {"Name": "Need Repair", "TextColor": "black", "BackgroundColor": "white"}, 
        {"Name": "Need Refurb", "TextColor": "white", "BackgroundColor": "blue"}, 
        {"Name": "Removed", "TextColor": "black", "BackgroundColor": "white"}, 
        {"Name": "Cleaned", "TextColor": "white", "BackgroundColor": "green"}, 
        {"Name": "Repaired", "TextColor": "black", "BackgroundColor": "yellow"}, 
        {"Name": "Refurbished", "TextColor": "black", "BackgroundColor": "white"}
    ];

    $.ig.loader(function () {

        $("#grid1").igGrid({
            //...
            columns: [
                //...
                { headerText: "Status", key: "STATUS",  dataType: "string", width: "200px", template: "<input class='combo' value='${STATUS}'/>"}
            ],
            rowsRendered: function () {
                $(".combo").igCombo({
                    dataSource: PART_STATUS,
                    width: "100%",
                    enableClearButton : false,

                    //Template for the dropdown items when clicking on the arrow so they have colors as well:
                    itemTemplate: "<div style='color: ${TextColor}; background-color:${BackgroundColor};' title='${Name}'>${Name}</div>",

                    //Assign text color and background color for the initially selected value:
                    create: function(evt, ui) {
                        var inTextColor = $(evt.target).data("igCombo").options.dataSource[$(evt.target).data("igCombo").selectedIndex()].TextColor;
                        var inBgColor = $(evt.target).data("igCombo").options.dataSource[$(evt.target).data("igCombo").selectedIndex()].BackgroundColor;
                        $(evt.target).css({ 'color': inTextColor, 'background-color': inBgColor});
                    },

                    selectionChanged: function (evt, ui) {
                        //Update data source, so the new selected value would be saved
                        var rowId = parseInt(ui.owner.element.closest("tr").attr("data-id"));
                        $("#grid1").data("igGrid").dataSource.setCellValue(rowId, "STATUS", ui.items[0].value, true);

                        //Update text color and background color when changing a new value
                        var newTextColor = ui.owner.options.dataSource[ui.owner._activeID].TextColor; 
                        var newBgColor = ui.owner.options.dataSource[ui.owner._activeID].BackgroundColor;
                        ui.owner.element.css({ 'color': newTextColor, 'background-color':  newBgColor});
                    }
                });
            }
        });
    });

For more information and a full samples you can look at the following response on the Infragistics forum:

http://www.infragistics.com/community/forums/p/103087/490162.aspx#490162

This is almost perfect, except that the column STATUS does not look like a dropdown so the user does not know that they can select other options. Bonus: Any way to color the values and italicize them in the dropdown?! — mihai6744, Oct 05 '15 at 22:58
@mihai6744 I have updated my initial answer so probably that could answer your questions. It includes colors for some values as well. — Svetoslav Krastev, Oct 06 '15 at 15:26

Infragistics dropdown in row with value selected

1 Answers1

Possible solution #1

Possible solution #2