Evaluation Kendo based on a trivial and common use case.

[you]

Greetings !
We only have until early next monday to decide which JavaScript UI framework we'll be using for our next major development project.
To evaluate Kendo, i need a simple prototype CRUD interface handling 3 tables with "OneToMany" relations. (See attached mysql file.)

A "Drivers" table with a time field and two foreign keys. One to the "manufacturer" table and another one to the car's "model"  table.
Of course, the model table also has a foreign key to the manufacturer table as Toyota doesn't sell F150 !
The Grid we must create for this prototype must match the following image. (Note that the manuf and model columns are of type DropDown.)

Business Rules:

• The model DropDown list must only offer models based on the selected item in the manufacturer DropDown cell.
• Any changes made by the user to the manufacturer cell must remove the item in the following model cell.
• Deselecting the row causes an update request to the PHP server.

Note that i am currently trying to implement this without the PHP Wrapper.
Any help would be welcome !

[you]

Here's an update on our attempt to evaluated Kendo with a basic  prototype...
I decided to use another analogy but our goal remains exactly the same. (i.e. having grid with cascading DropDown columns)
It's a grid for recording each job done by a employee for a given day. The employee must tell for which client and which client's departement the job got done. (So three tables:

1. Jobs, (With FK to the following two tables.)
2. Clients
3. Departement (With a FK that points to the appropriate Clients record.)

We based our code on the grid demo called "Custom Editing".
Since we do not want an AJAX request each time the user clicks on a DropDown field, we pre-fetched the data to a local variable. (JSON formated)
NOTE: See attached picture of the local datasource.

Our problem is that we can make everyting work except for the second DropDown field (i.e. Departement) which is dependent on the value of the first DropDown field (i.e. Client.) See code below with the comment showing were it is crashing with error being "departement is undefined".
The grid itself is bounded to a datasource feeded by a complete SELECT + JOIN php function that returns not only the foreign keys stored in the "Jobs" table but also a string for the names of the associate client and departement. (i.e. What the two DropDown field are to display.)
NOTE: See attached screenshot of the grid so far.

Next is the code for the grid and the two template declarations and custom editors:

function formSubmit(){
    var d = $("#date").kendoDatePicker('value');
    var curr_date = d.getDate();
    var curr_month = d.getMonth() + 1; //Months are zero based
    var curr_year = d.getFullYear();
    var strdate = curr_year + "-" + curr_month + "-" + curr_date;

    $("#grid").kendoGrid({
        editable:true,
        toolbar:["save", "create", "cancel"],
        cultures:"fr-FR",
        dataSource: {
            transport: {
                read: {
                    url: "?option=com_logbook&task=jobs&format=raw",
                    dataType:"json",
                    data:{id: f_id}
                }

            },
            autoSync: true,
            error: function(e) {
                alert(e.responseText);
            },
            schema: {
                data: "data",
                model:{
                    id:"id",
                    fields: {
                        id: { editable: false },
                        froute_id: { editable: false },
                        debut: { validation: { required: true} },
                        fin: { validation: { required: true} },
                        desc: { },
                        client_id: { },
                        site_id: {  },
                        depart_id: {  },
                        unite_id: {},
                        facturable: { },
                        clientNom: {   },
                        departements: {   }

                    }
                }
            }
        },
        columns: [
                  { field: "debut", title:"Début"  },
                  { field: "fin", title:"Fin"  },
                  { field: "desc", title:"Description" },
                  { field: "clientNom", title: "Clients", editor: clientDropDownEditor, template: "#=clientNom#" },
                  { field: "departNom", title:"Département"/*CRASH IF UNCOMMENTED, editor: departDropDownEditor, template: "#=departements.departNom#"*/ },
                  { field: "site_id",title:"Site"  },
                  { field: "unite_id", title:"Unité"  },
                  { field: "facturable", title:"Facturable"  }]
    });

    return false;
}


function clientDropDownEditor(container, options) {

    $('<input required data-text-field="clientNom" data-value-field="client_id" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
            dataSource: clientData
        });
}

function departDropDownEditor(container, options) {

    $('<input required data-text-field="departNom" data-value-field="client_id" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
            dataSource: clientData.client_id
        });
}

Thanks for any help !

[Alexander Valchev]

Hi Sebastien,

Thank you for your interest in Kendo UI.

I am not sure where exactly the problem comes from, but I noticed the following issues which might be the cause:

1. Grid's dataSource contains hested data - departaments contains array of objects which is not supported. The DataSource is designed to work with flat data, complex field values (such as arrays) are not supported.
   
   
2. departements field does not have a default value. Please try to set the default value of the field like in the custom editing sample.
   

   Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} },

3. Check what data contains the template. This might help us to determine why the errors occur.
   

   {
     field: "departNom",
     title: "Département",
     editor: departDropDownEditor,
     template: "#=console.log(data)#"
   },

   
   Just as a confirmation, does the error occurs in the template or in the custom dropdown editor function. The only place where I was able to find the "departement" word was the template.

Regards,
Alexander Valchev
Telerik

[you]

Hi

1) To me, the data structure is similar to the one in the products.js file used in the "foreign key column" demo. (see attached file)
      Respectful Suggestion: Your demos should be closer to real case scenarios... people get data from database.... not from .js file !
2) The "clients" column also doesn't have a default value and it is working properly... Do i really have to set a default value ?
3) See attached txt file in it's second section
4) The error occur at grid creation time... Look at the original question... a comment in the code shows exactly where it occurs.

Thanks for your help !

[you]

To follow up on my last reply...

1) Note that we're not talking about the grids datasource... The grid itself is fine. We're talking about the data structure provided by my php server and stored locally at document.ready. This data is used in the custom editors functions to feed the different cascading DD columns with the appropriate set of items.

2) I now get your point of "arrays of object"... The thing is... i json_encoded the "array of arrays" created by the following php code and i do not know how to make it stay "array of arrays" once it reaches the javascript storing variable.

if ($verb == "GET") {

    $cliensQuery = "SELECT * FROM `sfd__clients` ";
    $clientsResult = mysql_query($cliensQuery) or die("SQL Error 1: " . mysql_error());
    $clientsCount = mysql_num_rows($clientsResult);

    $arr = array();
    if ($clientsCount > 0)
    {
        while ($row = mysql_fetch_array($clientsResult, MYSQL_ASSOC)) {
            $sql = "SELECT * FROM `sfd__departements`  WHERE sfd__departements.client_id = {$row['id']}";
            $result2 = mysql_query($sql) or die("SQL Error 1: " . mysql_error());
            $depArr = array();
            while ($row2 = mysql_fetch_array($result2, MYSQL_ASSOC)) {
                $depArr[] = $row2;
            }
            $sql = "SELECT * FROM `sfd__sites`  WHERE sfd__sites.client_id = {$row['id']}";
            $result3 = mysql_query($sql) or die("SQL Error 1: " . mysql_error());
            $siteArr = array();
            while ($row3 = mysql_fetch_array($result3, MYSQL_ASSOC)) {
                $siteArr[] = $row3;
            }
            $sql = "SELECT * FROM `sfd__unites`  WHERE sfd__unites.client_id = {$row['id']}";
            $result4 = mysql_query($sql) or die("SQL Error 1: " . mysql_error());
            $uniteArr = array();
            while ($row4 = mysql_fetch_array($result4, MYSQL_ASSOC)) {
                $uniteArr[] = $row4;
            }
            $arr[] = array(
                'id' => $row['id'],
                'clientNom'=> $row['clientNom'],
                'departements' => $depArr,
                'sites' => $siteArr,
                'unites' => $uniteArr
            );
        }
    }
    else{
        $errorResult["status"] =  "error";
        $errorResult["error_msg"] = "Echec sur la table sfd__clients";
        echo json_encode ( $errorResult );
    }

    echo "{\"data\":" . json_encode ( $arr ) . "}";
}

And the javascript side is:

function getClientData (){

    $.ajax({
          dataType: "json",
          url: "?option=com_logbook&task=clients&format=raw",
          success: function (data, status, xhr) {
              clientData = data;

              //console.log(clientData);
          },
          error: function (jqXHR, textStatus, errorThrown) {
                alert("Error: getClientData():" + textStatus);
          }
    });
}

[Alexander Valchev]

Hello Sebastien,

I checked the logs included in the attached .txt file.

{
    _events: {
        change: [
            (function(e){
                i.trigger(ct,
                {
                    field: e.field,
                    node: e.node,
                    index: e.index,
                    items: e.items||[
                        this
                    ],
                    action: e.node?e.action||"itemchange": "itemchange"
                })
            })
        ]
    },
    id: "1",
    froute_id: "1",
    debut: "10:00:00",
    fin: "11:00:00",
    desc: "job 1 pour transport Gilbert Cot\xE9.",
    client_id: "1",
    site_id: "1",
    depart_id: "1",
    unite_id: "1",
    facturable: "1",
    clientNom: "Transport Roger&Roger",
    departNom: "TRR Dep 11",
    siteNom: "TRR Site 11",
    uniteNom: "TRR-UNIT11",
    departements: (void0),
    uid: "01edef40-2136-40fd-8544-96044fa71efb",
    dirty: false,
    parent: (function(){
        returnr
    })
}

The value of departments field looks incorrect (undefined). Could you please check it? I assume that this is the root of the problem.

Regards,
Alexander Valchev
Telerik

[you]

Of course it is incorrect ?!!!
Your talking about the log for the columns declaration... Look in the same log file, first part, and you'll see the log for the data itself...
Did you read my previous posts starting with ...

1. "..to me, the data structure..."
2. "...To follow up on my last reply..."

I took the time to wrote two complete replies to your original answer with more log/traces... Did you read them ?...

[Iliana Dyankova]

Hello Sebastien,

I examined the provided .txt file and observed that "departements" is actually an array (unlike the structure of the "Categories" from the products.js file). Please keep in mind you cannot reach an array item in the following way: 

departements.departNom

In order to assist you best and provide concrete recommendations please specify the exact fields you would like to be displayed and edited. Thank you in advance for your cooperation.

Regards,
Iliana Nikolova
Telerik

[you]

We've been trying to use KendoUI to create this simple UseCase for more than 12 days now... Still no success... So much trouble for such an easy scenario... It's absolutely amazing !
Even with a full support license we cannot achieve this...

I strongly recommend Telerik to create a demo based on my initial request of July 12 (Visible in this forum thread).  It would force you to explain how KendoUI should be used to display a grid with DropDown columns representing One-To-Many relations to foreign tables... A relational data structure that we encounter in 95% of all business application I've seen in the past 15 years. (Assuming that we cannot use an AJAX request each time the user clicks a DropDown cell.)

I went through the forum and it's a request that come way too often... It is a common use case and other UI frameworks almost always have demos and documentations covering this reality.

[Atanas Korchev]

Hi Sebastien,

 I created a simple jsbin demo which shows a similar implementation. You can find it online here: http://jsbin.com/alukay/1/edit

 It relies on the following features:

1. grid column templates
2. grid custom column editor
3. dropdownlist cascade mode

Feel free to modify it per your requirements.

Regards,
Atanas Korchev,
Kendo UI Techincal Director

[you]

Please consider using the information attached to my previous posts... Like the two files of my latest post made last night.

[Atanas Korchev]

Hi Sebastien,

 Let's continue the conversation in the support ticket. There is no need to duplicate it.

Regards,
Atanas Korchev