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

data source needed in initialisation for html table?

0 Answers 183 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Les
Top achievements
Rank 1
Les asked on 26 Apr 2012, 04:19 PM
Hi guys
This is no doubt an incredibly stupid question and I'll probably not be able to articulate it properly, but here goes...

I'm trying to integrate kendo web ui into an aspx page that returns data in an html table at runtime.  I have no control over any datasource, I can only return data into an html table, data surrounded by tr and td tags when the page loads, obviously I'm hoping kendo can add sorting, pagination and filtering.  I can get a basic sort but pagesize and height etc don't work.  I'm not sure whether I should be calling a datasource at some point within the initialisation (though the sort works without)

I can build a basic html table

<table id="grid">
<thead>
<th data-field="name">Name</th>
<th data-field="reference">Reference</th>
<th data-field="type">Type</th>
</thead>
<tbody>

add then add in the report which returns all the data within TR and TD tags

and then use the basic initialisation  like so..

<script>
$(document).ready(function(){
      $("#grid").kendoGrid({
         groupable: true,
         scrollable: true,
         sortable: true,
         pageable: true
      });
  });
            </script>

and it returns one very long sortable table (my sample data is hundreds of rows) with the page number 1 in the footer

what do I need to add to get a smaller size and split the data into multiple pages ?

sample data:

<!--Then paste the following for Kendo UI Web scripts-->
<script src="kendo/js/jquery.min.js" type="text/javascript"></script>
<script src="kendo/js/kendo.web.min.js" type="text/javascript"></script>
<table id="grid">
<thead>
<th data-field="name">Name</th>
<th data-field="reference">Reference</th>
<th data-field="type">Type</th>
</thead>
<tbody><<tr ><td class="">Course 1</td><td class="">BN1BANI/2FD</td><td class="">Course</td></tr><tr ><td class="">Sport  2yr FT Day</td><td class="">KN1ICTW/2FD</td><td class="">Course</td></tr><tr ><td class="">Chemistry Non-cert </td><td class="">KNCBRCH/1FD</td><td class="">Course</td></tr><tr ><td class="">Physics Non-cert 1yr FT Day</td><td class="">KNCBRPH/1FD</td><td class="">Course</td></tr></tbody>
</table><script>
$(document).ready(function(){
      $("#grid").kendoGrid({
         groupable: true,
         scrollable: true,
         sortable: true,
         pageable: true
      });
  });
            </script>

forgive me this once for the rambling post - I'm probably a million miles away from what the problem really is and have not learned all of the terminology yet

No answers yet. Maybe you can help?

Tags
Grid
Asked by
Les
Top achievements
Rank 1
Share this question
or