Tagged: , ,

This topic contains 2 replies, has 2 voices, and was last updated by  padma 7 years, 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    jqx-forms? Posts
  • jqx-forms? #88347

    padma
    Participant

    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

    jqx-forms? #88361

    Christopher
    Participant

    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

    jqx-forms? #88393

    padma
    Participant

    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

    • This reply was modified 7 years, 7 months ago by  padma.
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.