jqx-forms?

[padmaParticipant]

Hello,

I do not know if there is a way I can already implement this using the existing widgets in angular, But I’m currently looking for a table like feature, with just two columns. the first column would be fixed, as a header, and every cell in each row could be an input box, or a select dropdown sourced with options from ajax. The height/width of the table/form would be fixed. There would be no column headers at all. I have been looking at dataTable and playing around with it, but I am trying to understand how I can customize individual rows and submit the ‘form’ data.

Is there a way to implement this using the existing widgets, in angular?

Thanks,
Padma

[ChristopherParticipant]

Hi padma,

The jqxDataTable is the widget you’re looking for. You can set a column to contain rows that are text inputs, by settings the columnType property of the column to text or dropdownlist, or even ‘custom’ if you want to custimze the editors completely. Here is a demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/angularjs-demos/angular-datatable/angularjs-datatable-command-column.htm?light

You can disable the header of the jqxDataTable by setting the showHeader property to false. You can get the entered data from the inputs using the ‘getCellValue’ property and for example, submit it on click of a button. Here is an example usage of the property:
http://jsfiddle.net/jqwidgets/GRZCR/

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[padmaParticipant]

Hi Christopher,

Thank you for the demo links. From what I understand, I see that jqxtable allows modification of all rows for a specified column to have a specific input type such as select or input. I’m currently trying to have each column for a specified row have a specific input type. Please see below:

Name <Input text>
Contact Number <Input text>
Contact Number Type <Select ‘Home/Mobile/Work’>
ID <input text>
Address <Input text>
State <Select>
Country <Select>
Zipcode <Input text>
Group <Custom select group values sourced by ajax>
Custom header <Custom select values sourced by ajax>

Submit Button

The form would be in a table, and the data on submit would ultimately be wrapped into a simple json object.

Thanks,
Padma

[Author]

Posts