IgGrid in one column, show different kinds of inputfields/Editors

Michael G posted over 5 years ago

Hello community,
i want to hava a column in an iggrid, which is in same cases a dropdown menu in other cases an input text field.

Lets say there is table with the columns "Property" and "Value":

Property | Value

---------------------------------------------------

Currency | $

Count of something | 31242

For the first row it makes sense to use a dropdown list, which shows the user only valid input values, the count is limited.

For the second row you can not use a dropdown list because there is no limit of possible items of the list, the user has to enter a number with the keyboard.

So is there a way, to customize one column, so this column can be a dropdown list and sometimes an input text field?

Hopefully someone can give me a hint, because I have no idea how to start with this, I am happy for any kind of support.
BR

Top Replies

485

Offline Vasil Pavlov posted over 5 years ago +1
Hello Michael, You could use a conditional template to create two different spans based on the condition you want to check. Then handle the rowsRendered...view reply »

Parents

485

Offline Vasil Pavlov posted over 5 years ago

Hello Michael,

You could use a conditional template to create two different spans based on the condition you want to check. Then handle the rowsRendered event that the grid raises each time it re-renders and initialize the appropriate editors. If you use the Infragistics editors instead of a regular text input and dropdown, you would benefit by having some options at your disposal that we provide you out-of-the-box.

Please check the code sample below: I have used an igCombo editor with some dummy data for the dropdown and an igTextEditor for the input. Inside the conditional template I assign two different classes to the rows spans so I could select them with jQuery and initialize the appropriate editors:

<!DOCTYPE html>
<html>
<head>
    <title>Sample</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.loader.js"></script>
</head>
<body>
    <div style="margin: auto; width:1000px;">
        <table id="grid"></table>
    </div>
    <script>
        $.ig.loader({
			scriptPath: "http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/",
			cssPath: "http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/",
			resources: "igGrid.*, igCombo",
            ready: function () {
                
                let ds = [
                { "Type": "Currency", "ProductID": 1, "ExpiryDate": 'December 17, 2018 03:24:00', "ProductName": "Chai", "CategoryName": "Beverages", "InStock": 39 },
                { "Type": "Count", "ProductID": 2, "ExpiryDate": 'November 15, 2018 03:24:00', "ProductName": "Chang", "CategoryName": "Beverages", "InStock": 17 },
                { "Type": "Count", "ProductID": 3, "ExpiryDate": 'April 14, 2018 03:24:00', "ProductName": "Aniseed Syrup", "CategoryName": "Condiments", "InStock": 13 },
                { "Type": "Count", "ProductID": 4, "ExpiryDate": 'April 15, 2018 03:24:00', "ProductName": "Chef Anton\u0027s Cajun Seasoning", "CategoryName": "Condiments", "InStock": 53 },
                { "Type": "Currency", "ProductID": 5, "ExpiryDate": 'Febriary 27, 2018 03:24:00', "ProductName": "Chef Anton\u0027s Gumbo Mix", "CategoryName": "Condiments", "InStock": 0 },
                { "Type": "Currency", "ProductID": 6, "ExpiryDate": 'October 10, 2018 03:24:00', "ProductName": "Grandma\u0027s Boysenberry Spread", "CategoryName": "Condiments", "InStock": 120 },
                { "Type": "Count", "ProductID": 7, "ExpiryDate": 'June 12, 2018 03:24:00', "ProductName": "Uncle Bob\u0027s Organic Dried Pears", "CategoryName": "Produce", "InStock": 15 },
                { "Type": "Count", "ProductID": 8, "ExpiryDate": 'May 21, 2018 03:24:00', "ProductName": "Northwoods Cranberry Sauce", "CategoryName": "Condiments", "InStock": 6 },
                { "Type": "Count", "ProductID": 9, "ExpiryDate": 'May 16, 2018 03:24:00', "ProductName": "Mishi Kobe Niku", "CategoryName": "Meat/Poultry", "InStock": 29 },
                { "Type": "Currency", "ProductID": 10, "ProductName": "Mishi Kobe Niku", "CategoryName": "Meat/Poultry", "InStock": 29 },
                ]

                let template = '{{if${Type} == "Currency"}}<span><input class="textTarget"></span>{{else}}<span class="comboTarget"></span>{{/if}}'
    
                let comboDataSource = [
                    { "Name": "Item 1" },
                    { "Name": "Item 2" },
                    { "Name": "Item 3" },
                ]
                
                $("#grid").igGrid({
                    dataSource: ds,
                    responseDataKey: "results",
                    primaryKey: "ProductID",
                    width: '1000px',
                    rowsRendered: function(evt, ui){
                        $(".comboTarget").igCombo({
                            dataSource: comboDataSource,
                            textKey: "Name",
                            valueKey: "Name",
                            autoComplete: true
                        })
                        $(".textTarget").igTextEditor({
                            placeHolder: "New text here"
                        })
                    },
                    columns: [
                        { headerText: "Product ID", key: "ProductID", dataType: "number", width: "15%", hidden: true},
                        { headerText: "Product Name", key: "ProductName", dataType: "string", width: "200px"},
                        { headerText: "Conditional Column", key: "Type", dataType: "string", width: "215px", template: template},
                        { headerText: "Expiry Date", key: "ExpiryDate", dataType: "date", width: "200px"},
                        { headerText: "Category", key: "CategoryName", dataType: "string", width: "200px"},
                        { headerText: "Units In Stock", key: "InStock", dataType: "number", width: "20px"}
                    ],
                    features: [
                        {
                            name: "Sorting"
                        },
                        {
                            name: "Filtering",
                            mode: "advanced"
                        }
                    ]
                })
            }
        })
    </script>
</body>
</html>

These articles explain the Templating engine in more detail:

https://www.igniteui.com/help/creating-templates

https://www.igniteui.com/help/creating-conditional-template-containing-default-statement

You could find overviews of the igCombo and igTextEditor, along with details on their options here:

https://www.igniteui.com/help/api/2018.1/ui.igcombo

https://www.igniteui.com/help/api/2018.1/ui.igtexteditor

If you need any additional assistance, feel free to contact me.

50

Offline Michael G posted over 5 years ago in reply to Vasil Pavlov

Hello Vasil Pavlov,
thank you a lot for your post. It solves all my problems, very good example and hyperlinks
Cancel
Reply

Cancel
485

Offline Vasil Pavlov posted over 5 years ago in reply to Michael G

Hello Michael,

I am glad that you were able to achieve your requirement according to my suggestion.

Please let me know if you have any additional questions regarding this matter.
Cancel
Reply

Cancel
50

Offline Michael G posted over 5 years ago in reply to Vasil Pavlov

Thank you a lot,
I have one question left.
Currently the GUI is working very well, in my grid one column has numeric editors, combo and checkox editors.
My problem is the connection of this editors and the grid. When i change the state of the checkbox, the checkbox change the value, but how will this change the value in the datasource of my grid?
I tried already to update the datasource with the event "valueChanged" of the Checkbox editor. But when I change the values of the datasource, the array of datasource.pendingTransactions() is still empty. I used the updateRow function of the datasource for the changing the value.
What is the best way to let the editors deal with the grid/datasource?
Cancel
Reply

Cancel

Reply

485

Offline Vasil Pavlov posted over 5 years ago in reply to Michael G

Hello Michael,

By design the igGrid supports a single datatype per column and creates the editors corresponding to this datatype. Setting different editors per row in a single column is custom solution and I would appreciate if you provide some more details about your scenario so I could give you a more precise answer:

The setCellValue method from the igGridUpdating API could be used to set a new value to a given cell. Are you using it inside the valueChanged event handler? Also how do you bind the editors' event handlers and handle the user input?

The data gets transformed when the grid dataBinds – according to the dataSchema. What dataType have you set for the custom column and what types of values do you want it to contain? If there are several different types, it might be a good idea to use dataType “object” (it doesn’t get transformed when the grid binds). Providing some more details on why you need 3 different types of editors and values in a single column would be much appreciated.

If you need any additional assistance, feel free to contact me.
Cancel
Reply

Cancel

Children

50

Offline Michael G posted over 5 years ago in reply to Vasil Pavlov

Thank you a lot.
I was on the right track, the updateRow method of the igDataSource did the job.
The only thing I had changed was the autoCommit:bool set to false.
Now the stuff is in the transaction log
Cancel
Reply

Cancel
485

Offline Vasil Pavlov posted over 5 years ago in reply to Michael G

Hello Michael,

I am glad that your dataSource now gets updated correctly.

Please let me know if you need any additional information regarding this matter.
Cancel
Reply

Cancel