25 function createDelElements() { |
25 function createDelElements() { |
26 $('#eventWindow').jqxWindow({ |
26 $('#eventWindow').jqxWindow({ |
27 theme: theme, |
27 theme: theme, |
28 position: { x: 490, y: 210 }, |
28 position: { x: 490, y: 210 }, |
29 width: 300, |
29 width: 300, |
30 height: 145, |
30 height: 175, |
31 resizable: false, |
31 resizable: false, |
32 isModal: true, |
32 isModal: true, |
33 modalOpacity: 0.4, |
33 modalOpacity: 0.4, |
34 okButton: $('#delOk'), |
34 okButton: $('#delOk'), |
35 cancelButton: $('#delCancel'), |
35 cancelButton: $('#delCancel'), |
44 |
44 |
45 |
45 |
46 |
46 |
47 $(document).ready(function () { |
47 $(document).ready(function () { |
48 var url = "includes/db_inventory_suppliers.php"; |
48 var url = "includes/db_inventory_suppliers.php"; |
|
49 // tooltips |
|
50 $("#name").jqxTooltip({ content: 'De naam van de leverancier.' }); |
|
51 $("#address").jqxTooltip({ content: 'Het adres en huisnummer.' }); |
|
52 $("#city").jqxTooltip({ content: 'De woonplaats of gemeente.' }); |
|
53 $("#zip").jqxTooltip({ content: 'De postcode.' }); |
|
54 $("#country").jqxTooltip({ content: 'Het land.' }); |
|
55 $("#website").jqxTooltip({ content: 'Het website adres.' }); |
|
56 $("#email").jqxTooltip({ content: 'Het email adres.' }); |
|
57 $("#phone").jqxTooltip({ content: 'Het telefoon nummer.' }); |
|
58 $("#notes").jqxTooltip({ content: 'Opmerkingen over deze leverancier.' }); |
49 // prepare the data |
59 // prepare the data |
50 var source = { |
60 var source = { |
51 datatype: "json", |
61 datatype: "json", |
52 cache: false, |
62 cache: false, |
53 datafields: [ |
63 datafields: [ |
133 source: dataAdapter, |
143 source: dataAdapter, |
134 theme: theme, |
144 theme: theme, |
135 showstatusbar: true, |
145 showstatusbar: true, |
136 renderstatusbar: function (statusbar) { |
146 renderstatusbar: function (statusbar) { |
137 var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>"); |
147 var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>"); |
138 var addButton = $("<div style='float: right; margin-right: 15px;'><img style='position: relative; margin-top: 2px;' src='images/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Add</span></div>"); |
148 var addButton = $("<div style='float: right; margin-right: 15px;'><img style='position: relative; margin-top: 2px;' src='images/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Nieuw</span></div>"); |
139 container.append(addButton); |
149 container.append(addButton); |
140 statusbar.append(container); |
150 statusbar.append(container); |
141 addButton.jqxButton({ width: 60, height: 20 }); |
151 addButton.jqxButton({ theme: theme, width: 120, height: 20 }); |
142 // add new row. |
152 // add new row. |
143 addButton.click(function (event) { |
153 addButton.click(function (event) { |
144 editrow = -1; |
154 editrow = -1; |
145 $("#popupWindow").jqxWindow({ position: { x: 230, y: 10 } }); |
155 $("#popupWindow").jqxWindow({ position: { x: 230, y: 30 } }); |
146 $("#name").val(''); |
156 $("#name").val(''); |
147 $("#address").val(''); |
157 $("#address").val(''); |
148 $("#city").val(''); |
158 $("#city").val(''); |
149 $("#zip").val(''); |
159 $("#zip").val(''); |
150 $("#country").val(''); |
160 $("#country").val(''); |
162 { text: 'Adres', datafield: 'address', width: 300 }, |
172 { text: 'Adres', datafield: 'address', width: 300 }, |
163 { text: 'Plaats', datafield: 'city', width: 250 }, |
173 { text: 'Plaats', datafield: 'city', width: 250 }, |
164 { text: 'Land', datafield: 'country', width: 250 }, |
174 { text: 'Land', datafield: 'country', width: 250 }, |
165 { text: 'Telefoon', datafield: 'phone', width: 100 }, |
175 { text: 'Telefoon', datafield: 'phone', width: 100 }, |
166 { text: 'Wijzig', datafield: 'Edit', columntype: 'button', cellsrenderer: function () { |
176 { text: 'Wijzig', datafield: 'Edit', columntype: 'button', cellsrenderer: function () { |
167 return "Edit"; |
177 return "Wijzig"; |
168 }, buttonclick: function (row) { |
178 }, buttonclick: function (row) { |
169 // open the popup window when the user clicks a button. |
179 // open the popup window when the user clicks a button. |
170 editrow = row; |
180 editrow = row; |
171 $("#popupWindow").jqxWindow({ position: { x: 230, y: 10 } }); |
181 $("#popupWindow").jqxWindow({ position: { x: 230, y: 30 } }); |
172 // get the clicked row's data and initialize the input fields. |
182 // get the clicked row's data and initialize the input fields. |
173 var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); |
183 var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); |
174 $("#name").val(dataRecord.name); |
184 $("#name").val(dataRecord.name); |
175 $("#address").val(dataRecord.address); |
185 $("#address").val(dataRecord.address); |
176 $("#city").val(dataRecord.city); |
186 $("#city").val(dataRecord.city); |