A special requirement for jqxGrid

[wurekaParticipant]

I have a jqxGrid element similar to spreadsheet. In the spreadsheet, I want to show the daily working hours of my invloved projects in a weekly base.
It looks like below:

+----------------------------------------------------------------------------------------------------+
| [Add Project] [Del Project]                                                                        |
+---------------+------------+------------+--------------------------------+------------+------------+
+               | 11/22(Sun) | 11/23(Mon) | 11/24(Tue) ................... | 11/27(Fri) | 11/28(Sat) |
+---------------+------------+------------+--------------------------------+------------+------------+
| project A     |     0      |     4      | ...............................|    8       |            |
| project B     |     2      |     2      | ...............................|    0       |            |
| project C     |     0      |     2      | ...............................|    0       |            |
|[dropDownList] |            |            | ...............................|            |            |
+----------------------------------------------------------------------------------------------------+

The left column (Project name) is pinned.
At first, assuming that the sheet has 3 rows for displaying project A, B, and project C.
When I click the button [Add Project], the sheet will add a row and the first column is display as a dropdownlist in which I can choose a project and then fill the daily working hours in the following columns.

How do I config jqxGrid element ?
Many thanks.

[MariyaParticipant]

Hi wureka,

Please take a look at the provided demos for spreadsheet at: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/spreadsheet.htm?arctic
for adding and deleting rows at: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/createremoveupdatedata.htm?arctic and for pinning a column:http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/pinnedcolumns.htm?arctic.
When you add a new row and you want a dropdown column, it can be achieved in two ways:
-with a double click
-all of the columns for the project names should be of a dropdown type.
Take a look at the provided example at:http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/cellediting.htm?arctic The Product column is a dropdown column.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

[wurekaParticipant]

Hi, Mariya,
Thank you for your suggestion. I did follow the demos you mentioned, including spreadsheet, create-move-update-data, and cellediting.
Well, currently the problem I meet is that because my datasource is a remote JSON datasource as below:

        projectSource = {
            datatype:'json',
            unboundmode: true,
            url:'<g:createLink controller="api" action="getProjects"/>', // this is the syntax of Grails.
            type:'GET',
            async:true,
            dataFields:[
                {name:'projectId', type:'number'},
                {name:'customerId', type:'number'},
                {name:'customerName', type:'string'},
                {name:'projectName', type:'string'},
                {name:'projectStatus', type:'string'},
                {name:'projectType', type:'string'},
                {name:'projectCode', type:'string'},
                {name:'newestJournal', type:'string'},
                {name:'journalDate', type:'string'},
                {name:'spms', type:'string'},
                {name:'ams', type:'string'}
            ],
            updaterow: function(rowid, rowdata, commit) {
                console.log("updaterow():rowid:"+rowid+",commit:"+commit+",rowdata:" + JSON.stringify(rowdata));
                commit(true);
            },
            addrow: function (rowid, rowdata, position, commit) {
                commit(true);
            },
            deleterow: function (rowid, commit) {
                commit(true);
            },
            updaterow: function (rowid, newdata, commit) {
                commit(true);
            }
        };
        projectDataAdapter = new $.jqx.dataAdapter(projectSource, {
            loadError: function(jqXXHR, status, error) {
                console.error("projectDataAdapter().loadError:status:"+status+", error:" + error);

                //alert("Error when loading data:" + error);
            }
        });

Due to the business requirement, I can not synchronize the server when I add a new row in jqxGrid.
And the problem is that just after I add a new row to the jqxGrid element, it automatically reloads data from the server.
And that action makes the new added row disappear.

The possible solution I can think is, is it possible to disable the auto-reloading data of jqxGrid after adding a new row to the jqxGrid element?

[Peter StoevKeymaster]

Hi wureka,

jqxGrid does not have auto-reload option when a new row is added, updated or deleted or on any other action. We do not have auto-reload functionality at all. I suggest you to check whether you did not add such code somewhere – like updateboundata calls or setting the source property again.

Best Regards,
Peter Stoev

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

[Author]

Posts