Problem with cfgrid

[Guest]

I have a sql statement that returns approximately 300 records back. I add these to the cfgrid and then i add two extra columns for a delete button and edit button... However since it takes quite sometime to loop through it to add the buttons because it loops 300times once and 300times again, the grid on the webpage takes alot of time to load and sometimes crashes and closes the browser. I know for a fact it is the extra columns because i took them out and just ran the sql statement and there is no problem. The problem is that the paging takes a very long time when the grid does not crash and becomes unusable.  Does anyknow how i can modify my code? thanks

Here is my code: The first piece is a function that gets called

---------------------------------------------------------------------------------------------------------------------------------------

<cffunction name="getRecords" access="remote" returntype="struct">
    <cfargument name="page" required="true" />
    <cfargument name="pageSize" required="true" />
    <cfargument name="gridsortcolumn" required="true" />
    <cfargument name="gridsortdirection" required="true" />

    <cfif arguments.gridsortcolumn eq "">
            <cfset arguments.gridsortcolumn = "title" />
            <cfset arguments.gridsortdirection = "asc" />
    </cfif>

    <cfquery name="records" datasource="geospatial">
            select resourceid,title,publicationdate
            from tbl_records
            order by #arguments.gridsortcolumn# #arguments.gridsortdirection#
    </cfquery>

      <cfset queryAddColumn(records, "delete", arrayNew(1))>
      <cfset queryAddColumn(records, "edit", arrayNew(1))>
       
      <cfloop query="records">
            <cfset querySetCell(records, "delete","<input value='Delete' type='button' onclick='javascript:del(#resourceid#)'>",currentrow)>
            <cfset querySetCell(records, "edit","<input value='Edit' type='button' onclick='javascript:edit(#resourceid#)'>",currentrow)>
        </cfloop>
        

    <cfreturn queryconvertforgrid(records, page, pagesize) />

</cffunction>

Here I call the function to load into the grid:

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<cfgrid format="html" name="userGrid" pagesize="20" selectmode="row"  bind="cfc:#Application.components#records.getRecords({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})" gridlines="yes">
                            <cfgridcolumn name="title" width="180" header="Title" />
                            <cfgridcolumn name="publicationdate" width="180" header="Publication" />
                            <cfgridcolumn name="delete" width="150" header="Delete" />
                            <cfgridcolumn name="edit" width="166" header="Edit" />
                       
</cfgrid>

[Guest]

I tried making the buttons links but the grid is still slow. It there a way to only retrieve a certain amount of records at a time instead of grabing all the records at once when the grid is doing paging? So each page returns like 20 records at a time and when u page u get another 20 records at a time and somehow bind it?.

thanks

[Guest]

here is a link to the grid:

https://ranger.ryerson.ca/Madar/testing/viewrecord.cfm