I am new to angularjs and I want create one Page in which I want to add 2 ui-grid with one button called "other-grid" first time it must Load 1st grid and when we click again then 1st grid must replace with 2nd grid But some Problems are there I want to use ng-show and ng-hide it works for first grid but not loading 2nd grid Properly Why So and Any Solution Please..
You are probably better off using ng-if when dealing with ui-grid.
As for ng-show, it does weird things when rendering ui-grids (refer to: https://github.com/angular-ui/ui-grid/issues/4559)
Here is plunker of 2 grids with a toogle button:
http://plnkr.co/edit/IGF6X7SqtFdFSk8jiory?p=preview
<button ng-click="toggleuigrid()">toggle grid</button>
<div class="row">
<div class="span4" ng-if="show">
<div id="grid1" ui-grid="gridOptions1" class="grid" ></div>
</div>
<div class="span4" ng-if="!show">
<div id="grid2" ui-grid="gridOptions2" class="grid" ></div>
</div>
</div>
Make sure you give the 'other' hidden grid proper height and width so that the framework knows the grid dimensions
You can try using ng-if, ng-show, ng-hide and make the other grid visible when you click on the button - 'other grid'
Here is the official UI grid tutorial which does something similar to what you want
Related
I'm working on a project that uses a masonry layout to display a list of multiple boxes with variable heights. But in this project, I use a filter that when clicked, filters all the boxes based o a class, and hides the one which doesn't have that class. The problem is that when I hide some boxes the whole structure of the layout brakes, and I cant simply remove the boxes because the filter can be deactivated and all the boxes appear again, or his class argument can also change, modifying the visible boxes again.
The Masonry script and CSS that I'm using it's this this, above is the structure that I'm using for my boxes:
<div class="masonry-root">
<div class="masonry-cell">
<div class="masonry-item">
</div>
</div>
<div class="masonry-cell">
<div class="masonry-item">
</div>
</div>
</div>
Simply hide the elements didn't work.
Removing and hiding the elements and then calling the script again also didn't work.
If anyone is having trouble with this, I fond a better way to deal with my problem.
Use the Mansory Dessanto plugin solved my problem completely. The structure of the code got simpler and you can add, hide, and remove blocks on the grid and it will organize it again.
<div class="grid">
<div class="grid-item">
<div class="content"></div>
</div>
<div class="grid-item">
<div class="content gray"></div>
</div>
<div class="grid-item">
<div class="content"></div>
</div>
</div>
With this structure I do all the layout preparation with a single function, like this:
// inicialize the plugin layout
$('.grid').masonry({
// options
itemSelector: '.grid-item'
});
// a simple event could trigger the next part
// hidding the selected element
// (remove has the same efect but the elemnte would not appear again if
// necessary)
$('.content.gray').hide();
// executing again the plugin
$('.grid').masonry();
I arranged the checkboxes and the text right next to each other using bootstrap grid. But, when I click on the textbox other than the first one, only the first checkbox gets enabled. How do I make the respective checkboxes get enabled without distorting the order?
Here is my stackblitz url
The stackblitz is not working properly but one thing you can try is making the id of the checkboxes unique like
component-
public routes=[{"id":1, "place":"Chennai - 500085/Madhapur, TS"}, {"id":2,
"place":"chennai-mumbai"}, {"id":3, "place":"chennai-madhapur"}, {"id":4,
"place":"chennai-secundrabad"}];
html-
<div class="col-sm-1" style="margin-top: 10px;">
<mat-checkbox class="check-style" id="route.id"></mat-checkbox>
</div>
<div class="col-sm-10">
<div class="routesList">
{{route.place}}
</div>
</div>
I hope it helps.
I have seen this answer but it answers for jquery and not angular/typescript.
My question is similar to this question, but my question is seeking a solution for angular.
How can I remove wrapper (parent element) without removing the child in Angular using typescript or scss? (If it is possible by both kindly show both methods).
For example how to programatically manupulate the dom below from
<div class="wrapper">
<span>This is It!</span>
</div>
<div class="button">Remove wrapper</div>
to: (After clicking on the button I would like to have the dom iook like below)
<span>This is It!</span>
<div class="button">Remove wrapper</div>
EDIT:
Kindly also show how to set it so that it can add the wrapper div back when I click the button again. Basically toggling the wrapper div.
I think you can simulate using ng-template and two divs, some like
<div *ngIf="toogle" class="wrapper">
<ng-content *ngTemplateOutlet="template"></ng-content>
</div>
<ng-content *ngTemplateOutlet="!toogle?template:null"></ng-content>
<ng-template #template>
<hello name="{{ name }}"></hello>
</ng-template>
<button (click)="toogle=!toogle">toogle</button>
See a example in stackblitz
I'm typically more of a backend guy, but I find myself working on a project that requires some frontend work. I'm fumbling my way through using bootstrap, and I find myself stuck on the following:
<div id="form" class="col-md-6">
<!-- form goes here -->
</div>
<br /> <!-- multiple br tags do nothing, as long as col-md-6 is used above -->
<div id="image_container">
<image src="myimage.jpg" />
</div>
I want a gap between the end of the form and the top of the image, but col-md-6 seems to be resulting in there being overlap, and the image-div is vertically larger than it is on the same page with col-md-6 removed.
Admittedly, CSS has never been my forté, but I'm hoping to address that soon. In the meantime, can someone help me out with this issue?
Seems you're not using the grid system correctly, you have to use rows and cols to separate your elements in your frontend.
Check this link about Bootstrap Grid System
In my code i have a bunch of items rendered by ng-repeat.
These items use the bootstrap class col-md-3
and i'd like to add a feature which allows the user to see a large detail panel by clicking on one of these items.
However i'd like to accomplish it by having only one detail panel in my DOM and moving it around.
The html is like this:
<div ng-repeat="thing in thingsCtrl.things">
<thing-widget class="col-md-3"></thing-widget>
</div>
<thing-detail ng-show="thingsCtrl.showDetail" class="col-md-12"> </thing-detail>
any chance to accomplish?
Thanks in advance.
You could try moving the thing-detail inside the ng-repeat and use $index to add it or not.
<div ng-repeat="thing in thingsCtrl.things">
<thing-widget class="col-md-3"></thing-widget>
<thing-detail ng-if="$index === nth" ng-show="thingsCtrl.showDetail" class="col-md-12"> </thing-detail>
</div>