Grid / ForeignKey Column Demo Error

4 posts, 0 answers
  1. Bruno
    Bruno avatar
    3 posts
    Member since:
    Feb 2016

    Posted 28 Feb Link to this post

    Hi there

    I was trying to reproduce the Demo:

    After carefully writing the code almost exactly as the Demo in my TestPage.php (just changing database Fields and Connections), and including the DataSourceResult.php exactly as the demo, it still came with 2 bugs:

    1) When the grid renders, it successfully brings the Database Data, but the Dropdown list doesn't show anything in it's Field. And it comes blank.

    2) When you click in the Dropdown list it successfully shows the CategoryNames, but when you choose one of then, it also doesn't work, probably it's because it's trying to update with a Text in a Number field. And of course, it doesn't update in the database as well.

    I've attached a screenshot to show each situation described above. Also, below it goes the code used in the TestPage.php.


    Could you please give me a hand to check what's wrong with the code to fix these 2 bugs?

    Thanks and waiting yours.



    require $_SERVER['DOCUMENT_ROOT'] . '/lib/Kendo/Autoload.php';
    require $_SERVER['DOCUMENT_ROOT'] . '/lib/DataSourceResult.php';

    $result = new DataSourceResult('mysql:host=localhost;dbname=db', 'user', '******'); //ok

    if ($_SERVER['REQUEST_METHOD'] == 'POST') {
        header('Content-Type: application/json');
        $request = json_decode(file_get_contents('php://input'));
        $type = $_GET['type'];
        $columns = array('PKEntrada', 'Descricao', 'Valor', 'FKCategoriaEntrada');
        switch($type) {
            case 'create':
                $result = $result->create('tblentradas', $columns, $request->models, 'PKEntrada');
            case 'read':
                $result = $result->read('tblentradas', $columns, $request);
            case 'update':
                $result = $result->update('tblentradas', $columns, $request->models, 'PKEntrada');
            case 'destroy':
                $result = $result->destroy('tblentradas', $request->models, 'PKEntrada');
        echo json_encode($result);

    <!DOCTYPE html>
        <link rel="stylesheet" href="styles/kendo.common.min.css" />
        <link href="styles/kendo.bootstrap.min.css" rel="stylesheet" />

        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.all.min.js"></script>

        $categories = $result->read('tblcategoriasentrada', array('PKCategoriaEntrada as value', 'Categoria as text'));

        $transport = new \Kendo\Data\DataSourceTransport();
        $create = new \Kendo\Data\DataSourceTransportCreate();
        $read = new \Kendo\Data\DataSourceTransportRead();
        $update = new \Kendo\Data\DataSourceTransportUpdate();
        $destroy = new \Kendo\Data\DataSourceTransportDestroy();
                  ->parameterMap('function(data) {
                  return kendo.stringify(data);
        $model = new \Kendo\Data\DataSourceSchemaModel();
        $productIDField = new \Kendo\Data\DataSourceSchemaModelField('PKEntrada');
        $productNameField = new \Kendo\Data\DataSourceSchemaModelField('Descricao');
                         ->validation(array('required' => true));
        $unitPriceValidation = new \Kendo\Data\DataSourceSchemaModelFieldValidation();
        $unitPriceField = new \Kendo\Data\DataSourceSchemaModelField('Valor');
        $categoryIDField = new \Kendo\Data\DataSourceSchemaModelField('FKCategoria');

        $schema = new \Kendo\Data\DataSourceSchema();
        $dataSource = new \Kendo\Data\DataSource();
        $grid = new \Kendo\UI\Grid('grid');
        $productName = new \Kendo\UI\GridColumn();
        $unitPrice = new \Kendo\UI\GridColumn();
        $categoryID = new \Kendo\UI\GridColumn();
        $command = new \Kendo\UI\GridColumn();
        $grid->addColumn($productName, $categoryID, $unitPrice, $command)
             ->addToolbarItem(new \Kendo\UI\GridToolbarItem('create'),
            new \Kendo\UI\GridToolbarItem('save'), new \Kendo\UI\GridToolbarItem('cancel'))
        echo $grid->render();




  2. Bruno
    Bruno avatar
    3 posts
    Member since:
    Feb 2016

    Posted 29 Feb Link to this post

    Nevermind guys. I found the problem. It was just a variable name typed differently (FKCategoria instead of FKCategoriaEntrada). The code is running smooth. Thanks!
  3. UI for ASP.NET AJAX banner
  4. Bruno
    Bruno avatar
    3 posts
    Member since:
    Feb 2016

    Posted 11 Mar in reply to Bruno Link to this post

    Hi there again.... I believe this is quite important for the Topic, so I'll add it:

    Maybe I'm doing something wrong....

    In a Grid woth a foireign key column, if it's value is null, it doesn't work. You can click on it and choose a value from the dropdown, but after clicking it becomes null again, and if you try to "Save Changes" it sends the Null value to the Database.

    Image attached.

    Any ideas about how to solve this problem?

  5. Daniel
    Daniel avatar
    2109 posts

    Posted 16 Mar Link to this post


    You can avoid this problem by setting the valuePrimitive option of the editor:
    function foreignKeyEditor(container, options) {
      $("<input name='" + options.field + "' />").appendTo(container)
        dataSource: options.values,
        dataTextField: "text",
        dataValueField: "value",
        valuePrimitive: true

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
UI for ASP.NET AJAX banner