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
William Reyes
420
RowEditDialog - Setting input widths
posted

How can I change the width of my input fields to allow one of the fields to be multi-line and have a width that spans the length of the table?

I have tried editing the html.

<script id="dialogTemplate" type="text/html">
<div style='float: left; width: 100%'>
<strong>${Name}</strong><br />
<table style='width: 700px;'>
<colgroup>
<col style='width: 30%;' />
<col style='width: 200%;' />
</colgroup>
<tbody data-render-tmpl="true"></tbody>
</table>
</div>
</script>

<script id="editorsTemplate" type="text/html">
<tr>
<td style='color: black;'>${headerText}</td>
<td ><input data-editor-for-${key}="true" style='color: black; width: 1000px;' /></td>
</tr>
</script>

Nothing seems to make a difference.

  • 485
    Verified Answer
    Offline posted

    Hello William,

     

    Thank you for posting in our forum.

    The Grid Updating API exposes several options that allow you to customize the preferences of the editors for the different grid columns. You could check the provided code sample - the rowEditDialogOptions allow me to customize the editing dialog and I have used it to set its width to 600px. I have also used the columnSettings option to set custom width, height and “multiline” text mode to the editor for the Category Name column via its “editorOptions”.

    dialog image

     

    <!DOCTYPE html>
<html>
<head>
    <title>Sample</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2017.2/latest/js/infragistics.loader.js"></script>
</head>
<body>
    <table id="grid"></table>
    <script>
        $.ig.loader({
			scriptPath: "http://cdn-na.infragistics.com/igniteui/2017.2/latest/js/",
			cssPath: "http://cdn-na.infragistics.com/igniteui/2017.2/latest/css/",
			resources: "igGrid.*",		
            ready: function () {
                let ds = [
                { "ProductID": 1, "ProductName": "Chai", "CategoryName": "Beverages", "InStock": 39 },
                { "ProductID": 2, "ProductName": "Chang", "CategoryName": "Beverages", "InStock": 17 },
                { "ProductID": 3, "ProductName": "Aniseed Syrup", "CategoryName": "Condiments", "InStock": 13 },
                { "ProductID": 4, "ProductName": "Chef Anton\u0027s Cajun Seasoning", "CategoryName": "Condiments", "InStock": 53 },
                { "ProductID": 5, "ProductName": "Chef Anton\u0027s Gumbo Mix", "CategoryName": "Condiments", "InStock": 0 },
                { "ProductID": 6, "ProductName": "Grandma\u0027s Boysenberry Spread", "CategoryName": "Condiments", "InStock": 120 },
                { "ProductID": 7, "ProductName": "Uncle Bob\u0027s Organic Dried Pears", "CategoryName": "Produce", "InStock": 15 },
                { "ProductID": 8, "ProductName": "Northwoods Cranberry Sauce", "CategoryName": "Condiments", "InStock": 6 },
                { "ProductID": 9, "ProductName": "Mishi Kobe Niku", "CategoryName": "Meat/Poultry", "InStock": 29 },
                ]
                $("#grid").igGrid({
                    dataSource: ds,
                    responseDataKey: "results",
                    autoGenerateColumns: false,
                    primaryKey: "ProductID",
                    autoCommit: true,
                    columns: [
                        { headerText: "Product ID", key: "ProductID", dataType: "number", hidden: true},
                        { headerText: "Product Name", key: "ProductName", dataType: "string", width: "35%"},
                        { headerText: "Category", key: "CategoryName", dataType: "string", width: "35%"},
                        { headerText: "Units In Stock", key: "InStock", dataType: "number", width: "30%",}
                    ],
                    features: [
                        {
                            name: "Updating",
                            editMode: "dialog",
                            rowEditDialogOptions: {
                                width: "600px"
                            },
                            columnSettings: [
                                {
                                    columnKey: "CategoryName",
                                    editorOptions: {
                                        height: 100,
                                        width: 400,
                                        textMode: "multiline"
                                    }
                                }
                            ]
                        }
                    ]
                });
            }
        });
     </script>
</body>
</html>

     

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