Child to Parent table kendoDropDownList

Martin,

This code below was written by Edsel Garcia to do something similar on KUIB 2.0 (coming on July 14Th).  It won't work as is because the the way you reference things is a little different, but it should not be hard for you to get the idea or retrofit it for KUIB 1.1:

    this.$ds.SalesrepDS.read();
 
    var that = this;
 
    this.$components.grid0.options.columns[3].template = function(dataItem) {
        that.$ds.SalesrepDS.filter(
            {field: "SalesRep", operation: "eq", value: dataItem.SalesRep}
        );
        var view = that.$ds.SalesrepDS.view();
        return "<span>" + kendo.htmlEncode(view[0].RepName) + "</span>";
    };
 
    this.$components.grid0.options.columns[3].editor = function(container, options) {
        var input = $("<input/>");
        input.attr("name", options.field);
 
        // Clear filter to ensure that all values are shown
        that.$ds.SalesrepDS.filter({});
 
        input.appendTo(container);
        input.kendoDropDownList({
            dataSource: that.$ds.SalesrepDS,
            dataTextField: "RepName",
            dataValueField: "SalesRep",               
        })
    };

Hello Ricardo,

Thank you for the solution. I am close I think but still can't make it. In your example you are using only one table, but I need it with two different. I am a very beginner and I can't get the corresponding Name from the second table (the DriverNum is a common ID). This is my code:

$scope._$ds.RouteDS.read();
                	console.log('Read');
                    var that = this;

                    this.scope.gridRoute.options.columns[5].template = function(dataItem) {
                    	console.log('Template');
                    	that.scope._$ds.DriverDS.filter(
                          {field: "DriverNum", operation: "eq", value: dataItem.DriverNum},
			  {field: "Name", operation: "eq", value: dataItem.Name} // I know that this is not correct
                    	);
                    	console.log('DriverNum:' + dataItem.DriverNum);
                    	console.log('Name:' + dataItem.Name);
                    	var temp = dataItem.Name;
                    	var view = that.scope._$ds.DriverDS.view();
                    	return "<span>" + temp + "</span>";
                    };
                    var driverDataSourceOptions = $scope._$ds.DriverDS.options;
                    $scope.gridRoute.options.columns[5].editor = function (container, options) {
                    	
                        // Clear filter to ensure that all values are shown
                    	console.log('Cleared');
                        $scope._$ds.RouteDS.filter({});
                    	

                        var input = $("<input/>");

                        input.attr("name", options.field);
                        input.appendTo(container);
                        input.kendoDropDownList({
                        	filter: "contains",
                        	minlength: 3,
                        	autoSync: true,
                            dataTextField: "Name",
                            dataValueField: "DriverNum",
                            dataSource: driverDataSourceOptions                        
                        });
                    };

Hello Martin,

Based on your description, it looks like the DropDownList is working fine.

Could you provide more information on your issue?

Is the issue that the related value is not showing? (set up of template property is not working)

Do you get any error messages?

The sample code that Ricardo Perdigao mentioned above, corresponds to a grid for the Customer table. One its columns is used to show the RepName from the Salesrep table.

The code only needs to refer to the data source for Salesrep because the data source for Customer is handled by the grid.

Please notice that the code uses $scope._$ds.SalesrepDS.read() to read the data into the SalesrepDS. Otherwise, the data source would be empty.

In your scenario, you mention about using two tables. Could you clarify on how do you use them?

Here is a sample program showing how to add a Kendo UI DropDownList component to a grid using a custom view (created using the blank view option).

Links:

oemobiledemo.progress.com/.../grid-dropdownlist

Source code for view-factory.js:

oemobiledemo.progress.com/.../view-factory.js

Here is the code for the onShow() handler:

                   this.scope = $scope;

$scope._$ds.SalesrepDS.read();

var that = this;

$scope.grid0.options.columns[3].template = function(dataItem) {

$scope._$ds.SalesrepDS.filter(

{field: "SalesRep", operation: "eq", value: dataItem.SalesRep}

);

var view = $scope._$ds.SalesrepDS.view();

if (view.length > 0) {

return "<span>" + kendo.htmlEncode(view[0].RepName) + "</span>";

} else {

return "<span>(record not found)</span>"

}

};

var dataSourceOptions = $scope._$ds.SalesrepDS.options;

$scope.grid0.options.columns[3].editor = function(container, options) {

var input = $("<input/>");

input.attr("name", options.field);

// Clear filter to ensure that all values are shown

$scope._$ds.SalesrepDS.filter({});

input.appendTo(container);

input.kendoDropDownList({

dataSource: dataSourceOptions,

dataTextField: "RepName",

dataValueField: "SalesRep",              

})

};

Please let me know if you need more information.

I hope this helps.

Hello Edsel,

In my case I am using two tables (two DS). One (RouteDS) is the main which I use with the grid (gridRoute). The second one (DriverDS) has the driver information. The common column is DriverNum (it exist in the both tables with the corresponding venues). I am trying to preview the driver name (Name) from the DriverDS into gridRoute on the place of DriverNum (which is a column in RouteDS), but just to preview it in the browser, not to overwrite it.

Hello Martin,

Thank you for the info.

We have a similar scenario.

We both have a configuration with tables.

Customer as the main with grid grid0 using CustomerDS as a the data source and Salesrep with SalesrepDS.

The common column (field) is SalesRep.

It looks like the issue that you are seeing is because the following reference:

     var temp = dataItem.Name;

Did you get an error shown in the JavaScript Console?

Here is an updated version of your code:

                   // Read the Driver records into the data source

                   $scope._$ds.DriverDS.read();

                   this.scope.gridRoute.options.columns[5].template = function(dataItem) {

                       console.log('Template');

                       that.scope._$ds.DriverDS.filter(

                         {field: "DriverNum", operation: "eq", value: dataItem.DriverNum}

                       );

                       var view = that.scope._$ds.DriverDS.view();

                       if (view.length > 0) {

                       console.log('DriverNum: ' + dataItem.DriverNum);

                       console.log('Name: ' + view[0].Name);

                       var temp = kendo.htmlEncode(view[0].Name);

                           return "<span>" + temp + "</span>";

                       } else {

                           return "<span>(record not found)</span>";

                       }

                   };

Please give this code a try and let me know how it goes.

Regards.

P.S.: The capitalization used for the Salesrep table and the SalesRep field come from how they are defined in the Data Dictionary.

Everithing is working :) Thanks again!