Two Data Sources, One Grid

7 posts, 0 answers
  1. Werit
    Werit avatar
    8 posts
    Member since:
    Jan 2012

    Posted 15 Jan 2012 Link to this post

    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
  2. John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 16 Jan 2012 Link to this post

    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
  3. Kendo UI is VS 2017 Ready
  4. Werit
    Werit avatar
    8 posts
    Member since:
    Jan 2012

    Posted 17 Jan 2012 Link to this post

    Thanks, I'll try that out!
  5. John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 17 Jan 2012 Link to this post

    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
  6. Kevin Sherman
    Kevin Sherman avatar
    1 posts
    Member since:
    Sep 2009

    Posted 31 Jul 2012 Link to this post

    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
  7. John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 31 Jul 2012 Link to this post

    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
  8. Arturo
    Arturo avatar
    1 posts
    Member since:
    Sep 2012

    Posted 14 Sep 2012 Link to this post

    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
Back to Top
Kendo UI is VS 2017 Ready