how to refresh a table/grid in the AngularJS implementation with ngDialog Popup

when i try to  add a new row to the grid with ngDialog modal popup,  the grid never refresh to show the new row after the ngDialog is closed. I debug it with console.log to view the data in Chrome.

the data array did update with new record. However the grid did not show the new record.

the trick is we must use the submit action in the form to trigger the anglarJS ng-repeat bindding update.


before the modification, the data array had been update with ng-click.

ngDialog.open({
            template: '\
                    <h2 class="underline">Add New Customer</h2>\
                     <p class="red">{{addCustomerError}}</p>\
                    <table>\
                        <tr>\
                            <td>\
                                CustomerName:<br />\
                                <input type="text" ng-model="customerFormData.dealerIdName" />\
                            </td></tr>\
                            <tr><td>\
                                street:<br />\
                                <input type="text" ng-model="customerFormData.mailAddress1" />\
                            </td></tr>\
                            <tr><td>\
                                City:<br />\
                                <input type="text" ng-model="customerFormData.mailCity" />\
                                 </td></tr>\
                            <tr><td>\
                                Province:<br />\
                                <input type="text" ng-model="customerFormData.mailProvince" />\
                            </td></tr>\
                              <tr><td>\
                                Postal Code:<br />\
                                <input type="text" ng-model="customerFormData.mailPostCode" />\
                            </td></tr>\
                            <tr><td>\
                                Phone:<br />\
                                <input type="text" ng-model="customerFormData.phone" />\
                            </td></tr>\
                    </table> <br />\
                <div class="ngdialog-buttons">\
                    <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="closeThisDialog(0)">Cancel</button>\
                    <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="saveCustomer()" >Confirm</button>\
            </div>',
            className: 'ngdialog-theme-plain custom-width',
            scope: $scope,
            plain: true
        })

Finally the table can be refreshed with the following code. and highlight the change in Bold.

we had to use the form with ng-submit action to update the data array and trigger the date binding on the ng-repeat table.

ngDialog.open({
            template: '\
                     <form ng-submit="saveCustomer()">\
                    <h2 class="underline">Add New Customer</h2>\
                     <p class="red">{{addCustomerError}}</p>\
                    <table>\
                        <tr>\
                            <td>\
                                CustomerName:<br />\
                                <input type="text" ng-model="customerFormData.dealerIdName" />\
                            </td></tr>\
                            <tr><td>\
                                street:<br />\
                                <input type="text" ng-model="customerFormData.mailAddress1" />\
                            </td></tr>\
                            <tr><td>\
                                City:<br />\
                                <input type="text" ng-model="customerFormData.mailCity" />\
                                 </td></tr>\
                            <tr><td>\
                                Province:<br />\
                                <input type="text" ng-model="customerFormData.mailProvince" />\
                            </td></tr>\
                              <tr><td>\
                                Postal Code:<br />\
                                <input type="text" ng-model="customerFormData.mailPostCode" />\
                            </td></tr>\
                            <tr><td>\
                                Phone:<br />\
                                <input type="text" ng-model="customerFormData.phone" />\
                            </td></tr>\
                    </table> <br />\
                <div class="ngdialog-buttons">\
                    <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="closeThisDialog(0)">Cancel</button>\
                    <button type="submit" class="ngdialog-button ngdialog-button-primary" >Confirm</button>\
            </div></form>',
            className: 'ngdialog-theme-plain custom-width',
            scope: $scope,
            plain: true

        })

How to fix the navigation issue in SharePoint MVC app.

when we select a MVC project template in the visual studio, it automatically generate the page navigation in the layout page. the following snipet of code will show you the systematically generated code

 <li>@Html.ActionLink("Home", "Index", "Home", null)</li>

in the Sharepoint MVC app implement, if we use the same code as above. when we click on the hyper link.
we will use this error message.



 when we exam the web url.

http://localhost/MySPMVCAppWeb/?Length=4. the SPHostUrl is missing in the url. which is root cause of the above issue.

we simply add SPHostUrl Parameter before the null parameter, will help us solve the above issue and allow user to navigate all pages with the app.

<li>@Html.ActionLink("Home", "Index", "Home", new { SPHostUrl = SharePointContext.GetSPHostUrl(HttpContext.Current.Request).AbsoluteUri }, null)</li>

the first noticable change in SP2016 Preview

I just get a chance to start the SP2016 Preview.

I already heard from  one of SharePoint MVP Benjamin Niaulin mentioned about the change in the coming SP2016 in Boston SharePoint Satursday.


here is the first highlight of change in installation process. you can configure your sever with different roles during the installation.

How to use Aggregate functio without the Group BY clause in SQL Server 2005 and above version.

it is hard to execute a script like the following

select *, count(CategoryID) as CategoryIDCount from Products

here is the Error Message

"Msg 8120, Level 16, State 1, Line 1
Column 'Products.CategoryID' is invalid in the select list because it is not contained in either an aggregate function or the GROUP BY clause"

it is quite chanllenge to put entire table columns into the group by clause.

if you are running on SQL Server 2005 or above. it is very easy solve this issue to use
 clause OVER.


select *, count(CategoryID) Over() as CategoryIDCount from Products

the output is shown below