How to use ToolBar.Template() with ToolBar.Excel() in kendo grid - kendo-grid

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.

Related

button only works occasionally using AJAX

Below there's the function I use in my JavaScript file. It works sometimes when I clicked the button, but sometimes it doesn't.
How can I fix this issue?
function getEditForm(id) {
console.log("masuk editform")
$.ajax({
url: `${baseUrl}/todos/${id}`,
method: "GET",
headers: {
access_token: localStorage.getItem("access_token")
}
})
.done(todos => {
editPage()
$("#edit-title").val(`${todos.title}`)
$("#edit-description").val(`${todos.description}`)
$("#edit-due-date").val(`${(todos.due_date)}`)
$("#edit-todo-button").on("click", (e) => {
e.preventDefault()
editTodo(id)
})
})
.fail((xhr, text) => {
swal("Oops!", xhr.responseJSON.error[0], "error")
console.log(xhr.responseJSON.error[0])
})
}
Below the code inside document ready, it should be jus like that, right?
$("#btn-edit").on("click", (e) => {
e.preventDefault()
getEditForm(id)
})
below the html code, using append method to make m app dynamic:
$("#card-content").append(`
<div class="col-sm-6" id="todo-${el.id}">
<div class="card mt-3 mx-1 shadow" style="width:auto">
<div class="card-body">
<h5 class="card-title">${el.title}</h5>
<h6 class="card-subtitle mb-2 text-muted">${el.description}</h6>
<p class="card-text">Due date: ${el.due_date}</p>
<span>
<button type="button" class="btn btn-secondary btn-block d-inline mt-2" id="btn-status-${el.id}" style="width:auto;" onclick="updateStatus(${el.id})"><i class="bi bi-x-square"></i> Not Done</button>
<button type="button" class="btn btn-warning btn-block d-inline" id="btn-edit-${el.id}" style="width:auto;"><i class="bi bi-pencil" onclick="getEditForm(${el.id})"></i> Update</button>
<button type="button" class="btn btn-danger btn-block d-inline" id="btn-delete-${el.id}" style="width:auto;"><i class="bi bi-trash" onclick="deleteTodo(${el.id})"></i> Delete</button>
</span>
</div>
</div>
</div>
`)
See here you have an onclick function inside your fontawesome icon(i) tag so the getEditForm() function will be called only when you click on icon not on button part,
also the id you have given in button tag is dynamic
id="btn-edit-${el.id}"
so I think the below code will not work
$("#btn-edit").on("click", (e) => {
e.preventDefault()
getEditForm(id)
})
Workaround is just include onclick event on button tag instead of icon tag and pass id as a parameter to it

Create an input link in the button

How can I input a link in the button when I press the button?
<div class="buttons">
<span class="sold-out-tag position-top-right">Best Seller</span>
<button class="btn custom-btn position-bottom-right"> Add to cart</button>
</div>
Also you can trigger a link by JavaScript.
<button
onclick="window.location(this.getAttribute('data-link'))"
data-link="/hello">go to hello</button>
One way could be to use an anchor tag instead of the button and make it look like a button.
HTML:
<div class="buttons">
<a class="btn custom-btn position-bottom-right"> Add to cart</a>
</div>
CSS:
.custom-btn {
border: medium dashed green;
}
Alternatively, you could do:
<button class="btn custom-btn position-bottom-right" onclick="location.href='yourlink.com';"> Add to Cart </button>
Try this:
<a href='http://my-link.com'>
<button class="GFG">
Click Here
</button>
</a>
You can use the anchor tag and provide a Bootstrap class for the button, like,
<a class="btn btn-success" href="link"> Add to Cart</a>
If the label "Add to cart" matches the expectations, we'd be talking about a form. A form that causes an element to be added typically uses the POST method:
<form class="buttons" method="post" action="/path/to/add/to/cart/script">
<input type="hidden" name="product" value="123">
<span class="sold-out-tag position-top-right">Best Seller</span>
<button class="btn custom-btn position-bottom-right"> Add to cart</button>
</form>
Alternatively, there's GET as well:
<form class="buttons" method="get" action="/path/to/add/to/cart/script?product=123">
<span class="sold-out-tag position-top-right">Best Seller</span>
<button class="btn custom-btn position-bottom-right"> Add to cart</button>
</form>
Since GET doesn't carry additional payload, you'll get the same effect with a regular anchor:
Add to cart
You don't want search engine spiders to populate carts, so you typically leave GET for data fetching.

use ngModel inside <p> tag in Angular 8

Html code:
<div class="col-md-4" *ngFor="let card of allCards">
<p class="card-text">Card Color: {{card.color}}</p>
<button type="button" class="btn btn-sm btn-primary product-btn" (click)="addCard()">Add Card</button>"
Here I also want to bind the value "card.color" into another variable (maybe using ngModel) so that I can use it inside my typescript file in angular 8.
I tried the below but not working:
<p class="card-text" [(ngModel)]="cardColor">Card Color: {{card.color}}</p>
You could send the contents to the button click event's handler.
Template (*.html)
<div class="col-md-4" *ngFor="let card of allCards">
<p class="card-text">Card Color: {{card.color}}</p>
<button
type="button"
class="btn btn-sm btn-primary product-btn"
(click)="addCard(card.color)"
>
Add Card
</button>
Controller (*.ts)
addCard(color: any) {
// use `color` here
}

Razor Page and Bootstrap, no space between links

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.

How to add font-awesome within <asp:Button>

I had a html/css code like this
using font at http://fontawesome.io/icons/
and <i class="fa fa-times"></i> is the font icon.
<button class="btn btn-default"><i class="fa fa-times"></i> restore</button>
Now, I want to change it to ASP.NET WebControls . However I can't add font within it. Anyone has way,thanks.
<asp:Button ID="Button1" runat="server" Text="restore"/>
You can't with the default asp.net button you will need to use a HTML button and give it runat=server attribute:
<button runat="server" id="btnRun" class="btn btn-mini" title="Search">
<i class="icon-camera-retro"></i> Search
</button>
So use code behind with this you add:
onserverclick="functionName"
To the button, then in your C# do:
protected void functionName(object sender, EventArgs e)
{
Response.Write("Hello World!!!");
}
So final button looks like:
<button runat="server" id="btnRun" onserverclick="functionName" class="btn btn-mini" title="Search">
<i class="icon-camera-retro"></i> Search
</button>