Building JQGrid with Dropdowns and checkboxes

SARAVAN picture SARAVAN · Feb 16, 2010 · Viewed 18k times · Source

I have used jqgrids to display static values. But I have a scenario where I need to have checkboxes and dropdown values to be displayed in JQGrid columns. Depending upon whether I check or uncheck the checkbox. Any thoughts or comments on how to build jqgrids with Dropdowns and Checkboxes?

Answer

Justin Ethier picture Justin Ethier · Feb 16, 2010

You can use the checkbox formatter to display a cell as a checkbox. As part of the colmodel:

// A checkbox that is read-only until the user edits the row
{name:'my_checkbox',index:'my_checkbox', editable:true, 
 edittype:"checkbox", formatter:'checkbox' }

// A checkbox that may be edited at any time
{name:'my_clickable_checkbox',index:'my_clickable_checkbox', sortable:true, 
 formatter: "checkbox", formatoptions: {disabled : false}, editable: true,
 edittype:"checkbox"}

As for the dropdown, you can pass a custom format function to the editrow function:

jQuery('#mygrid').editRow(id, true, formatEditors);

Then, inside this function you would want to create a SELECT (or whatever dropdown you need):

function formatEditors(id) {
    // Your drop down code here...
    // EG: jQuery("#"+id+"_myDropDownRow","#mygrid").
}

So when you edit the row the data will be displayed in a dropdown.