Forum

May 22nd, 2014
A A A

Please consider registering
guest

Log In Register

Register | Lost password?
Advanced Search

— Forum Scope —

  

— Match —

   

— Forum Options —

    

Wildcard usage:
*  matches any number of characters    %  matches exactly one character

Minimum search word length is 4 characters - maximum search word length is 84 characters

Topic RSS
jqgrid incorrect select drop down option values in edit box
18/12/2010
03:45
AlexL
Member
Forum Posts: 3
Member Since:
18/12/2010
Offline

I am using form edit. There are two select boxes in the form. One select box is the country, another select box is the state. The state select box depends on the country selected and will be populated dynamically. For example:

Country:
US (option value=1)
UK (option value=2)

State for US:
Alabama (option value=1)
California (option value=2)
Florida (option value=3)
Hawaii (option value=4)

State for UK:
London (option value=5)
Oxford (option value=6)

As you can see above the id of state for uk starts with 5. When I edit a record which contained Country id=2 (UK) and State id=6 (Oxford), the edit form will shows correctly – Country is UK and State is Oxford. But if you drop down the state select box the option text is correct (it shows London Oxford) but the option value will starts from 0. What should be correct is that the option value should starts from 5.

If you select and change the country drop down box to US then change back again to UK, the option value will be populated correct (starts from 5).

My question is, how can we populate the select box for the state with the correct option value based on the country in edit box when the edit form loads?

Thanks.

19/12/2010
01:30
OlegK
Germany
Member
Forum Posts: 1216
Member Since:
10/08/2009
Offline

Hi Alex,

I answered on your question here. Moreover another thread on the same subject could be interesting you you.

Best regards
Oleg 

20/12/2010
03:45
AlexL
Member
Forum Posts: 3
Member Since:
18/12/2010
Offline

Thanks Oleg for your help. I will take a look at it.

Alex

24/12/2010
07:37
gunjan shah
India
Member
Forum Posts: 20
Member Since:
23/12/2010
Offline

Hi Oleg ,

I show your demo , its working fine .

But my requirement is something different . You have generated the code for inline editing, but In my case I am using Edit popup that's generated using inbuilt navigator of jqGrid.

In the edit  popup , when I change the value of country, It is not displaying the new values of states .

So How can I implement this ?

Thanx in advance.

26/12/2010
14:15
tony
Sofia, Bulgaria
Moderator
Forum Posts: 7529
Member Since:
30/10/2007
Offline

Hello,

There is no difference where this is used.

Please check the Oleg's exmaple again.

Kind Regards

Tony

For professional UI suites for PHP, ASP.NET and ASP.NET MVC visit us at our commercial products site - trirand.net - by the very same guys that created jqGrid.
27/12/2010
09:05
gunjan shah
India
Member
Forum Posts: 20
Member Since:
23/12/2010
Offline

Hi Tony,

              I have checked the code of Oleg again , its not working. I have make chage only at one line . I have removed comment for generating the edit popup, but the code is not working for popup.

           I have pasted the code below, please check it …

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT…..t;&gt;
<html xmlns="http://www.w3.org/1999/xhtml&q…..t;&gt;
<head>
    <title>How to filter subcategory dropdown list based on another category dropdown</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/aja…..&quot; />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jq…..&quot; />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jq…..&quot; />
    <!--<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jq…..&quot; />-->

    <script type="text/javascript" src="http://ajax.googleapis.com/aja…..pt&gt;
    <!--<script type="text/javascript" src="http://ajax.googleapis.com/aja…..--&gt;
    <script type="text/javascript" src="http://ajax.googleapis.com/aja…..pt&gt;
    <!--<script type="text/javascript" src="http://ajax.googleapis.com/aja…..--&gt;
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jq…..pt&gt;
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jq…..pt&gt;
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jq…..pt&gt;

    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jq…..pt&gt;
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jq…..pt&gt;
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jq…..pt&gt;
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jq…..pt&gt;
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jq…..pt&gt;
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jq…..pt&gt;

    <!--<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jq…..pt&gt;
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jq…..--&gt;
    <script type="text/javascript">
    //<![CDATA[
        jQuery(document).ready(function () {
            var countries = { '1': 'US', '2': 'UK' };
            var states = { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii', '5': 'London', '6': 'Oxford' };
            var statesOfCountry = {
                1: { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii' },
                2: { '5': 'London', '6': 'Oxford' }
            };
            
            
            var mydata = [
                { id: '0', Country: '1', State: '1', Name: "Louise Fletcher" },
                { id: '1', Country: '1', State: '3', Name: "Jim Morrison" },
                { id: '2', Country: '2', State: '5', Name: "Sherlock Holmes" },
                { id: '3', Country: '2', State: '6', Name: "Oscar Wilde" }
            ];

            var lastSel = -1;
            var grid = jQuery("#list");
            var resetStatesValues = function () {
                grid.setColProp('State', { editoptions: { value: states} });
            };
            grid.jqGrid({
                data: mydata,
                datatype: 'local',
                colModel: [
                    { name: 'Name', width: 200 },
                    { name: 'Country', width: 100, editable: true, formatter: 'select',
                        edittype: 'select', editoptions: {
                            value: countries,
                            dataInit: function (elem) {
                                var v = $(elem).val();
                                // to have short list of options which corresponds to the country
                                // from the row we have to change temporary the column property
                                grid.setColProp('State', { editoptions: { value: statesOfCountry[v]} });
                            },
                            dataEvents: [
                                {
                                    type: 'change',
                                    fn: function(e) {
                                        var v = parseInt($(e.target).val(), 10);
                                        var sc = statesOfCountry[v];
                                        // To be able to save the results of the current selection
                                        // the value of the column property must contain at least
                                        // the current selected 'State'. So we have to reset
                                        // the column property to the following
                                        //grid.setColProp('State', { editoptions:{value: statesOfCountry[v]} });
                                        //grid.setColProp('State', { editoptions: { value: states} });
                                        resetStatesValues();
                                        var res = '';
                                        for (var stateId in sc) {
                                            if (sc.hasOwnProperty(stateId)) {
                                                res += '<option role="option" value="' + stateId +
                                                       '">' + states[stateId] + '</option>';
                                            }
                                        }
                                        var row = $(e.target).closest('tr.jqgrow');
                                        alert("row"+row.length);
                                        var rowId = row.attr('id');
                                        alert("rowId"+rowId);
                                        $("select#" + rowId + "_State").html(res);
                                    }
                                }
                            ]
                        }
                    },
                    {
                        name: 'State', width: 100, editable: true, formatter: 'select',
                        edittype: 'select', editoptions: { value: states }
                    }
                ],
                onSelectRow: function (id) {
                    if (id && id !== lastSel) {
                        if (lastSel != -1) {
                            //grid.setColProp('State', { editoptions: { value: states} });
                            resetStatesValues();
                            grid.restoreRow(lastSel);
                        }
                        lastSel = id;
                    }
                },
                ondblClickRow: function (id, ri, ci) {
                    if (id && id !== lastSel) {
                        grid.restoreRow(lastSel);
                        lastSel = id;
                    }
                    //grid.setColProp('State', { editoptions: { value: states} });
                    resetStatesValues();
                    grid.editRow(id, true, null, null, 'clientArray', null,
                                 function (rowid, response) {  // aftersavefunc
                                     grid.setColProp('State', { editoptions: { value: states} });
                                 });
                    return;
                },
                editurl: 'clientArray',
                sortname: 'Name',
                height: '100%',
                viewrecords: true,
                rownumbers: true,
                sortorder: "desc",
                pager: '#pager',
                caption: "Demonstrate dependend select/dropdown lists (edit on double-click)"
            }).navGrid('#pager', { edit: true, add: false, del: false, search: false, refresh: false });
        });
    //]]>
    </script>
</head>

<body>
<table id="list"></table>
<div id="pager"></div>

</body>
</html>

You can see line number 132 where I have made chages. I have enabled edit popup .I have created the font BOLD which are changed .

So ,  please give me a solution of it.

Thank You.

28/12/2010
08:58
gunjan shah
India
Member
Forum Posts: 20
Member Since:
23/12/2010
Offline

Hi Tony,

Oleg have replied to this post. He has attached demo on this link…

Thank You,

Gunjan Shah.

28/12/2010
15:09
AlexL
Member
Forum Posts: 3
Member Since:
18/12/2010
Offline

@Gunjan Shah: Does your last post means that you managed to solve the problem you are facing?

29/12/2010
06:14
gunjan shah
India
Member
Forum Posts: 20
Member Since:
23/12/2010
Offline

@Alex,

Hi,

    In my last post, i have mentioned an URL. In that URL,you can see live demo example. Its the solution of my problem.

Thank You,

Gunjan Shah.

Forum Timezone: Europe/Sofia

Most Users Ever Online: 215

Currently Online:
62 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

OlegK: 1216

markw65: 179

kobruleht: 144

phicarre: 132

YamilBracho: 124

Renso: 118

Member Stats:

Guest Posters: 447

Members: 11202

Moderators: 2

Admins: 1

Forum Stats:

Groups: 1

Forums: 8

Topics: 10405

Posts: 30751

Newest Members: vijay16_babu, vijay_babu, jayaraj, priyankmodi.20691, anuj, _Chris

Moderators: tony (7529), Rumen[Trirand] (81)

Administrators: admin (61)

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information