Edit using angularjs and jqwidgets

[KBhimaParticipant]

Hi,

Am new to angularjs and jqwidgets. I am working on a web page using angularjs and jqwidgets.
In my webpage I have a grid and Add, Save, Cancel, Edit,Delete buttons and an input form.
I should be able to add or edit a row from the input form, i.e, when I click Add or Edit button the grid data should be shown in the input form where I can add or edit the data and on clicking the save button, the data should be added to the row.

Am doing good with the save button as you suggested me from my other posts, thanks for that
My question is how to do the edit part, ie when I click on the edit button, the row data from the grid should be shown in the form and I can change the values in the form and save it back to the grid.

Ex: I have columns ID and Name in Grid and also Form. When I click edit, the ID and Name values from the grid should be shown in the form.

I reffered to different demos and api’s but they only show the above example with popups but not with inputs.

Thanks in advance.

[DimitarParticipant]

Hi KBhima,

When you click “Edit”, you can do the following:

var rowindex = $('#jqxGrid').jqxGrid('getselectedrowindex');
var data = $('#jqxGrid').jqxGrid('getrowdata', rowindex);
$('#IDInput').val(data.ID);
$('#NameInput').val(data.Name);

Of course, the IDs of the grid and inputs may be different on your side. You would also have to call the methods the “Angular way”, as explained in the Invoking Methods section of the help topic jQWidgets Integration with AngularJS.

Please also consider using the Ever Present Row functionality to edit or add rows.

Best Regards,
Dimitar

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

[Author]

Posts