vatModule.controller('devGridController', ['$log', '$scope','$translate', function ($log, $scope, $translate) { 'use strict'; var customers = [{ "ID": 1, "CompanyName": "Super Mart of the West", "Street": "702 SW 8th Street", "City": "Bentonville", "StateID": 2, "Zipcode": 72716, "Phone": "(800) 555-2797", "Fax": "(800) 555-2171", "Website": "http://www.nowebsitesupermart.com" }, { "ID": 2, "CompanyName": "Electronics Depot", "Street": "2455 Paces Ferry Road NW", "City": "Atlanta", "StateID": 1, "Zipcode": 30339, "Phone": "(800) 595-3232", "Fax": "(800) 595-3231", "Website": "http://www.nowebsitedepot.com" }, { "ID": 3, "CompanyName": "K&S Music", "Street": "1000 Nicllet Mall", "City": "Minneapolis", "StateID": 7, "Zipcode": 55403, "Phone": "(612) 304-6073", "Fax": "(612) 304-6074", "Website": "http://www.nowebsitemusic.com" }, { "ID": 4, "CompanyName": "Tom's Club", "Street": "999 Lake Drive", "City": "Issaquah", "StateID": 6, "Zipcode": 98027, "Phone": "(800) 955-2292", "Fax": "(800) 955-2293", "Website": "http://www.nowebsitetomsclub.com" }, { "ID": 5, "CompanyName": "E-Mart", "Street": "3333 Beverly Rd", "City": "Hoffman EStateIDs", "StateID": 7, "Zipcode": 60179, "Phone": "(847) 286-2500", "Fax": "(847) 286-2501", "Website": "http://www.nowebsiteemart.com" }, { "ID": 6, "CompanyName": "Walters", "Street": "200 Wilmot Rd", "City": "Deerfield", "StateID": 3, "Zipcode": 60015, "Phone": "(847) 940-2500", "Fax": "(847) 940-2501", "Website": "http://www.nowebsitewalters.com" }, { "ID": 7, "CompanyName": "StereoShack", "Street": "400 Commerce S", "City": "Fort Worth", "StateID": 5, "Zipcode": 76102, "Phone": "(817) 820-0741", "Fax": "(817) 820-0742", "Website": "http://www.nowebsiteshack.com" }, { "ID": 8, "CompanyName": "Circuit Town", "Street": "2200 Kensington Court", "City": "Oak Brook", "StateID": 6, "Zipcode": 60523, "Phone": "(800) 955-2929", "Fax": "(800) 955-9392", "Website": "http://www.nowebsitecircuittown.com" }, { "ID": 9, "CompanyName": "Premier Buy", "Street": "7601 Penn Avenue South", "City": "Richfield", "StateID": 4, "Zipcode": 55423, "Phone": "(612) 291-1000", "Fax": "(612) 291-2001", "Website": "http://www.nowebsitepremierbuy.com" }, { "ID": 10, "CompanyName": "ElectrixMax", "Street": "263 Shuman Blvd", "City": "Naperville", "StateID": 2, "Zipcode": 60563, "Phone": "(630) 438-7800", "Fax": "(630) 438-7801", "Website": "http://www.nowebsiteelectrixmax.com" }, { "ID": 11, "CompanyName": "Video Emporium", "Street": "1201 Elm Street", "City": "Dallas", "StateID": 10, "Zipcode": 75270, "Phone": "(214) 854-3000", "Fax": "(214) 854-3001", "Website": "http://www.nowebsitevideoemporium.com" }, { "ID": 12, "CompanyName": "Screen Shop", "Street": "1000 Lowes Blvd", "City": "Mooresville", "StateID": 1, "Zipcode": 28117, "Phone": "(800) 445-6937", "Fax": "(800) 445-6938", "Website": "http://www.nowebsitescreenshop.com" }]; var states = [{ "ID": 1, "Name": "Alabama" }, { "ID": 2, "Name": "Alaska" }, { "ID": 3, "Name": "Arizona" }, { "ID": 4, "Name": "Arkansas" }, { "ID": 5, "Name": "California" }, { "ID": 6, "Name": "Colorado" }, { "ID": 7, "Name": "Connecticut" }, { "ID": 8, "Name": "Delaware" }, { "ID": 9, "Name": "District of Columbia" }, { "ID": 10, "Name": "Florida" }]; var initGrid = function () { $scope.dataGridOptions = { dataSource: customers, editing: { mode: "row", allowUpdating: true, allowDeleting: true, allowAdding: true }, columns: [ { dataField: 'ID', visible: false }, { dataField:'CompanyName', caption: 'CompanyName', cellTemplate: 'companyTemplate', editCellTemplate: function (cellElement, cellInfo) { var name = document.createElement("div"); cellElement.get(0).appendChild(name); $(name).dxTextBox({ placeholder:'Company name', valueChangeEvent: "keyup", value:cellInfo.value, onValueChanged: function (e) { cellInfo.setValue(e.value); } }); var link = document.createElement("div"); cellElement.get(0).appendChild(link); $(link).dxTextBox({ placeholder: 'Company link', valueChangeEvent: "keyup", value: cellInfo.data.Website, onValueChanged: function (e) { //data.value.replace(/\s/g, "").toLowerCase() cellInfo.data.Website=e.value; } }); } }, { caption: 'Address', alignment: 'center', columns: ['Street', 'City', { dataField: 'StateID', caption: 'State', lookup: { dataSource: states, displayExpr: "Name", valueExpr: "ID" } } ] }, "Phone", "Fax"], paging: { pageSize: 10 }, pager: { showPageSizeSelector: true, allowPageSized: [5, 10, 20], showInfo: true }, loadPanel: { enabled: true }, //scrolling: { // mode: "virtual" //}, columnChooser: { enabled: true, height: 150, width: 300, emptyPanelText: 'A place to hide the columns' }, activeStateEnabled: true, bindingOptions: { allowColumnReordering: 'allowColumnReordering', columnAutoWidth: 'autoWidth', allowColumnResizing: 'allowColumResizing' }, onEditingStart: function (info) { console.log(info); } }; }; (function () { $scope.showPanel = 1; $scope.autoWidth = true; $scope.allowColumnReordering = true; $scope.allowColumResizing = true; initGrid(); })(); }]);