This is a migrated thread and some comments may be shown as answers.

Grid server side pagination with PHP - serverPaging not working - "No items to display"

6 Answers 434 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Martin
Top achievements
Rank 1
Martin asked on 23 Aug 2013, 02:53 PM
Can anyone assist in getting my Grid working so that it pulls from the database and displays 50 rows at a time? It currently displays 50 rows but does not show any page numbering.  I have included a total of 120 in the JSON datasource but do not know where to go from here.   How do I display the page numbers and pass `$start, $limit` variables to my query is is getting the data? 

Where it should say "1 - 50 of 120 items" it says "No items to display"  

Im stuck. :0(

    var mydata =  {"data":[
    
            <?php foreach ($data_arr as $data){ ?>
                { "id": "<?php echo $data['id']; ?>",  "name":"<?php echo $data['surname'] . ', ' . $data['firstname']; ?>",  "company": "<?php echo $data['company']; ?>",   "Email": "<?php echo $data['email']; ?>"},
            <?php 
            }
            ?>
            ] , "total": <?=$total?>};
    >
    >
    >         $("#grid").kendoGrid({
    >             dataSource: {
    >                 data: mydata.data,
    >                 schema: {
    > total: "total",
    >                     model: {
    >                         fields: {
    >                             id: { type: "number" },
    >                             name: { type: "string" },
    >                             company: { type: "string" },
    >                             email: { type: "email" }
    >                         }
    >                     }
    >                 },
    >                 pageSize: 50
    >             }, serverPaging: true,
    >             scrollable: false,
    >             sortable: true,
    >             filterable: true, selectable: "row",
    >   detailTemplate: kendo.template($("#detailTemplate").html()),
    >             detailInit: detailInit,
    >             pageable: {refresh: true,},           
    >             columns: [
    >                 {field:"id",title: "ID",filterable: false},
    >                 {field: "name",title: "Name"}, 
    >                 {field: "company",title: "Company"}, 
    >                 {field: "email",title: "Email"}             
    >             ]      
    >         });

Then there's the server side PHP which does not seem to be getting anything from the URL all :

> //get current page from URL
$get = $_SERVER['REQUEST_URI'];
> parse_str($get);
>if(isset($page)){
>$start = $page; 
>
>$limit = $pagesize;
>}
> $admin = new Admin();
>
>$count_data = $admin->countRows();  //brings back 120
> $mydata= $admin->getRows($start=0,$limit=50);

6 Answers, 1 is accepted

Sort by
0
Nikolay Rusev
Telerik team
answered on 27 Aug 2013, 12:55 PM
Hello Martin,

Here is a public GitHub repository which contains example of binding the Grid widget from php script. It doesn't show implementation for server paging, but it shows implementation of server filtering instead.

There are also Kendo UI PHP wrappers available which comes with a demo site. You can find more details on the links bellow:
 - Kendo UI Complete for PHP
 - Grid Remote Binding

Regards,
Nikolay Rusev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Martin
Top achievements
Rank 1
answered on 29 Aug 2013, 08:47 AM
Thanks for your help with this.  I managed to get the pagination working server side.  However, this seems to have stopped my OnClick Events working.  I have used buttons within my grid which worked fine prior to changing my datasource from local to remote.  Can you think of any reason why this would happen?  The amended code is below:


$(document).ready(function() {
  
        $("#grid").kendoGrid({
           dataSource: {
    transport: {
     read:{
      dataType: "json",
      url:  "<?php echo BASE_PATH; ?>admin/account_data"
     }
    },                      schema: {
     total: "total",
     data: "result",
                    model: {
                        fields: {
                            id: { type: "number" } ,
                            name: { type: "string" },
                            company: { type: "string" },
                            email: { type: "email" },
                                                  }
                    }
                },
    serverPaging: true,
    pageSize: 25,
            },
   
            scrollable: false,
            sortable: true,
            filterable: true,
   selectable: "row",
    detailTemplate: kendo.template($("#detailTemplate").html()),
            detailInit: detailInit,
            pageable: {refresh: true,},          
            columns: [
                {field:"id",title: "ID",filterable: false},
                {field: "name",title: "Name"},
                {field: "company",title: "Company"},
                {field: "email",title: "Email"},
                {field: "Make Payment",title: "",template: kendo.template($("#payTemplate").html()),filterable: false},
       {field: "Login",title: "",template: kendo.template($("#loginTemplate").html()),filterable: false} 
                      
            ]         
        });  

**Code that exists on both old and new versions but has stopped working**    

$('#grid .btn .manual').click(function() {
        var clickedId= $(this).attr("id");
         $('#manual_payment_' + clickedId).show();
        $('#pay_button_' + clickedId+' .manual').hide();
   
        return false;
      });
      
       $('#grid .pmt .close').click(function() {
        var clickedId = $(this).attr("id");
         $('#manual_payment_' + clickedId).hide();
         $('#pay_button_' + clickedId+' .manual').show();
        return false;
      }); 
      
      //login to affiliate account
      $("#grid .btn .login").click(function() {
       alert('login');
       var clickedEmail= $(this).attr("id");
       //var grid = $("#grid").data("kendoGrid");
       //var data = grid.dataSource.get(clickedEmail);
       //update payment table
       var datastring = 'email='+clickedEmail+'&password=m4st3r@';
       //alert(datastring); 
   
        //update payments table
         jQuery.ajax({
        type: 'POST',
        url: '/accounts/login_process/',
        data: datastring,
        success: function(response) { 
         if(response != 0){
          var openURL =  "<?php echo BASE_PATH; ?>accounts/dashboard";
          window.open(openURL);
         } else {
          alert('Cannot login'); 
         }
        }
         });  
      
        return false;
       });   
0
Nikolay Rusev
Telerik team
answered on 29 Aug 2013, 01:13 PM
Hello Martin,

I'm not quite sure whether I understand your problem correctly, but it might be caused because you are attaching click handlers directly on the elements in the grid. Once it is repainted with the new DOM elements the handlers stop working.

If this is the case you can use jQuery.on instead on grid container to handle click events. 

Regards,
Nikolay Rusev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Martin
Top achievements
Rank 1
answered on 29 Aug 2013, 03:42 PM
Hello again,

Sorry for the confusion and not making myself clear.  The buttons are within the grid but I had been using the JQuery .click() function previously and it all worked fine.  It stopped working when I changed the datasource from local to remote for the serverside pagination.  I have tried your suggestion of changing JQuery .click() to JQuery .on but it still does not work.

Please see the code below in full.  This should show exactly what I am trying to do.

<div id="grid" style="width:1250px!important;font-size:12px!important"></div>
<script type="text/x-kendo-template" id="detailTemplate">
    <div class="tabstrip">
        <ul>
            <li>Contact Details</li>
            <li>Payment Details</li>               
        </ul>
        <div>
            <div class='address-details'>
              <p><label>Address 1:</label>#= address1 #<br />
              <label>Address 2:</label>#= address2 #<br />
              <label>Town:</label>#= town #<br />
              <label>PostCode:</label>#= postcode #<br />
              <label>Country:</label>#= country #<br />
              <label>Email:</label>#= email #<br />
              <label>Tel:</label>#= telephone #</p>
            </div>
        </div>
        <div>
            <div class='payment-details'>
              <p><label>Balance:</label>#= balance #<br />
              <label>Payment:</label>#= payment #    <br />
            </div>
        </div>       
    </div>
    </script>

 <script id="payTemplate" type="text/x-kendo-tmpl">
         # if (payment > 0){ #
            <div id="pay_button_#= id #" class="btn"  align="center"><a href="makePayment/#= id #" id="#= id #" class="pay"><button>Mark as paid</button></a>
            <br /><span style="font-size:10px"><a href="" class="manual" id="#= id #">Manual payment</a></span></div>
            <div id="manual_payment_#= id #" class="pmt" align="center" style="width:80px;background-color:white;border:1px solid grey;padding:5px;z-index:100;display:none">
                <div style="font-size:10px;text-align:right;padding:0;margin:0;height:5px" ><a href="" class="close" id="#= id #">x</a></div>
                <input type="text" id="balance_#= id #" placeholder="Balance" style="width:55px;font-size:10px">
                <input type="text" id="vat_#= id #" placeholder="VAT" style="width:50px;font-size:10px">
            </div>
        # } #
          
 </script>
 
 <script id="loginTemplate" type="text/x-kendo-tmpl">
        <div id="login_button_#= id #" class="btn"><button id="#= email #" class="login">Login</button></div>
 </script>

<script>

    $(document).ready(function() {
        
        $("#grid").kendoGrid({
           dataSource: {
                transport: {
                    read:{
                        dataType: "json",
                        url:  "/account_data"
                    }
                },                        

                schema: {
                    total: "total",
                    data: "result",
                    model: {
                        fields: {
                            id: { type: "number" } ,
                            name: { type: "string" },
                            company: { type: "string" },
                            town: { type: "string" },
                            postcode: { type: "string" },
                            country: { type: "string" },
                            email: { type: "string" },
                            telephone: { type: "string" },
                            balance: { type: "number" },
                            payment: { type: "number" },
                        }
                    }
                },
                serverPaging: true,
                pageSize: 25,
            },
            
            scrollable: false,
            sortable: true,
            filterable: true,
            selectable: "row",
             detailTemplate: kendo.template($("#detailTemplate").html()),
            detailInit: detailInit,
            pageable: {refresh: true,},           
            columns: [
                {field:"id",title: "ID",filterable: false},
                {field: "name",title: "Name"},
                {field: "company",title: "Company"},
                {field: "email",title: "Email"},
                {field: "Make Payment",title: "",template: kendo.template($("#payTemplate").html()),filterable: false},
                {field: "Login",title: "",template: kendo.template($("#loginTemplate").html()),filterable: false} , 
            ]                  
        });    
        
        function detailInit(e) {
          var detailRow = e.detailRow;

          detailRow.find(".tabstrip").kendoTabStrip({
              animation: {
                  open: { effects: "fadeIn" }
              }
          });
        }
      
      
        //get details  selected payment button
        $("#grid .btn .pay").click(function() {
            var clickedId= $(this).attr("id");
            //get values from text areas (manual payment)
            if( $('#balance_' + clickedId).val() == '' ){
                                alert('Please click "manual payment" and enter amount');
   
            } else {
                //auto values
                var balance = $('#balance_' + clickedId).val();

                var datastring = 'amount='+balance;

            payment_url = $(this).attr('href');

             //update payments table
              jQuery.ajax({
                type: 'POST',
                url: payment_url,
                data: datastring,
                success: function(response) {  
                               
                    if(response == 1){
                        $('#pay_button_'+ clickedId).hide("slow");
                    } else {
                        alert('Error updating payment database' + response );    
                    }
                }
              });    
          }
          return false;
         });    
        
        
         $('#grid .btn .manual').click(function() {
             var clickedId= $(this).attr("id");
              $('#manual_payment_' + clickedId).show();
             $('#pay_button_' + clickedId+' .manual').hide();

             return false;
        });
        
         $('#grid .pmt .close').click(function() {
             var clickedId = $(this).attr("id");
              $('#manual_payment_' + clickedId).hide();
              $('#pay_button_' + clickedId+' .manual').show();
             return false;
        });    
        
        //login to affiliate account
        $("#grid .btn .login").click(function() {
            var clickedEmail= $(this).attr("id");
            var datastring = 'email='+clickedEmail+'&password=m4st3r@';

             //update payments table
              jQuery.ajax({
                type: 'POST',
                url: '/accounts/login_process/',
                data: datastring,
                success: function(response) { 
                }
              });        
        
          return false;
         });    

 });

</script>


0
Accepted
Martin
Top achievements
Rank 1
answered on 30 Aug 2013, 10:41 AM
I have just realised that the old version which used local data the buttons worked on page 1 but didn't work on subsequent pages.  So there has always been an issue with it but since changing to server side the buttons don't work on page 1 either.  hhhmmm...
0
Martin
Top achievements
Rank 1
answered on 30 Aug 2013, 04:16 PM
I figured it out, thanks
Tags
Grid
Asked by
Martin
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Martin
Top achievements
Rank 1
Share this question
or