jQWidgets Forums
Forum Replies Created
Viewing 6 posts - 1 through 6 (of 6 total)
-
Author
-
August 4, 2016 at 3:19 am in reply to: jqxchart live update and range selector jqxchart live update and range selector #86291
Hi Zhulev,
Thank you for your prompt reply and the demo.
Do you know how to convert your demo of live-update-chart every second with range selector to live-update-chart every 100 ms with range selector?
Or maybe you have other example for that?
Many thanks
June 28, 2016 at 6:35 am in reply to: angular material menu bar is behind grid's header angular material menu bar is behind grid's header #85462Hi Hristo,
I had increased the z-index of md-menu, and it would not work if I didn’t set a value to jqx-docking-layout.
If I set a value to jqx-docking-layout, it will work but with another problem.
The float windows of jqx-docking-layout will not be able to dock back to layout because the z-index is upper than layout.
How can I solve this problem
June 27, 2016 at 7:29 am in reply to: angular material menu bar is behind grid's header angular material menu bar is behind grid's header #85429Here is my code
html <body> <div ng-controller="AppCtrl" > <md-toolbar class="sidebar"> <div > <md-toolbar-filler layout layout-align="left center"> </md-toolbar-filler> <div> <md-menu-bar> <md-menu> <button ng-click="$mdOpenMenu()"> File </button> <md-menu-content> <md-menu-item> <md-button ng-click="ctrl.sampleAction('share', $event)"> Share... </md-button> </md-menu-item> <md-menu-divider></md-menu-divider> <md-menu-item> <md-menu> <md-button ng-click="$mdOpenMenu()">New</md-button> <md-menu-content> <md-menu-item><md-button ng-click="ctrl.sampleAction('New Document', $event)">Document</md-button></md-menu-item> <md-menu-item><md-button ng-click="ctrl.sampleAction('New Spreadsheet', $event)">Spreadsheet</md-button></md-menu-item> <md-menu-item><md-button ng-click="ctrl.sampleAction('New Presentation', $event)">Presentation</md-button></md-menu-item> <md-menu-item><md-button ng-click="ctrl.sampleAction('New Form', $event)">Form</md-button></md-menu-item> <md-menu-item><md-button ng-click="ctrl.sampleAction('New Drawing', $event)">Drawing</md-button></md-menu-item> </md-menu-content> </md-menu> </md-menu-item> <md-menu-item> <md-button type="file" on-read-file="showContent($fileContent)" ng-click="$mdMenu.hide()"> Select a file <input type="file" nv-file-select uploader="$ctrl.uploader"> <span class="md-alt-text"> {{ 'M-O' | keyboardShortcut }}</span> </md-button> </md-menu-item> <md-menu-item> <md-button disabled="disabled" ng-click="ctrl.sampleAction('Rename', $event)"> Rename </md-button> </md-menu-item> <md-menu-divider></md-menu-divider> <md-menu-item> <md-button ng-click="ctrl.sampleAction('Print', $event)"> Print <span class="md-alt-text">{{ 'M-P' | keyboardShortcut }}</span> </md-button> </md-menu-item> </md-menu-content> </md-menu> <md-menu> <button ng-click="$mdOpenMenu()"> Edit </button> <md-menu-content> <md-menu-item class="md-indent"> <md-button ng-click="ctrl.sampleAction('undo', $event)"> Undo <span class="md-alt-text">{{ 'M-Z' | keyboardShortcut }}</span> </md-button> </md-menu-item> <md-menu-item class="md-indent"> <md-button ng-click="ctrl.sampleAction('redo', $event)"> Redo <span class="md-alt-text">{{ 'M-Y' | keyboardShortcut }}</span> </md-button> </md-menu-item> <md-menu-divider></md-menu-divider> <md-menu-item class="md-indent"> <md-button ng-click="ctrl.sampleAction('cut', $event)"> Cut <span class="md-alt-text">{{ 'M-X' | keyboardShortcut }}</span> </md-button> </md-menu-item> <md-menu-item class="md-indent"> <md-button ng-click="ctrl.sampleAction('copy', $event)"> Copy <span class="md-alt-text">{{ 'M-C' | keyboardShortcut }}</span> </md-button> </md-menu-item> <md-menu-item class="md-indent"> <md-button ng-click="ctrl.sampleAction('paste', $event)"> Paste <span class="md-alt-text">{{ 'M-P' | keyboardShortcut }}</span> </md-button> </md-menu-item> <md-menu-divider></md-menu-divider> <md-menu-item class="md-indent"> <md-button ng-click="ctrl.sampleAction('Find and replace', $event)"> Find and replace... <span class="md-alt-text">{{ 'M-S-H' | keyboardShortcut }}</span> </md-button> </md-menu-item> </md-menu-content> </md-menu> </md-menu-bar> </div> </div> </md-toolbar> <div id = "jqxWidget"> <jqx-docking-layout jqx-settings="settings" id="jqxLayout" keyboardNavigation = "true" > <div data-container="SymbolExplorerPanel" > <div id="jqxTree" style="border: none;"> </div> <div id='jqxMenu' style="visibility: hidden;" > <ul> <li>Properties</li> <li>Remove Item</li> </ul> </div> </div> <!--documentGroup--> <div data-container="CanPanel" > <div> <table class="table"> <tr> <th>ID</th> <th>Data</th> </tr> <tr> <td><input class="form-control" id="id" name="id" maxlength="9"/></td> <td><input class="form-control" id="data1" name="data1" maxlength="3"/></td> <td><input class="form-control" id="data2" name="data2" maxlength="3"/></td> <td><input class="form-control" id="data3" name="data3" maxlength="3"/></td> <td><input class="form-control" id="data4" name="data4" maxlength="3"/></td> <td><input class="form-control" id="data5" name="data5" maxlength="3"/></td> <td><input class="form-control" id="data6" name="data6" maxlength="3"/></td> <td><input class="form-control" id="data7" name="data7" maxlength="3"/></td> <td><input class="form-control" id="data8" name="data8" maxlength="3"/></td> <td><button class="btn btn-primary" id="save" >ADD </button></td> <td><button class="btn btn-primary" id="delete" >Delete </button></td> </tr> </table> <div id="jqxgrid" ></div> </div> </div> <!--bottom tabbedGroup--> <div data-container="ReceivePanel"> <div id="jqxgrid1"></div> </div> </jqx-docking-layout> <div id="window"> <div id="windowHeader"> <span> Properties </span> </div> <div id="splitter"> <div style="overflow: hidden;"> <div style="border: none;" id="listbox"> </div> </div> <div style="overflow: hidden;" id="ContentPanel"> </div> </div> </div> </div> </div> </body>js angular.module('exampleApp') .controller('AppCtrl',['$scope', '$http','$interval', 'uiGridGroupingConstants','socket', function($scope,$http,socket) { $scope.layout = [{ type: 'layoutGroup', orientation: 'horizontal', items: [{ type: 'tabbedGroup', width: 200, items: [{ type: 'layoutPanel', title: 'Symbol Explorer', contentContainer: 'SymbolExplorerPanel' }] }, { type: 'layoutGroup', orientation: 'vertical', width: 1000, items: [{ type: 'tabbedGroup', height: 600, minHeight: 200, items: [{ type: 'layoutPanel', title: 'CanServer', contentContainer: 'CanPanel', initContent: function(){ var source = { datatype: "array", datafields: [ { name: 'can_id', type: 'number' }, { name: 'type', type: 'string' }, { name: 'length', type: 'number' }, { name: 'data', type: 'number' } ], pager: function (pagenum, pagesize, oldpagenum) { // callback called when a page or page size is changed. } }; var dataAdapter = new $.jqx.dataAdapter(source); $("#jqxgrid").jqxGrid( { width: '100%', source: dataAdapter, columnsresize: true, pageable: true, pagermode: 'default', sortable: true, //showfilterrow: true, filterable: true, groupable: true, selectionmode: 'checkbox', //theme: "shinyblack", columns: [ { text: 'CAN_ID', datafield: 'can_id', width: '20%' }, { text: 'Type', datafield: 'type', width: '25%' }, { text: 'Length', datafield: 'length', width: '10%'}, { text: 'Data', datafield: 'data', width: '42%' } ] }); $("#save").on('click', function () { add(); }); $("#delete").on('click', function () { var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindexes'); var rowIds = new Array(); for (var i = 0; i < selectedrowindex.length; i++) { var del_id = $('#jqxgrid').jqxGrid('getrowdata', selectedrowindex[i]).can_id; console.log(del_id); var currentId = $('#jqxgrid').jqxGrid('getrowid', selectedrowindex[i]); rowIds.push(currentId); del(del_id); } $('#jqxgrid').jqxGrid('deleterow', rowIds); $('#jqxgrid').jqxGrid('clearselection'); }); } }] }, { type: 'tabbedGroup', height: 400, pinnedHeight: 30, items: [{ type: 'layoutPanel', title: 'Receive', contentContainer: 'ReceivePanel', initContent: function(){ var source = { datatype: "array", datafields: [ { name: 'can_id', type: 'number' }, { name: 'type', type: 'string' }, { name: 'length', type: 'number' }, { name: 'data', type: 'number' } ], pager: function (pagenum, pagesize, oldpagenum) { // callback called when a page or page size is changed. } }; var dataAdapter = new $.jqx.dataAdapter(source); $("#jqxgrid1").jqxGrid( { width: '100%', source: dataAdapter, columnsresize: true, //pageable: true, //pagermode: 'default', sortable: true, filterable: true, groupable: true, selectionmode: 'checkbox', //theme: "shinyblack", columns: [ { text: 'CAN_ID', datafield: 'can_id', width: '20%' }, { text: 'Type', datafield: 'type', width: '25%' }, { text: 'Length', datafield: 'length', width: '10%'}, { text: 'Data', datafield: 'data', width: '42%' } ] }); } }] }] }] }]; $scope.settings = { width: 1200, height: 1000, layout: $scope.layout, theme: "ui-start"};css .sidebar { /*background-color: #000000;*/ position: relative; top: -20px; } .jqx-docking-layout { position: relative; top: -20PX; }Here is my code
HTML<body> <div ng-controller="AppCtrl"> <jqx-docking-layout jqx-settings="settings" id="jqxLayout"> <div data-container="SolutionExplorerPanel"> <div id="jqxTree" style="border: none;"> </div> <div id='jqxMenu' style="visibility: hidden;"> <ul> <li>Properties</li> <li>Remove Item</li> </ul> </div> </div> <div data-container="Document1Panel"> <table class="table"> <thead> <tr> <th>ID</th> <th>Data</th> </tr> </thead> <tbody> <tr> <td><input class="form-control" ng-model="contact.id" maxlength="9"></input></td> <td><input class="form-control" jqx-ng-model ng-model="contact.data1" maxlength="3"></input></td> <td><input value="Add" type="button" ng-click="addRow()" /></td> <td><button ng-click="addRow()">Add Row</button></td> <td><jqx-button jqx-on-click="addRow()">Cancel</jqx-button></td> </tr> </tbody> </table> <jqx-grid id="jqxgrid"></jqx-grid> </div> <div data-container="ErrorListPanel"> List of errors</div> <div data-container="OutputPanel"> </div> <div data-container="PropertiesPanel"> List of properties</div> </jqx-docking-layout>JS
angular.module('exampleApp') .controller('AppCtrl',['$scope', '$http','$interval', 'uiGridGroupingConstants','socket', function($scope,$http,socket) { function generaterow() { var row = {}; row["CAN_ID"] = $scope.contact.id; row["Type"] = "Extended Frame"; row["Length"] = '1'; row["Data"] = $scope.contact.data1; } $scope.source = { datatype: "local", datafields: [ { name: 'CAN_ID', type: 'number' }, { name: 'Type', type: 'string' }, { name: 'Length', type: 'number' }, { name: 'Data', type: 'number' } ], addrow: function (rowid, rowdata, position, commit) { commit(true); } }; var dataAdapter = new $.jqx.dataAdapter($scope.source); $scope.layout = [{ type: 'layoutGroup', orientation: 'horizontal', items: [{ type: 'tabbedGroup', width: 200, items: [{ type: 'layoutPanel', title: 'Solution Explorer', contentContainer: 'SolutionExplorerPanel' }] }, { type: 'layoutGroup', orientation: 'vertical', width: 800, items: [{ type: 'tabbedGroup', height: 600, minHeight: 200, items: [{ type: 'layoutPanel', title: 'Document 1', contentContainer: 'Document1Panel', initContent: function(){ // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: '100%', height: '100%', source: dataAdapter, showtoolbar: true, showfilterrow: true, filterable: true, sortable: true, groupable: true, rendertoolbar: function (toolbar) { var me = this; var container = $("<div style='margin: 5px;'></div>"); toolbar.append(container); container.append('<input id="addrowbutton" type="button" value="Add New Row" />'); $("#addrowbutton").jqxButton(); // update row. // create new row. $("#addrowbutton").on('click', function () { var datarow = generaterow(); var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow); }); }, columns: [ { text: 'CAN ID', datafield: 'CAN_ID', width: '20%' }, { text: 'Type', datafield: 'Type', width: '25%' }, { text: 'Length', datafield: 'Length', width: '10%' }, { text: 'Data', datafield: 'Data', width: '45%', cellsalign: 'right' } ] }) } }] }, { type: 'tabbedGroup', height: 200, pinnedHeight: 30, items: [{ type: 'layoutPanel', title: 'Error List', contentContainer: 'ErrorListPanel' }, { type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] }] }] }]; $scope.settings = { width: 1000, height: 800, layout: $scope.layout, theme: "darkblue"}; $scope.addRow = function () { console.log('test'); };I try to use button to call addRow() function, but none of above button can do that.
How should I set my button script?
And I also use a toolbar button to add row in the jqxgrid.
There are two input in the Document1Panel and I want to add these input value in grid when I click button.
It works if I add constant, but it will have Uncaught TypeError: Cannot read property ‘id’ of undefined and ‘data1’ of undefined in the function generaterow() if I add the variable $scope.contact.id and $scope.contact.data1.
I had found the answer jqx-data but I really dont know how to do that.
Please help.June 13, 2016 at 5:33 am in reply to: angular how to create jqxgrid in the documentPanelof docking layout angular how to create jqxgrid in the documentPanelof docking layout #85052Thank you for your prompt reply.
It helps me a lot
June 13, 2016 at 1:37 am in reply to: angular how to create jqxgrid in the documentPanelof docking layout angular how to create jqxgrid in the documentPanelof docking layout #85047OK, it works.
When the grid-docking-layout is floated, it is resizable to change the windows.
But it only change the floated windows but not the jqxgrid’s boundary.
Now how to dynamically change the jqxgrid’s boundary follow by the grid-docking-layout resize event?
-
AuthorPosts
Viewing 6 posts - 1 through 6 (of 6 total)