Hi, I've created a multiselect list by using angular directives. [attachment=0:1khpt7j8]multi-select.JPG[/attachment:1khpt7j8] My requirement is, I've to fill the first list according to the selection of the first combobox. When I select any item from the list, it will be moved to the next list. Then I can assign the selected students to the batch selected in the second combo.
Here the problem is, when i select a batch which is having students, it may not fill the students to the list. And when i select any other batch, the list will be populated! :? It's playing anonymously :roll:
I'll share you my code. index.cshtml
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="row margin-bottom-10 text-left" style="margin:5px">
<label for="BatchSelectionCombobox" style="margin:5px">@L("SelectFrom") </label >
<select id = "BatchSelectionCombobox"
class="form-control bs-select"
ng-model="vm.selectedBatch"
ng-change="vm.fillStudents(vm.selectedBatch.id)"
ng-options="o.name for o in vm.batches"
ui-options='{ iconBase: "fa", tickIcon: "fa fa-check" }'
data-live-search="true"
refresh-delay="0">
</select>
</div>
<br>
<div style="margin:5px">
<input class="form-control" placeholder="{{vm.options.searchPlaceHolder}}" ng-model="vm.searchItem">
</div>
<div class="pool">
<ul>
<li ng-repeat= "item in vm.options.items | filter: vm.searchItem | orderBy: vm.options.orderProperty">
<a href="" ng-click= "vm.change(vm.options.items, vm.options.selectedItems, vm.options.items.indexOf(item))">{{item.firstName}}</a>
</li>
</ul>
</div>
<button type="button" class="btn btn-primary blue ng-scope btn-xs" ng-click="vm.change(vm.options.items, vm.options.selectedItems, -1)">Select All</button>
</div>
<div class="col-lg-6 col-md-6 col-sm-6" >
<div class="row margin-bottom-10 text-left" style="margin:5px">
<label for="TargetBatchCombobox" style="margin:5px">@L("ReassignTo") </label>
<select id="TargetBatchCombobox"
class="form-control bs-select"
ng-model="vm.targetBatch"
ng-options="o.name for o in vm.batches"
ui-options='{ iconBase: "fa", tickIcon: "fa fa-check" }'
data-live-search="true"
refresh-delay="0"></select>
</div>
<br>
<div style="margin:5px">
<input class="form-control" placeholder="{{vm.options.searchPlaceHolder}}" ng-model="vm.searchSelectedItem">
</div>
<div class="pool">
<ul>
<li ng-repeat="item in vm.options.selectedItems | filter: vm.searchSelectedItem | orderBy: vm.options.orderProperty">
<a href="" ng-click="vm.change(vm.options.selectedItems, vm.options.items, vm.options.selectedItems.indexOf(item))">{{item.firstName}}</a>
</li>
</ul>
</div>
<button type="button" class="btn btn-primary blue ng-scope btn-xs" ng-click="vm.change(vm.options.selectedItems, vm.options.items, -1)">Deselect All</button>
</div>
index.js
var vm = this;
vm.batch = null;
var batchService = abp.services.app.batch;
var studentService = abp.services.app.student;
function init() {
debugger;
var filter = '';
batchService.getBatches($.extend({ filter: filter }, vm.requestParams1))
.then(function (result) {
debugger;
var item = { id: '0', code: 'SEL', name: '-- Select --' }
result.items.splice(0, 0, item);
vm.batches = result.items;//result.items;
vm.selectedBatch = vm.batches[0];
vm.targetBatch= vm.batches[0];
});
}
vm.options = {
searchPlaceHolder: 'Search by Name',
labelAll: 'All Students',
labelSelected: 'Selected Students',
labelShow: 'firstName',
orderProperty: 'firstName',
items:[],
selectedItems: []
};
vm.fillStudents = function (selBatchId) {
vm.options.items = [];
vm.options.selectedItems = [];
if (selBatchId != '0') {
studentService.getStudents({ batchId: selBatchId }).then(function (result) {
vm.options.items = result.items;
})
}
};
vm.change = function (from, to, index) {
debugger;
if (index >= 0) {
to.push(from[index]);
from.splice(index, 1);
} else {
for (var i = 0; i < from.length; i++) {
to.push(from[i]);
}
from.length = 0;
}
};
init();
StudentAppService
public ListResultDto<StudentListDto> GetStudents(FilterStudentsInputDto input)
{
int? BatchId = Convert.ToInt32(input.BatchId);
var studentList = _studentRepository.GetAll()
.MapTo<List<StudentListDto>>()
.WhereIf(BatchId.HasValue, s => s.BatchId.Equals(BatchId))
.WhereIf(!input.Name.IsNullOrWhiteSpace(),
u =>
u.FirstName.Contains(input.Name) ||
u.LastName.Contains(input.Name)
)
.OrderBy(input.Sorting);
var studentListDtos = studentList.MapTo<List<StudentListDto>>();
return new ListResultDto<StudentListDto>(
studentListDtos
);
}
The AppService is returning the correct value, but the issue occurred when binding the data to the view.
Do you have any idea?
10 Answer(s)
-
0
Hi,
I'm not sure if this will work or not but, can you try to define vm.selectedBatch in your controller just below line
vm.batch = null;I think it's not defined in your view by default.
-
0
Hi, Unfortunately, no changes were happened after defining the 'vm.selectedBatch' :cry:
-
0
Hi,
Can you add this to your select item.
ui-jq="selectpicker"it should be something like this
<select id = "BatchSelectionCombobox" class="form-control bs-select" ui-jq="selectpicker" ng-model="vm.selectedBatch" ng-change="vm.fillStudents(vm.selectedBatch.id)" ng-options="o.name for o in vm.batches" ui-options='{ iconBase: "fa", tickIcon: "fa fa-check" }' data-live-search="true" refresh-delay="0"> -
0
Hi, I've solved the anonymous behavior myself :mrgreen: It was happened because I've defined the service objects (batchService & studentService) inside the controller. Now I've injected them in the controller definition. Like this:
appModule.controller('tenant.views.sis.studentBatchReAssigning.index', [ '$scope', '$state', '$stateParams', '$uibModal', 'abp.services.app.batch', 'abp.services.app.student', 'abp.services.app.studentBatchMapping', function ($scope, $state, $stateParams, $uibModal, batchService, studentService, studentBatchMappingService)Now the anonymous behavior issue is solved.
But I've another problem :!: I've done this without using the ui-jq="selectpicker" attribute. So my dropdown is having a simple style as you can see in the first screenshot. It is not having a search option as well.
I know I can make it cool by giving the ui-jq="selectpicker" attribute. But the problem is, after giving the attribute the dropdown will not be loaded. But when i refresh the page, it will be fine.
How can we make it filled at the first load itself??
My current code is like this:
<div class="row margin-bottom-10 text-left" style="margin:5px"> <label for="BatchSelectionCombobox" style="margin:5px">@L("SelectFrom") </label > <select id = "BatchSelectionCombobox" class="form-control bs-select" ui-jq="selectpicker" ng-model="vm.selectedBatch" ng-click="vm.fillStudents(vm.selectedBatch.id)" ng-options="o.name for o in vm.batches" ui-options='{ iconBase: "fa", tickIcon: "fa fa-check" }' data-live-search="true" refresh-delay="0"> </select> </div> -
0
Hi,
You need to refresh your selectpicker. You can view this topic, it is related to a similar issue #925@c673626e-8d59-40d5-820b-60b9d4aa2c16
-
0
Hi, I've done as per the information seen in the post. Now the dropdown is populated perfectly.
But still there is a problem.. Whenever I click any option from the dropdown, the option next to the clicked item will be selected. :shock: The same issue is existing in your code also :?. It is in the 'Create New Language' popup. It will be fine at the first time selection!
-
0
Hi,
Which version of AspNet Zero do you use ?
-
0
Hi,
I think I'm using v2.1.0. Because I've purchased it in the end of october. But in AppVersionHelper class it's showing v1.13.0.0! :?
-
0
Hi,
We have two versions before 1.x is for ASP.NET MVC 5.x version and 2.x is for ASP.NET Core version. Now we use 2.x for all of them. So, it's not a problem for you :).
I will check it and get back to you about this issue.
-
0
Hi,
I just checked this problem and it seems like we have fixed it with this issue. <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero/issues/134">https://github.com/aspnetzero/aspnet-zero/issues/134</a>
You can apply the same change to your project.
