Workshop challenge solution - Forum - Kendo UI Builder - Progress Community

Workshop challenge solution

 Forum

Workshop challenge solution

  • This is my solution to the challenge of the "KUIB" workshop.
    The first clarification is that I assume that all sections of the guide have been completed and that section 5 implements the option "$ scope.watch" and not "onRowSelect".

    My implementation is as follows:
    1 - In .. \ src \ scripts \ Customers-Customer_order_orderLine \ view-factory.js to the onShow event I add the following line:

    angular.element("#orderCustomerName").text(newValue.Name);

    Like this:

    $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("#orderCustomerName").text(newValue.Name); // THIS LINE ADDED FOR SHOW NAME
    });
    					

    Then in the KUIB -> Customers -> Customer_Order_OrderLine at the "Custom HTML" added on section 8 add a new span element with id="orderCustomerName". Like this:

    <div style='font-size: 32px; font-weight: bold; width:100%; text-align: center; line-height: 65px; vertical-align: middle'>
    Orders for <span id="orderCustomerName"></span> <!-- THIS ELEMENT ADDED FOR SHOW NAME-->
    </div>

    And thats all!.

    Regards,

    Guillermo.

  • 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!