jQWidgets Forums

Tagged: add, addrow, ajax, cascading, combobox, dropdown, DropDownList, editor, grid, jqxgrid, row

This topic contains 4 replies, has 2 voices, and was last updated by Dimitar 10 years, 9 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

add row with dropdown in grid and retrieve values through ajax call Posts

June 11, 2014 at 9:09 am add row with dropdown in grid and retrieve values through ajax call #55701

Nagoor

Participant

hi,

using your example (http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/cascadingediting.htm?arctic ) , i implemented dropdown in grid. but in your example you are giving the values for cities directly,but i need to bring them from server and also i need to have city code and city label in which i need to display label in drop down and on selecting i need to get city code. my problem is..

1. i can able to send data through ajax call, but i couldn’t able to return value from the controller. i am using SpringMVC architecture.
hre is the sample

///// jsp call

jQuery.ajax({
type : ‘POST’,
data : ‘serviceIdAdd=’+service,
url : ‘ServiceToAddsWellRequest’,
datatype: “json”,
success : function(data, textStatus) {
alert(“success”);
alert (“data recieved from server “+data);

},
error : function(XMLHttpRequest, textStatus, errorThrown) {

alert(“errorThrown “+errorThrown);
}
});

////// in controller

@RequestMapping(value = “/ServiceToAddsWellRequest” , method = RequestMethod.POST )
public String ServiceToAddsWellRequest(HttpServletRequest request) {

String sid = request.getParameter(“serviceIdAdd”);

System.out.println(“Service Id recieved “+sid);

Gson gson = new Gson();

ServiceEditDetailsRequestFormbean serBean = requestFormDAOImpl.ServiceInfo(sid);

String data = gson.toJson(serBean);
System.out.println(“data to send “+data);

return data;
}

2. i have a button add row in the page. onclick of button i need to add another row to the grid with same type of data ie., new country with its code i one coloumn and its respective states (as a dropdown) with codes in next coloumn.

pls help me ASAP..

Thanks in Advance

Nagoor

June 11, 2014 at 12:39 pm add row with dropdown in grid and retrieve values through ajax call #55726

Nagoor

Participant

hi,

I found the solution to return from ajax call. pls help me adding the rows to grid as i specified..

Thanks in Advance

Nagoor

June 12, 2014 at 7:28 am add row with dropdown in grid and retrieve values through ajax call #55764

Dimitar

Participant

Hello Nagoor,

Please check out the following modification of the demo Cascading ComboBoxes. We hope it is helpful to you.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = '[{ "Country": "Belgium", "City": "Brussels"}, {"Country": "France", "City": "Paris"}, {"Country": "USA", "City": "Washington"}]';
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'Country', type: 'string' },
                    { name: 'City', type: 'string' }
                ],
                localdata: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            var countriesAndCities = [{ Country: "Belgium", Cities: ["Bruges", "Brussels", "Ghent"] }, { Country: "France", Cities: ["Bordeaux", "Lille", "Paris"] }, { Country: "USA", Cities: ["Los Angeles", "Minneapolis", "Washington"]}];

            $("#jqxgrid").jqxGrid(
            {
                width: 300,
                source: dataAdapter,
                selectionmode: 'singlecell',
                editable: true,
                autoheight: true,
                columns: [
                    {
                        text: 'Country', datafield: 'Country', width: 150, columntype: 'combobox',
                        cellvaluechanging: function (row, datafield, columntype, oldvalue, newvalue) {
                            if (newvalue != oldvalue) {
                                $("#jqxgrid").jqxGrid('setcellvalue', row, "City", "Select a city...");
                            };
                        }
                    },
                    {
                        text: 'City', datafield: 'City', width: 150, columntype: 'combobox',
                        initeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
                            var country = $('#jqxgrid').jqxGrid('getcellvalue', row, "Country");
                            var city = editor.val();

                            var cities = new Array();

                            for (var i = 0; i < countriesAndCities.length; i++) {
                                if (country == countriesAndCities[i].Country) {
                                    cities = countriesAndCities[i].Cities;
                                    break;
                                }
                            }

                            editor.jqxComboBox({ autoDropDownHeight: true, source: cities });
                            if (city != "Select a city...") {
                                var index = cities.indexOf(city);
                                editor.jqxComboBox('selectIndex', index);
                            }
                        }
                    }
                ]
            });

            $("#newRow").click(function () {
                countriesAndCities.push({ Country: "Bulgaria", Cities: ["Sofia", "Troyan", "Varna"] });
                $("#jqxgrid").jqxGrid("addrow", null, { Country: "Bulgaria", City: "Troyan" });
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
    <button id="addNewRow">
        Add new row</button>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

June 18, 2014 at 3:10 pm add row with dropdown in grid and retrieve values through ajax call #56045

Nagoor

Participant

Hi Dimitar,

Thank you for this example, it works perfectly in my case. i just need to know one more thing. how to make the combobox ineditable ie., one can just select from dropdown but could not edit the value in cell. pls help me with this

Thanks & Regards

Nagoor

June 19, 2014 at 5:29 am add row with dropdown in grid and retrieve values through ajax call #56061

Dimitar

Participant

Hi Nagoor,

We suggest you use a dropdownlist editor instead. You can see the two types of editors in action in the demo Customized Editors. In the above example, this would mean changing 'combobox' to 'dropdownlist' and editor.jqxComboBox to editor.jqxDropDownList.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.