Git Product home page Git Product logo

vxgrid's Introduction

Vx Grid (1.0.2)

An standalone native table plugin which uses the best of features provided by AngularJS.

Update : Am trying to refactor the module to enable a hybrid mode which uses Native JS for painting the rows instead of angular's ngRepeat. This is in view of the huge performances observed in IE wherein for ~1000 rows the grid takes a good 20-30 seconds to render. As of now, the hybrid mode is stable but needs to be solutioned for grids wherein we can treat the data as more of one time. The closest analogy I can think of is 'Canvas' vs 'SVG'. Many of the features currently enabled in normal mode will not work in hybrid mode like inline editing and some have been disabled like grouping option in columns.

##Demo

Sample Preview @ http://vxgrid.azurewebsites.net

##List of supported features (1.0.2)

  1. Sorting
  2. Contextual Filtering
  3. Filters with Search
  4. Fixed Header
  5. Virtualization
  6. Pagination W/WOT Virtualization
  7. Column Hiding
  8. Column Width Changing
  9. Single Row Selection
  10. Multi Row Selection
  11. All Row Selection
  12. Callbacks
  13. Inline Row Editing
  14. Inline Multi Row Editing
  15. Iniine Row Addition
  16. Inline Row Changes Revert
  17. Inline Row Saving Overrides
  18. Inline Row Delete Overrides
  19. Row Deletion
  20. Column Wrapping
  21. Events Based Actions
  22. JSON Data Editor
  23. Modal Settings Window
  24. Row Validation
  25. Separate XS View - On widths < 768px, the columns merge to an 'Expand-Collapse' view.

##VX GRID Config BOUND TO 'config=' IN DIRECTIVE CALL

    <CONFIG>.enableDropdownsInHeader        <SUPPORTED : Y>    :   <BOOLEAN>        SET TO TRUE TO ENABLE DROPDOWNS ON C0LUMNS, ELSE DEFAULT SORT ON HEADER CLICK
    <CONFIG>.selectionEnabled               <SUPPORTED : Y>    :   <BOOLEAN>        SET TO TRUE FOR ENABLE ROW SELECTION
    <CONFIG>.allRowsSelectionEnabled        <SUPPORTED : Y>    :   <BOOLEAN>        SET TO TRUE FOR ENABLE ALL ROWS SELECTION
    <CONFIG>.multiSelectionEnabled          <SUPPORTED : Y>    :   <BOOLEAN>        SET TO TRUE FOR ENABLE MULTI ROW SELECTION - DEPENDENT ON 
    <CONFIG>.showGridStats                  <SUPPORTED : Y>    :   <BOOLEAN>        SET TO TRUE FOR ENABLE ROW SELECTION
    <CONFIG>.showGridOptions                <SUPPORTED : Y>    :   <BOOLEAN>        SET TO TRUE FOR ENABLE ROW SELECTION
    <CONFIG>.selectAllOnRenderAll           <SUPPORTED : Y>    :   <BOOLEAN>        SET TO TRUE FOR ENABLE SELECT ONLY WHEN ALL ROWS ARE RENDERED
    <CONFIG>.multiSelectionDependentCol     <SUPPORTED : Y>    :   <STRING>         SET TO COLUMN ON WHICH MULTI SELECTION IS DEPENDENT OR SET TO '' OR NULL
    <CONFIG>.onSelectionReturnCol           <SUPPORTED : Y>    :   <STRING>         SET TO COLUMN WHICH POPERTY IS RETURNED ON ROW SELECTION CHANGE
    <CONFIG>.showTable                      <SUPPORTED : Y>    :   <BOOLEAN>        SET TO TRUE FOR ENABLE SELECT ONLY WHEN ALL ROWS ARE RENDERED
    <CONFIG>.data                           <SUPPORTED : Y>    :   <ARRAY>
    <CONFIG>.xsRowTitleTemplate             <SUPPORTED : Y>    :   <STRING>         SET TO XS ONLY TEMPLATE - DEFAULTS TO PRIMARY COLUMN HEADER
	<CONFIG>.virtualization					<SUPPORTED : Y>    :   <BOOLEAN>        SET TO FALSE TO DISABLE VIRTUALIZATION AND ENABLE PAGINATION
    <CONFIG>.pagination					    <SUPPORTED : Y>    :   <BOOLEAN>        SET TO FALSE TO DISABLE PAGINATION AND ENABLE PAGINATION
	<CONFIG>.pageLength						<SUPPORTED : Y>    :   <NUMBER>	        SET PAGINATION LENGTH AND DEFUALTS TO 20
    <CONFIG>.inlineEditingEnabled			<SUPPORTED : Y>    :   <BOOLEAN>        SET TO TRUE FOR ENABLING INLINE EDITING OPTION
    <CONFIG>.inlineDeletingEnabled			<SUPPORTED : Y>    :   <BOOLEAN>        SET TO TRUE FOR ENABLING INLINE DELETING OPTION
    <CONFIG>.inlineAddRowEnabled			<SUPPORTED : Y>    :   <BOOLEAN>        SET TO TRUE FOR ENABLING ADDING ROW
    <CONFIG>.inlineSaveOverrideEnabled		<SUPPORTED : Y>    :   <BOOLEAN>        SET TO TRUE FOR ENABLING SAVE ROW OVEVRRIDE
    <CONFIG>.inlineDeleteOverrideEnabled	<SUPPORTED : Y>    :   <BOOLEAN>        SET TO TRUE FOR ENABLING SAVE DELETE OVEVRRIDE
    <CONFIG>.newRowTemplate			        <SUPPORTED : Y>    :   <STRING>         SET TO NEW TEMPLATE
    <CONFIG>.jsonEditorEnabled			    <SUPPORTED : Y>    :   <BOOLEAN>        SET TO TRUE TO ENABLE JSON EDITOR
    <CONFIG>.sortPredicate			        <SUPPORTED : Y>    :   <STRING>         SET TO COLUMN_DEF_ID FOR DEFAULT SORTING BY THAT COLUMN
    <CONFIG>.reverseSortDirection			<SUPPORTED : Y>    :   <STRING>         SET TO TRUE/FALSE TO SET DEFAULT SORTING DIRECTION
    <CONFIG>.emptyFill			            <SUPPORTED : Y>    :   <STRING>         CONTENTS TO SHOW FOR EMPTY GRID
    <CONFIG>.loaderGifSrc                   <SUPPORTED : Y>    :   <STRING>         LOADER GIF PATH
    <CONFIG>.ariaPrimary                    <SUPPORTED : Y>    :   <STRING>         COLUMN IDENTIFYING ARIA PRIMARY
    <CONFIG>.xsTemplate                     <SUPPORTED : Y>    :   <BOOLEAN>        ENABLE XS SPECIFIC TEMPLATE
    <CONFIG>.initialRowClasses              <SUPPORTED : Y>    :   <MAP<OBJECT>>    PROVIDE KEY VALUE PAIRS FOR INITIAL ROW CLASSES
    <CONFIG>.rowClassFn                     <SUPPORTED : Y>    :   <FUNCTION>       PROVIDE FUNCTION REFERENCE TO SELF INVOKE WITH ONE PARAM - VX_ROW : FUNCTION VX_SAMPLE_ROWCLASS_FUNC(ROW){}

##VX GRID Column Config BOUND TO EACH ITEM IN 'vxConfig.columnDefConfigs' IN DIRECTIVE DEFINTION

     <COLUMN>.dropDownEnabled                <SUPPORTED : Y>    :   <BOOLEAN>   SET TO TRUE TO ENABLE COLUMN DROPDOWN
     <COLUMN>.ddSort                         <SUPPORTED : Y>    :   <BOOLEAN>   SET TO TRUE TO ADD SORT OPTION TO COLUMN DROPDOWN
     <COLUMN>.ddFilters                      <SUPPORTED : Y>    :   <BOOLEAN>   SET TO TRUE TO ADD FILTERS TO COLUMN DROPDOWN
     <COLUMN>.ddFiltersWithSearch            <SUPPORTED : Y>    :   <BOOLEAN>   SET TO TRUE TO ADD FILTERS SEARCH OPTION
     <COLUMN>.ddGroup                        <SUPPORTED : Y>    :   <BOOLEAN>   SET TO TRUE TO ADD GROUP OPTION TO COLUMN DROPDOWN
     <COLUMN>.hidden                         <SUPPORTED : Y>    :   <BOOLEAN>   SET TO TRUE TO HIDE COLUMN ON DEFAULT
     <COLUMN>.xsHidden                       <SUPPORTED : Y>    :   <BOOLEAN>   SET TO TRUE TO HIDE COLUMN ON DEFAULT ON XS RESOLUTION
     <COLUMN>.locked                         <SUPPORTED : Y>    :   <BOOLEAN>   SET TO TRUE TO FIX COLUMN VISIBILITY, COLUMN ORDER, COLUMN WIDTH
     <COLUMN>.primary                        <SUPPORTED : Y>    :   <BOOLEAN>   SET TO TRUE TO ENABLE THIS COLUMN AS PRIMARY
     <COLUMN>.width                          <SUPPORTED : Y>    :   <STRING>    SET WIDTH FOR COLUMN - DEFUALT '200'
     <COLUMN>.renderDefn                     <SUPPORTED : Y>    :   <BOOLEAN>   SET TO TRUE ENABLE CUSTOM TEMEPLATE
     <COLUMN>.headerDefn                     <SUPPORTED : N>    :   <STRING>    SET CUSTOM HEADER TEMPLATE
     <COLUMN>.cellDefn                       <SUPPORTED : Y>    :   <STRING>    SET CUSTOM CELL TEMPLATE - USE 'VX_ROW_POINT' FOR ROW LEVEL PROPERTY & 'VX_DATA_POINT' FOR ROW CELL LEVEL PROPERTY
     <COLUMN>.inlineEditOnColumnEnabled      <SUPPORTED : Y>    :   <BOOLEAN>   SET TO TRUE TO ENABLE COLUMN INLINE EDITING
     <COLUMN>.editDefn                       <SUPPORTED : Y>    :   <STRING>    SET CUSTOM CELL TEMPLATE - USE 'VX_ROW_POINT' FOR ROW LEVEL PROPERTY & 'VX_DATA_POINT' FOR ROW CELL LEVEL PROPERTY
     <COLUMN>.editDefnTemplate               <SUPPORTED : Y>    :   <STRING>    SET EDIT TEMPLATE TYPE - USE 'VX_ROW_POINT' FOR ROW LEVEL PROPERTY & 'VX_DATA_POINT' FOR ROW CELL LEVEL PROPERTY - SUPPORTED TYPES - 'INPUT', 'TEXTAREA'

##VX GRID EVENTS

    'vxGridRowSelectionChange'                  <OUT>   EVENT ON ROW SELECTION CHANGE EMITING DATA :   {'key': <ROW_VALUE_'onSelectionReturnCol'>, 'value': <BOOLEAN_NEW_SELECTION_STATE>, '_pKey': <PRIMARY_ID_VXGRID> }
    'vxGridRowMultiSelectionChange'             <OUT>   EVENT ON MULTIROW SELECTION CHANGE EMITING DATA COLLECTION OF :   {'key': <ROW_VALUE_'onSelectionReturnCol'>, 'value': <BOOLEAN_NEW_SELECTION_STATE>, '_pKey': <PRIMARY_ID_VXGRID> }
	'vxGridRowAllSelectionChange'               <OUT>   EVENT ON ALL ROW SELECTION
    'vxPartiallyRendered'                       <OUT>   EVENT ON VX GRID PARTIAL RENDERED
    'vxCompletelyRendered'                      <OUT>   EVENT ON VX GRID COMPLETE RENDERED
    'vxPartiallyRenderedSelectAllDisabled'      <OUT>   EVENT ON VX GRID PARTIAL RENDERED AND SELECT ALL DISABLED - ONLY ON  <CONFIG>.selectAllOnRenderAll SET TO TRUE
    'vxCompletelyRenderedSelectAllEnabled'      <OUT>   EVENT ON VX GRID COMPLETE RENDERED AND SELECT ALL ENABLED - ONLY ON  <CONFIG>.selectAllOnRenderAll SET TO TRUE
    'vxGridSettingsChanged'                     <OUT>   EVENT ON VX GRID SETTINGS CHANGED
    'vxGridSettingsBuilt'                       <OUT>   EVENT ON VX GRID COL SETTINGS BUILT
    'vxGridChangeRowClass'                      <IN>    ON EVENT, ROW CLASS CHANGED AS PER PARAMETER - ACCPETS { ID : VXGRID_ID, DATA : []} , DATA IS COLLECTION OF {'key': 'ROW PRIMARY ID VALUE', 'value', '<NEW ROW CLASS NAMES>'}
    'vxGridResetRowClass'                       <IN>    ON EVENT, RESETS ALL CLASS NAMES ADDED AS PART OF 'vxGridChangeRowClass'
    'vxGridDisableRowSelection'                 <IN>    ON EVENT, ENABLES/DISABLES ROW SELECTION - ACCEPTS { ID : VXGRID_ID, DATA : []} , DATA IS COLLECTION OF {'key': 'ROW PRIMARY ID VALUE', 'value': <BOOLEAN>}
    'vxGridResetDisableRowSelection'            <IN>    ON EVENT, ENABLES ALL ROW FOR SELECTION
    'vxGridOpenManageColumns',                  <IN>    ON EVENT, OPENS MANAGE COLUMNS MODAL
    'vxGridResetVxInstance',                    <IN>    ON EVENT, RESETS THE TABLE INSTANCE 
    'vxGridClearFilters',                       <IN>    ON EVENT, CLEARS ALL FILTERS APPLIED
    'vxGridSelectAllFiltered',                  <IN>    ON EVENT, SELECTS ALL ROWS WITH FILTES APPLIED 
    'vxGridClearSelection',                     <IN>    ON EVENT, CLEARS SELECTION OF ALL ROWS
    'vxGridRevealWrapToggle'                    <IN>    ON EVENT, TOGGLES WRAP ON COLUMNS

##VX GRID Config Extensions

    ----------------------------
    <CONFIG>.getVxCounts()                  <NO PARAMS>                             RETURNS COUNT - {'vxAllDataLength': <LENGTH OF ALL DATA> , 'vxFilteredDataLength' : <LENGTH OF FILTERED DATA SET>, 'vxSelectedDataLength' : <LENGTH OF SELECTED DATA SET>
    <CONFIG>.getData()                      <NO PARAMS>                             RETURNS CURRENT GRID DATA SET - WITHOUT DIRTY MAPS
    <CONFIG>.getFilteredDataSet()           <NO PARAMS>                             RETURNS ACTIVELY FILTERED DATA
    <CONFIG>.getActiveDataSet()             <NO PARAMS>                             RETURNS CURRENT ACTIVE DATA STATE
    <CONFIG>.setRowFieldValidation()        <ID, COL, VALID>                        SETS ROW AND FEILD VALIDATION TO 'VALID' VALUE
    <CONFIG>.getSelectedRows()              <NO PARAMS>                             GET IDs FOR ROWS BEING SELECTED
    <CONFIG>.getRowsBeingEdited()           <NO PARAMS>                             GET IDs FOR ROWS BEING EDITED
    <CONFIG>.changeRowClass()               <NO PARAMS>                             ROW CLASS CHANGED AS PER PARAMETER - ACCPETS { ID : VXGRID_ID, DATA : []} , DATA IS COLLECTION OF {'key': 'ROW PRIMARY ID VALUE', 'value', '<NEW ROW CLASS NAMES>'}
    <CONFIG>.openJsonEditor()               <NO PARAMS>                             OPENS JSON EDITOR IF CONFIGURED TO TRUE
    <CONFIG>.openManageColumns()            <NO PARAMS>                             OPENS MANAGE COLUMNS MODAL
    <CONFIG>.resetVxInstance()              <NO PARAMS>                             RESETS THE TABLE INSTANCE 
    <CONFIG>.clearFilters()                 <NO PARAMS>                             CLEARS ALL FILTERS APPLIED
    <CONFIG>.selectAllFiltered()            <NO PARAMS>                             SELECTS ALL ROWS WITH FILTES APPLIED 
    <CONFIG>.clearSelection()               <NO PARAMS>                             CLEARS SELECTION OF ALL ROWS
    <CONFIG>.revealWrapToggle()             <NO PARAMS>                             TOGGLES WRAP ON COLUMNS
    <CONFIG>.selectRows()                   <ARRAY OF IDs>                          TOGGLE ROW STATES TO TRUE 
    <CONFIG>.deselectRows()                 <ARRAY OF IDs>                          TOGGLE ROW STATES TO FALSE
    <CONFIG>.sortByColumn()                 <COLUMN ID, SORT DIRECTION>             SORT BY COLUMN BASED ON DIRECTION
    <CONFIG>.resetColumnFilters()           <ARRAY OF IDs>                          RESET FILTERS ON COLUMNS PROVIDED BY IDS     
    <CONFIG>.modifyRows()                   <ARRAY OF ROWS, ARRAY OF FIELDS>        MODIFY ROW DATA PROGRAMATICALLY - IF FIELDS ARRAY EMPTY, UPDATES ALL FIELDS, ELSE ONLY FIELDS SUPPLIED THROUGH PARAMS

##Built Using Angular Vs Repeat
Angular Scroll
JSON Editor

##Wokring With Save Override

Set CONFIG.inlineSaveOverrideEnabled to true to enable row save overides.
Then we define 'fnInlineSaveOverride' as callback in form of a Angular promise. For example
 self.vxSampleConfig.fnInlineSaveOverride = function (newrow, oldrow) {
    var defer = $q.defer();
    $timeout(function () {
		defer.resolve({ 'row': newrow, 'save': true });
    }, 8000);
     return defer.promise;        
}

##Wokring With Delete Override

Set CONFIG.inlineDeleteOverrideEnabled to true to enable row save overides.
Then we define 'fnInlineDeleteOverride' as callback in form of a Angular promise. For example
 self.vxSampleConfig.fnInlineDeleteOverride = function (rows) {
    var defer = $q.defer();
    $timeout(function () {
        defer.resolve({ 'rows': _.initial(rows) }); // Mocking all rows except last one for deletion
    }, 8000);
    return defer.promise;
}

##Screenshots

#####Vx Grid intialized with DOM Virtualization #####Row Selection, Multi Selection, Row Deletion #####Row Editing, Multi Row Editing, Row Changes Reverting #####Column Dropdown With Sorting, Filters #####Column Dropdown With Sorting, Filters With Search Option #####New Row Addition #####Pagination Instead of DOM Virtualization #####Settings Modal with Column Hiding, Column Width Changing & Column Order Changing #####XS Resolution View

##Note Inline documentation + README last updated 15/03/2016. Please refer sample app in the repo for updated capabilities.

vxgrid's People

Contributors

amitse avatar asitparida avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

vxgrid's Issues

Accessibility : Focus movement in filters

In the Vx-grid, Key press events in filters portion are not working like traversing (up and down arrows)through the filter options and for selecting the option (by pressing Enter key)

Accessibility : Shortcut Keys

  1. In Manage Columns popup, Need to use shortcut keys for Selected columns block, When we are selecting the option, whether it should focus on width input box or swapping buttons or else save and cancel buttons.

Filter is hiding back of grid.

when I used pagination and have given filter option, I am able to see only one record. To change filter option or removing filter options I am not able to see complete filter and filter is going behind the grid as shown in second image.
filter option with pagination
issue with after filter

Group is missing while scrolling

In Engagement column Group option is enabled with out scrolling. When user scrolls down on grid and check for GROUP link in Engagement columns it is not displaying.
image

391735 Acsblty - Home -> Profile -> Accreditation : Escape key doesnot close the menu when a menu is open and focus in on a menu item in that open menu

391735 Acsblty - Home -> Profile -> Accreditation : Escape key doesnot close the menu when a menu is open and focus in on a menu item in that open menu

Test Case ID : 36.7

Repro Steps:

  1. Open the content or service with a browser.
  2. Tab until the menu has focus.
  3. Press enter or spacebar to open the menu.
  4. Press the escape key.

Expected Results:

Verify that when the menu is open, pressing the escape key closes the menu.

Actual Result:

Menu doesnot close on pressing escape key when the menu is open and focus is on the menu item in that open menu.

396181 Acsblty - Home -> Profile -> Certification: Pressing the down arrow key cycles doesnot focus through the items in the menu.

396181 Acsblty - Home -> Profile -> Certification: Pressing the down arrow key cycles doesnot focus through the items in the menu.

Test Case ID : 36.6

Repro Steps

  1. Open the content or service with a browser.
  2. tab until the menu has focus
  3. press enter or spacebar to open the menu
  4. press the down arrow key until the end of the list is reached
  5. press the down arrow key once more.

Expected Results

Verify that when the menu has focus, pressing the down arrow key cycles focus through the items in the menu,
including all disabled menu items and when it reaches the last item, pressing the down arrow key will cycle back to
the first menu item. Verify that similar behavior works for the up arrow key as well.

Actual Result:

when the menu has focus, pressing the down arrow key cycles doesnot focus through the items in the menu.

Feature Request: Ability to select records in the grid programatically

when trying to mock (Jasmine SPY) this object, if there were a capability to select records (data is mocked too) in this grid programmatically, the controller will be able to perform '.getSelectedRows()' successfully and aid in unit testing any functionality that depends on this grid.

391614 Acsblty - Home -> Profile -> Accreditation : Pressing the right arrow key doesnot moves the focus to the adjacent menu bar item

391614 Acsblty - Home -> Profile -> Accreditation : Pressing the right arrow key doesnot moves the focus to the adjacent menu bar item

Test Case ID : 36.4

Repro Steps

  1. Open the content or service with a browser.
  2. Tab until the menu has focus.
  3. Press the right arrow key.
  4. Press the left arrow key.

Expected Results

Verify that when the menu has focus, pressing the right arrow key moves the focus to the adjacent menu bar item to
the right and pressing left arrow key moves the focus to the adjacent menu bar item to the left.

Actual Result:
when the menu has focus, pressing the right arrow key doesnot moves the focus to the adjacent menu bar item to
the right and pressing left arrow key doesnot moves the focus to the adjacent menu bar item to the left.

An option to configure JSON Editor

JSON Editor functionality is not needed in my project requirements. I do not want to load JSON Editor files. There should be some configuration in the grid such that these files should be loaded dynamically based on Boolean config.

382592 Acsblty - Home -> Profile -> Area of Expertise : Pressing enter, spacebar and down arrow each doesnot open the menu and places focus on the first menu item in the opened menu

382592 Acsblty - Home -> Profile -> Area of Expertise : Pressing enter, spacebar and down arrow each doesnot open the menu and places focus on the first menu item in the opened menu

Test Case ID:36.3

Repro Steps

  1. Open the content or service with a browser.
  2. Tab until the menu has focus
  3. Press the enter key
  4. Press shift+tab (to move focus off of the menu)
  5. Press tab to move focus back to the menu
  6. Press spacebar
  7. Press shift+tab (to move focus off of the menu)
  8. Press down arrow

Expected Results

Verify that when the menu has focus, pressing enter, spacebar and down arrow each open the menu and places focus on
the first menu item in the opened menu or child menu bar.

Note: this includes all menu items, even ones that are disabled. They receive focus but do not have an action when
enter or left/right arrow is pressed. It is important that the state of the menu item be communicated to the user
(see MAS 40 for more info).

Actual Result:

when the menu has focus:
1.Pressing Enter opens the menu but doesnot place the focus on the first menu item in the opened menu or child menu bar.
2.Pressing Spacebar opens the menu but doesnot place the focus on the first menu item in the opened menu or child menu bar
and it is moving to the bottom of the page
3.Pressing down arrow doesnot open the menu and the page is moving down.

Effected Controls:

Section Name: Accreditations

Name
Workshop
Accreditation Date

Section Name : Certifications

Certification Name
Organization Name
Expiration Date

Expose selected records when ever required.

Provide some kind of function or event from which we can get the selected records. This is useful when we are doing some external operations based on selected records.

If we want to use selected records data to some modal popup, with the current implementation, we have created a array and pushing emited record data on every 'vxGridRowSelectionChange' event and passing to modal. Which is reworking again to get the selected records as the grid is maintaining the selected records details.

Accessibility : Focus Movement In Manage Columns Modal

In Manage Columns popup, after selecting an option in Available columns list and then press enter key then the, focus should go for Swapping button, and then again press enter then the item moves to the right Selected Columns and the next focus should be on that item only.

391729 Acsblty - Home -> Profile -> Accreditation : Pressing the down arrow key cycles doesnot focus through the items in the menu.

391729 Acsblty - Home -> Profile -> Accreditation : Pressing the down arrow key cycles doesnot focus through the items in the menu.

Test Case ID : 36.6

Repro Steps

  1. Open the content or service with a browser.
  2. tab until the menu has focus
  3. press enter or spacebar to open the menu
  4. press the down arrow key until the end of the list is reached
  5. press the down arrow key once more.

Expected Results

Verify that when the menu has focus, pressing the down arrow key cycles focus through the items in the menu,
including all disabled menu items and when it reaches the last item, pressing the down arrow key will cycle back to
the first menu item. Verify that similar behavior works for the up arrow key as well.

Actual Reuslt:

when the menu has focus, pressing the down arrow key cycles doesnot focus through the items in the menu.

Provide functionality of cellclick action.

I need to perform some operation when i click on a cell. As of know cell click event is not exists. provide a functionality to use cell click.

I tried using cellDefn: '<span ng-click="cellClick()"> <i class="icon-layout icon-show-note"></i></span>' but its not working.

396147 Acsblty - Home -> Profile -> Certification : Pressing the right arrow key doesnot moves the focus to the adjacent menu bar item

396147 Acsblty - Home -> Profile -> Certification : Pressing the right arrow key doesnot moves the focus to the adjacent menu bar item

Test Case ID : 36.4

Repro Steps

  1. Open the content or service with a browser.
  2. Tab until the menu has focus.
  3. Press the right arrow key.
  4. Press the left arrow key.

Expected Results

Verify that when the menu has focus, pressing the right arrow key moves the focus to the adjacent menu bar item to
the right and pressing left arrow key moves the focus to the adjacent menu bar item to the left.

Actual Result:
when the menu has focus, pressing the right arrow key doesnot moves the focus to the adjacent menu bar item to
the right and pressing left arrow key doesnot moves the focus to the adjacent menu bar item to the left.

'select all' check box is left in 'checked' state when column filter values are toggled

  1. Grid is loaded with data
  2. Apply a filter for a column, this makes grid to show only filtered records(This fires a vxGridRowMultiSelectionChange event which is not required as user is not really selecting any records from the grid)
  3. check 'select all' check box
  4. Now reset the filter
  5. This shows all the records back with previously selected records as unselected
  6. But 'select all' check box is left in 'checked' state

Provide deleting rows programatically functionality

As of know deleting rows are possible with the default delete row feature. If we expose some functionality to delete through code it will be more useful. Every time its not needed to delete by using default delete row feature.

Column Filters are not updated as and when grid columns are updated.

Steps:

  1. Grid is loaded with data
  2. Select a request to update sub status
  3. Grid column – Sub-Status is showing the new value without a browser refresh
  4. Click on the column to see if the new value is shown in the filter list to filter records with the new value

Result: New value is not shown

  1. I see new value only when I do a browser refresh (Ctrl+F5)

Need to change pageLength dynamically (enhancement)

There should be pageLength dropdown in grid options, so that the user will have flexibility to see selected pageLength number of rows.

image

Based on selected pageLength value, corresponding pagination will change dynamically.

382602 Acsblty - Home -> Profile -> Area of Expertise : Pressing the down arrow key cycles doesnot focus through the items in the menu.

Test Case ID : 36.6

Repro Steps

  1. Open the content or service with a browser.
  2. tab until the menu has focus
  3. press enter or spacebar to open the menu
  4. press the down arrow key until the end of the list is reached
  5. press the down arrow key once more.

Expected Results

Verify that when the menu has focus, pressing the down arrow key cycles focus through the items in the menu,
including all disabled menu items and when it reaches the last item, pressing the down arrow key will cycle back to
the first menu item. Verify that similar behavior works for the up arrow key as well.

382602 Acsblty - Home -> Profile -> Area of Expertise : Pressing the down arrow key cycles doesnot focus through the items in the menu.

Actual Reuslt:

when the menu has focus, pressing the down arrow key cycles doesnot focus through the items in the menu.

Effected Controls:

Section Name: Accreditations

Name
Workshop
Accreditation Date

Section Name : Certifications

Certification Name
Organization Name
Expiration Date

grid is not showing data in the order it sorted by default.

my data has 5 columns and same as grid.
col1: id - primary column
col2: name
col3: max marks
col4: Obtained Marks
Col5: Rank

When i bind the data which is sorted on Rank column, the grid is displaying the data sorted on primary column.

the checkboxes in the grid are toggled only upon clicking on the checkbox twice

Repro Steps:

  1. open a page that hosts this grid.
  2. make sure there is at least one record in the grid.
  3. click on the checkbox on one of the records
    • the record is checked.
  4. do not move the mouse at all.
  5. click on the checkbox once again.
    • the checkbox is not toggled.

Observed Results:

  1. It takes two clicks to toggle a record (when the mouse is not moved)

Expected Results:

  1. The record should be toggled upon clicking the checkbox once.

PS: The toggle functionality is working as expected when the mouse is moved between clicks.

396404 Acsblty - Home -> Profile -> Certification:when a submenu is open and focus in on a menu item in the submenu then pressing escape or left arrow causes the submenu to close and returns focus to the parent menu item.

396404 Acsblty - Home -> Profile -> Certification:when a submenu is open and focus in on a menu item in the submenu then pressing escape or left arrow causes the submenu to close and returns focus to the parent menu item.

Test case ID:36.9

Repro Steps

  1. Open the content or service with a browser.
  2. Tab until the menu has focus.
  3. Press the enter key.
  4. Press the down arrow key to move to a menu item with a submenu.
  5. Press enter to open the submenu.
  6. Press escape to close the submenu.
  7. Confirm that focus returns to the parent menu.
  8. Press right arrow to open the submenu.
  9. Press left arrow to close the submenu.

Expected Results

Verify that when a menu item with a submenu has focus and the submenu is open, pressing escape or left arrow closes the submenu and returns focus to the parent menu item.

Actual Results

1.Escape does not closes the menu
2.Right arrow does not open the submenu
3.Left arrow does not close the submenu

382581 Acsblty - Home -> Profile -> Area of Expertise : Pressing the right arrow key doesnot moves the focus to the adjacent menu bar item to the right

382581 Acsblty - Home -> Profile -> Area of Expertise : Pressing the right arrow key doesnot moves the focus to the adjacent menu bar item to the right

Expected Results

Verify that when the menu has focus, pressing the right arrow key moves the focus to the adjacent menu bar item to
the right and pressing left arrow key moves the focus to the adjacent menu bar item to the left.

Actual Result:
when the menu has focus, pressing the right arrow key doesnot moves the focus to the adjacent menu bar item to
the right and pressing left arrow key doesnot moves the focus to the adjacent menu bar item to the left.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.