Filtering in javascript function and return value

[Aktzc]

Hi,

Am new to kendo UI, so am not sure how I can do this task.

Problem: I have two data sources(Vtest.json file and Vdata.json file) that I want to populate in a single kendo grid. The grid is populated in such a way that the first three columns are populated from data.json file and the last column should be populated from Vtest.json file based on the first column in the grid. So I am trying to call a javascript function in the last column template in kendo grid. But am unable to filter the data and return the result to third column.

Here is the sample code:

 var vDS = new kendo.data.DataSource({
        transport: {
            read: {
                url: "/views/VTest.json",
                dataType: "json"
            }
        }
    });
    
    //alert(JSON.stringify(vendorDS));

 
    var nodeDS = new kendo.data.DataSource({
        transport: {
            read: {
                url: "/views/Vdata.json",
                dataType: "json"
            }
        },
        pageSize: 1000
    });

  $("#gridAllRuns").kendoGrid({
                    
                    dataSource: nodeDS,                    
                    groupable: true,
                    sortable: true,
                    pageable: {
                        refresh: true,
                        pageSizes: true,
                        buttonCount: 10
                    },
                    filterable: {
                        extra: false,
                        operators: {
                            string: {
                                startswith: "Starts with",
                                eq: "Is equal to",
                                neq: "Is not equal to"
                            }
                        }
                    },
                  
                    columns: [
                        {
                            title: "Node name",
                            field: "location",
                            template: "<a href=\"\">#= location.substr(7, location.length)#</a> ",
                            filterable: true
                            },
                              {
                                  title: "UTC Date",
                                  field: "date_UTC",
                                  filterable: false
                              },
                              {
                                  title: "Actual Value",
                                  field: "wavg_bin_value1",
                                  filterable: false
                              },
                          
                              {
                                  title: "Vendor",
                                  field: "",
                                  template: "#= getVendor(location) #",
                                  filterable: true
                              }
                            
                    ]
                })
//my javascript function....
  function getVendor(location) {
        var node = location.substr(7, location.length);
       vDS.filter({ field: "node", operator: "eq", value: node });
       return vDS.view()[0].Vndr;
}

[Petur Subev]

Hello Aktzc,

We cannot determine what exactly fails just from the code that you shared. Please demonstrate your case with a small Dojo example.

Kind Regards,
Petur Subev
Telerik

 

 

[Aktzc]

Hi Petur Subev,

I have two datasources for two grids. I want to merge them into one grid. There is one column in second grid that is dependent on the first grid. Can you please let me know how to merge two grids based on a column that is common in both the datasources.

Thanks!

[Aktzc]

For Example, consider the following example:

http://jsbin.com/equtos/3/edit

Here it is populating two separate grids. I want to combine those grids on the OrderId Column, and should be able to sort/filter based on CustomerID or Employee ID.

Please help!

[Petur Subev]

Hello Aktzc,

What do you mean by merge? The dataSource does not provide any JOIN functionality which you can use. Just create new collection out of the items from the two dataSources and then use it to create new dataSource that will represent both Grids.

Kind Regards,
Petur Subev
Telerik

 

 

[Aktzc]

Hi,

Thanks, for the reply! I am totally new to this. So, can you please help me.

For suppose, I have two dataSources like: 

var jobData =
    [
        { Id: 1, Title: 'Software Engineer' },
        { Id: 2, Title: 'Test Engineer' }
    ];

jobDS = new kendo.data.DataSource({
    data: jobData
});

var peopleData =
    [
        { Id: 1, FirstName: "John", LastName: "Doe", JobId: 1 },
        { Id: 2, FirstName: "Jayne", LastName: "Smith", JobId: 2 }
    ];

peopleDS = new kendo.data.DataSource({
    data: peopleData
});

How can I combine the two in jquery/javascript resulting in one datasource as follows:

var finalData = [
{ Id: 1, FirstName: "John", LastName: "Doe", Title: "Software Engineer", JobId: 1},
{Id: 2, FirstName: "Jayne", LastName: "Smith", Title: "Test Engineer", JobId: 2}
];

[Petur Subev]

Hello Aktzc,

Your question is not related to Kendo but to general JavaScript. Here is a small example that should bring you the idea:

http://trykendoui.telerik.com/@pesho/UJAf

Kind Regards,
Petur Subev
Telerik