Problem with cfgrid

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>