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
50
IgGrid in one column, show different kinds of inputfields/Editors
posted

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

Parents
No Data
Reply
  • 485
    Offline posted

    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.

Children