ANGULARJS Print Bootstrap Modal Content

When trying to print a modal dialog, we may not need to see the main layout content mixed with the modal content on the print out.  This is however the default behavior when we try to print a web page.

In order to print the modal dialog content, we need to hide the main layout and only make the dialog content visible. This can be achieved by adding print media styles which only affect the print out and not the screen media.  Let’s look at a printing a simple invoice example shown below:

Note that in this example, we have two actions/buttons:

CodeProject

Print Modal Dialog:  Prints out the modal dialog content only.    

                                                  

Normal Print: Prints out the entire web page.

For the Print Modal action, we add the print media styles to hide the entire content of the page. This allows us to prevent the layout elements to be visible in the print out. We also need to print the modal content. To do that, we add a style class (print-content) and attributes to the Bootstrap .modal class which allows us to override the default modal style. As a result, only the dialog content is shown on the print out.

We should note that this approach is not specific to AngularJS. It is a technique that can be used with any JS framework as the changes are specific to CSS classes and not the framework.

Thanks for reading.

Originally posted at ozkary.com

When trying to print a modal dialog, we may not need to see the main layout content mixed with the modal content on the print out.  This is...

Read Article →

ANGULARJS Calculate Totals Using Directives

In this article, we show how to do a calculation of subtotals and totals using AngularJS. To illustrate how we can do the aggregates, we build a simple invoice in which we will add the total quantity of items and subtotals per item and final amount. 

We first start by showing the JSON model that represents a list of items with quantity and cost per unit. These are the amounts that we will be adding using directives.

$scope.items = [{     name: 'Baseball Bats',     quantity: 2,     unitCost: 75 }, {     name: 'Soccer Balls',     quantity: 5,     unitCost: 15 }, {     name: 'Baseball Gloves',     quantity: 3,     unitCost: 40 }];

As shown in the JSON model, there is quantity and cost information, but we need to add a new attribute that can provide the total for each item by using this simple formula (quantity * unitCost). We also need to provide a total amount for both the sum of items and cost.

In order to meet our goal, we use the ng-repeat and ng-init directives. The ng-repeat directive allows us to iterate every item in the list. The ng-init directive allows us to execute an expression or call a function for each item. This is what enable us to extend the model by adding attributes that hold the total amounts. We can see this with the following code snippets:

The setTotals function in the invoice controller calculates each item total. It also uses the invoiceCount and invoiceTotal scope variables to aggregate (sum) the quantity and total for all items.  This is what allows us to generate a total row in the grid.

I hope this post provides you with more ideas on how to deal with calculated values using AngularJS.

In this article, we show how to do a calculation of subtotals and totals using AngularJS. To illustrate how we can do the aggregates, we ...

Read Article →

AngularJS Value Mapping With Dynamic Property And JavaScript

In some scenarios, the JSON models that we have available on the client browser may not provide all necessary information for our view templates. A record may just have a numeric value which makes reference to another model in the system, and we need to be able to map or look up for that information. To illustrate this, let’s look at a dealership inventory vehicle list:

Models:

$scope.cars = [{ model: 'Altima', year: 2015, make: '1' },

            { model: 'XTerra', year: 2015, make: '2' },

            { model: 'Focus', year: 2015, make: '3' }];

$scope.makes = [{ id: 1, name: 'Toyota' },

                { id: 2, name: 'Nissan' },

                { id: 3, name: 'Ford' }];

The models show a list of makes and vehicles that any dealership may have an inventory. We want to build a view that shows the vehicle list. When using the cars list and the help of the ng-repeat directive as show below, we get this result.

As we can see, there is no Make 1,2,3. That is the MakeId. We would like to display the name instead. The problem with this is that the cars list only has the id, so we need to implement a look up with the makes list.  A way to do this is to create a dynamic property with the Make name on the cars list. This can be accomplished by using the ng-init directive which allows us to use an expression or call a JavaScript function.

The ng-init directive calls the controller function to initialize each row in the list. The function performs the look up in the make list and adds the new property makeName which is used on the HTML mark up.

We should note that this approach was done using ng-init directive and a function on the controller (JavaScript). Another approach can be done using the ng-repeat directive and a filter right on the HTML mark up. Read more here.

Thanks for reading.

In some scenarios, the JSON models that we have available on the client browser may not provide all necessary information for our view templ...

Read Article →

AngularJS Single Value Mapping With Directives and Filter

In some scenarios, the JSON models that we have available on the client browser may not provide all necessary information for our view templates. A record may just have a numeric value which makes reference to another model in the system, and we need to be able to map or look up for that information. To illustrate this, let’s look at a dealership inventory vehicle list:

Models:

$scope.cars = [{ model: 'Altima', year: 2015, make: '1' },

            { model: 'XTerra', year: 2015, make: '2' },

            { model: 'Focus', year: 2015, make: '3' }];

$scope.makes = [{ id: 1, name: 'Toyota' },

                { id: 2, name: 'Nissan' },

                { id: 3, name: 'Ford' }];

The models show a list of makes and vehicles that any dealership may have an inventory. We want to build a view that shows the vehicle list. When using the cars list and the help of the ng-repeat directive as show below, we get this result.

As we can see, there is no Make 1,2,3. That is the MakeId. We would like to display the name instead. The problem with this is that the cars list only has the id, so we need to implement a look up with the makes list. A way to do this is to use another ng-repeat directive with the help of a filter. This way we can tell the filter to only get the make that has the corresponding id. We can make the following changes and see the results:

We can see on the results that we are now showing the make name not the id. 

We should note that this approach was done on the HTML mark-up using directives. A second approach can be done using JavaScript and the ng-init directive to add a dynamic property to our collection. Read about it here.

Thanks for reading.

In some scenarios, the JSON models that we have available on the client browser may not provide all necessary information for our view temp...

Read Article →

Entity Framework Associated Table Counts with One Query

With the Entity Framework, we are able to use navigation properties to get the associated records. This however loads all the child rows for a parent which causes performance problems. In some instances, we may just need to get a count of the associated records without having to load all the rows.  Let’s see more detail how this can be done.

In the diagram below, we show the relationship between company, department and employee entities. We want to be able to get the company record with the aggregated count for departments and employees for each company. For this case, we can use the company navigation properties to get that counts and use a company view-model class to hold the additional information.

We start by first looking at our database entities:

We can see, the Company entity has the associations to the Department and Employee entities. We want to be able to return the Company information with associated counts using this model:

To load the company information with count records, we can use the following snippet:

    using (var context = new Entities())

           {

               companies = context.Companies.Select(c => new model.Company()

               {

                   Name = c.Name,

                   Id = c.Id,

                   EmployeeCount = c.Employees.Count(),

                   DepartmentCount = c.Departments.Count()

               }).ToList();

           }

With this lambda expression, we are using the navigation properties to get the count of the associated records. The query that is created and sent to the database is just one SQL statement that gets the company data and the associated rows count of the other tables.  The result is returned as a list of CompanyModel objects.

With this approach, we no longer need to load all the rows from the other tables using the navigation properties. This should  improve the overall performance of the application.

I hope you find this tip useful.

Originally posted at ozkary.com

CodeProject

With the Entity Framework, we are able to use navigation properties to get the associated records. This however loads all the child rows fo...

Read Article →

Control Angularjs Modal Dialog Width

Note: This solution requires Bootstrap 3.1.0 or later.

With AngularJs, we can open a modal dialog by using the $modal service. The script to open a custom modal dialog can be as simple as follows:

var modalInstance = $modal.open({

                templateUrl: ‘my-dialog’,                               

                replace: true,

                                          

            });

This AngularJS service is based on the Boootstrap’s markup and CSS definitions. The templateUrl is just a HTML template emedded on the page, and it is listed below:

<script type="text/ng-template" id="my-dialog">

    <div>

        <div class="modal-header">

            <h3>Hi Dialog by ozkary</h3>

        </div>

        <div class="modal-body">

            <table width="780px;"><tr><td>Hello by ozkary.com</td></tr></table>

        </div>

        <div class="modal-footer">

            <button class="btn btn-primary" ng-click="$dismiss()">OK</button>

            <button class="btn btn-warning" ng-click="$close()">Cancel</button>

        </div>

    </div>

</script>

This script listed above uses the default value which renders a modal dialog with a mid size frame which is mostly use for messaging. When we need control of the width, we can use the parameter size. This parameter is a bit miss-leading since it may make us think that we can enter an integer value and control the size.  Instead, we need to use string constants that is appended to the CSS class modal-?? where the ?? is replaced by the string parameter. 

When we want a bigger dialog, we can use the lg constant, so that the style is set to modal-lg as follows:

var modalInstance = $modal.open({

                templateUrl: 'my-dialog',                               

                replace: true,

                size:'lg'                          

            });

We can see this in action with this plunker. The dialog is small or large based on the size parameter that we provide.

Hope it helps.

Note: This solution requires Bootstrap 3.1.0 or later. With AngularJs, we can open a modal dialog by using the $modal service. The scri...

Read Article →

AngularJS ng-model Concatenate Model Values

In order to concatenate a model property values in AngularJS, we need to create an extended property on the model and then use that property with the ng-model directive.

We can illustrate this with the following angular module:

        var app = angular.module('app', []);

        app.controller('AppCtrl', function ($scope) {

            $scope.customer = {name: 'ozkary', id: '1234' };

            $scope.allInfo = function (data) {

                return data.id + ' - ' + data.name;

            }

        });

On the view, we attempt the following:

<body ng-app="app" ng-controller="AppCtrl">

    <h2>Extended Property - ng-init expression</h2>   

    <h2>Bad - ng-model does not like expressions</h2>

    <input type="text" ng-model="allInfo(customer)">

</body>

The ng-model can only accept a property for a two way binding, so it does not work with an expression. Therefore, we need to create another property that meets our desired results. In order to do that, we can use the ng-init directive to evaluate an expression and assign the result to another property, info. We can then use ng-model directive with this new property. We can demonstrate this as follows:

    <input type="text" ng-model="customer.info"

               ng-init="customer.info = allInfo(customer)">

To view this in action visit this plunk:  http://plnkr.co/edit/PSvwCE?p=info

We can now take a complex model and create extended properties to easily bind it to the view.

Hope this tip is useful.

In order to concatenate a model property values in AngularJS, we need to create an extended property on the model and then use that propert...

Read Article →