Activities of "george"

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>

add ui-jq to your calendar div.

<div id="calendar" class="has-toolbar fc fc-ltr fc-unthemed" ui-jq="fullCalendar"> </div>

OMG!! :o Where were you all these days?!! :twisted: Exactly that was the problem! :mrgreen: ui-jq="fullCalendar" - a short line of code which squeezed me for past few days!

Thank you very much @ismcagdas. Finally the calendar has shown off it's face! Thanks a lot! :lol:

Hi, Thank you for your kind support :) But this time also I'm not having any luck :( I've copied the same files from your project, given the calendar div in the dashboard itself and checked each and every lines of stylesheet & js references in layout.cshml. Unfortunately, there is no change :cry: NB: Actually I'm working with the angular project, the project you've shared with me is an MPA. Have you tried the same in angular project? Is there any additional references needed for that??

Hi, No miracles were occurred! :( Don't know why all these happening to me only! :cry: Can you please share the code which you've tried yourself?? You can use the following mail id: <a href="mailto:[email protected]">[email protected]</a>

Hi, Unfortunately, no changes were happened after defining the 'vm.selectedBatch' :cry:

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?

Hi, I'm also using the same versions of the libraries you mentioned. But when I replaced the calender.js from metronic v4.7 template, the error which shown in console is gone! :mrgreen: But still nothing is happening on my page :cry:

My .cshtml file contains only the following 3 lines of code:

<div class="col-md-9 col-sm-12">
    <div id="calendar" class="has-toolbar fc fc-ltr fc-unthemed"> </div>
</div>

Do I need to add any more markups along with that? I think the .js files will take care of that.. is it??

The order of js file links I've given is as follows:

JQuery fullCalender JQuery-UI calendar.js

Can't find what's went wrong! :roll:

Hi, I hope you guys will provide a very good support to your customers.. :|

Hi, Still there is nothing is happening in my page. I'll explain you what I've done in step-by-step:

1. Added the calendar.js file to my project.
2. Given the stylesheet reference in <head> of the layout.cshtml

<link href="~/libs/fullcalendar/fullcalendar.min.css" rel="stylesheet" type="text/css" />

3. Added a div with id="calendar" in the page which the calendar to be displayed.
4. Given the script references for the JavaScript files in the footer of the layout.cshtml file

<script src="~/libs/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
<script src="~/metronic/assets/apps/scripts/calendar.min.js" type="text/javascript"></script>

But nothing is happening in my page. But I got an error in the browser debug console:

Uncaught TypeError: e.draggable is not a function
 
at l (http://localhost:6240/metronic/assets/apps/scripts/calendar.min.js:1:845)
    
at o (http://localhost:6240/metronic/assets/apps/scripts/calendar.min.js:1:1047)
    
at Object.initCalendar (http://localhost:6240/metronic/assets/apps/scripts/calendar.min.js:1:1234)
    
at Object.init (http://localhost:6240/metronic/assets/apps/scripts/calendar.min.js:1:56)
    
at HTMLDocument.<anonymous> (http://localhost:6240/metronic/assets/apps/scripts/calendar.min.js:1:2626)
    
at i (http://localhost:6240/libs/jquery/jquery.min.js:2:27451)
    
at Object.fireWith [as resolveWith] (http://localhost:6240/libs/jquery/jquery.min.js:2:28215)
    
at Function.ready (http://localhost:6240/libs/jquery/jquery.min.js:2:30008)
    
at HTMLDocument.K (http://localhost:6240/libs/jquery/jquery.min.js:2:30370)

Since I'm a fresher to ABP and Angular, please help me to move on.. Thank You.

Hi, It just nothing happening in my page. But while checking through the browser debug console, I got 2 errors:

1)
Uncaught ReferenceError: jQuery is not defined at http://localhost:6240/libs/fullcalendar/fullcalendar.js:15:11
at http://localhost:6240/libs/fullcalendar/fullcalendar.js:17:3

2)
Uncaught ReferenceError: $ is not defined at http://localhost:6240/Application:72:9

I've downloaded the fullCalendar script files and added those files and the javascript to the project.

<link rel='stylesheet' href='~/libs/fullcalendar/fullcalendar.css'/>       
<script src='~/libs/fullcalendar/fullcalendar.js'></script>
    <script>
        $(document).ready(function () {
            // page is now ready, initialize the calendar...
            $('#calendar22').fullCalendar({
                // put your options and callbacks here
                weekends: false // will hide Saturdays and Sundays
            })

        });
    </script>

I got the above javascript from fullCalendar documentation.

Also, I couldn't find even the "apps" folder inside the metronic files. :| [attachment=0:p2m9qam1]TS.JPG[/attachment:p2m9qam1]