So I have a datagrid which fetch all and a search menu. I have an issue when I move to page 4 and then search for some specific items only, it would replace all the data in the grid with a new datas but the page stay at page 4th instead of 1. I need it to be 1 since new datas are not related to old ones
Found out that I can use ClrDatagridPagination as a viewchild to control.
#ViewChild('pagination') pagination: ClrDatagridPagination;
I have the exact same scenario. The above solution did the fix:
#ViewChild('pagination') pagination: ClrDatagridPagination;
// reset page
this.pagination.currentPage = 1;
Related
I have an AppMaker app that has a from based off of one address table/datasource. I can get a form with next/prev buttons, but replaced the key field (name) with a dropdown list of all names (a user can start typing names to jump there, with the dropdown showing).
My hope is that when a user selects from the dropdown, the entire form updates and the next/prev buttons work properly as well (there too many records to page thru with next/prev only). I don't have to have next/prev functionality if it complicates things too much.
Currently the dropdown is working, but I cannot get the index for the next/prev buttons set or the rest of the form to reflect the selected dropdown record.
I've tried to set the "onValueEdit" event to something like this...
var selected = widget.value;
var idx = widget.options.indexOf(selected);
console.log("Selected: "+selected+", index = "+idx+"\n");
if(idx < 0) { //...this error is never hit
console.log("Index error - setting to zero!\n");
idx = 0;
}
widget.datasource.loadPage(idx); //...update form?
Two observations via console logging:
The "idx" var is never set to the selected dropdown index reliably, and is
often "0" (tho no error msg ever shows), so the "indexOf()" function
isn't working as expected.
The "selected" var (name) is always correct.
If I call widget.datasource.loadPage(...) with a fixed value (say 5) it has no effect on what is shows in the form either (previous loaded data remains) - obviously not the way to do it :v/
Can you steer a noob in the right direction?
If you are using default App Maker form, then you can see that so-called pager, doesn't actually paginate. It triggers prevItem/nextItem datasource methods, in other words it navigates through datasource items, not pages. Here is a quote from App Maker docs:
nextItem: Selects the next item. For Query Datasources, if the current item is the last item on the page, then this loads the next page and selects the first item on the newly loaded page.
So, if you already have all your items loaded(you set query page size for your datasource to 0), then you need just to change selected item within datasource:
// onValueEdit dropdown event
// assuming, that form and dropdown share same datasource
widget.datasource.selectKey(newValue._key);
If you really have lots of items and it is not feasible to load all of them in one call... then it will be all another story...
UPDATE:
It's important that Options and Value are set as shown in the image below!
However, I had trouble setting them that way (read: wasted hours!) until I wiped them both completely using More options in the binding picklist, and tried again (I had even tried on a brand new app!). I was being forced to choose ..projections.. and then a final field before the OK button would be available.
Not sure if AppMaker is buggy here or there is something simple I'm not understanding!
None of the coding in my original question is required.
Once set this way, binding just works as you would expect it!!
All other fields are set as #datasource.item. and are bound to whatever item is chosen. No Events settings are necessary for the dropdown either, as I thought they might be.
I deleted this page and started again, and replaced the default business name data field with a drop down, I set the dropdown as:
Options: #datasources.Addresses.items
Value: #datasources.Addresses.item
It works fine?! Not sure what happend in my original page!
UPDATE:
So it seems you need to delete both the Value and Options and then re-enter these. The OK will light up when you do.
Also, my original take on App Maker was to build the UI and attach data. That was my first mistake. You build the data then have App Maker build edit/add pages for you.
I have a list widget with five rows per page. When the user goes to the next page I reload the page (by doing an unload/load on the data source with the new page number) and that works fine. However, the list stays scrolled to the bottom. How can I scroll the list to the top so the user does not have to?
I tried the ways that work in standard HTML but they do not work in AppMaker, and I cannot find any documentation on how to do this.
Thanks for any tips or pointers.
I realize this is an old post, but for future visitors, here's what worked for me - you need to set the index of the list to zero. App Maker ensures that it scrolls the last selected item into view, and maintains this across navigations.
You can do this by passing in a callback function that runs after loading the list. For me, I reload the list from a dropdown widget that filters the list, so in the onValueChange event I've added:
// Load datasource
widget.datasource.load(function() {
// Set index to 1 to ensure we scroll to top of list
app.datasources.YOURDATASOURCE.selectIndex(0);
});
You can achieve the desired behavior by doing the following:
In the outline, locate the TablePanel widget and select the List:TableBody widget
2.In the property editor, scroll to the Events section and click on the onDataLoad event value. Then click on Custom Action.
Type in this code var elem = widget.getElement(); elem.scrollTop = 0; so that it looks like this
Make sure the change is saved and then preview your app and it should work. Let me know if you need something else or if it don't work.
For me Morfinismo's answer didn't work, but the following did:
In the style editor add CSS for the List element:
.app-pageName-nameOfTheListWidget {
overflow-y: auto;
}
And in the Property Editor under Layout set a Max height.
I am refreshing dojox.grid.EnhancedGrid using dojo.data.ItemFileWriteStore per second. I have a dijit.layout.TabContainer where EnhancedGrid is present in one of the tab. When I switched the tab and come back to grid tab, the whole grid disappears.
What can be the solution?
var store = new dojo.data.ItemFileWriteStore({
url: '',
data: result,
urlPreventCache: false
});
grid.setStore(store);
I'm not sure about using EnhancedGrid but I had the same error when I used DataGrid to create a dynamic and changing matrix and this is how I was able to fix it.
Your problem arises because:
Your old structure property in the grid doesn't support the new store (different fieldnames etc.). If you don't get the structure right, Dojo complains and you don't see a grid.
I'm pretty sure it's this one. grid.setStore(newStore) doesn't work the second time probably because grid adapts itself to the first declaration of the store. I had tried the grid.setStore() and grid.setStructure() methods and it didn't show up after the first "refresh".
My solution:
Empty your container with dojo.empty() and create a new grid in that container every time you refresh with your new store
I have a problem at which I have a view that will display a featured item and 6 rows on the first page of the view, while displaying 9 rows on the rest of the pages. Is such a functionality possible with views?
Thanks!
A few methods I can think of. I have mentioned them on the basis of how long it will take you.
1) Create a custom css rule which hides two entries on the first page. As for the rest of the pages you can show it.
2) Find the template file of your particular views and then use php to hide those rows. You can find the name of this file in your views theme section.
3) You could write a php module which can do the same as views. Its not that hard to get it done.
UPDATE
Below is the jquery which will help you get the logic right
$(document).ready(function() {
var pathname = window.location.pathname;
// here we assignt he current url of the page to the var pathname
});
if(pathname =='firstPageofView')
{
// if the path name is the first page of the view then we assign special css formating
$('#divid').hide();
}
else
{
$('#divid').css('width','10px');
}
Cheers,
Vishal
I'm trying to create a comment system just like SO has, but first, I'd like to show first 5 comments for a post and show rest if "display all comments" is clicked for the desired reply.
What is the best way of doing this? I really couldn't found a good way for doing what I want. I must be missing something.
For info, comments datasource is a nested repeater in my page. The outer repeater is replies and inner repeater is comments. Currently I'm binding all comments for all results (even if it has 10000 replies.). Also, I don't want to do paging for comments. I just want it to work the same way as SO.
Any ideas?
EDIT: Now I'm thinking of having 2 tables for comments which are:
A table which only has 5 rows of data and will be visible by default. I need filtering to do this. Linq filtering code would be great!
A table which has all the results. No filtering. I have no problems with this one.
So here is what I have for the data:
DataRowView dv = e.Item.DataItem as DataRowView;
if (dv != null)
{
Repeater commentRepeater = e.Item.FindControl("childRepeater") as Repeater;
if (commentRepeater != null)
{
commentRepeater.DataSource = dv.CreateChildView("myrelation");
commentRepeater.DataBind();
}
}
As you can see, I have created a relation between tables in my dataset and I'm binding that datarow to my repeater. I need to do top 5 filtering on the datarow.
Thank you
I suggest to use JSON returned from ASP.NET Web Services with jQuery.
http://www.mikesdotnetting.com/Article/96/Handling-JSON-Arrays-returned-from-ASP.NET-Web-Services-with-jQuery
http://www.electrictoolbox.com/json-data-jquery-php-mysql/
If you want to append the left over items to the current repeater item you could have a button at the end of the coments that is attached to a jquery function that will fetch the rest of the comments for you. Then once the data is recieved your function would just append the comments to the list of other comments mimicing what the repeater was doing and replacing the 'show all' button.
If you don't want to use any ajax to do this then you will probably need to rebind the comments Repeater with a new set of data that is not limited to just the first 5 results.
EDIT: Based on your comment and changes you have editted, I would go with one table with all comments and in the DataBinding of each comment set the row style to visible with a global counter. Once your have more than 5 set the style to a hidden style for each item. When they click the show all button, just switch the style from hidden to visible for the rest comments that are hidden. This will save you duplicating the data for the first 5 items which could turn into a lot of extra rows if there are a lot of answers with comments.