jqxgrid with custom id with array - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: array, datafields, grid, id, jqxgrid, row, source

This topic contains 5 replies, has 3 voices, and was last updated by Dimitar 10 years, 10 months ago.

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

Author

jqxgrid with custom id with array Posts

November 6, 2013 at 7:13 pm jqxgrid with custom id with array #32083

Participant

i have data type as a array (object array). some how i need to uniquely identify each row.. what would you suggest to use ? specify id to the source ? if that is the case, how can i specify id to be one of the object’s property ?

var source = {

datatype: “array”,

id = ‘??’

}

Thanks

November 7, 2013 at 6:29 am jqxgrid with custom id with array #32126

Dimitar

Participant

Hello jahnvi25,

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/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">
        $(document).ready(function () {
            var data = [{ id: "row1", firstname: "Angel", lastname: "Bradley" }, { id: "row2", firstname: "Miriam", lastname: "Roche"}];
            var source =
            {
                localdata: data,
                datatype: "array",
                id: "id"
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                width: 200,
                autoheight: true,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 }
                ]
            });
            $('#jqxgrid').on('rowclick', function (event) {
                var args = event.args;
                var row = args.rowindex;
                var id = $('#jqxgrid').jqxGrid('getrowid', row);
                alert(id);
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

November 7, 2013 at 4:16 pm jqxgrid with custom id with array #32188

jahnvi25

Participant

thanks for reply.. i slightly modified the above example to my need.. and i dont get the id.. below is the code

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="assets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="assets/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqxgrid.grouping.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqxgrid.columnsreorder.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var tempData = new Array();
            var data = new Object();
            data.id = "row1";
            data.header = "Angel";
            data.expiration = "Bradley";
            tempData.push(data);
            //second row
            data = new Object();
            data.id="row2";
            data.header = "Miriam";
            data.expiration = "Roche";
            tempData.push(data);
            
            //var data = [{ id: "row1", firstname: "Angel", lastname: "Bradley" }, { id: "row2", firstname: "Miriam", lastname: "Roche"}];
            var source =
            {
                datatype: "array",//"json",
                id: "id",
                localdata:tempData,
                datafields: [
                    {name: 'header', type: 'string'},
                    {name: 'expiration', type: 'string'}
                ]
            };
            
            var columns = [
             {text:'Header',datafield:'header',hidden:false,editable:false,sortable:false},
             {text:'Expiration',datafield:'expiration',hidden:false,editable:true,sortable:false}
            ];
            var dataAdapter = new $.jqx.dataAdapter(source);
            
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                width: 400,
                autoheight: true,
                sortable: false,
                columns: columns,
                editable: true,
                filterable:true,
                altrows: true
                //groupable: true
            });
            
            $('#jqxgrid').on('cellendedit', function (event) {
                var args = event.args;
                var row = args.rowindex;
                var id = $('#jqxgrid').jqxGrid('getrowid', row);
                alert(id);
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

November 8, 2013 at 7:09 am jqxgrid with custom id with array #32235

Dimitar

Participant

Hi jahnvi25,

You should add “id” to the datafields, too:

datafields: [
    { name: 'header', type: 'string' },
    { name: 'expiration', type: 'string' },
    { name: 'id', type: 'string' }
]

Best Regards,
Dimitar

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

January 29, 2014 at 8:28 am jqxgrid with custom id with array #48583

elcarajo

Participant

Can the id be an array if the identifier for my record is a combination of fields?

January 29, 2014 at 10:30 am jqxgrid with custom id with array #48592

Dimitar

Participant

Hello elcarajo,

Unfortunately, the id datafield cannot be an array.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.