angular-ui/ui-grid

Discussions concerning ui-grid 4.0 development. See the tutorials: http://ui-grid.info/docs/#/tutorial

Yosi

@yosiasz

Greetings, within the ui-grid, is it possible to move items to different rows?

we need to implement this to allow changing ranking of items

Jeff Grossman

@jeffgrossman3000

You might need to say more about your use case. In my program, I assign a sort to the field and use notify to make it rejigger the rows. If I wanted to move values around I would do so in the data itself (so, in js/ts/whatever) rather than make a ui-grid API call.

Yosi

@yosiasz

use case: cyber security related recommendations have action items. action items have Rank. But things change so rank needs to change. maybe I could implement an arrow up/arrow down buttons that do the rank change by updating the data.

@jeffgrossman3000 thanks !

Yosi

@yosiasz

@jeffgrossman3000 use notify? uigrid haa notify?

Jeff Grossman

@jeffgrossman3000

See http://ui-grid.info/docs/#!/!/api/ui.grid.api:PublicApi about a third of the way down the page, "notifyDataChange(type)"

After all computations are finished, I call: $scope.gridMonApi.core.notifyDataChange( uiGridConstants.dataChange.EDIT );

Yosi

@yosiasz

👀👏👏👏

But do you commit the change to storage or just UI change? Fascinating

Yosi

@yosiasz

Ah maybe I can do a commit but no need to refecth to refresh the grid as it already has modified underlying data

Jeff Grossman

@jeffgrossman3000

The point of the notify is to tell the grid to re-draw itself anew.

    var nrows = $scope.gridOptionsMon.data.length;
    for (i = 0; i < nrows; i++) {
        $scope.get1Rand(20);
        $scope.gridOptionsMon.data[i].stroll = $scope.randOne;
    };
    $scope.gridMonApi.core.notifyDataChange( uiGridConstants.dataChange.EDIT );

This code walks the "Mon" grid, assigns a number to the "stroll" field, and after the walk is over I make sure the user sees what happened.

Yosi

@yosiasz

Yosi @yosiasz May 07 23:50
Very nice so no need to reload the whole grid by recreating it

GOPAL KUMAR

@Ginferyx

How to export ui-grid data as a image.

Jeff Grossman

@jeffgrossman3000

@Ginferyx I would say that is not a grid concern. You want a snapshot of the browser or the app window. Either you use a regular snipping tool and ask the user to choose the region, or you call any of various 'screen capture' APIs. Every browser is different so you'll have to do some digging.

ME2

@heyme2gm

@jeffgrossman3000 yes i have use third party api html2canvas.
but all data in ui-grid does not covert as an image.

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="script.js" ></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js'></script>
<script src='https://superal.github.io/canvas2image/c .js'></script><script src="./script.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Document</title>
<script>
angular.module('app', ['ui.grid']).controller('mycontroller', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptions = {
enableGridMenu: true,
gridMenuCustomItems: [
{ icon: 'fa fa-picture-o',
title: 'Export Data as image',
action: function ()
{
html2canvas(document.querySelector('ui-grid-canvas'), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
return Canvas2Image.saveAsPNG(canvas);
},
});
}, order: 100 } ],
};
$scope.gridOptions.columnDefs = [
{ field:'id',},
{ field:'name',},
{ field:'address', },
{ field:'age',},
{field: 'company',},
{field:'email',},
{field:'gender',},
{field:'balance',},
];
$scope.title ="Export as Image";
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.then(function(response) {
$scope.gridOptions.data = response.data;
$scope.mydata = response.data;
console.log($scope.gridOptions);
});
}]);
</script>
</head>
<body ng-controller="mycontroller">
<div ui-grid="gridOptions" id="screen" ui-grid-exporter class="grid"></div>
</div>
</body>
</html>

Yosi

@yosiasz

@heyme2gm it's not an issue with ui-grid

you are trying to do something outside of the functionality of ui-grid

you might want to look into the export feature of ui-grid

Chiva Song

@chiva.song1013_gitlab

testing

Yosi

@yosiasz

Greetings, I can seem to be able to get selected rows in a ui-grid. I have tried all kinds of stuff but I am about to settle managing the selected state with my own array that I pull data in and out.

Jeff Grossman

@jeffgrossman3000

What happens instead?

Yosi

@yosiasz

vm.selectednistsubcategories = gridApi.selection.getSelectedRows();
        console.log(vm.selectednistsubcategories);

nothing happens here.

ah! sorted out, needs to be in rowSelectionChanged duh! thanks @jeffgrossman3000

Yosi

@yosiasz

🐤

Yosi

@yosiasz

Anyone ever faced the challenge of having uigrid within 2 tabs, within directive? I keep getting error columnDef on undefined

One renders fine the first on in first tab bombs

Jeff Grossman

@jeffgrossman3000

I've had two on a page, but no tabs involved. Does each grid work if you sport it alone?

Yosi

@yosiasz

all my grids in one same page work fine, just like you said. the issue with when in they are within md-tabs, first tab grid errors, second tab gid succeeds

hmmm, this has already been reported here
angular-ui/ui-grid#4619

this entry says he solved it but not sure what person did
https://github.com/angular-ui/ui-grid/issues/4619#issuecomment-402720035

Jeff Grossman

@jeffgrossman3000

You're right, that explanation is not clear. I think he means that he created the grid with no data, then, after he knew it was registered (=>saw the alert), put the data into it.

I was just about to speculate as follows: If it is somehow the isolation of the tabs that is the issue so create the two grids on a plain page first and then dynamically munge the divs to create the tabs.

Yosi

@yosiasz

hmm interesting approach...

just went with good ol table for now, time crunch

this is my directive

        .directive('lookupSources', function () {

                    return {
                        restrict: "E",
                        templateUrl: "app/lookup/sources/sources.html",
                        controller: 'lookup',
                        controllerAs: 'vm',
                        bindToController: true
                    };
                })

i tried it with it's own controller. tried it with a shared controller. nada.

will fight this another day @jeffgrossman3000 thanks as usual!

Yosi

@yosiasz

@jeffgrossman3000 instead of md-tabs will try out accordion and see what happens

Jake Clarke

@JakeCla29978314_twitter

You can hire a developer at affordable rates here- https://bit.ly/3idG3FD

Yosi

@yosiasz

@jeffgrossman3000 accordion works just fine. hmm

Jeff Grossman

@jeffgrossman3000

That is funny, but there are so many different ways to implement this kind of macro level hide/reveal, and so many downstream consequences. If you can live with accordion, I say move on.

Yosi

@yosiasz

🤙

Jitender Kumar

@jkumar88:matrix.org

[m]

Jitender Kumar

@jkumar88:matrix.org

[m]

Any one know hwo to UI-Grid into png with scroll data Horizontal and Vertical ?

Yosi

@yosiasz

@jkumar88:matrix.org read up on this and implement per your requirements
http://ui-grid.info/docs/#!/tutorial/Tutorial:%20312%20Exporting%20Data%20With%20Custom%20UI

Where communities thrive

People

Repo info

Activity