Pageable with data from remote DB

[Rodrigo]

I am testing and evaluating kendoUI. I am filling the grid with data form a remote database, the info came correctly and I can fill the grid. I can filter, sort, and also I can show lines with the pageSize command. The only one that is not working for me is the "pageable", down the grid it appears all the buttons, but It seems not to have any register, and there they are. Of course any pageable button works. Here is my simple code:

Here is the link to web:  http://www.midilusa.com/sistema/prueba_kendoUI/prueba.php

Here is it´s code:


        <div id="example" class="k-content">
            <div id="grid"></div>
            <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            transport: {
                                read: {
                                    url: "pais.php",
                                    dataType: "json"
                                }
                            },
                            schema: {
                                total: function(response) {
                                return response.total; // total is returned in the "total" field of the response
                                },   
                            },                      
                        pageSize: 10,      
                        },
                        pageable: true,
                        filterable: true,
                        sortable: true,
                        groupable: true,
                    });
                });
            </script>
        </div>

[Rosen]

Hello Rodrigo,

I have looked at the page you have provided and it seems that there are few issue related to the behavior you have described. Although, you have define a function to return the total, there seems to be no such field in the response returned by the server. Therefore, the pager will not show more that one page as the total number of records is unknown. Modifying the server logic to return the total number of records as total field should address the issue. However, note that this will require that the data is added to a separate field within the response. This field should also be declared in the DataSource's schema. For example:

Possible server response format:

{
   data: [ /* here is records*/],
   total: 100 // total number of records
}

And the schema declaration for the above format:

dataSource: {
   schema: {
       total: "total",
       data: "data"
   }
}

Also I have noticed that you have enabled server paging, however the data returned from the server does not seem to be for a single page. Thus, you should make sure that the server return only single page of data, or disable the serverPaging option.

Regards,
Rosen
Telerik

 

 

[Rodrigo]

I will appreciatte if you can help me to add the "total" field with the total number of records in the response, in the php file, because I cant figure it how. Here is my pais.php file:

<?php


define('RAIZ',$_SERVER['DOCUMENT_ROOT']); 
header("Cache-Control: no-store, no-cache, must-revalidate");
require (RAIZ.'/sistema/includes/validaciones.php');
require (RAIZ.'/sistema/includes/conectar.php');
@mysql_query("SET NAMES 'utf8'");

$sentencia="SELECT idPais, nombrePais FROM PAISES ORDER BY nombrePais";
$rs = @mysql_query($sentencia);

if (!mysql_errno()) {
while($obj = mysql_fetch_object($rs)) {
$arr[] = $obj;
}
echo json_encode($arr);
} else {
echo ('Su Solicitud no Puede ser procesada, Por favor vuelve a intentarlo.');
//MANIPULACION DE ERRORES
$idTipoError='001';
$error = "Pagina CLIENTES -comboPais.php MySQL error ".@mysql_errno().": ".@mysql_error()." Con la consulta: ".$sql.""; 
errores($idTipoError,$error);
}
?>

thanks

[Rosen]

Hello Rodrigo,

As I have mentioned, you will need to return an object which has data and total fields. Similar to the following:

$output = array();

$output['data'] = $arr;
$output['total'] = count($arr);

echo json_encode($output);

However, note that if $arr does not contain the whole data you may need to execute a separate query to the database, in order to retrieve the total count.

Regards,
Rosen
Telerik

 

 

[Rodrigo]

I did what you tell Me in your last post and also didn´t work, but I cutted this next line in my code and it worked nice, I don´t know why.

Line I cutted:

  
    <!-- Kendo UI DataViz combined JavaScript -->
    <script src="../kendoUI/js/kendo.dataviz.min.js"></script>

Thanks

[Rodrigo]

Does someone knows why this behavior? The one that I needed to eliminate the dataviz script to can work properly my page?

So that means that I cant have a grid and a chart in the same web because there is a conflict between them?

thanks

[Rosen]

Hi Rodrigo,

As described in the documentation:

"Important: Only one of the web, dataviz, mobile and all combined JavaScript files can be included at a time, because they contain some shared scripts. If widgets from different Kendo UI suites will be used simultaneously, one should either use kendo.all.min.js or create a custom combined JavaSript file via the custom download builder tool. In addition, each of the combined script files should not be registered together with an individual widget script from the same suite. For example, kendo.grid.js should not be registered together with kendo.web.js or kendo.all.js, because they already include the Grid scripts. Registering duplicate scripts may cause Javascript errors and unexpected behavior."

Regards,
Rosen
Telerik