I need row.entity and col.field to determine if a button needs to be disabled or not, so here's the code for the cellTemplate of my UI-grid
cellTemplate:
'<div *ngIf="{{COL_FIELD}}"> '+
'<div class="ui-grid-cell-contents" > {{COL_FIELD}}' +
'<button uib-tooltip="Modifica" tooltip-placement="auto" ng-disabled="grid.appScope.modificaDisabled(row.entity, col.field)"'+
'rel= "{{row.entity}}" rol="{{col.field}}" '+
'class="btn btn-xs btn-primary stretto" style="float:right;" edit>'+
'<i class="fa fa-pencil fa-fw"></i>'+
'</button>'+
'</div>'+
'</div>'
and here's the function called
var modificaDisabled = function(riga,col){
console.log(riga)
console.log(col)
//disabling logic
}
The problem ( sgrid.appScope.modificaDisabled(row.entity, col.field) ) is that the second parameter passed (in this case col.field) results undefined but if i switch their position (col.field, row.entity ) col.field is actually defined but then row.entity results undefined.
Can anyone help me? I've seen another post talking about the spacing after the comma, but nothing seems to work
I eventually found a "solution" :
ng-disabled="grid.appScope.modificaDisabled([row.entity, col.field])"
by passing the values as an array I get them defined (idk why) and i can finally proceed
Related
I have a problem with passing the parameter via the link to the controller. The view in which I have a problem is to dynamically display the list of users, along with the possibility of searching for them. I did this part in js and it works fine. In this functionality in js I generate a link to the buttons, so that later, after pressing the button, you can save the selection in the database. Each link has an assigned user ID and user group ID. My problem is that when I press the button, nothing happens.
The following code represents the functionality described above. I would be very grateful for your help.
#if(ViewData[Enums.States.UserSelectWindow.ToString()].ToString() == "True")
{
<script type="text/javascript">
$("#UserlistCollectionId").css('height', $("#WindowUserSelectId").height() + 'px');
let users = #Html.Raw(Json.Serialize(UserModel.GetUsers()));
function Clear() {
$("#UserlistCollectionId").empty();
}
function FillAll(users) {
Clear();
for (user of users) {
$("#UserlistCollectionId").append('<li class="list-group-item"><div class="row justify-content-between"><div class="col-auto">' + user.name + '</div><div class="col-auto"><a class="btn btn-sm btn-success" asp-action="AddUserToGroup" asp-controller="Settings" asp-route-groupId=#Model.Group.Id asp-route-userId='+user.id+'>Wybierz</a></div></div></li>');
}
}
FillAll(users);
$("#SearchInputId").keyup(function () {
Clear();
let searchValue = $("#SearchInputId").val();
if (searchValue === "")
FillAll(users);
else {
for (user of users) {
if (user.name.includes(searchValue)) {
$("#UserlistCollectionId").append('<li class="list-group-item"><div class="row justify-content-between"><div class="col-auto">' + user.name + '</div><div class="col-auto"><a class="btn btn-sm btn-success" asp-route-groupId=#Model.Group.Id asp-route-userId='+user.id+'>Wybierz</a></div></div></li>');
}
}
}
});
</script>
}
In the above code, automatic link generation is performed using JQuery as follows:
$("#UserlistCollectionId").append('<li class="list-group-item"><div class="row justify-content-between"><div class="col-auto">' + user.name + '</div><div class="col-auto"><a class="btn btn-sm btn-success" asp-route-groupId=#Model.Group.Id asp-route-userId='+user.id+'>Wybierz</a></div></div></li>');
Unfortunately it doesn't work. In the inspection of the page you can see that the tag "a" does not have the attribute "href", only automatically puts all the code in quotes:
Screen of the html fragment in the browser
Firstly, you need read the doc about what does asp-route-{value} generate the url:
Any value occupying the {value} placeholder is interpreted as a potential route parameter. If a default route isn't found, this route prefix is appended to the generated href attribute as a request parameter and value
(/home/index?value=aaa). Otherwise, it's substituted in the route template. More explantion you could refer to the document.
Secondly, you do not specify the controller and action name, so the url will generate depending on your request url. That is to say, if the tag helper exists in Home/Privacy.cshtml, it will generate to:href="/home/privacy?value=aa".
Finally, Tag Helpers are interpreted. In other words, Razor must see them as actual tags in order to replace them. So what you did in js will not follow the tag helper generation principle, it's just a JS string. You need change the url like below:
<a class="btn btn-sm btn-success" href="/home/index?groupId=' +#Model.Group.Id+'&userId=' + user.id+'">Wybierz</a>
If the url matches the default route template, the url may like below：
<a class="btn btn-sm btn-success" href="/home/index/' +#Model.Group.Id+'/' + user.id+'">Wybierz</a>
I'm working on the Spring-Mvc project.
I'm currently using JQgrid to draw a list. My problem is that I can't use variables as a function
This is where I'm having trouble.
{name : 'product_id',
index : 'pid',
align : 'center',
sortable : false,
formatter : function(cellValue, options, rowObject) {
return '<a href="#" onclick="onCellSelect(\''+ cellValue +'\','+ rowObject +');" >'+ cellValue +' </a>';
}
},
The rowObject is not available because it is JSONdata.
this is error
Uncaught SyntaxError: Unexpected identifier
onCellSelect([object Object]) // rowobject
How can you solve this problem?
I've solved this problem now, but it's not a fundamental solution.
It's just a means of getting data. If there is no solution to this problem, I will present it as a solution.
My solution is to bring in one unique value and get it through a repetitive function.
return '<a href="#" onclick="onCellSelect(\''+ cellValue +'\','+ rowObject.seq_no +');" >'+ cellValue +' </a>';
...
function onCellSelect(cellValue, seq_no) {
var selarrrow = jQuery("#chargeGoodsList").jqGrid("getDataIDs");
$(selarrrow).each(function(i){
if (seq_no == $('#chargeGoodsList').getCell(selarrrow[i], 'seq_no')) {
title = $('#chargeGoodsList').getCell(selarrrow[i], "title")
explanation = $('#chargeGoodsList').getCell(selarrrow[i], "explanation")
...
I believe there is a better solution than this. If there is a good solution, please answer.
I'm using bootstrap datatables to create a column displaying a link button to redirect to another view, the problem is that I'm getting syntax error from jquery and I'm not beign successful fixing it.
Here is the relevant part where I get the syntax error:
return '<button type="button"class="btn btn-default" onclick="location.href='#Url.Action("IncidentesDetalle", "ServiciosController", new { Id = "1" })'"><i class="fa fa-eye"></i></button>'
Any help will be appreciated.
I guess you should change your string to:
return '<button type="button" class="btn btn-default" onclick="location.href=\'#Url.Action("IncidentesDetalle", "ServiciosController", new { Id = "1" })\'"><i class="fa fa-eye"></i></button>'
Because in your original code single quotes just closed after href= and opened before ><i again. So part of the returning string like #Url.... became just invalid code. Hence the error.
Try this, it will work:
string path = "'#Url.Action('IncidentesDetalle', 'ServiciosController', new { Id = '1' })'";
return "<button type='button' class='btn btn-default' onclick='location.href="+path+"'><i class='fa fa-eye'></i></button>";
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>';
The error I receive is the following
TypeError: undefined is not a function
at Scope.$scope.AddCardToList
the code in html
<button type="button" ng-if="$index == 0" class="btn btn-default btn-xs" ng-click="AddCardToList(card)">{{edition.multiverse_id}}</button>
javascript code of the function AddCardToList
$scope.AddCardToList = function (card) {
if (!$scope.decklist) { $scope.decklist = {}; }
$log.info("Adding " + card.name + " to your decklist.");
$scope.decklist.push(card);
};
I'm not seeing while I get an undefined whenever I try to push card in the $scope.decklist array
but the function and call to the function works just fine when I don't try to push the object in the array.
Is there a preferred method on creating and pushing/popping objects in an array in angular that I'm not seeing?
Thanks in advance!