jQuery Grid Plugin - jqGridForum

Topic RSS

Select Populated from DB

01/07/2009
09:31

casperd

Member

Members

Forum Posts: 76

Member Since:
11/05/2009

Offline

I need to have the selects in my grid to be populated from my databases. So, when the user clicks on the cell to edit, the select should have values from a lookup table in my database. Does anyone have an example like this?

01/07/2009
16:43

Renso

Member

Members

Forum Posts: 118

Member Since:
11/09/2008

Offline

Quite simply actually, I do it with all my selectables:

Do this before you define the jqGrid and make sure async is set to false. If you do not set it to false, the grid will completely render before the data has retuened and the drop down box wil be empty.

//get all products
var products = $.ajax({url: $('#ajaxAllProductsUrl').val(), async: false, success: function(data, result) {if (!result) alert('Failure to retrieve the Products.');}}).responseText;

The define your grid:

    $(item)
        .jqGrid({
            url: listURL,
            postData: {ContractId : $('fieldset#ContractDetails #ContractId').val()},
            datatype: “json”,
            colNames:['Id', 'Product Name'],
            colModel:[
                {name:'Id',            index:'Id', sortable:true, editrules:{edithidden:false}},
                {name:'ProductName',   index:'ProductName', sortable:true, required:true, editable:true, edittype:"select", editoptions:{value:products}, editrules:{required:true}}],

You can also do it on the loadComplete event by using setColProp, which I do in some other cases as if you are going to have modal boxes for editing it will generate a runtime error if you do not have it set the following way:

loadComplete: function() {$(item).setColProp('ProductName',{editoptions:{value:products}});

By the way “item” is the id of the grid. Hope this helps

02/07/2009
03:34

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Thanks Renso.

Also the new option dataUrl can be used too - which I recommend.

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

02/07/2009
04:54

casperd

Member

Members

Forum Posts: 76

Member Since:
11/05/2009

Offline

Yeah, I used dataUrl, and it works 100%!

Thanks!

02/07/2009
07:38

Renso

Member

Members

Forum Posts: 118

Member Since:
11/09/2008

Offline

dataUrl? What version of jqGrid, and examples?

02/07/2009
07:43

Renso

Member

Members

Forum Posts: 118

Member Since:
11/09/2008

Offline

Answering my own post, 3.5 Beta, I am not there yet.

23/07/2009
23:53

miknight

Sydney, Australia

Member

Members

Forum Posts: 3

Member Since:
24/07/2009

Offline

I have a similar requirement but I need the contents of the select box to be different depending on the record being edited.

I tried calling

jQuery(grid).setColProp('link_to', {editoptions: {value: new_opts}});

before firing

jQuery(grid).editGridRow(…)

However, this only worked for the first call. Subsequent calls for other records would not change it.

I tried editing the SetColProp() function to make the extend a deep copy:

$.extend(true, this.p.colModel[i],obj);

but this still didn't fix the problem.

Edit: I was able to fix this by adding

recreateForm: true

jQuery(grid).editGridRow(…)

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
67 Guest(s)

Currently Browsing this Page:
1 Guest(s)