Two Data Sources, One Grid

[Werit]

Let's say I have a Grid that maps to a Model.  I'd like to add another column which gets data from a second Data Source.  Any idea if this can be done, and what is the best way to go about it?

Thanks

[John DeVight]

Hi Werit,

What I would probably do is bind the grid to one data source.  Then, for each row, I would call a function to get the value to display in the columns where I want to display the value from the second data source.  The grid doesn't have anything like a "onRowDatabound" event, but there is a workaround using the template.  I've been able to define a template as a call to a javascript function.  I can pass whatever values I want to the javascript function and then return the appropriate value to be displayed in the column from the second data source.

Let's say I have 2 data sources.  One is an array of people.  The other is an array of jobs.  In the grid I want to display the list of people, and for each person, I want to display the job title for the person.

Here the the data sources:

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

});

The grid is going to have 3 columns, First Name, Last Name and Job Title.  Since the Job Title comes from my second dataSource, I'm going to define a template for Job Title that calls a javascript function called getJob and pass it the JobId for the person:

$('#peopleGrid').kendoGrid({

    dataSource: peopleDS,

    height: 150,

    columns:

    [{

        field: 'FirstName',

        title: 'First Name',

        width: 200

    }, {

        field: 'LastName',

        title: 'Last Name',

        width: 200,

    }, {

        field: 'JobId',

        title: 'Job Title',

        template: '#= getJob(JobId) #'

    }]

});

In the getJob function, I am going to apply a filter to the jobDS dataSource and then return the Title for the job:

function getJob(id) {

    jobDS.filter({ field: 'Id', operator: 'eq', value: id });

    return jobDS.view()[0].Title;

}

Attached is the sample code.

Hope this helps...

Regards,

John DeVight

[Werit]

Thanks, I'll try that out!

[John DeVight]

Let me know how it turns out and if there is anything else I can do to help

If it does work, would you mind marking it as the answer? =)

Regards,

John DeVight

[Kevin]

Hi John -

I'm trying to do the same thing, but when I run the page I get an error stating "cannot find function getJob()"... has this changed since January?

Kevin

[John DeVight]

Hi Kevin,

I tested the code with Kendo UI Web 2012 Q2 and found that with IE, it didn't like the extra comma in the columns definition after "width: 200".  I've tested with Firefox and Chrome and it is working.  I've attached a zip file with all the necessary files needed to run the sample as a stand alone webpage.  Let me know if you continue to experience issues.

Regards,

John DeVight

[Arturo]

Hola, excelente ejemplo.

Perdón por no saber escribir en ingles, mi problema es muy parecido al solucionado en el ejemplo, pero yo trato de leer la información de dos tablas de una base de datos en MYSQL.

var ccsrs = [
{text: "1", value: "1"},
{text: "2", value: "2"},
{text: "3", value: "3"},
{text: "4", value: "4"},
{text: "5", value: "5"},
{text: "6", value: "6"},
{text: "7", value: "7"},
{text: "8", value: "8"},
{text: "9", value: "9"},
{text: "10", value: "10"},
{text: "11", value: "11"},
{text: "12", value: "12"},
{text: "14", value: "14"},
{text: "15", value: "15"},
{text: "16", value: "16"},
{text: "17", value: "17"},
{text: "18", value: "18"},
{text: "19", value: "19"},
{text: "20", value: "20"},
{text: "21", value: "21"},
{text: "22", value: "22"},
{text: "23", value: "23"},
{text: "24", value: "24"},
{text: "0", value: "0"}
];

var ccsr_sel.value = "";

function onSelect(e) {
ccsr_sel = this.dataItem(e.item.index());
alert('Thank you! Your Choice is:\n\nItem: '+ccsr_sel.value);
};

$("#cb_ccsr").kendoComboBox({
dataTextField: "text",
dataValueField: "value",
dataSource: ccsrs,
select: onSelect
});
var cb1 = $("#cb_ccsr").data("kendoComboBox");
// set width of the drop-down list
cb1.list.width(600);

$("#grid1").kendoGrid({
dataSource: {
transport: {
read: {
url: "datos/ins_ccsr.php",  *****--> Informacion que deseo mostrar en otro elemento de la página
data: {
ccsr: ccsr_sel.value
},
type: "POST"
}
},
schema: {
data: "data"
}
},
columns: [
{field: "id_insumo" },
{field: "ccsr" }
]
});

****************
ins_ccsr.php
****************
<?php
$ccsr= ($_POST['ccsr']);

$conex = mysql_connect("0.0.0.0","root","xxxxx");
mysql_select_db("recmat",$conex);

$arreglo_datos = array();

$sql="select id_insumo, ccsr from insumos where ccsr=.".$ccsr." order by descripcion";

$consulta = mysql_query($sql, $conex);

while ($obj = mysql_fetch_object($consulta)) {
$arreglo_datos[] = $obj;
}

header("Content-type: application/json");

echo "{\"data\":" .json_encode($arreglo_datos). "}";
?>


Pero no me arroja los resultados, solo muestra: {"data":[]} 

Ojala me puedan ayudar. Gracias