The default value for ngbCollapse is false, as described at https://ng-bootstrap.github.io/#/components/collapse. The example given there uses the following code: https://ng-bootstrap.github.io/app/components/collapse/demos/basic/plnkr.html
<p>
<button type="button" class="btn btn-outline-primary" (click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
Toggle
</button>
</p>
<div id="collapseExample" [ngbCollapse]="isCollapsed">
<div class="card">
<div class="card-block">
You can collapse this card by clicking Toggle
</div>
</div>
</div>
How does one over-ride the default so that the toolbar is collapsed by default?
Noticed the same thing. Initialize the variable in a constructor and it works fine.
export class AppComponent {
isCollapsed:boolean;
constructor() {
this.isCollapsed = true;
}
Modifying this within the Typescript seems to drive away from the intent of using the module's provided properties. Instead, by utilize [ngbCollapse] you do not need add to Typescript and have more control with the advantage of ngDirectives.
<div id="collapseExample" [ngbCollapse]="!isCollapsed">
Additionally, when used within dynamically generated content (*ngFor...[ngbCollapse]=) you can take advantage of ng-if-else conditional states
*ngIf="getIsEditing(buffer); then tableEdit; else tableView;"
Related
I am using syncfusion grid in blazor.
Here is my Razor :
<div class="card-outer p-0">
<div class="grid-table">
<EjsGrid DataSource="#ManufacturedCoupons" AllowPaging="true">
<GridPageSettings PageCount="5" PageSize="5"></GridPageSettings>
<GridColumns>
<GridColumn Field=#nameof(Coupon.MaterialIdType) HeaderText="#CommonResource.MaterialID" Width="130" TextAlign="TextAlign.Center"></GridColumn>
<GridColumn Field=#nameof(Coupon.MaterialId) HeaderText="#CommonResource.MaterialID" Width="130" TextAlign="TextAlign.Center"></GridColumn>
<GridColumn Field=#nameof(Coupon.LotNo) HeaderText="#CommonResource.LotNo" Width="100" TextAlign="TextAlign.Center"></GridColumn>
<GridColumn Field=#nameof(Coupon.ArrivalDate) HeaderText="#CommonResource.DeliveryDate" TextAlign="TextAlign.Center" Width="150"></GridColumn>
<GridColumn HeaderText="#CommonResource.Action" TextAlign="TextAlign.Center" Width="120">
<Template>
#{
<div class="actions">
<img src="images/export.svg" alt="#CommonResource.SendToStock" #onclick="SendToStockClicked()">
</div>
}
</Template>
</GridColumn>
</GridColumns>
</EjsGrid>
</div>
</div>
this is my method in code behind file :
protected void SendToStockClicked(Coupon coupon)
{
}
I want to pass selected row data in this method on action button clicked.
How can I achive that ?
I'm not acquainted with syncfusion... I only know blazor. What I know from Blazor is that if you want to call a method and pass it a value you should use a lambda expression. Let's say that you have in your grid an object named MyCoupon of type Coupon, and you want to pass it to a local method called SendToStockClicked...This is how you call SendToStockClicked:
#onclick="#(() => SendToStockClicked(MyCoupon))"
Incidentally, this "javascript:void(0);" is JavaScript, and you shouldn't use JavaScript in Blazor...
Hope this helps...
EDIT
You are half right. It indeed help me so I am marking it true but still I have to do some fixes which I am putting it here.
<Template>
#{
var couponData = (context as Coupon);
<div class="actions">
<a href="javascript:void(0);"
title="#CommonResource.SendToStock"
#onclick="(()=> SendToStockClicked(couponData))">
<img src="images/export.svg"
alt="#CommonResource.SendToStock">
</a>
</div>
}
</Template>
Here I have to take couponData to send my custom method object.
I'm new to aurelia. I'm looking to find the best method for adding classes on click events.
I simply want to click approve or request information, and then add a class to the corresponding "contact card". This class would change the background color.
I know it's probably simple, but I thought I'd look here for the best method.
Here's an image to what I've got:
Apologies for the wait, work has been a bit busy.
This is my first time posting on S.O., so I apologize for any expectations I'm not meeting.
<div class="col-sm-4">
<button class="btn btn-success col-sm-12" click.delegate="goodBoi()">
approve contact
</button>
</div>
<div class="col-sm-4">
<button class="btn btn col-sm-12" click.delegate="requestContact()">
request information
</button>
</div>
</div>
the element to be changed is named "list-group-item", containing the
contact's details(code shown above).
<template>
<div class="contact-list">
<ul class="list-group">
<li repeat.for="contact of contacts" class="list-group-item ${contact.id === $parent.selectedId ? 'active' : ''}">
<a route-href="route: contacts; params.bind: {id:contact.id}" click.delegate="$parent.select(contact)">
<h4>${contact.firstName} ${contact.lastName}</h4>
<p>${contact.company}</p>
<p>${contact.email}</p>
<h6>${contact.approval}</h6>
</a>
<a route-href="route: contacts; params.bind: {id:contact.id}">
<p>${contact.phoneNumber}</p>
</a>
</li>
</ul>
</div>
goodBoi() {
let result = confirm("Are you sure you want to confirm this contact?");
if (result === true) {
var standingShell = document.getElementsByClassName("list-group-item");
//im hoping here I would add a class to the new variable//
this.contact.approval = 'approved';
this.save();
}
}
//confirms contact, changing color of approved contact//
//same thing here, just plan to give it a different color//
requestContact() {
let contactRequestText = "request sent to contact";
this.routeConfig.navModel.setTitle(this.contact.approval = contactRequestText);
this.ea.publish(new ContactUpdated(this.contact));
}
There are many ways to set a CSS-class using Aurelia. Following I prepared an example gist:
Template:
<template>
<h1>${message}</h1>
<div class="form-group ${clicked ? 'red' : 'blue'}" style="width: 100px; height: 100px;">
</div>
<div class="form-group">
<button click.delegate="save()">
Click me
</button>
</div>
</template>
And the code class:
#autoinject
export class App {
#bindable clicked = false;
save(){
this.clicked = true;
}
}
https://gist.run/?id=425993b04a977466fa685758389aa2b4
But there are other, cleaner ways:
using ref in a custom element.
custom attributes.
Include jQuery for using e.g. $('#myelement').addClass()
I've made a menu showing systems and their subsystems (can in theory be indefinitely) using a recursive component. A user can both add and delete systems, and the menu should therefore update accordingly.
The menu is constructed using a "tree"-object. This tree is therefore updated when a new system is added, or one deleted. But, I now have a problem; even though the new child component is added when the tree is rerendered, the classes of it's parent-component doesn't update. It is necessary to update this because it defines the menu-element to having children/subsystems, and therefore showing them.
Therefore, when adding a new subsystem, this is presented to the user:
<div class="">
<a href="#/Admin/364" class="item">
<i class=""></i>Testname
<div class=""></div>
</a>
</div>
Instead of this:
<div class="menu transition visible" style="display: block !important;">
<a href="#/Admin/364" class="item">
<i class=""></i>Testname
<div class=""></div>
</a>
</div>
It works fine adding a subsystem to a system which already have subsystems (since the menu-class is already present), but not when a subsystem is added to one without subsystems. In that case, the menu ends up looking like this:
The "opposite" problem also occurs on deletion, since the parent still has the menu-class:
Here's the code for the recursive component:
<template>
<router-link :to="{ name: 'Admin', params: { systemId: id } }" class="item" >
<i :class="{ dropdown: hasChildren, icon: hasChildren }"></i>{{name}}
<div :class="{ menu: hasChildren }">
<systems-menu-sub-menu v-for="child in children" :children="child.children" :name="child.name" :id="child.id" :key="child.id"/>
</div>
</router-link>
</template>
<script type = "text/javascript" >
export default {
props: ['name', 'children', 'id'],
name: 'SystemsMenuSubMenu',
data () {
return {
hasChildren: (this.children.length > 0)
}
}
}
</script>
I'm guessing this has to do with Vue trying to be efficient, and therefore not rerendering everything. Is there therefore any way to force a rerender, or is there any other workaround?
EDIT: JSFiddle https://jsfiddle.net/f6s5qzba/
I have 3 Bootstrap panels that expand/collapse when their headers are clicked.
However when changing to another route id (for example for :id=CarModel1 to id=CarModel2 with /cars/details/:id as route), I want to keep their state as was in the previous id after the user messes around with the panels, so that the user can compare the different details immediately when changing views.
How can I keep the panel state? Please, keep in mind I'm using ngRoute and not ui-Router.
Sample panel:
<div id="details">
<div class="panel-heading detailsPanel">
<a data-toggle="collapse" data-parent="#details" data-target="#collapseDetailsPanel">
<h4>Additional Details</h4>
</a>
</div>
<div id="collapseDetailsPanel" class="panel-collapse collapse">
<div class="panel-body">
<div>Lorem Ipsum</div>
</div>
</div>
</div>
Managed to do it by adapting a solution found here and using sessionStorage instead of $.cookie.
$("#details").on('shown.bs.collapse', function() {
var activeDetails = $("#details .in").attr('id');
sessionStorage.setItem('activeDetailsGroup', activeDetails);
});
$("#details").on('hidden.bs.collapse', function() {
sessionStorage.setItem('activeDetailsGroup', "inactive");
});
var lastDetails = sessionStorage.getItem('activeDetailsGroup');
if (lastDetails !== "inactive") {
//remove default collapse settings
$("#details .panel-collapse").removeClass('in');
//show the account_last visible group
$("#" + lastDetails).addClass("in");
}
Using just Angular JS Animate and Css Animation, I am trying to create an Expand/Collapse (Accordion) similar to the bootstrap collapse seen here: http://getbootstrap.com/javascript/#collapse
I have an issue with the expandable items, they pop back and forth depending on height of the expanded "show" content. See my Plunker for more a visual
My work so far:
var expandCollapseApp = angular.module('expandCollapseApp', ['ngAnimate']);
expandCollapseApp.controller('expandCollapseCtrl', function ($scope) {
$scope.active = true;
$scope.active1 = true;
});
http://plnkr.co/edit/wBYsFM?p=info
You should use UI Bootstrap Accordion. This component is written in pure AngularJS.
<div class="list card benefit-listCard">
<h3 class="accordion" ng-class="{active:accordion1}">
<a href ng-click="accordion1=!accordion1" style="padding:0px;"><div class="item item-avatar benefit-itemAvatar">
<img src="img/aws.png" class="service-img">
<h2>Amazon Web Services</h2>
<button class="button button-small button-outline button-calm detail-button">Get Deals</button> <div
class="fa fa-fw list-arrow" ng-class="{'ion-minus-circled': accordion1, 'ion-plus-circled' : !accordion1}" style="float:right;color:#44c8f5;font-size:25px;margin-top:10px;">
</div>
</div>
</a>
Lorem Ipsum1
Cytrus Pay
Get Deals
Lorem Ipsum2.
Amazon Web Services
Get Deals
Lorem Ipsum 3
jQuery UI has a similar method you could use?
http://jqueryui.com/accordion/