Wednesday, June 25, 2014

How to transpose the table in AngularJS

I plan to implement a demo to show how affectedly add columns to the table in AngularJS.

as i have download the sample code from this page A Step-by-Step Guide to Your First AngularJS App

when i run the following sample code. i will get a list of driver informtions in rows

<table>
    <thead>
      <tr><th colspan="4">Drivers Championship Standings</th></tr>
    </thead>
    <tbody>
      <tr ng-repeat="driver in driversList">
        <td>{{$index + 1}}</td>
        <td>
          <img src="img/flags/{{driver.Driver.nationality}}.png" />
          {{driver.Driver.givenName}}&nbsp;{{driver.Driver.familyName}}
        </td>
        <td>{{driver.Constructors[0].name}}</td>
        <td>{{driver.points}}</td>
      </tr>
    </tbody>
  </table>



here is the screen shot of the output



the above example will show you the number of rows depending on the
total records being loaded from data source.

If I want to transpose the table or support dynamically add columns to the table in other words.
i will have to have the ng-repeat property attribute in the table column TD tag.

 <table>
    <thead>
      <tr><th colspan="4">Drivers Championship Standings</th></tr>
    </thead>
    <tbody>
      <tr> <td ng-repeat="driver in driversList">
        <table><tr>
          <td>{{$index + 1}}</td></tr><tr>
        <td>
          <img src="img/flags/{{driver.Driver.nationality}}.png" />
          {{driver.Driver.givenName}}&nbsp;{{driver.Driver.familyName}}
        </td></tr>
       <tr> <td>{{driver.Constructors[0].name}}</td></tr>
        <tr><td>{{driver.points}}</td>
            </tr></table>
          </td>
      </tr>
    </tbody>
  </table>


then the output will like this








if you have a better approach on how to dynamically add collumns to table in AngularJS

please let me know


Monday, June 16, 2014

How to fix AngularJS ng-click causing the page refresh in Button Click

I create a Demo App with AngularJS in Sharepoint 2013 Environment.

the Demo App works well with Both FireFox and IE Browser. However the app always refresh and reload the content when i click on any button in Safari.

here is my Code

<div ng-controller="AddContactControl">
                    <button ng-click="showAddModal(contact)">Add Contact</button>
 </div>


the root cause of issue is that the button had been automatically assigned with type "submit" if type is not assigned at design time. as a result, the click will trigger the post back.

the fix is quiet simple
<div ng-controller="AddContactControl">
                    <button ng-click="showAddModal(contact)" type="button">Add Contact</button>
  </div>

another fix is change to button to a anchor

<div ng-controller="AddContactControl">
                    <a ng-click="showAddModal(contact)" >Add Contact</a>
 </div>

Friday, June 13, 2014

How to enable SSIS package ETL to import French characters into SQL Server

I got an email from one of workmate to show me that the french characters are valid in the CSV file.

However those customer anmes with French accents had been screwed up with one example

the name is ANDRÉ in the  CSV file. the user queried the database but return
ANDRÉ 


the root cause of this issue stems from the character set in the connection string configuration.

you can view my previous posting about the character set setting in the connection string

how-to-import-unicode-characters-from Excel to SQL

I can quickly fix the package to support the french accents in the customer name by setting
the code page to be 65001(UTF-8)