Connect 2 grids on a blank form - Forum - Kendo UI Builder - Progress Community

Connect 2 grids on a blank form

 Forum

Connect 2 grids on a blank form

This question is answered

I'm trying to connect 2 grids on a blank form.  The first grid (orders) is always visible and the second grid (Orderlines) is inside a tab strip.  The data is comping from a business object with a dataset (OrderandLines).

I need these to function like the Stacked Grid where clicking on an order in the Order grid shows only its lines in the OrderLine grid.

Verified Answer
  • Hi Richard,

    On the orders grid in the KUIB View:

    - Make sure that your "Selection type:" is Single
    - Make sure you select the "Model"
    - Assign a function called "onOrdersChange" to the "Row Select Event Function"
    - Assign a function called "onOrdersData" to the "Data Bound Event Function"

    Edit the controller.public.js for View:

    - Updated the code below with the correct names for your objects and add it to the contoller.public.js below the closing of the function "onShow" as shown on the example below (you don't need to duplicate Onshow):

        onShow($scope) {
            console.log('Show');
        }
        onOrdersData($scope) {
    	this.$components.ordersGrid.widget.select('tr[data-uid]:eq(0)');
        }
        onOrdersChange($scope) {
            console.log('onCustomerChange');	
    		var dataGrid       	= this.$components.ordersGrid.widget;
    		var selectedLine   	= dataGrid.select();
    		var lineData       	= dataGrid.dataItem(selectedLine);
    		var value 			= lineData.OrderNum;
    	
    		if (value) {
    		 	var filter = {
    				logic:'and',
    				filters: [
    					{ field: 'OrderNum', operator: 'eq', value: value }
    				]
    			};
    			this.$ds['orderDS'].filter(filter);
    		} else {
    			this.$ds['orderDS'].filter({});
    		}
        }

    Please don't forget to:
    - Call your orders Grid "ordersGrid" or replace that with the correct name for you "orders" Grid
    - Call your orders Data Source "orderDS" or replace that with the correct name for you "orders" Data Source
    - Replace "OrderNum" with the key field that links Orders and OrderLines of Orders
    - If you have more than one field linking the two tables, you will need to expand the filter to include both fields.

    Please give a try and let me us know how far do you get! 

    All the best,

    Ricardo Perdigao

All Replies
  • Hi Richard,

    On the orders grid in the KUIB View:

    - Make sure that your "Selection type:" is Single
    - Make sure you select the "Model"
    - Assign a function called "onOrdersChange" to the "Row Select Event Function"
    - Assign a function called "onOrdersData" to the "Data Bound Event Function"

    Edit the controller.public.js for View:

    - Updated the code below with the correct names for your objects and add it to the contoller.public.js below the closing of the function "onShow" as shown on the example below (you don't need to duplicate Onshow):

        onShow($scope) {
            console.log('Show');
        }
        onOrdersData($scope) {
    	this.$components.ordersGrid.widget.select('tr[data-uid]:eq(0)');
        }
        onOrdersChange($scope) {
            console.log('onCustomerChange');	
    		var dataGrid       	= this.$components.ordersGrid.widget;
    		var selectedLine   	= dataGrid.select();
    		var lineData       	= dataGrid.dataItem(selectedLine);
    		var value 			= lineData.OrderNum;
    	
    		if (value) {
    		 	var filter = {
    				logic:'and',
    				filters: [
    					{ field: 'OrderNum', operator: 'eq', value: value }
    				]
    			};
    			this.$ds['orderDS'].filter(filter);
    		} else {
    			this.$ds['orderDS'].filter({});
    		}
        }

    Please don't forget to:
    - Call your orders Grid "ordersGrid" or replace that with the correct name for you "orders" Grid
    - Call your orders Data Source "orderDS" or replace that with the correct name for you "orders" Data Source
    - Replace "OrderNum" with the key field that links Orders and OrderLines of Orders
    - If you have more than one field linking the two tables, you will need to expand the filter to include both fields.

    Please give a try and let me us know how far do you get! 

    All the best,

    Ricardo Perdigao

  • Ricardo,

    That worked! Thank you very much.

  • Im looking to do the exact thing in KUIB v3 with Angular.

    Please help.

    Thanks.