I don't know why after adding the if statement a margin/space between my action links disappears. I'm pretty sure that a HTML looks the same with or without #if (User.IsInRole("Admin")) (from the admin perspective). I'm using bootstrap 4.1.
<section id="sec5">
<div class="container pt-5">
<div class="table-responsive-sm mb-3">
<table class="table">
<tr>
<th>Name</th>
<th class="text-right">Action</th>
</tr>
#foreach (var u in Model)
{
<tr>
<td>#u.Name</td>
<td class="text-right">
#if (User.IsInRole("Admin"))
{
#Html.ActionLink("Edit", "Edit", new { id = u.SpecialityId }, new { #class = "btn btn-secondary" })
#Html.ActionLink("Delete", "Delete", new { id = u.SpecialityId }, new { #class = "btn btn-danger" })
}
</td>
</tr>
}
</table>
</div>
</div>
</section>
E:
https://jsfiddle.net/xoduf1sp/5/
In your example both the second link follows the first link immediately.
If i add a linebreak between them in the html the usual inline element gap appears.
Maybe your if clause does somehow elimitate whitespace/linebreak characters between the two links?
Was:
<a class="btn btn-secondary" href="#">Edit</a><a class="btn btn-danger" href="#">Delete</a>
Should be:
<a class="btn btn-secondary" href="#">Edit</a>
<a class="btn btn-danger" href="#">Delete</a>
See http://jsfiddle.net/xoduf1sp/7.
Related
My code is like this: when you check the 'hide' column, the whole row is hidden. I also have a 'Show All' checkbox. When I check it, all rows (including the hidden ones) are shown. But when I uncheck it, all rows disappear. How can I make it so only the hidden rows disappear when I uncheck 'Show All', and the other rows still remain visible?
<body ng-app="myApp" ng-controller="myController">
<h1>Fruits in Vietnam</h1>
<hr>
<form name="myForm">
<div class="input-group input-group-lg">
<input type="text" class="form-control" name="mdfruitname" id="txtfruitname" ng-model="mdfruitname"
required>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" ng-click="addnew()"
ng-disabled="myForm.mdfruitname.$pristine || myForm.mdfruitname.$invalid">Add
</button>
</div>
</div>
</form>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Hide</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="fruit in fruitnameDetail" ng-show="showall" ng-hide="hidef">
<td>{{fruit.fruitname}}</td>
<td><input type="checkbox" ng-model="hidef"></td>
<td>
<a class="btn btn-xs delete-record" ng-click="removefruitname($index)">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
</tr>
</tbody>
</table>
<div><input type="checkbox" ng-model="showall"><span>SHOW ALL</span></div>
</body>
<script>
var app = angular.module("myApp", []);
app.controller('myController', function ($scope, $window) {
$scope.fruitnameDetail = [
{
"fruitname": "Banana"
},
{
"fruitname": "Mango"
},
{
"fruitname": "Orange"
}
];
$scope.addnew = function () {
var fruitnameDetail = {
fruitname: $scope.mdfruitname
};
$scope.fruitnameDetail.push(fruitnameDetail);
$scope.mdfruitname = '';
};
$scope.removefruitname = function (index) {
var name = $scope.fruitnameDetail[index].fruitname;
if ($window.confirm("Do you want to delete " + name + " ?")) {
$scope.fruitnameDetail.splice(index, 1);
}
};
});
</script>
Do not use ng-show and ng-hide at the same time. Just change a little bit your condition for ng-repeat. Here the example that should work:
<body ng-app="myApp" ng-controller="myController">
<h1>Fruits in Vietnam</h1>
<hr>
<form name="myForm">
<div class="input-group input-group-lg">
<input type="text" class="form-control" name="mdfruitname" id="txtfruitname" ng-model="mdfruitname"
required>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" ng-click="addnew()"
ng-disabled="myForm.mdfruitname.$pristine || myForm.mdfruitname.$invalid">Add
</button>
</div>
</div>
</form>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Hide</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="fruit in fruitnameDetail" ng-show="showall || !hidef">
<td>{{fruit.fruitname}}</td>
<td><input type="checkbox" ng-model="hidef"></td>
<td>
<a class="btn btn-xs delete-record" ng-click="removefruitname($index)">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
</tr>
</tbody>
</table>
<div><input type="checkbox" ng-model="showall"><span>SHOW ALL</span></div>
</body>
I am creating MVC app and using Bootstrap Modal to give an opportunity to user to check input data, and to send those data to controller using Ajax. Modal window:
<div class="modal" tabindex="-1" role="dialog" id="myModal" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Check input data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
#using (Ajax.BeginForm("SelectReservationDateTime", new AjaxOptions { UpdateTargetId = "divChangeRegion" }))
{
<div class="modal-body">
<table class="table">
<tr>
<td>Category name: </td>
<td><b>#Model.CategoryName </b></td>
</tr>
<tr>
<td>Date: </td>
<td><label id="SelectedDateTimeLabel"></label></td>
</tr>
<tr>
<td>Client name: </td>
<td><input type="text" name="ClientName" id="ClientName" value="#Model.ClientName" /></td>
</tr>
<tr>
<td>Client code: </td>
<td><input type="text" name="ClientCode" id="ClientCode" value="#Model.ClientCode" /></td>
</tr>
</table>
</div>
<input type="hidden" name="CategoryId" id="CategoryId" value="#Model.CategoryId" />
<input type="hidden" name="SelectedDateTime" id="SelectedDateTime" />
<div class="modal-footer" id="divChangeRegion">
<input type="submit" class="btn btn-info" value="OK" data-backdrop="static">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
}
</div>
</div>
</div>
And after pressing the submit button I execute controller's method which save inputed data in database and send back partial view, whcih I want to input in those Modal
Controller's code:
public ActionResult SelectReservationDateTime(ReservationTimeModel PartialViewModel)
{
...
return PartialView(newModel);
}
Partial view code:
#model EQueue.Data.Ticket
<div class="row">
<div class="col-md-4 offset-md-4">
<table>
<tr>
<td class="border" id="printThis">
You get ticket №<b>#Model.CodeTicket</b><br />
Category Name <br />
<b>"#Model.TicketCategory.NameCategory"</b><br />
</td>
</tr>
<tr>
<td><input type="button" class="btn btn-primary text-center" value="Print ticket" onclick="printTicket('printThis')" data-dismiss="modal"></td>
<td><input type="button">
</tr>
</table>
</div>
</div>
<script>
function printTicket(partForPrint)
{
var printContents = document.getElementById(partForPrint).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
But I get new window instead of creating partial view in existing Modal, can anybody help me?
Firstly I would change this line:
#using (Ajax.BeginForm("SelectReservationDateTime", new AjaxOptions { UpdateTargetId = "divChangeRegion" }))
To:
#using(Html.BeginForm(null, null, FormMethod.Post, new {id = "whatever"}))
Then have some jquery that uses the id of the form to check if it's been submitted. Once it has you should fire an ajax call to that method of yours that returns a partialview. To implement a partialview you need to specify a div where it will be place using an id and then in your success use this line of code to put the partialview into that div.
$("id of the div").html(result);
I have a table which contains some data and some buttons which changes according to response and user.
Here's the table.
<div class="form-group">
<div class="col-lg-12 col-md-9">
<table id="basic-datatables" class="table table-bordered" cellspacing="0" width="100">
<thead style="text-align:center">
<tr>
<th rowspan="1" colspan="1" style="width:100px; text-align:center">Employee ID</th>
<th rowspan="1" colspan="1" style="width:100px; text-align:center">Employe Name</th>
<th rowspan="1" colspan="1" style="width:100px; text-align:center">Email</th>
<th rowspan="1" colspan="1" style="width:100px; text-align:center">Department</th>
<th rowspan="1" colspan="1" style="width:100px; text-align:center">Date Created / Joined</th>
<th rowspan="1" colspan="1" style="width:110px; text-align:center">Actions</th>
</tr>
</thead>
<tbody style="text-align:match-parent">
<tr ng-repeat="data in details = (FilterDetails | limitTo:itemsPerPage:(currentPage-1)*itemsPerPage)">
<td style="text-align:center">{{data.Employee.Empid}}</td>
<td style="text-align:center">{{data.Employee.Fname}} {{data.Employee.Lname}}</td>
<td style="text-align:center">{{data.Employee.Email}}</td>
<td style="text-align:center">{{data.Department.DeptName}}</td>
<td style="text-align:center">{{data.Employee.Date_of_join | dateFormat}}</td>
<td style="text-align:center; width:100px">
<div>
<button type="submit" class="btn btn-success pad btn-sm" ng-click="Generate(data)">Generate</button>
<!--<button type="submit" class="btn btn-success pad btn-sm" ng-click="state = true" ng-hide="state">Generate</button>-->
<button type="submit" class="btn btn-warning btn-sm" ng-show="data.UserLogin.Status=='pending'">Pending</button>
<button type="submit" class="btn btn-default btn-sm" ng-show="data.UserLogin.Statuss=='pending'">Retry</button>
</div>
</td>
</tr>
</tbody>
</table>
<p ng-show="details.length == 0">No Users found.</p>
<div class="col-md-8 col-xs-12">
<uib-pagination total-items="totalEmployees" ng-model="currentPage" ng-change="pageChanged()" max-size="maxSize" boundary-links="true" class="pagination" items-per-page="itemsPerPage"></uib-pagination>
</div>
</div>
</div>
What I need to get done is that when the response comes from the JSON data the buttons have to change. Now according to this;
Generate button should show whendata.UserLogin.Status == ''(empty)
Pending button should show when data.UserLogin.Status == 'pending'
Retry button should show when data.UserLogin.Status == 'pending'
How do I achieve this. Help woud be appreciated.
You can use ng-show ng-hide or ng-if like below,
<button class="btn btn-default" ng-show="data.UserLogin.Status == ''">Generate </button>
or
<button class="btn btn-default" ng-hide="data.UserLogin.Status != ''">Generate </button>
or
<button class="btn btn-default" ng-if="data.UserLogin.Status == ''">Generate </button>
You should go for ng-if instead of ng-show or ng-hide. Because in case of ng-show or ng-hide based on the flag the content is loaded in the DOM. so if u try to change the value of flag by using web developer of browser u can be able to see the actual content. But if u go for ng-if, the content is loaded at runtime only when the condition is true. so whenever u want a quicker performance you can go for ng-show or ng-hide but if we want runtime behavior u should use ng-if.
You can write code as below..
<button class="btn btn-default" ng-show="data.UserLogin.Status == ''">Generate </button>
<button class="btn btn-default" ng-show="data.UserLogin.Status == 'pending'">Pending </button>
<button class="btn btn-default" ng-show="data.UserLogin.Status == 'pending'">Retry</button>
We can use ng-if,ng-show,ng-hide like
<button type="submit" class="btn btn-success pad btn-sm" ng-click="Generate(data)" ng-if="!data.UserLogin.Status">Generate</button> <button type="submit" class="btn btn-success pad btn-sm" ng-click="Pending (data)" ng-if="!data.UserLogin.Status">Pending </button>
use ng-if ,it is efficient
Use below code in the success function of the API. This code will run after you get the response and the DOM is created.
$scope.$evalAsync(function(){
$timeout(function() {
// Here set the scope variable and it will work in ng-show
}, 0); // wait...
});
Note: Do not forget to add $timeout in the controller.
I have the following code :
<td>
<button class="btn btn-primary btn-xs" ng-click="r.changeView('requests/edit/' + request.id)">
<i class="fa fa-pencil-square-o"></i>
</button>
<button class="btn btn-primary btn-xs" ng-click="r.changeView('requests/edit/' + request.id)">
<i class="fa fa-step-backward"></i>
<i class="fa fa-step-forward"></i>
</button>
</td>
They appear on 2 different lines.
How can I make them appear next to each other on the same line ?
I tried a few things with float and display but without success.
If I add that code in a snippet the buttons are next to each other, so it's hard to reproduce:
<table>
<tr>
<td>
<button class="btn btn-primary btn-xs" ng-click="r.changeView('requests/edit/' + request.id)">
<i class="fa fa-pencil-square-o"></i>Button1
</button>
<button class="btn btn-primary btn-xs" ng-click="r.changeView('requests/edit/' + request.id)">
<i class="fa fa-step-backward"></i>
<i class="fa fa-step-forward"></i>Button2
</button>
</td>
</tr>
</table>
The buttons are already displayed as inline-block.
Maybe the table isn't wide enough; if so, You could try <td style='white-space: nowrap'>.
If you're using Bootstrap, try using classes like "pull-left". This will float both of the buttons left and bring them inline. Also check to be sure nothing is overriding the current display attribute.
<div class="pull-left">...</div>
<div class="pull-right">...</div>
Did you tried display: inline-block;?
However that seems unnecessary because two buttons in the same table cell will appear on the same line.
table,
td,
tr {
border: 1px solid black;
border-collapse: collapse;
}
<table>
<tr>
<td>
<button>Button1</button>
<button>Button2</button>
</td>
</tr>
</table>
What you need is just css display inline code, which can be use to format your button
form {
display: inline;
}
this displays an element as an inline element like span
Please see how to use <table> tag inside in <td> and get all button in line.
<table>
<td>
<table>
<tr>
<td>
<button class="btn btn-primary btn-xs">Add</button>
</td>
<td>
<button class="btn btn-primary btn-xs">Edit</button>
</td>
<td>
<button class="btn btn-primary btn-xs">View</button>
</td>
</tr>
</table>
</td>
</table>
I use toolbar.Template() and Toolbar.Excel() but toolbar.excel() don't show, just toolbar.Template() show.
.Excel(excel => excel
.FileName("Khu vực.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("ExportArea", "RegistrationManagement")))
//Cài đặt thanh Menu bên trên Grid
.ToolBar(toolbar =>
{
toolbar.Excel().HtmlAttributes(new { #class = "btn btn-danger", style = "float: left" });
toolbar.Template(#<text>
<div class="toolbar" style="float:right">
<a class="btn btn-danger k-grid-add" href="#">
<i class="glyphicon glyphicon-plus"></i> Thêm mới
</a>
<button class="btn btn-danger" data-toggle="modal" data-target="#myModal">
Nhập bằng Excel
</button>
</div>
</text>);
})
I delete toolbar.Template(), Toolbar.Excel() show(picture following):
http://i.imgur.com/QR35aQE.png
I keep toolbar.Template(), it don't show:
http://i.imgur.com/aONQPzg.png
Help me, please!
Thank you!
P/s: I want button "Nhập bằng Excel" in front of button "Export to excel".
In order for the Excel button to show up on your toolbar you'll have to include the HTML for it inside the template.
In your case it would be something like this:
.Excel(excel => excel
.FileName("Khu vực.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("ExportArea", "RegistrationManagement")))
//Cài đặt thanh Menu bên trên Grid
.ToolBar(toolbar =>
{
toolbar.Template(#<text>
<div class="toolbar" style="float:right">
<a class="btn btn-danger k-grid-add" href="#">
<i class="glyphicon glyphicon-plus"></i> Thêm mới
</a>
<button class="btn btn-danger" data-toggle="modal" data-target="#myModal">
Nhập bằng Excel
</button>
<button class="k-button k-grid-excel btn btn-danger">Export to Excel</button>
</div>
</text>);
})
The following line of HTML that you're adding
<button class="k-button k-grid-excel btn btn-danger">Export to Excel</button>
...is basically whatever this line of code would generate:
toolbar.Excel().HtmlAttributes(new { #class = "btn btn-danger", style = "float: left" });
So just load the page once with the toolbar template commented out, see what HTML toolbar.Excel() generates and then copy and paste that inside the template.