Try to hide the Copy button in Kendo grid depend the value of status column in the grid in the function gridDataBound(e) {}
If you want to show and hide the button in columns, try the following
columns.Bound(c => c).Width(30).ClientTemplate("#if(Processed !='True'){#<button type='button' class=' btn-primary menus' title='Edit' href='\\#' onclick=\"view('#=ID)\" ><i class='fa fa-edit'></button>#} else {##");
Related
I want a input which has a button besides it, and whenever I click on the button it takes me to a location(to be precise : "https://localhost:5000/message/to={{inputbyuser}}") where {{inputbyuser}} is the input which the user has entered. Also as I will be hosting it later I want not the localhost to come but the webpage to get it's own domain. Is there a way?
My HTML snippet:
<input type="text" placeholder="Enter the username to chat : " class="input-required"/><button type="submit" class="btn btn-lg"><i class="fas fa-paper-plane"></i></button>
And yes the send button is a icon.
Yes!
First, give the button an ID of submit_btn and the input field an ID of input_field, then, add some JavaScript on the end of your page:
document.getElementById("submit_btn").addEventListener("click", () => {
const input_value = document.getElementById("input_field").value;
window.location.href = `https://localhost:5000/message/to=${input_value}`;
});
I hope this helped!
react beginner here, here i have antd checkbox, i want to change this checkbox into a button but still have checkbox functionality: here is my checkbox:
import { Checkbox } from "antd";
<div className="modal-body d-flex flex-column">
<Checkbox
indeterminate={indeterminate}
onChange={onCheckAllChange}
checked={checkAll}
>
Select All{" "}
</Checkbox>
</div>
this is what i tried to do, i tried to give opacity zero to checkbox to hide it and then put checkbox inside a button in order to change the look of it to button and have checkbox functionality, but problem is, this new button is working if you click on the left side of the button but right side is not working, any solution ?
:
import { Checkbox } from "antd";
<div className="modal-body d-flex flex-column">
<button>
<Checkbox
style={{ opacity: "0" }}
indeterminate={indeterminate}
onChange={onCheckAllChange}
checked={checkAll}
>
Select All{" "}
</Checkbox>
Select All
</button>
</div>
If you want the button to do exactly what the checkbox does, simply pass the onCheckAllChange to the button onClick.
<div className="modal-body d-flex flex-column">
<button onClick={onCheckAllChange}>
Select All
</button>
</div>
and your handle change is something like this assuming your state variables are
checkedList, indeterminate, and checkAll:
const onCheckAllChange = (e: any) => {
setCheckedList(!checkedList.length ? allColumnKeys : []);
setIndeterminate(false);
setCheckAll(!checkAll);
};
I have a table using Knockout and Typescript. Each record on the table is expandable with an expand button. Clicking this expand button toggles the collapse button. The problem I'm having is that when there are more than 1 records in the table, clicking this expand button toggles the collapse button for all of the records in the table. Is there anyway to just toggle the one I've clicked? Here's the code:
HTML
<a href="#" data-bind="attr: {'id': 'show_' + $index()}">
<img src="../../Images/expand.gif" class="expand_button" alt="Show Checks" title="Show Checks" border="0" data-bind="click: PrintCheck.GetBankDrafts, visible: !$parent.expand(), click: PrintCheck.ToggleExpand">
<img src="../../Images/collapse.gif" class="collapse_button" alt="Show Checks" title="Show Checks" border="0" data-bind="visible: $parent.expand(), click: PrintCheck.ToggleExpand">
</a>
The Typescript
class SearchPrintedChecksModel {
public expand = ko.observable(false);
public checkRuns = ko.observableArray<CheckRunModel>(null);
}
$(document).ready(() => {
ko.applyBindings(printModel);
});
var printModel = new SearchPrintedChecksModel();
export function ToggleExpand(data: CheckRunModel): void {
printModel.expand(!printModel.expand());
GetBankDrafts(data);
}
You'll want each table to keep track of its own expanded state. Your toggle variable appears to be global with respect to the tables so it's getting globally applied to all of them.
First you'll have to have a separate observable for each table to keep track of their respective expanded states. Move the expand variable from SearchPrintedChecksModel to the model for your table (CheckRunModel?). Then in your ToggleExpand function change printModel.expand(...) to data.expand(...). Finally in your binding change "visible: $parent.expand()" to just "visible: expand".
I have rows in table which generate buttons dynamically
<tr ng-repeat="task in task">
<td>{{task.Name}}</td>
<td>{{task.Comments}}</td>
<td>{{task.Project}}</td>
<td>{{task.Duration}}</td>
<td>
<button class={{editable}} ng-click="editTask(task.id)"></button>
<button class="glyphicon glyphicon-trash"></button>
</td>
</tr>
In my Angular code I have
$scope.editTask = function(id){
if($scope.editable == "glyphicon glyphicon-edit"){
$scope.editable="glyphicon glyphicon-floppy-save";
}
else{
$scope.editable="glyphicon glyphicon-edit"
}
}
So basically I want to change the edit glyphicon to save glyphicon and the save glyphicon back to edit glyphicon. But since I have assigned class to the button it changes the glyphicons of all buttons in the table. How can I change the icon of only the button of which is clicked?
By assigning the editable variable to the task object:
$scope.editTask = function(task){
if(task.editable == "glyphicon glyphicon-trash")
task.editable="glyphicon glyphicon-floppy-save";
else
task.editable="glyphicon glyphicon-trash";
}
and in your HTML:
<button ng-class="editable" ng-click="editTask(task)"></button>
This way, you'll end up having an unique class for each of your task object.
Also, remember to use ng-class instead of the plain class attribute.
Approach 1
You can update your HTML to
<td>
<button class="glyphicon" ng-class="task.editable" ng-click="editTask(task)"></button>
<button class="glyphicon glyphicon-trash"></button>
</td>
Passing the task instead of the id directly allows you to update it's editable state directly on the task. Your controller should update the editable property
$scope.editTask = function(task){
if(task.editable == "glyphicon-edit") {
task.editable="glyphicon-floppy-save";
}
else{
task.editable="glyphicon-edit"
}
}
Note: I've passed the glyphicon class directly to the button since it won't change.
Approach 2
You could also approach it another way and keep the condition in the HTML
<button class="glyphicon" ng-class="task.editable ? 'glyphicon-edit': 'glyphicon-floppy-save'" ng-click="editTask(task)"></button>
And your controller could just update the editable property
$scope.editTask = function(task){
task.editable = !task.editable;
}
Set the editable property on the task itself and then use task.editable. This will be a unique property for each task
you need to make some changes to your code. I'm gonna provide you the code I used in order to achieve what I believe is your goal, and will then explain the reasoning behind it.
<table>
<tr ng-repeat="task in tasks">
<td>{{task.Name}}</td>
<td>{{task.Comments}}</td>
<td>{{task.Project}}</td>
<td>{{task.Duration}}</td>
<td>
<button class={{task.editable}} ng-click="editTask($index)"></button>
<button class="glyphicon glyphicon-trash"></button>
</td>
</tr>
</table>
As you can see, I included an attribute inside the task called editable. I'll be using this attribute to change the class. You'll also notice I', using $index. This is a default counter for ng-repeat.
$scope.tasks.push({Name: 'Jorge', Comments: 'Comentario',Project: 'Tengu', Duration: 45, editable: "glyphicon glyphicon-trash"});
$scope.tasks.push({Name: 'Mermelada', Comments: 'Comentario2',Project: 'DM-300', Duration: 30, editable: "glyphicon glyphicon-trash"});
You'll need to add the editable properties to your objects.
$scope.editTask = function(id){
if($scope.tasks[id].editable == "glyphicon glyphicon-trash"){
$scope.tasks[id].editable="glyphicon glyphicon-floppy-save";
} else{
$scope.tasks[id].editable="glyphicon glyphicon-trash"
}
}
I don't believe this needs much explanation. Please let me know otherwise.
If you simply want to switch between class just use ng-class
exemple, you have a variable leftOrRight, we will assume that you have two class in you css file: floatLeft and floatRight (with the attribute float: right/left; )
ng-class="{ floatRight : leftOrRight == 'right', floatLeft : leftOrRight == 'left' }"
If you set leftOrRight to "right" you will have the same thing as class="floatRight" for exemple.
How to put a column menu in toolbar of a kendo grid to select the columns as per need?
dataSource: $scope.kDisplayReceivedOrders,
toolbar: ["save", "cancel",
{
template:
'<button class="k-button k-button-icontext " ng-click="confirmReceivedOrder()" >Confirm</button>' +
'<button class="k-button " ng-click="printReceivedOrderDetails()">Print</button>'
}
],
You cannot insert the columnMenu froma a Kendo grid inside a toolbar because Kendo add it to the current grid.
But what you could do is a self implementation of the behavior of this menu inside your own toolbar. I have done it recently for a project.
What I have done:
An angular component.
When clicking on the component I read what columns are visible.
I do that throgh the .getOptions() and then inspecting the columns property of the object returned. The invisible columns will have a hidden=true.
Then in the template I show all the columns with a checkbox to switch the visibility.
hideColumn() and showColumn() should be attached to the action of checking or unchecking a checkbox.
Angular component controller:
init() {
if(this.grid)
this.columns = getColumns(this.grid.getOptions().columns);
}
checkbox(column) {
column.visible === true ? this._objectViewService.grid.showColumn(column.field) : this._objectViewService.grid.hideColumn(column.field);
}
A method to convert from kendo defaults to my visualization system:
function getColumns(columns) {
let cols = [];
columns.forEach(column => cols.push({title: column.title, field: column.field, visible: column.hidden !== undefined ? !column.hidden : true}));
return cols;
}
The template:
<div class="columnDropdownComponent">
<p class="title" ng-mouseover="$ctrl.init()">
<button>Columns<span class="icon-navigation-down"></span></button>
</p>
<div class="dropdown">
<div class="group">
<label ng-repeat="column in $ctrl.columns" ng-class="{'checked': column.visible}">
{{column.title}}
<input type="checkbox" ng-model="column.visible" ng-click="$ctrl.checkbox(column)">
</label>
</div>
</div>