by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
Tom McKearney
@tommck
:)
Tom McKearney
@tommck
If your dataset is externally controlled (maybe sorted or filtered), how do you trigger a reload of the data? YOu have to use a custom adapter at that point?
Tom McKearney
@tommck
oh.. figured it out, nevermind :)
Denis Alexanov
@dhilt
@tommck :+1:
Tom McKearney
@tommck
Is there a way to tell ui-scroll not to request negative index up front? it adds a lot of logic to the datasource get() to force the index + count to be correct in these situations.
I can't imagine too many situations where people actually WANT negative indexes
Tom McKearney
@tommck
2nd question: I don't see any mention of how to handle errors in data source get() calls. If the API I am calling times out or something.. how should we be handling this situation?
Tom McKearney
@tommck
So.. is there a better place to ask questions? :)
Denis Alexanov
@dhilt

@tommck Where is your data comming from? If it is some remote source, then the server side is responsible for indexes handling and the front end should not care about this. If you are using ui-scroll datasource.get as a data generator, then negative indexes handling is a part of your datasource logic. Anyway this logic should be implemented somewhere out of ui-scroll directive cause ui-scroll directive is not responsible for data generation and there is no option to tell the ui-scroll that the data will have no negative indexes at all. There may be a lot of ways how to implement it, e.g. https://github.com/angular-ui/ui-scroll/blob/master/demo/chat/chat.js.

Regarding error handling... Still the ui-scroll directive is not responsible for the data generation and the ui-scroll datasource.get is the only place for data retrieving, then I guess datasource.get should be used also for errors handling. And again, there's total freedom: in the example I just mentioned it may looked like Server.request(start, end).then(success).catch(errorHandler). So this falls to the ui-scroll user too.

Tom McKearney
@tommck
@dhilt I'm just pointing out that we're on computers and indexes to things rarely go negative. They also almost always start at zero. They start at zero in the language too. It just seems like a strange choice to default the first index to "1", when that's not even the default in the language it's written in
blackdebian
@blackdebian
hi, i working on ionic 3 project and i need try ui-scroll with it, but i don't know how import to my app angular modules, anyone can help ?
@PowerKiKi can you help me with this?
Denis Alexanov
@dhilt
@blackdebian I've played a bit with Ionic some time ago, look at the repo https://github.com/dhilt/ui-scroll-ionic
blackdebian
@blackdebian
thx
@dhilt i'm using angular 4 with lazy loading pages and components
Denis Alexanov
@dhilt
So, you may try https://github.com/rintoj/angular2-virtual-scroll or https://material.angularjs.org/latest/demo/virtualRepeat. The ui-scroll directive has no Angular2+ version.
blackdebian
@blackdebian
hum ok
thx :+1:
pavanthakur
@pavanthakur
Hello guyz, do we know which is best library to color scrollbar that works with ui-scroll. As when I try to use those library ui-scroll functionality is affected. Basically I want to consider coloring scrollbar for firefox as well, it will be good if any css dependent scroll bar is available. Any help\pointers will be very much appreciated. Thank you.
@dhilt have you worked on before
Denis Alexanov
@dhilt
@pavanthakur The ui-scroll library works with native scrollbar, so it should be possible to customize it in some way. But what's the way? If it uses javascript, then it needs not to be in conflict with ui-scroll javascript. This is a common thoughts, and each case should be considered separately. From our end, I have to say that we have no experience of ui-scroll scrollbar customization.
pavanthakur
@pavanthakur
ok thanks @dhilt for repl, I am searching for options. Thank you for the wonderful library, its great help.
pavanthakur
@pavanthakur
Basically I tried perfectscrollbar, slimscroll, nanoscroll, etc but my current functionality is not yet working as expected, hence thought to get head start from here. Thank you.
Tom McKearney
@tommck
what would cause the ui-router 0.4.2 to create a Controller for a page twice during a single navigation?
Tom McKearney
@tommck
oh.. just realized I have to "ui-view" divs nested.. I think that's causing it
Tom McKearney
@tommck
ugh.. no matter what I do, it's calling the Controller twice :(
Tom McKearney
@tommck
Nobody knows why a Controller would be called twice when OnEnter is only called once?
Denis Alexanov
@dhilt
@tommck I suggest you to write at https://gitter.im/angular-ui/ui-router
Tom McKearney
@tommck
oh jesus! lol
thought I was in there.. no wonder nobody responded!
thanks @dhilt
Denis Alexanov
@dhilt
:smile: :+1:
pavanthakur
@pavanthakur
@dhilt I want to fetch data from rest api c#, do you have any working reference example. I tried to look at examples given by you on website, but I am looking at similar example https://sroze.github.io/ngInfiniteScroll/demo_async.html
Denis Alexanov
@dhilt

@pavanthakur You don't need any special examples because the ui-scroll was initially designed for the purpose of remote data fetching, just do it in a way

datasource = {
    get: function (index, count, success) {
        Server.request(index, count).then(function (result) {
           success(result.items);
        });
    }
};

or to be more detailed in terms of javascript-fetch through the GET

datasource = {
    get: function (index, count, success) {
        fetch('/api/getData?from=' + index + '&to=' + (index + count)).then(function (result) {
           success(result.items);
        });
    }
};
pavanthakur
@pavanthakur

Thank you for reply actually myserver side records have no sequential index and I am trying to bring records according to pagination as below, problem I am facing for the second page of records. Like last 25 record (226 to 250) I am able to load properly with above logic, but next (221 to 225) I am unable to apply logic. I am scrolling last records to first record with scrolling up logic. Basically trying to apply prepend logic.

Sample example as below,
var query = ctx.People.Where(p => p.Name.StartsWith("A"));
var page = query.OrderBy(p => p.Name)
.Select(p => new PersonResult { Name = p.Name })
.Skip(skipRows).Take(pageSize)
.GroupBy(p => new { Total = query.Count() })
.FirstOrDefault();

pavanthakur
@pavanthakur
I am facing problem like how shall I trigger the next set of records and prepend the items to the previous set of records. I am working on chat application, so I am loading previous history on demand, but at same time getting new messages from other users.
Denis Alexanov
@dhilt
@pavanthakur So you need a reverse logic of items retrieving/displaying. We have a demo that could be helpful: https://rawgit.com/angular-ui/ui-scroll/master/demo/chat/chat.html. If you have an access to the backend code, you would be able to solve the issue on the server side. In other case you may look at angular-ui/ui-scroll#58, but I vote for backend changes.
pavanthakur
@pavanthakur
Thank you for the headsup, will go over it.
pavanthakur
@pavanthakur
I have looked at both the links, actually I am able to get records and implemented paging similar to mentioned in #58. However my problem is the new items are getting appended insted of prepended, when I scroll down and come up, then items are loaded in sequence properly. I am not able to resolve the issue of items being prepend for new page.
pavanthakur
@pavanthakur
I feel it is index issue where for old page (set of record) works properly, but I am not able to figure out implementation for new page, how to utilize index and continue datasource.get and prepend data on upword scrolling.
pavanthakur
@pavanthakur

For eg. https://rawgit.com/angular-ui/ui-scroll/master/demo/chat/chat.html
After adding 1-99 records and scrolling up items will be prepended with below logic
datasource.get = function (index, count, success) {
console.log('index = ' + index + '; count = ' + count);

        var start = index;
        var end = Math.min(index + count - 1, Server.first);

        Server.request(start, end).then(success);
    };

I want to trigger next set of records for example 100-199 with server.request, assuming it is requesting server for next page set of records.
@dhilt or anyone else here could please help? Thank you.

Denis Alexanov
@dhilt

@pavanthakur In the chat example the Server factory is just a back-end mock, so to make this sample work in real environment you would do following:

1) setup common datasource on the front end with start/end GET request to the remote

datasource.get = function (index, count, success) {
  var end = Math.min(index + count - 1, 0);
  fetch('/api/getData?start=' + index + '&end=' + end).then(function (result) {
    success(result.items);
  });
};

2) implement data fetching on the backend based on start/end and reversive logic according to this js code

var result = [];
if (start <= end) {
  for (var i = start; i <= end; i++) {
    var index = (-1) * i;
    var item = data[index];
    if (item) {
      result.push(item);
    }
  }
}
return result;

In that case appending/prepending process is fully server side responsibility. A new item has to be added? add it to the data array on the backend, then the front end will retrieve it automatically via datasource.get when a user will scroll to the border of the viewport.

pavanthakur
@pavanthakur
Thanks @dhilt for the sample I am not able to get solution, working on it. FYI, server side data is appended but the datasource.get is not working on second iteration.
szakmaster
@szakmaster
Hi, I am wondering that is it possible to use two ui-scroll directives within one ui-scroll-viewport? I would like to display two columns within a viewport. Each column would be filled up from different ui-scroll datasources. Thanks.
Denis Alexanov
@dhilt

@szakmaster If you want to join your data sources under a single viewport, then the indices of both datasources must be synchronised. In that case I would suggest following approach. Use single datasource implementation with single indices handing out-of-box, but make two parallel data requests and do a merge after the results are received. Something like:

$scope.datasource = {
  get: (index, count, success) =>
    Promise.all([Server.request1(index, count), Server.requst2(index, count)])
      .then(results => {
        let items = [];
        results[0].forEach((item, index) =>
          items.push({ r1: results[0][index], r2: results[1][index] })
        );
        success(items);
      });
};

At the end you'll get a mixed array of two columns consist of the results of two parallel requests. So, at the template you will be able to do following:

<div class="viewport" ui-scroll-viewport>
  <div class="item" ui-scroll="item in datasource">
    1 row: {{item.r1}}
    2 row: {{item.r2}}
  </div>
</div>
szakmaster
@szakmaster
Thanks @dhilt, it works now. However, I have another question related to using adapters. I want the data in the buffer to be updated as it is in the real data object. For this, I would use apply Updates and reload methods from Adapter. I added adapter="myAdapter" to the template and created a myAdapter object on controller scope. Where i
When I trying to call ctrl.myAdapter.reload(), console says reload is not a function. Should I implement reload on my scope?
szakmaster
@szakmaster
Same with applyUpdates(index, newItems[]). I saw the example codes and there it works without any extra implementation.
Denis Alexanov
@dhilt
@szakmaster I found the question on Stackoverflow, which is related to your last issue. I put my answer there: https://stackoverflow.com/a/47763044/3211932. I guess your problem could be in wrong scope assignment and to exclude it I would recommend to try Controller As syntax (adapter="myCtrl.myAdapter") or define your Adapter on the scope object explicitly: $scope.myAdapter = {}.