jQWidgets Forums

Tagged: column, createeditor, DropDownList, editor, grid, jqxgrid, json, source

This topic contains 14 replies, has 4 voices, and was last updated by ceeroover 10 years, 6 months ago.

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

Author

Dropdown column in grid / grid data & dropdown binding to json format Posts
November 27, 2013 at 8:00 am Dropdown column in grid / grid data & dropdown binding to json format #44636

mallepaddi
Participant

Hi

I need to know “jason” data format and grid “creation” for following format.

var source =
{
datatype: “json”,
url:”ScheduleLines.json”,
datafields:
[
{ name: ‘deliverydate’, type: ‘date’ },
{ name: ‘orderqty’, type: ‘string’ },
{ name: ‘confirmqty’, type: ‘string’ },
{ name: ‘quantity’, type: ‘number’ },
{ name: ‘deliveredqty’, type: ‘number’ },
{ name: ‘uom’, type: ‘number’ },
{ name: ‘deliveredblock’, type: ‘string’ }
]
};

$(“#schedulelinesgrid”).jqxGrid(
{
width: 578,
height:110,
source: dataAdapter,
theme: theme,
scrollbarsize:7,
editable: true,
selectionmode: ‘none’,
columns: [
{ text: ‘Delivery Date’, editable: false, dataField: ‘deliverydate’, width: 100, cellsformat: ‘d’ },
{ text: ‘Ordere Qty’, editable: false, dataField: ‘orderqty’, width: 100 },
{ text: ‘Confirmed Qty’, editable: false, dataField: ‘confirmqty’, width: 100 },
{ text: ‘Delivered Qty’, editable: false, dataField: ‘quantity’, width: 100, cellsalign: ‘right’ },
{ text: ‘UoM’, editable: false, dataField: ‘deliveredqty’, width: 50},
{ text: ‘Delivery Block’, dataField: ‘deliveredblock’, columntype: ‘dropdownlist’}
]
});

Need to know how do i construct json file for achieving above. “Delivery Block” in grid is an “Dropdown” column, i must use “json” format not “Array”.

Entry in “Delivery Block” dropdown has to be selected by default if something has been selected earlier, so need to pass “selected value + list of values.

Thanks

November 27, 2013 at 9:33 am Dropdown column in grid / grid data & dropdown binding to json format #44686

Dimitar
Participant

Hello mallepaddi,

Please refer to the forum topic dropdownlist in jqGrid for an example on the matter.

Best Regards,
Dimitar

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

November 27, 2013 at 3:54 pm Dropdown column in grid / grid data & dropdown binding to json format #44924

mallepaddi
Participant

Hi

My requirement is bit different, Dropdown Box options for each row are independent in a grid.

Let’s

EmployeeName, Country, WorkLocation (Dropdownbox) which is based on country of employee.

Ex: John, Malaysia, Dropdown : Kuala Lumpur, Penang etc

SO i need a format of json to return such data,

Any help.

Thanks

November 28, 2013 at 5:51 am Dropdown column in grid / grid data & dropdown binding to json format #45252

Dimitar
Participant

Hi mallepaddi,

Please clarify if there is one source for the grid and dropdownlist or there are separate sources for each of them?

Best Regards,
Dimitar

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

November 28, 2013 at 8:56 am Dropdown column in grid / grid data & dropdown binding to json format #45378

mallepaddi
Participant

Hi

It’s one source for the grid and dropdown list.

something like ..

{
“name”:”abc”,
“country”:”usa”,
“location”:”New York”,
“locations”:{ “New York”, “New Jersey”,”Florida”}
}

Thanks

November 28, 2013 at 10:29 am Dropdown column in grid / grid data & dropdown binding to json format #45425
Dimitar
Participant
Hi mallepaddi,

Here is an example:
```
<!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/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.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";

            var url = "../sampledata/sample.txt";

            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'name', type: 'string' },
                    { name: 'country', type: 'string' },
                    { name: 'location', type: 'string' },
                    { name: 'locations' }
                ],
                id: 'id',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                editable: true,
                columns: [
                  { text: 'Name', datafield: 'name', width: "33%" },
                  { text: 'Country', datafield: 'country', width: "33%" },
                  { text: 'Location', datafield: 'location', width: "34%", columntype: "dropdownlist", initeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
                      editor.jqxDropDownList({ source: dataAdapter.records[row].locations });
                  }
                  }
              ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>
```
And here is the contents of sample.txt:
```
[
    {
        "id": "1",
        "name": "John",
        "country": "USA",
        "location": "New York",
        "locations": [
            "New York",
            "Boston",
            "Los Angeles"
        ]
    },
    {
        "id": "2",
        "name": "Robert",
        "country": "UK",
        "location": "London",
        "locations": [
            "London",
            "Cardiff",
            "Liverpool"
        ]
    }
]
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
November 28, 2013 at 3:34 pm Dropdown column in grid / grid data & dropdown binding to json format #45470

mallepaddi
Participant

Thanks for your effort, please let me know how to format data in “sample.txt”, please post sample format.

Thanks

November 28, 2013 at 3:36 pm Dropdown column in grid / grid data & dropdown binding to json format #45471

mallepaddi
Participant

sorry.. sorry ….. for wrong question … i have found sample data

September 7, 2014 at 10:49 am Dropdown column in grid / grid data & dropdown binding to json format #59204
ceeroover
Participant
I wonder how to use this with numbers. The Dropdownlist does not show up numbers, if I change the locations to numbers:
```
// number data
var data = [{
    "id": "1",
        "name": "John",
        "country": "USA",
        "location": 0, //"New York",
    "locations": [
    0, //"New York",
    1, //"Boston",
    2] //"Los Angeles"]
}, {
    "id": "2",
        "name": "Robert",
        "country": "UK",
        "location": 3, //"London",
    "locations": [
    3, //"London",
    4, //"Cardiff",
    5] //"Liverpool"]
}];

// prepare the data
var source = {
    datatype: "json",
    localdata: data,
    datafields: [{
        name: 'name',
        type: 'string'
    }, {
        name: 'country',
        type: 'string'
    }, {
        name: 'location',
        //type: 'string'
    }, {
        name: 'locations',
    }],
    id: 'id',
};

var dataAdapter = new $.jqx.dataAdapter(source);

$("#jqxgrid").jqxGrid({
    width: 750,
    source: dataAdapter,
    columnsresize: true,
    editable: true,
    columns: [{
        text: 'Name',
        datafield: 'name',
        width: "33%"
    }, {
        text: 'Country',
        datafield: 'country',
        width: "33%"
    }, {
        text: 'Location',
        datafield: 'location',
        width: "34%",
        columntype: "dropdownlist",
        initeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
            editor.jqxDropDownList({
                source: dataAdapter.records[row].locations
            });
        }
    }]
});
```
Thanks
September 8, 2014 at 7:36 am Dropdown column in grid / grid data & dropdown binding to json format #59219
Dimitar
Participant
Hello ceeroover,

You just need to set the numeric values as strings:
```
var data = [{
    "id": "1",
    "name": "John",
    "country": "USA",
    "location": 0, //"New York",
    "locations": [
            "0", //"New York",
            "1", //"Boston",
            "2"
        ] //"Los Angeles"]
}, {
    "id": "2",
    "name": "Robert",
    "country": "UK",
    "location": 3, //"London",
    "locations": [
            "3", //"London",
            "4", //"Cardiff",
            "5"
        ] //"Liverpool"]
}];
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
September 8, 2014 at 9:06 pm Dropdown column in grid / grid data & dropdown binding to json format #59279

ceeroover
Participant

Does it mean it’s not possible to use the Dropdownlist with a “number” array? My Json Data for the dropdown values is formated as numbers, not as string.
Thanks and regards.

September 8, 2014 at 9:28 pm Dropdown column in grid / grid data & dropdown binding to json format #59283

Peter Stoev
Keymaster

Hi guys,

DropDownList with Numbers Array: http://jsfiddle.net/8ya9q70r/. The working demo is built with jQWidgets 3.4. I don’t see a problem even with your data: http://jsfiddle.net/tzh8Lxg3/

Best Regards,
Peter Stoev

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

September 9, 2014 at 10:29 am Dropdown column in grid / grid data & dropdown binding to json format #59316

ceeroover
Participant

Basically, there is no doubt about this. It just does not behave as expected: http://jsfiddle.net/2opcba3m/

Thanks and regards

September 9, 2014 at 11:19 am Dropdown column in grid / grid data & dropdown binding to json format #59319

Peter Stoev
Keymaster

Hi ceeroover,

Because the DropDownList editor has additional properties like displayMember and valueMember set by default and its displayMember points to the column’s displayfield and the valueMember points to the column’s datafield. So basically, you should either use a custom editor or bind the widget to a source which is of type: [{“location”: index1, “location”: index2, ….}] where index1, index2 are numbers. Example: http://jsfiddle.net/L2qdqquy/

Best Regards,
Peter Stoev

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

September 9, 2014 at 11:47 am Dropdown column in grid / grid data & dropdown binding to json format #59324

ceeroover
Participant

I see, thank you very much.
Best Regards
Author

Posts

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

You must be logged in to reply to this topic.