I have recently migrated my project from v3.3 to v4.2.2. Since then my Datatable behaving abnormal. When I am adding a new row with some customized data, the action column button (i.e. Delete button) is repeating in each row. For example: for the first time it creats a new row, when another row is inserted then the "Delete" button is repeating in earlier row. (see the screenshot)
This feature has been working properly in v3.3. but not working properly in this version. I am not sure what is wrong with that. I have tried recreating a new project in v4.2. but no luck. I will appreciate any help to solve this issue.
I am trying to use Dynamic JavaScript API Client Proxies and use the values to populate the options in a Select dropdown. I am able to get the data but the problem i am facing is that I can not use the data outside the function scope. Inside the Proxies function, the data is available but when I want to use it outside the function then it is showing "undefined".
$typeId = data.items[i].achievementRegister.achievementTypeId; //selected value from a dropdown list
$achievementRegisterId = data.items[i].achievementRegister.id;
$achievementRegisterName = data.items[i].achievementRegister.fullName;
var code;
achievementTypeService.get($typeId)
.then(function (result) {
code = result.code;
//console.log(code); // showing the value
});
//creating an option for another select
temp = {
id: $achievementRegisterId,
text: '<span><b>' + code + '</b> ' + $achievementRegisterName + '</span>' // but not getting the value here
};
//adding the new option in the Select dropdown
newOption = new Option(temp.text, temp.id, false, false);
qualSelect.append(newOption).trigger('change');
Output:
I am not sure what I am doing wrong. I have tried to use the JS type variable ($code) and also declaring local variable (var code). But both of them gives the same problem.
Is there anyway to access the data outside the proxy functions?
I have written the following script code to add row on click event
$('#AddAchievementsButton').on('click', function (e) {
e.preventDefault();
var selectedQual = qualSelect.select2('data');
var achievementRegId = selectedQual[0].id;
///adding a single row in the datatable
achievementRegisterService.getWithNavigationProperties(achievementRegId)
.then(function (result) {
//console.log(result);
//console.log(result.achievementType.name);
qualListTable.row.add(
[
{
rowAction: {
items:
[
{
text: l("Edit"),
action: function (data) {
editModal.open({ id: data.record.id });
}
},
{
text: l("Delete"),
confirmMessage: function () {
return l("DeleteConfirmationMessage");
},
action: function (data) {
organisationService.delete(data.record.id)
.then(function () {
abp.notify.info(l("SuccessfullyDeleted"));
dataTable.ajax.reload();
});
}
}
]
}
}, // not sure how to add a delete button in this column
result.achievementType.name,
result.achievementRegister.code,
result.achievementRegister.name,
result.provider.name
]
).draw(false);
});
The output it is showing is like below:
The same Action button is working in other places. I tried to follow ABP tutorial from this link: https://docs.abp.io/en/abp/latest/UI/AspNetCore/Data-Tables.
Please help me to solve the issue.
I am trying to implement a modal in a form using ABP.io framework. The modal will popup when a button will be clicked and then will show two select options. When the values will be selected and clicked the save button, it will pass the values to the parent page. I have followed a similar way as shown in the ABP web development tutorial. (https://docs.abp.io/en/abp/latest/UI/AspNetCore/Modals#functions)
I have written the following code for Modal:
Modal.cshtml
<abp-modal-body>
<abp-select id="staffSelection" asp-for="@Model.StaffId" asp-items="@Model.StaffLookupList" label="@L["Staffs"].Value" />
<abp-select id="roleSelection" asp-for="@Model.RoleId" asp-items="@Model.StaffRoleLookupList" label="@L["Roles"].Value" />
</abp-modal-body>
I am using jquery to get the selected value and pass it to the parent page.
Modal.js
var abp = abp || {};
abp.modals.programmeCohortStffRoleCreate= function () {
var initModal = function (publicApi, args) {
//code to get the selected options and pass to parent page
};
return {
initModal: initModal
};
};
From the documentation, I could understand that I have to use the setResult() and onResult(callback) functions. But I could not figure out how to use those functions to pass the selected values from the modal to the parent page.
the Modal is called from the script of the parent page using the following code:
ParentPage.js
//Staff Selection Modal
var selectStaffModal = new abp.ModalManager({
viewUrl: abp.appPath + "<path>/SelectStaffsModal",
scriptUrl: "<path>/SelectStaffsModal.js",
modalClass: "StffRoleCreate"
});
$("#NewStaffButton").click(function (e) {
e.preventDefault();
selectStaffModal.open();
var staffId, staffName, roleId, roleName;
});
selectStaffModal.onResult(function(callback){
console.log(callback); // not able to get the desired value
});
I could not find anyway to achieve this option. Please help me to do that.
I am using ABP Suite to create entities to my exisiting project. While creating the Entity, I am getting the following error.
I have updated both the ABP CLI and ABP Suite and both are updated to the latest stable version (version: 3.3.1 stable).
I have also updated my project and all the solutions have latest abp packages (version: 3.3.1 stable).
Please help me to solve this issues.