I am using DOJO for data grid presentation
<div id="grid_log" dojoType="dojox.grid.DataGrid" store="log" structure="window.layout_log" queryOptions="{deep:true}" query="{}" clientSort="true" rowsPerPage="5"> </div>
but problem is that grid_log doesn't show just 5 rows per page. What is wrong with this tag ? Why ignores rowsPerPage="5" ?
It's look like the rowsPerPage value isn't pages that are "viewed" - but rather, "virtual" pages. That is, the grid only renders portions of itself at a time (in order to improve performance for very large data sets) - and the rowsPerPage value is used to determine how many rows to render at a time.
If you scroll to a position on the grid that it outside the rendered pages, it will render it on demand.
If you are displaying more than 5 rows (due to the height that you have set on your grid) - then setting rowsPerPage to 5 will just cause the viewable portion to be rendered in batches of 5 rows at a time. i.e. there will be a query called to your datastore with start=0 and count=5, and another query sent with start=5 and count=5, etc - until all the visible rows are rendered.
However you can see on this page - it is example of grid with paging. May be it helps you.
As far as new dojo is concerned dojo 1.7.2 here you have the pagination feature where in the pages can be set for the enhanced datagrid.If that is what you want that you will have to import the pagination plugin from new dojo and set it in the grid.You can set the pages in the grid
Related
How can I manipulate DOM on page 2 (e.g. TD) when you are in page 1 of Datatables?
Using this code isn't possible because TD of another page is not on DOM until you select page 2.
$("td").html("some code here..");
When using jQuery DataTables, you cannot access the DOM on a different screen, because DOM elements exist on the current screen only.
Instead, you can access or change the DataTable's internal value of a table cell's contents by using the cell().data() function:
myDataTable.cell(row,column).data('some code here ...');
Example Fiddle
I'm using boostrap library on Yii via yii-booster
I've created a relation table view
The related view is a TbGriView itself
Vhen in a row i click on the link on the 'related' column, the row expands itself, and render a TbGridview inside it.
The problem is that the internal gridview cannot be sorte, paged or filtered, because each action on it causes that the entire container grid will empty
Note
- external grid as a id of 'extenalgrid'
- each internal grid has as id like 'internalgrid-$rowId' , so every internal grid as differnt id on div, table and table row elements.
- the action called from "render related tabel" link is using renderPartial without the postProcess option. If i use potProcess, the row will be empty
So is it not possible to rendere a full working gridview/tbgridview into a related table ?
Use different css classes for the filters, buttons and headers for the different tables. From the jquery.yiigridview.js file events are bound to selectors as $('#table-id .selector-class') so elements in your internal gridView still trigger the events bound to the external gridView. You also have to specify a different url for the internal gridView by setting it's ajaxUrl.
How to specify page size in dynamically in yii view?(not a grid view)
In my custom view page there is a search option to find list of users between 2 date
i need 2 know how to specify the page size dynamically? If number of rows less than 10 how to hide pagination ?
please check screen-shoot
I dont want the page navigation after search it confusing users..
my controller code
$criteria=new CDbCriteria();
$count=CustomerPayments::model()->count($criteria);
$pages=new CPagination($count);
// results per page
$pages->pageSize=10;
$pages->applyLimit($criteria);
$paymnt_details=CustomerPayments::model()->findAll($criteria);
$this->render('renewal',array('paymnt_details'=>$paymnt_details,'report'=>$report,'branch'=>$branch,'model'=>$model,'pages' => $pages,));
}
my view
Link
I'm assuming you want the entire list of search result be shown on a single page, no-matter how long it is?
If so, this is quite easy to achive.
As I can see in your code, you are now defining your pageSize to have a size of 10. You can update it to be dynamically be doing this:
$pages->pageSize = $count;
To remove the pagesizes you can change the css of your view file, but for that we would need your view file to see how you defined it.
I have a requirement to create a xaml page with Semantic Zoom where the zoomed in view contains both GridViews and ListViews. I have started out with the basic Grid Application template.
In order to try to achieve this, I have made the Semantic Zoom control's zoomed in view show a list view, and the list view contains the ListView and GridView controls I need to actually show the data as ListViewItems. This works, up to a point - the issue is that the mouse-down or tap animations happen on the whole child control of the parent ListView instead of the child's elements. This sort of layout would be simple if I didn't need to support semantic zoom.
So, my question is is this the best way to achieve this sort of layout, or am I missing something. If this is the best way, is it possible to control the behaviour so that the child item elements have the correct animation effect on selection?
Additional Info
The choice of GridView or ListView is based on the type of the items in the collections. In this example, grp 1, 3 and 4 (to be shown in grids) are all collections of type NewsFull and the remainder (to show in Lists) are of type HeadlineOnly, both types inherit from NewsBase.
The page layout (zoomed in) should be something like this...
Title
grp 1 grp 2 grp 3 grp 4 grp 5
[g][g][g][g] [_list item_] [g][g][g][g][g] [g][g][g] [_list_item_]
[g][g][g][g] [_list item_] [g][g][g][g][g] [g][g][g] [_list_item_]
[g][g][g][g] [_list item_] [g][g][g][g] [g][g] [_list_item_]
[g][g][g] [_list item_] [g][g][g][g] [g][g]
where [g] is a grid view item, and [_list_item_] is a list view item.
Zoomd out view is like this...
Title
grp 1 grp 2 grp 3 grp 4 grp 5
[summary] [summary] [summary] [summary] [summary]
Perhaps you can try using the ItemContainerStyleSelector to swap out the container of the items based on the item type or similar? This way, may be you can set one group to have a wrapping layout container and another can just be a stackpanel?
the design looks reasonable to me. the issue you have is merely " is it possible to control the behaviour so that the child item elements have the correct animation effect on selection?"
the problem here is that you probably lack abstraction here regarding different levels of UI object. I would assume you wrote this big control simply using one xaml object and then messed up with the style setup. In my opinion, you will need to break your UI to these levels of components:
ZoomPage // which is essentially a list
GroupElement // which could be GRID object or list object depending on the DATACONTEXT
GroupElement // which also has a summary state.
what you specified definitely can be achieved, looks to me just the styles are not deployed properly, if indeed your control is too complex, break it down, and test them separately.
hope this helps
I'm using Dojo.dnd to transfer items between to areas. The problem is: the items will snap into place once I drop them, but I'd like to have them stay where I drop them, but only for one area.
Here's a little code to explain this better:
<div id="dropZone" class="dropZone">
<div id="itemNodes"></div>
<div id="targetZone" dojoType="dojo.dnd.Source"></div>
</div>
"dropZone" is a DIV that contains two dojo.dnd.Source-areas, "itemNodes" (created programmatically) and "targetZone". Items (DIVs with images) should be dragged from a simple list out of "itemNodes" into "targetZone" and stay where they are dropped. As soon as they are dragged out of "targetZone" they should snap back to the list inside "itemNodes".
Here's the code I use to create the items:
var nodelist = new dojo.dnd.Source("itemNodes");
{Smarty-Loop}
nodelist.insertNodes(false, ['<img class="dragItem" src="{$items->info.itemtext}" alt="{$items->info.itemtext}" border="0" />']);
{/Smarty-Loop}
But this way I just have two lists of items, the items dropped into "targetZone" won't stay where I dropped them. I've tried a loop dojo.query(".dojoDndItem").forEach(function(node) to grab all items and change them to a "moveable"-type:
using dojo.dnd.move.constrainedMoveable will change the items so they can always be moved around (even in "itemNodes")
using dojo.dnd.move.boxConstrainedMoveable and defining the "box" to the borders of "targetZone" makes it possible to just move the items around inside "targetZone", but as soon as I drop them, I can't grab and move them back out. (Strange: dojo.connect(node, "onMoved" doesn't work here, the even won't fire, no matter what.)
So here's the question: is it possible to create two dnd.Sources where I can move items back and forth and let the items be "moveable" only in one of the sources?Or is there a workaround like making the items moveable and if they're not dropped into "targetZone" they'll be moved back to the list in "itemNodes" automatically?
Once the page is submitted, I have to save the position of every item that has been placed into "targetZone". (The next step will be positioning the items inside "targetZone" on page load if the grid has already been filled before, but I'd be happy to just get the thing working in the first place.)
Any hint is appreciated.
Greetings, Select0r
There is no direct support for such features. It can be done with a custom code, e.g., by subclassing a Source and overriding its insertNodes().
Here's a quick workaround to get this working:
I ended up using only one DIV which is a dojo.dnd.Source and contains the items that should be dropped into a "dropZone" and moved around in it while snapping back to the item-list when placed outside the dropZone.
All items are a dojo.dnd.move.parentConstrainedMoveable to make them movable in the originating DIV. Connecting to onMoveStop will give me the opportunity to decide whether the "drop" has occured in the dropZone or somewhere else.
if (coordX >= (dropCoords.l + dropAreaX) &&
coordX <= (dropCoords.l + dropAreaX + dropAreaW) &&
coordY >= (dropCoords.t + dropAreaY) &&
coordY <= (dropCoords.t + dropAreaY + dropAreaH))
{
// OK!
}
else
{
// outside, snap back to list
}
dropAreaX and dropAreaY contain the coordinates where the dropZone starts, dropAreaW and dropAreaH contain its width and height.
If "OK!", the items will be saved into an array, so I know which items have been dropped. Otherwise the item will be removed from that array (if it's in there) and the item will be placed back into the list (via CSS "left: 0"). The number of elements in the array will tell me how many elements are left in the list, so I can "stack" them in a loop using "top: numberOfElement * heightOfElement px").
There's more to it as I need the items coordinates written to hidden fields, but I guess this should get anybody who's working on a similar problem on the right track.