codedecoder

breaking into the unknown…

custom buttons for jqgrid

Leave a comment

I have explained how to use jqgrid with ruby gems in this post. jqgrid can be configured to provide, features to edit, delete, search, paginate or refresh the content after it is rendered in view. But those button will have predefined functionality, so will not full fill all your need. Say, in my case, I have displayed all the loans a user has applied to any bank using jqgrid, but I need custom button like download with each record, which will take the user to some action managing the download for the document.

Well, it is not a problem, If you are working with pure jqgrid library and handling the json data yourself. You just need to add your custom code string as one of the json data element. But since, Iam using a gem to ease my jqgrid implementation, I need some workaround. The logic is simple, since your gem is managing any data you are passing to it, you just need to add an additional field to each record on runtime when it is returned by your query.

Here, we know that if we pass a field name to select clause of mysql which do not exist in the table, it will automatically add a column with that name and its value set to that field name. Sample example is as below.

mysql> Select first_name, last_name from users limit 1;
+————+———–+
| first_name | last_name |
+————+———–+
| Jeny       | Ala       |
+————+———–+

mysql> Select first_name, last_name, “user_action” from users limit 1;
+————+———–+————-+
| first_name | last_name | user_action |
+————+———–+————-+
| Jeny       | Ala       | user_action |
+————+———–+————-+
1 row in set (0.00 sec)

So, in second case , since user_action field not defined for user_table, a column created with that name and value set to same name.

So, now my ruby query on loan_documents from last post will be as below.

documents = LoanDocument.where(conditions).order(ordering).paginate(:select => ‘*, user_action’ , :page => params[:page], :per_page => params[:rows])

So, the :select => ‘*, user_action’ in pagination will load all the fields as Iam passing * and create a new column ‘user_action’ which I will use for my customization.

Now, the gem I’ am using provide feature to change formate of data, before it is finally render in view. So I will add an additional line to my earlier post

action_button = Proc.new { |val| action_buttons_html(val) }

and pass this format to json_for_jqgrid call

render :json => json_for_jqgrid(documents, columns, :format => {‘user_action’ => action_button, ‘applied_at’ => date_format})

The action_buton_html method is defined in application helper as below

action_buttons_html(document)

“<a href=\”/loan_documents/#{document}/download\”  id=\”download_button_#{document}\” >Download</a>”

end

So, it will generate my download link.

The controller code from the last post will now look like this.

def unsigned
    documents = []
    columns = [‘id’, ‘document_name’, ‘application_number’, ‘application_name’, ‘applied_at’, ‘user_action’]
    conditions = filter_by_conditions columns
    ordering = order_by_from_params params
    documents = LoanDocument.where(conditions).order(ordering).paginate(:select => ‘*, user_action’ , :page => params[:page], :per_page => params[:rows])
    action_button = Proc.new { |val| action_buttons_html(val, :unsigned) }
    date_format = Proc.new { |val| val.strftime(“%Y-%m-%d”) if val }
    render :json => json_for_jqgrid(documents, columns, :format => {‘user_action’ => action_button, ‘applied_at’ => date_format})
  end

Thus, this will add the custom link for download with each record

Author: arunyadav4u

over 7 years experience in web development with Ruby on Rails.Involved in all stage of development lifecycle : requirement gathering, planing, coding, deployment & Knowledge transfer. I can adept to any situation, mixup very easily with people & can be a great friend.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s