I am new to angular js. I have read this question before Conditional cell template in ui-grid angularjs and its absolutely worked for me, but I am just wondering how to display html like a button tag instead of text, because when I am trying to change it to html, it always display html as text
Thanks and sorry because of my bad english
js file
var columnDefs = [
{
field: 'action',
displayName: label.action,
width : 175,
enableCellEdit: false,
cellTemplate: '<div>{{grid.appScope.states.showMe(row.entity.j_code, row.entity.branch_cd)}}</div>',
}];
scope.gridOptions.columnDefs = comlumnDefs;
$scope.states = {
showMe: function(j_code, branch_cd) {
template = "<button class='btn-small btn-green btn-add'>Add</button>";
if (j_code != "" && branch_cd != "") {
template += "<button class='btn-small btn-green'>Copy</button>";
}
return template;
}
};
html file
<div id="grid1" class="gridStyle" ui-grid="gridOptions" external-scopes="states" ui-grid-pinning ui-grid-resize-columns ui-grid-pagination ui-grid-edit ui-grid-row-edit ui-grid-cellnav ui-grid-selection ui-grid-exporter></div>
I do not know if you ve found the asnwer or not but there are others who visit to find an answer.
.Columns(c =>
{
c.Add().DataField("give a name").CellTemplate("<input type=button>");
}
you can add a checkbox or other functions into the type.
Related
I need some help. How can I add new values in code to the list if I use a plugin from jquery. I wrote this code, but the list is empty, although the values are passed to the view. This is probably due to the fact that I am referring to the id of the div tag, but the plugin did not work differently. Help please
<html>
<main>
<form action="#">
<div class="form-group col-xs-12 col-sm-4" id="example-2"> </div>
</form>
</main>
<script>
$('#example-2').selectivity({
items: ['Amsterdam', 'Antwerp'],
multiple: true,
placeholder: 'Type to search a city'
});
function addOption() {
var ul = document.getElementById("#example-2");
for (var item in #ViewBag.List)
{
var value = item;
}
var newOption = new Option(value, value);
ul.options[ul.options.length] = newOption;
}
</script>
</html>
result of code from answer 1
The documentation of the selectivity library covers how to add new options to the dropdown.
The main issue you have is that the output from #ViewBag.List won't be in a format that JS can understand. I would suggest formatting it as JSON before outputting it to the page, then the JS can access this as a standard object, though which you can loop.
// initialisation
$('#example-2').selectivity({
items: ['Amsterdam', 'Antwerp'],
multiple: true,
placeholder: 'Type to search a city'
});
// add options, somewhere else in your codebase...
const $list = $('#example-2')
const options = #Html.Raw(Json.Encode(ViewBag.List));
options.forEach((option, i) => {
$list.selectivity('add', { id: i, text: option })
});
Note that for this to work the JS code which reads from the ViewBag needs to be placed somewhere the C# code will be executed, ie. in a .cshtml file, not in a .js file.
I have these rows:
each row is being outputted by the DataTable plugin within app.js
my target is this particular value, ${row.category_id}
let TABLE = $('#categoryList').DataTable({
{ data: 'id', name: 'id', width: '10%', orderable: false, searchable: false,
render: (data, type, row) =>{
let html = "";
if(row.category_name && row.category_name.toUpperCase() !== "GENERAL"){
html += `<ul class="list-inline no-margin">`;
html += `<li class="list-inline-item">
<button type="button" value="${row.category_id}" class="edit_category btn btn-outline-secondary"><i class="fas fa-edit" aria-hidden="true"></i> Edit</button>
</li>`;
html += `</ul>`;
}
return html;
}
}
});
now I have this blade file, index.blade.php that is connected to app.js using:
<script src="{{asset('/modules/bbr-category-configuration/js/app.js')}}"></script>
What I need to resolve is the constant below:
#section('scripts')
<script type="text/javascript">
const SELECTED_CATEGORY_ID = 1;
</script>
#endsection
by default it is set as 1, but this needs to changed each time the 'Edit' button is clicked (refer to the screenshot). Once the button is clicked, I need to get ${row.category_id} and assign it to the const SELECTED_CATEGORY_ID. What is the correct way of doing this?
TLDR: how do I pass a value from .js back to .blade.php?
What I tried:
my first obstacle is to get the value from ${row.category_id} on click, but here is where I got stuck
$(document).on('click', '.edit_category', function () {
console.log(${row.category_id});
});
I cannot console.log (to test if I got the correct variable) outside the DataTable because it cannot be read, or do it inside toe columns because it is not the right syntax.
please feel free to ask for any clarifications.
First of all, if your variable's data will change during the process then it is not const it should be declared as let. You should know the difference between var let and const.
And you can use data-* attributes in the edit button so you can easily fetch the category_id when that button is clicked eg:
<button type="button" data-category=`${row.category_id}`class="edit_category">Edit</button>
Then on click event, you can get that data using
$('.edit_category').click(function (e) {
SELECTED_CATEGORY_ID = $(this).data('category');
});
You can fetch the value attribute of the button too using jquery. But generally, I don't use that. Or I haven't seen much usage of that too. You can try it like this too
$('.edit_category').click(function (e) {
SELECTED_CATEGORY_ID = $(this).value;
});
I am using the response data from the server in my itemTemplate function to create a list of checkboxes with values.
The issue I am facing is, if there is a variable whose value has spaces in it eg: "In Progress" then it does not render correctly.
Below is my itemTemplate function and the html element after the data render.
itemTemplate: function (e) {
return "<li class='k-item><label class='k-label'><input type='checkbox' value=#= data.Status || data.all # />#= data.Status|| data.all #</label></li>"
}
Here is a demo of the same.
Is there a way to render the data so I could get the whole text inside the value attribute? Or Am I doing something wrong here?
Please suggest, Thank you !
You need to add escaped quotes like this:
\'#=data.country|| data.all #\'
$("#grid").kendoGrid({
columns: [ {
field: "country",
filterable: {
multi:true,
itemTemplate: function(e) {
return "<li class='k-item><label class='k-label'><input type='checkbox' value=\'#=data.country|| data.all #\' />#= data.country|| data.all #</label></li>"
}
}
}],
I need to show a button in my ui-grid as long as the field value is NOT an empty string. I tried using ng-if but it is not working. Here is the code in my grid options:
{ field: 'ReleaseStatus',
width: 125,
displayName: 'Release Status',
cellTemplate:
'<div ng-if="row.entity.ReleaseStatus != """>
<button id="editBtn"
type="button"
class="btn btn-default"
data-toggle="modal"
data-target="#myModal"
ng-click="grid.appScope.launch(row)">
{{COL_FIELD}}
</button>
</div>'
},
Without the ng-if the button displays and works great. However, because some records have an empty string for the field ReleaseStatus, the button should not appear.
Any assistance is greatly appreciated.
you should write it this way:
'<div ng-if="row.entity.ReleaseStatus !== \'\'">'
you can also put the ng-if directly on the buttom you are trying to hide.
however be careful of using ng-if because it creates a new scope everytime.
Solution 1:
There is a simple way to do this, please have a look on this example.
{
name: 'nameishere', displayName: 'Display Name', cellTemplate:
'<div class="ui-grid-cell-contents" ng-if="grid.appScope.haveFile(row.entity.nameishere)"><a href="' + apiURL + '/InvalidFiles/{{row.entity.nameishere}}" download="{{row.entity.nameishere}}" >{{ row.entity.nameishere}}</a></div>'+
'<div class="ui-grid-cell-contents" ng-if="grid.appScope.haveNotFile(row.entity.nameishere)">{{ row.entity.nameishere}}</div>'
},
and create multiple functions OR use a function with if-else
$scope.haveFile = function (data) { return data == 'No File to Display' };
$scope.haveNotFile = function (data) { return data != 'No File to Display' };
Solution 2: You should write it this way, string and integer handle in a different way.
cellTemplate:'<div ng-if="row.entity.status !== \'Your String Here\'">'
cellTemplate:'<div ng-if="row.entity.status !== 23>'
Solution 3: Use ng-if like this
cellTemplate:'<div>{{row.entity.status == 0 ? "Active" : (row.entity.status == 1 ? "Non Active" : "Deleted")}}</div>';
I have gone through the documentation forward and back and I cannot seem to find a way to give the header filter for one of the columns focus when it loads. The user typically filters on the same column every single time. I use these grids for line of business applications and every click or 'tab' saved is 500 saved per person per day.
this.gridOptions.columnDefs = [
{ field: 'Order' },
{ field: 'Qty.' }
];
Then I have the following for the html, so Order gets a filter, but it is not focused by default.
<div ui-grid="taskCtrl.gridOptions" ui-grid-selection ui-grid-auto-resize></div>
Thanks!
Here is a solution I found out for this problem.
You need to add autofocus to text box of the header filter while creating the column definition.
You can do this by coding something like this:
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ field: 'name' },
{ field: 'company',
headerCellTemplate: '<div ng-class="{ \'sortable\': sortable }"><div class="ui-grid-vertical-bar"> </div><div class="ui-grid-cell-contents" col-index="renderIndex"><span>{{ col.displayName CUSTOM_FILTERS }}</span><span ui-grid-visible="col.sort.direction" ng-class="{ \'ui-grid-icon-up-dir\': col.sort.direction == asc, \'ui-grid-icon-down-dir\': col.sort.direction == desc, \'ui-grid-icon-blank\': !col.sort.direction }"> </span></div><div class="ui-grid-column-menu-button" ng-if="grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false" class="ui-grid-column-menu-button" ng-click="toggleMenu($event)"><i class="ui-grid-icon-angle-down"> </i></div><div ng-if="filterable" class="ui-grid-filter-container" ng-repeat="colFilter in col.filters"><input type="text" autofocus class="ui-grid-filter-input" ng-model="colFilter.term" ng-click="$event.stopPropagation()" ng-attr-placeholder="{{colFilter.placeholder || \'\'}}" /><div class="ui-grid-filter-button" ng-click="colFilter.term = null"><i class="ui-grid-icon-cancel" ng-show="!!colFilter.term"> </i> <!-- use !! because angular interprets \'f\' as false --></div></div></div>'
}
],
onRegisterApi: function( gridApi ) {
$scope.gridApi = gridApi;
$scope.gridApi.core.on.sortChanged( $scope, function( grid, sort ) {
$scope.gridApi.core.notifyDataChange( $scope.gridApi.grid, uiGridConstants.dataChange.COLUMN );
})
}
};
In the above code sample you can see that the headerCellTemplate is being written explicitly. Here is the place you can do the change to get the autofocus. You can do anything you want in this cell template. But be careful not to change any underlying cell template. This may break ui-grid functionality. Hope this helps!
I found the above solution in the below plunker link:
http://plnkr.co/edit/JuDUwpUBwglkDRUYT77g?p=preview