jQWidgets Forums

jQuery UI Widgets › Forums › Grid › jqxgrid problem

Tagged: , , , , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 12 years ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    jqxgrid problem Posts
  • May 16, 2013 at 5:14 am jqxgrid problem #21236

    Sacrifice
    Member

    Hi Jqxgrid team.

    I got 2 problems to need your help.

    1. when I put dropdownlist in grid by using KO mapping. It doesnt work. It will show [function……..] Please see my simple code below

    2. I turn on virtualmode and use function rendergridrows call ajax to get data 10 rows from server by each time. I found that total record is incorrect, then I put command “$(“jqxgrid”).jqxGrid(‘updatebounddata’);” to refresh grid. it always call function rendergridrows.
    Is it possible to refresh grid without calling function rendergridrows?

    Thank you.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>In this sample is illustrated how to create a Grid with column which displays values from foreign data source. The DropDownList editor associated to the column is populated from the foreign data source.</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    	<script type="text/javascript" src="../../scripts/knockout-2.2.1.js"></script>
    	<script type="text/javascript" src="../../scripts/knockout-mapping-2.0.0.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.edit.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="../../scripts/gettheme.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getDemoTheme();
    			
    			var personViewModel;
    			
                var source = {"PersonalRelationship":[
    					{"Guid":"a5da967e-e89c-49e8-ba53-52fb28aefb1f","ID":0,"Text":"AAAAAA","DisplayText":null},
    					{"Guid":"4e202e3f-cb29-4949-bb12-a4c7f1f4e88c","ID":0,"Text":"BBBBBB","DisplayText":null},
    					{"Guid":"e561bcfe-affe-426e-b189-ecbd5183beab","ID":0,"Text":"CCCCCC","DisplayText":null}]};
    			personViewModel = ko.mapping.fromJS(source);
                // prepare the data
                var gridSource =
                {
                    datatype: "array",
                    localdata: 
                    [
                        { No: 1 },
    					{ No: 2 },
    					{ No: 3 },
    					{ No: 4 }
                    ]
                };
                $("#jqxgrid").jqxGrid(
                {
                    width: 400,
                    source: gridSource,
                    theme: theme,
                    selectionmode: 'singlecell',
                    autoheight: true,
                    editable: true,
                    columns: [
    					{ text: 'No', datafield: 'No', width: 40, align: 'center', cellsalign: 'center'},
                        {
                            text: 'Type', datafield: 'type', columntype: 'dropdownlist',
                            createeditor: function (row, value, editor) {
                                editor.jqxDropDownList({ source: personViewModel.PersonalRelationship, displayMember: 'Text', valueMember: 'Guid' });
                            }
                        },
                        
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id="jqxgrid">
            </div>
        </div>
    </body>
    </html>
    May 16, 2013 at 6:51 am jqxgrid problem #21243

    Dimitar
    Participant

    Hello Sacrifice,

    1) Here is a working example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>In this sample is illustrated how to create a Grid with column
            which displays values from foreign data source. The DropDownList editor associated
            to the column is populated from the foreign data source.</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="../../scripts/knockout-2.2.1.js"></script>
        <script type="text/javascript" src="../../scripts/knockout-mapping-2.0.0.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.edit.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="../../scripts/gettheme.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getDemoTheme();
                var getData = function () {
                    var PersonalRelationship = [
    					{ "Guid": "a5da967e-e89c-49e8-ba53-52fb28aefb1f", "ID": 1, "Text": "AAAAAA", "DisplayText": null },
    					{ "Guid": "4e202e3f-cb29-4949-bb12-a4c7f1f4e88c", "ID": 2, "Text": "BBBBBB", "DisplayText": null },
    					{ "Guid": "e561bcfe-affe-426e-b189-ecbd5183beab", "ID": 3, "Text": "CCCCCC", "DisplayText": null }
                        ];
                    return PersonalRelationship;
                };
                var viewModel = function (items) {
                    this.items = ko.observableArray(items);
                    this.index = ko.observable(0);
                };
                var model = new viewModel(getData());
                var source = {
                    localdata: model.items,
                    datatype: 'observablearray'
                }
                var dataAdapter = new $.jqx.dataAdapter(source);
                var gridSource =
                {
                    datatype: "array",
                    localdata:
                    [
                        { No: 1 },
    					{ No: 2 },
    					{ No: 3 },
    					{ No: 4 }
                    ]
                };
                $("#jqxgrid").jqxGrid(
                {
                    width: 400,
                    source: gridSource,
                    theme: theme,
                    selectionmode: 'singlecell',
                    autoheight: true,
                    editable: true,
                    columns: [
    					{ text: 'No', datafield: 'No', width: 40, align: 'center', cellsalign: 'center' },
                        {
                            text: 'Type', datafield: 'type', columntype: 'dropdownlist',
                            createeditor: function (row, value, editor) {
                                editor.jqxDropDownList({ source: dataAdapter, displayMember: 'Text', valueMember: 'Guid' });
                            }
                        },
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id="jqxgrid">
            </div>
        </div>
    </body>
    </html>

    2) To refresh the grid without calling rendergridrows, please use the refresh method.

    Best Regards,
    Dimitar

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

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.