angulargrid | Pinterest like responsive masonry grid system | Grid library

 by   s-yadav JavaScript Version: 0.6.0 License: MIT

kandi X-RAY | angulargrid Summary

kandi X-RAY | angulargrid Summary

angulargrid is a JavaScript library typically used in User Interface, Grid, React applications. angulargrid has no vulnerabilities, it has a Permissive License and it has low support. However angulargrid has 4 bugs. You can install using 'npm i angulargrid' or download it from GitHub, npm.

Pinterest like responsive masonry grid system for angular. ##Features Complete responsive, figures out columns and width to completely fit the container based on options provided and container width. Animation support on enter or leave of grid items, sorting or resizing using ngAnimate module and css animation. Support any grid system (bootstrap, foundation) for number of columns, grid and gutter width. Perfect handeling of image load. Support left to right or right to left placement of grids. Keeps a watch on list model and options to reflect the changes instantly. . Demo url : Documentation url : Updates #Release 0.6.0 : UMD Support Added.

            kandi-support Support

              angulargrid has a low active ecosystem.
              It has 280 star(s) with 108 fork(s). There are 23 watchers for this library.
              It had no major release in the last 12 months.
              There are 56 open issues and 74 have been closed. On average issues are closed in 113 days. There are 9 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of angulargrid is 0.6.0

            kandi-Quality Quality

              angulargrid has 4 bugs (0 blocker, 0 critical, 3 major, 1 minor) and 0 code smells.

            kandi-Security Security

              angulargrid has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              angulargrid code analysis shows 0 unresolved vulnerabilities.
              There are 17 security hotspots that need review.

            kandi-License License

              angulargrid is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              angulargrid releases are not available. You will need to build from source code and install.
              Deployable package is available in npm.
              Installation instructions are not available. Examples and code snippets are available.
              angulargrid saves you 186 person hours of effort in developing the same functionality from scratch.
              It has 458 lines of code, 0 functions and 9 files.
              It has low code complexity. Code complexity directly impacts maintainability of the code.

            Top functions reviewed by kandi - BETA

            kandi has reviewed angulargrid and discovered the below as its top functions. This is intended to give you an instant insight into angulargrid implemented functionality, and help decide if they suit your requirements.
            • Refreshes grid sizes .
            • Calculate page information
            • handles loading images
            • After loading the container load
            • Calculates the width of the grid .
            • unbind the visible items
            • Handle the resize callback
            • Refreshes the list of visible elements
            • Resolve animation end
            • Find the position of an Element
            Get all kandi verified functions for this library.

            angulargrid Key Features

            No Key Features are available at this moment for angulargrid.

            angulargrid Examples and Code Snippets

            No Code Snippets are available at this moment for angulargrid.

            Community Discussions


            How to show up data from Db directly when initializing Angular-slickgrid Tree instead of just after clicking on row header
            Asked 2021-Jul-14 at 07:32

            my first questions so accept my apologies if I do sth wrong ;-)

            I am creating an web-app which is using angular-slickgrid Tree so show some data from a database. Creating the Tree itself is working and I am getting those data in the frontend by using a promise to get them from backend and therefore from my db. For that I in particular expanded this "Example 29: Tree Data (from a Hierarchical Dataset)" of angular-slickgrid. My version of this is 2.30.2, Angular Version is 11.2.12 and Typescript 4.1.

            My problem is, that those data do not show up automatically in the tree, but just after I click on the row header... so those data arrive frontend indeed! Unfortunatly I could not find out which event is exactly triggered (looked in web debugger and inspector).

            I was said, actually it should work just by giving my db-data to the so called "datasetHierarchical" varible (after they arrived in the frontend) since there is an assignment in the html '[datasetHierarchical]="datasetHierarchical"'. For mocks directly in the Tree-Component this is working. But in my case with data from a db this does not work as well as all methods I tried like 'this.angularGrid.sortService.sortLocalGridByDefaultSortFieldId();' or 'this.angularGrid.gridService.invalidateHierarchicalDataset(this.datasetHierarchical);', which I thought should re-render the Tree-Grid after my data arrived frontend.

            It is kind of frustrating that such a trivial thing does not work but maybe does someone else see (a simple) solution I oversaw... So thanks for any help in advance! :-)

            And the data request is also quite simple:



            Answered 2021-Jul-14 at 07:32

            Thanks for help, but I found a solution after I looked closely in the lib. I guess a timeout is not working right, so I added one after my data arrived from DB:



            AngularSlickGrid problems when change the columndefinition
            Asked 2021-Apr-29 at 20:09

            I'm developing an app using the amazing angularslickgrid. Till now, i haven't got any problem, buy I found out an strange behaviour on it. In the ngOnInit I wrote the following code:



            Answered 2021-Apr-29 at 20:09

            Please note that I'm the author of Angular-Slickgrid and you opened an issue with the same question on GitHub, I'll simply reply with the same answer here

            a reset is a reset, so it won't keep that. But I added the Row Selection in the Grid State not that long ago, so you could get it from there (just check the Grid State/Presets - Wiki. Dynamically adding a new column can be seen in this Example 3, you should look at the code on how to make it show up correctly (you can't just add it, you need to manually trigger a dirty change call, look at the example code for that)

            Also to add a bit more to this, SlickGrid Row Selection is by row index, it's not by row data. Meaning that if your data changes when you refresh or something and you keep the row selection it will not synched anymore... all that to say, just remember, it's a row index, so pay attention when you want to keep or want to reapply a row selection.

            If it's just to row selection that you lose, just save it before adding a column and put back the selection after adding the column. It's simple, get the row selection (with getSelectedRows) before you change the column definitions, add your new column and then put back the selection (with setSelectedRows).



            Updated GridOption of the Angular slickgrid
            Asked 2020-Dec-16 at 13:56

            is it possible to update the options showPreHeaderPanel and createPreHeaderPanel by clicking a button. I tried to modify this.gridOptions and I tried to use this.angularGrid.slickGrid.setOptions but the grid doesn't update it.



            Answered 2020-Dec-16 at 13:56

            Note that I'm the author of Angular-Slickgrid and I did not try the code below but I expect it to work.

            First of, you should also define a height with preHeaderPanelHeight (default is 25) and then you assume that the option will redraw the grid and everything and that is where you misunderstand how it works, it's just an option it doesn't do anything by itself. It should work if you first create the preheader in your grid options but just don't show it if you don't want it to show up at first and then later you call the method to toggle its visibility which is setPreHeaderPanelVisibility



            upgrading to angular application to v10 error getting
            Asked 2020-Oct-16 at 13:00

            Am executing demo app .Am new to angulat. and Below is my caltegory list component.



            Answered 2020-Oct-16 at 13:00

            There was a small breaking change in version 2.15.x of Angular-Slickgrid, I added a new Type GraphqlPaginatedResult when using Pagination and GraphqlResult when you're not, it's more representative of which one is which. So you just need to switch your Type to GraphqlPaginatedResult. I didn't want to release a breaking version (3.x) just for that 1 small Type change (and I thought no one were using the GraphQL portion lol), so you'll need to update your code (just do a find+replace from GraphqlResult to GraphqlPaginatedResult).



            Angular SlickGrid Dynamic grid inside md-tab not loading the definitions
            Asked 2020-Aug-18 at 07:41

            Angular slick grid is not loading using the md-tab

            In the child component will be created once the md tab is created. Am setting the tab configurations on ngOnInit method of the child component ts.

            Am not sure what am missing here.

            If the tab is already loaded then am getting the dom doesnot exists error.




            Answered 2020-Aug-18 at 07:40

            I have resolved by adding the style to the container as below and wrapped that with



            Need to handle angular slickgrid multiple times rendering while updating a record in dataview
            Asked 2020-Jul-19 at 01:05

            I am using angular slickgrid to show my data. I monitoring the data continuously. If any changes happened in server side, that data need to update in application. So that modified data updated in slickgrid by this code this.angularGrid.gridService.updateDataGridItem(data);. While updating data, the angular slickgrid fully rendered for multiple times. I want avoid angular slickgrid multiple times rendering.

            Current behavior

            While adding or updating a record, angular slickgrid renders multiple time

            Expecting behavior

            While adding or updating a record, angular slickgrid needs to update the particular row dataview only

            Here i shared my gridoptions for your reference.



            Answered 2020-Jul-19 at 01:05

            First of, you're using updateDataGridItem() which is an old and deprecated method, you're supposed to get console warning in your browser telling you to use the newer updateItem() method.

            Second, you provided your Grid Options but that has nothing to do with grid rendering and/or update. What you should have included in your question is the entire code for the update item part. Since you didn't include that part, I can only assume that you're doing just that item update and nothing else!?! but that is just an assumption...

            If you use the newer updateItem() method, you can provide some extra options in the 2nd argument, one of which is the highlightRow (which is enabled by default) which will probably re-render the grid couple times, you can disable it like so



            Angular 7 SlickGrid Detail-View: Can't pass EventEmitter from Detail-View(child) component to SlickGrid (parent) component
            Asked 2020-Jan-23 at 23:55

            I am using Angular SlickGrid as parent component and plugin Detail-View as child component. In Detail-View component I'm using few buttons for specific tasks. One of them is button Delete. The issue is when the button is clicked, it triggers components service to delete selected row from the grid by it's ID. Back-end works perfectly. BUT! On the front-end side that row is still visible, unless I reload the page manually. And I need that row from parent component would be deleted on click. I tried to use EventEmitters but aperently SlickGrid doesn't recognizing this functionality. If everything would be in one component, I could ease use: this.angularGrid.gridService.deleteItemById(del_id); but since detail-view data is passed by rowDetailView in this.gridOptions there is no component template tagging like

            My Detail-View Component (child):



            Answered 2020-Jan-23 at 23:55

            Please note that I'm the author of Angular-Slickgrid.

            I agree that it was challenging to do this in prior version, so to deal with this I added new references to the SlickGrid, DataView references and also Parent Component instance to the Row Detail extension, so you can now access all of these new references into your Child Component. To get advantage of these new changes, please update to the latest Angular-Slickgrid version 2.16.x.

            Now with these references you can take advantage of them and change your Row Detail Child Component to the following

            You can see a live demo of your question (how to delete a row from the Child Component) in the updated Row Detail Example and I have also updated the Row Detail Wiki

            Child Component - Row Detail View


            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install angulargrid

            You can install using 'npm i angulargrid' or download it from GitHub, npm.


            For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • HTTPS


          • CLI

            gh repo clone s-yadav/angulargrid

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link