jqwidgets-framework

<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tree Grid with Edit Dialog. Double-Click on a Row to Open the Edit dialog.</title> <meta name="description" content="This sample demonstrates how we can create Edit Dialog for editing rows in jQWidgets Tree Grid widget."> <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../../../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../../../scripts/demos.js"></script> <script type="text/javascript"> $(document).ready(function () { var employees = [{ "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }]; //// prepare the data var source = { dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: employees }; var dataAdapter = new $.jqx.dataAdapter(source); $("#treegrid").jqxTreeGrid( { width: getWidth("TreeGrid"), source: dataAdapter, sortable: true, altRows: true, ready: function () { // called when the jqxTreeGrid is loaded. $("#treegrid").jqxTreeGrid('expandRow', 2); $("#treegrid").jqxTreeGrid('expandRow', 5); $("#EmployeeID").jqxInput({ disabled: true, width: 150, height: 30 }); $("#Title").jqxInput({ width: 150, height: 30 }); var countries = new Array("Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burma", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Central African Republic", "Chad", "Chile", "China", "Colombia", "Comoros", "Congo, Democratic Republic", "Congo, Republic of the", "Costa Rica", "Cote d'Ivoire", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Fiji", "Finland", "France", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Greece", "Greenland", "Grenada", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Korea, North", "Korea, South", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Mongolia", "Morocco", "Monaco", "Mozambique", "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Norway", "Oman", "Pakistan", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Samoa", "San Marino", " Sao Tome", "Saudi Arabia", "Senegal", "Serbia and Montenegro", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "Spain", "Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe"); $("#Country").jqxInput({ source: countries, width: 150, height: 30 }); $("#BirthDate").jqxDateTimeInput({ formatString: 'd', width: 150, height: 30 }); $("#save").jqxButton({ height: 30, width: 80 }); $("#cancel").jqxButton({ height: 30, width: 80 }); $("#cancel").mousedown(function () { $("#dialog").jqxWindow('close'); }); $("#save").mousedown(function () { $("#dialog").jqxWindow('close'); var editRow = parseInt($("#dialog").attr('data-row')); var rowData = { EmployeeID: $("#EmployeeID").val(), Title: $("#Title").val(), Country: $("#Country").val(), BirthDate: $("#BirthDate").val() }; $("#treegrid").jqxTreeGrid('updateRow', editRow, rowData); }); $("#dialog").on('close', function () { // enable jqxTreeGrid. $("#treegrid").jqxTreeGrid({ disabled: false }); }); $("#dialog").jqxWindow({ resizable: false, width: 270, position: { left: $("#treegrid").offset().left + 75, top: $("#treegrid").offset().top + 35 }, autoOpen: false }); $("#dialog").css('visibility', 'visible'); }, columns: [ { text: 'Employee ID', editable: false, dataField: 'EmployeeID', width: 150 }, { text: 'Title', dataField: 'Title', width: 250 }, { text: 'Country', dataField: 'Country', width: 150 }, { text: 'Bith Date', dataField: 'BirthDate', cellsAlign: 'right', align: 'right', cellsFormat: 'd' } ] }); $("#treegrid").on('rowDoubleClick', function (event) { var args = event.args; var key = args.key; var row = args.row; // update the widgets inside jqxWindow. $("#dialog").jqxWindow('setTitle', "Edit Row: " + row.EmployeeID); $("#dialog").jqxWindow('open'); $("#dialog").attr('data-row', key); $("#EmployeeID").val(row.EmployeeID); $("#Title").val(row.Title); $("#Country").val(row.Country); $("#BirthDate").val(row.BirthDate); // disable jqxTreeGrid. $("#treegrid").jqxTreeGrid({ disabled: true }); }); }); </script> </head> <body class='default'> <div id="treegrid"></div> <div style="visibility: hidden;" id="dialog"> <div>Edit Dialog</div> <div style="overflow: hidden;"> <table style="table-layout: fixed; border-style: none;"> <tr> <td align="right">Employee ID: </td> <td align="left"> <input id="EmployeeID" type="text" readonly="true" disabled="disabled" /> </td> </tr> <tr> <td align="right">Title: </td> <td align="left"> <input id="Title" /> </td> </tr> <tr> <td align="right">Country: </td> <td align="left"> <input id="Country" /> </td> </tr> <tr> <td align="right">Birth Date:</td> <td align="left"> <div id="BirthDate"></div> </td> </tr> <tr> <td colspan="2" align="right"> <br /> <button id="save">Save</button> <button style="margin-left: 5px;" id="cancel">Cancel</button></td> </tr> </table> </div> </div> <div style="position: absolute; bottom: 5px; right: 5px;"> <a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a> </div> </body> </html>