Workshop challenge solution

Thanks Guillermo!! I will review it in details soon ...

Warm Regards,

Ricardo Perdigao

Here's what I've done.

added following to app.css

.gridTitle {

   text-align: center;

font-size: 24px;

font-weight: 700;

}

set title to

<div class="gridTitle" id="orderTitle">Order for X</div>

then did the magic by changing watch function in view-factory.js

$scope.$watch(function(){

                       return $scope._$viewModels['customerDSModel'];

                   }, function(newValue, oldValue){

                       var filter = {

                           field: 'CustNum',

                           operator: 'eq',

                           value: newValue.CustNum

                       };

                       $scope._$ds['orderDS'].filter(filter);

                       var orderTitle = angular.element( document.querySelector( '#orderTitle' ) ); // get title element

                       orderTitle.text('Order for ' + newValue.Name);                                                     // set title text

                   });

Here are my steps to a solution for the workshop challenge. Assume that the Workshop Guide has been completed all the way through to Appendix A.

1. Bring onRowSelect back to the customerGrid Row Select Event Function property.
2. Add id="orderGridLabel" as a property to the order grid title custom HTML.
3. The C:\KUIBApps\Sports\src\scripts\Customers-Customer_Order_OrderLine\view-factory.js CustomersCustomerOrderOrderLine.prototype should be extended with the following code.

onFirstLoad: function() {
	// On data load, select the first row in master grid
	this.scope.customerGrid.widget.select('tr[data-uid]:eq(0)');
	this.setOrderGridLabel();
},
onRowSelect: function() {
	this.setOrderGridLabel();
},
setOrderGridLabel: function() {
	var scope        = this.scope;
	var dataGrid     = scope.customerGrid.widget;
	var selectedLine = dataGrid.select();
	var customerName = dataGrid.dataItem(selectedLine).Name;
	
	document.getElementById("orderGridLabel").innerHTML = customerName + '<br>Orders';
},

And that is it! Thank you, Ricardo.

Thanks for the post Jeff!!! Myself and Edsel will review it in detail soon!!!  

All the best,

Ricardo Perdigao

Hi Stephen,

Thanks for the solution!!! Myself and Edsel will be reviewing all of them soon!

Warm Regards,

Ricardo Perdigao

Here is my solution:

• Provide ID to Orderlabel as 'ordLabel'
• Now fill html formatted, selected value of customer name ie, Name of newValue.
• Add this code inside $watch, ie below $scope._$ds['orderDS'].filter(filter);

if ($scope.customerGrid.widget != null) {

angular.element('#ordLabel').html(angular.element('<div style='font-size: 32px; font-weight: bold; width:100%; text-align: center; line-height: 65px; vertical-align: middle'>Order of ' + newValue.Name + '</div>'));

}

Workshop challenge Solution:

1. Add a <div/ > with id="orderLabelName" to html element for Order Label.

<div id="orderLabelName" style='font-size: 32px; font-weight: bold; width:100%; text-align: center; line-height: 65px; vertical-align: middle' 

>Orders  </div>

2.  Add the following code to view-factory.js of Customers-Customer_order_orderLine. The code should be added inside $scope.$watch function.ie: \ src \ scripts \ Customers-Customer_order_orderLine \ view-factory.js

-  angular.element('#orderLabelName').html('Orders of ' + newValue.Name);  

$scope.$watch(function(){
                        return $scope._$viewModels['customerDSModel'];
                    }, function(newValue, oldValue){
                        var filter = {
                            field: 'CustNum',
                            operator: 'eq',
                            value: newValue.CustNum
                        };
                        $scope._$ds['orderDS'].filter(filter);
			 angular.element('#orderLabelName').html('Orders of ' + newValue.Name); <!-- this line -->

});

Description:

Changes in the parent ie. CustomerGrid is reflected in $scope.$watch and filters accordingly to the child ie. OrderGrid. 

Here the filter is done using object 'newValue' which is the selected customer object from CustomerGrid.

 In the same process the added code will search for element with id = "orderLabelName' and replace the html with Customer name ie. 'newValue.Name'.

Hi everyone,

All the submissions were great and they all hit the mark!! Unfortunately, we only have two prizes!

Edsel and I rebuilt all your solutions and it was extremely hard to pick winning ones.  

Results

• Guillermo - UI 10 Simplicity 10  - Winner
• Ashon - UI 10 Simplicity 9 - Winner
• Jeff - UI 8 Simplicity 10 (font did not match with the top title)
• Stephen - UI 10 Simplicity 8 (duplicates existing event/code)
• Amit - UI 10 Simplicity 8 (extra Angular.element and issue with quotes)

Thank you all for participating in the workshop and doing the challenge!!!  Please let me know if you have additional questions!

Until the next one ... 

Ricardo Perdigao

Hi Ricardo,

It was great participating in the workshop and the challenge. Will be looking forward to more workshops on Kendo UI Builder. Even though in its initial development phase it is has shown great potential and really cuts the development process down. Also will be looking forward for more updates. Thank you.

Regards,

Ashon Shakya

Hi Ricardo and Edsel, thanks for the workshop and the knowledge provided in it. And thank you for choosing my proposal to challenge as one of the winners!

I look forward to a new workshop on kendo!

Thank you!.

Everyone, please make sure to check this link posted by Edsel on the WIKI area (also below).  It has some very useful KUIB samples!  The form with CRUD sample is more complex than the one we've used on the workshop:

github.com/.../kendo-ui-builder-samples

Thanks!

By the way, whats the prize?

Hi Guillermo,

An Ipad Mini.  Can you and Ashon please send me an email with the address where Progress should be sending them to?  My email is rperdiga@progress.com

Thanks in advance and warm regards,

Ricardo Perdigao

Hi Ricardo and Edsel!, i just got the iPad mini!! Thank you, Edsel and all the Progress Team!

Regards!