Hi there
I was trying to reproduce the Demo: http://demos.telerik.com/php-ui/grid/foreignkeycolumn
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.
<?php
require $_SERVER['DOCUMENT_ROOT'] . '/lib/Kendo/Autoload.php';
require $_SERVER['DOCUMENT_ROOT'] . '/lib/DataSourceResult.php';
?>
<?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');
break;
case 'read':
$result = $result->read('tblentradas', $columns, $request);
break;
case 'update':
$result = $result->update('tblentradas', $columns, $request->models, 'PKEntrada');
break;
case 'destroy':
$result = $result->destroy('tblentradas', $request->models, 'PKEntrada');
break;
}
echo json_encode($result);
exit;
}
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<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>
</head>
<body>
<?php
$categories = $result->read('tblcategoriasentrada', array('PKCategoriaEntrada as value', 'Categoria as text'));
$transport = new \Kendo\Data\DataSourceTransport();
$create = new \Kendo\Data\DataSourceTransportCreate();
$create->url('TestPage.php?type=create')
->contentType('application/json')
->type('POST');
$read = new \Kendo\Data\DataSourceTransportRead();
$read->url('TestPage.php?type=read')
->contentType('application/json')
->type('POST');
$update = new \Kendo\Data\DataSourceTransportUpdate();
$update->url('TestPage.php?type=update')
->contentType('application/json')
->type('POST');
$destroy = new \Kendo\Data\DataSourceTransportDestroy();
$destroy->url('TestPage.php?type=destroy')
->contentType('application/json')
->type('POST');
$transport->create($create)
->read($read)
->update($update)
->destroy($destroy)
->parameterMap('function(data) {
return kendo.stringify(data);
}');
$model = new \Kendo\Data\DataSourceSchemaModel();
$productIDField = new \Kendo\Data\DataSourceSchemaModelField('PKEntrada');
$productIDField->type('number')
->editable(false)
->nullable(true);
$productNameField = new \Kendo\Data\DataSourceSchemaModelField('Descricao');
$productNameField->type('string')
->validation(array('required' => true));
$unitPriceValidation = new \Kendo\Data\DataSourceSchemaModelFieldValidation();
$unitPriceValidation->required(true)
->min(1);
$unitPriceField = new \Kendo\Data\DataSourceSchemaModelField('Valor');
$unitPriceField->type('number')
->validation($unitPriceValidation);
$categoryIDField = new \Kendo\Data\DataSourceSchemaModelField('FKCategoria');
$categoryIDField->type('number');
$model->id('PKEntrada')
->addField($productIDField)
->addField($productNameField)
->addField($unitPriceField)
->addField($categoryIDField);
$schema = new \Kendo\Data\DataSourceSchema();
$schema->data('data')
->errors('errors')
->model($model)
->total('total');
$dataSource = new \Kendo\Data\DataSource();
$dataSource->transport($transport)
->batch(true)
->pageSize(30)
->schema($schema);
$grid = new \Kendo\UI\Grid('grid');
$productName = new \Kendo\UI\GridColumn();
$productName->field('Descricao')
->title('Description');
$unitPrice = new \Kendo\UI\GridColumn();
$unitPrice->field('Valor')
->format('{0:c}')
->width(200)
->title('Value');
$categoryID = new \Kendo\UI\GridColumn();
$categoryID->field('FKCategoria')
->title('FKCategory')
->values($categories['data'])
->width(200);
$command = new \Kendo\UI\GridColumn();
$command->addCommandItem('destroy')
->title(' ')
->width(150);
$grid->addColumn($productName, $categoryID, $unitPrice, $command)
->dataSource($dataSource)
->addToolbarItem(new \Kendo\UI\GridToolbarItem('create'),
new \Kendo\UI\GridToolbarItem('save'), new \Kendo\UI\GridToolbarItem('cancel'))
->height(540)
->navigatable(true)
->editable(true)
->groupable(true)
->pageable(true);
echo $grid->render();
?>
</body>
</html>
3 Answers, 1 is accepted
Rank 1
Rank 1
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?
You can avoid this problem by setting the valuePrimitive option of the editor:
$categoryID->field('FKCategoriaEntrada') ->editor('foreignKeyEditor') ->title('FKCategory') ->values($categories['data']);function foreignKeyEditor(container, options) { $("<input name='" + options.field + "' />").appendTo(container) .kendoDropDownList({ dataSource: options.values, dataTextField: "text", dataValueField: "value", valuePrimitive: true });}Regards,
Daniel
Telerik