Forums Ignite UI for jQuery
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
Close
Michael G
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
  • 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.

Reply Children