Figuring out whether to use jqxWindow or jqXGrid

[walker1234Participant]

I have a jqxGrid which has following columns, Name, Start Date, End Date, comment and Action. Under Action column
I have an edit button for each rows and when a user clicks on it $("#jqxWindow").jqxWindow('open'); gets
executed and a jQXWindow opens up which shows Name, start Date, end date, comments and there are three buttons (
as shown in the html here, namely cancel, remove and save)

I have following questions:

I want to have the start date and end date field to be editable so I am wondering whether it’s best to
use jQXWindow in this case or should I stick with jQXGrid? Because I would need to update the records when
a user clicks on “Save” button , need to remove the record from the rows of jqxGrid when user clicks on “Remove”
button and close the button when a user clicks on “Cancel” button.And for all these “Remove” and “Save” operations
I will need to make an Ajax webservice call to RESTFUL webservice. Please advise.

Here is my Javascript code snippet that I am using:

// Handle cell selection
`jQuery(“#PersonAttributePanel”).on(‘cellselect’, function (event_) {

// Get the data from the selected row.
var rowIndex = event_.args.rowindex;
var rowData = jQuery(“#PersonAttributePanel”).jqxGrid(‘getrowdata’, rowIndex);

var selectedField = event_.args.datafield;

console.log(“Checking Contents of Selected Field: “+selectedField); // Here I see “edit”

var name = rowData[“name”];
var startDate = rowData[“start_job_date”];
var endDate = rowData[“end_job_date”];

jQuery(“#name”).html(name);
jQuery(“#startDate”).html(startDate);
jQuery(“#endDate”).html(endDate);

if (selectedField === “edit”) {
$(“#jqxWindow”).jqxWindow(‘open’); // Wondering whether to use grid or window here?

}
});`

[HristoParticipant]

Hello walker1234,

The answer to that question depends on the individual (the conception).
I am not sure what exactly you mean by ” to use grid or ..” (about the Grid – you mean to have buttons as ‘Remove’, ‘Save’ and ‘Cancel’ in the Grid)?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[walker1234Participant]

Hi Histro,

At present I have jqxwindow setup in my javascript code which is opening using $(“#jqxWindow”).jqxWindow(‘open’); line of code. When it opens, it shows the exact same thing as shown in the JSfiddle, so I already have Remove, Save and Cancel buttons there in the window. I am wondering if further operations like Ajax calls can be made using jqxwindow or is it just for displaying window only.

Instead of using jqxWindow, I was wondering whether grid would be better option?

Thanks

[HristoParticipant]

Hello walker1234,

I would like to notice those options – addrow, updaterow: function (rowid, newdata, commit) {} and deleterow.
You could use all the Grid methods ($('#jqxGrid').jqxGrid('addrow', rowid, newdata);, updaterow and etc) when clicking on the buttons from the Window.
Please, take a look at this article:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-datasources.htm?search=grid
Hope this helps.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[walker1234Participant]

Thanks, that was helpful. I found this also helpful :

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/#demos/jqxgrid/popupediting.htm

Just like editing, by any chance you are aware of any example which shows “Add” functionality as well in the grid?

[HristoParticipant]

Hello walker1234,

Yes, you could set ‘Add’ button on the similarly way – ‘Edit’ button.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts