Dynamic rows in C# asp.net mvc - javascript

I am working in a c# project using MVC framework and Razor for the front view.
I am developing a form with dynamic grid which works based on the option selected from the dropdown list. On selecting the option I will generate a dynamic row containing either textbox or checkbox. When the user clicks Add new button
I have to show another dropdown list with options. Again based on the option selected another dynamic grid is once again added in the form just below the above steps. So it will be in a situation with row of textboxes and another row with checkboxes. The user can also delete the rows.
To accomplish this, I have tried the following approach in Javascript:
I used two tables in that
one table will dynamically apend by the dropdown when the user selects a row from the list.
In another table has the values of number of textboxes or checkboxes will be appended accordingly based on the
dropdown value is selected.
In this approach it continously adds a new row on clicking add new button. But when the dropdown option in row1 is changed then the corresponding checkbox must be replaced with text boxes and vice versa.
And consider I have a row with textboxes and another row with checkboxes. When a checkbox in row2 is checked then the corresponding text box in row1 must be disabled.
In this above approach I have to fix the issues in the 1. and 2. steps.
Please let me know is there any better approach other than javascript to implement this logic in C# MVC Razor framework.
Please kindly suggest me the best approach for dynamic grid and also whether javascript is fine to pass the variables to the controller. Thanks in advance.

Related

Implementing dropdown menu in dynamic table columns in html using jquery/js/python

I am creating a program with python that takes a CSV file, filters it and shows it to the user as a filtered file. That works great, but I have a problem when I want to implement dropdown menus for my table.
I used to_html()and <div class="table-responsive">{{data| safe}} </div> to import the file on the html side as a table.
I used javascript/jquery to implement the add/remove buttons, search box. What I can't figure out is how to add dropdown menus, since my table is not shown with HTML tags and each time has a different number of rows.
I have 23 columns and only 3 of them should have dropdown menus from which the user should choose a value for each row.
I created a fiddle to show how it looks currently. Bear in mind that here I just hardcoded my table for the example.- I did insert the class and id for the table on the python side so I can access the inputs in the table.
https://jsfiddle.net/2gw09vpr/1/
Currently, I added an attribute contendEditable for the columns 4,5 and 6 where there should be a dropdown list to choose from. How can I do that?
I am new to python/jquery/js so I am lost on how to do it.
What I tried so far was similar to this:
fiddle 1 ; fiddle 2 ;fiddle 3
stackoverflow
And nothing works for me. Any help would be appreciated.

Dynamic Jquery management of multiple table rows

Good Evening to all,
I'm currently developing an app that fetch data from a DB via AJAX calling a .php file.
I've got a table with 4 columns, the first 2 columns contain a < select >, the third an input and the last a button.
The first row is static: i've got a php query that loads the information of the 1st,2nd and 3rd column with default values.
When the user choose change the value of the 1st select a trigger launch a Jquery function that drop-down update the content of the 2nd and 3rd column.
In the same way if the user change the value of only the 2nd column, only the 3rd column value will be drop-down updated.
If the user make changes only with the 1st row, the code has no problem, but if the user press the button and via an .append() the code add another row, with the same scripts as the 1st one, obliviusly the new row selects won't work.
Trying to fix this I created a php for that copies the Jquery change functions using the iterator as identifier for both functions and the rows of the table.
Using the code inspector of chrome I don't find any errors, but only the 1st row jquery select will work, that is strange considerated that the 1st row function is generated by the same php cicle that is used for the others.
The hair are falling of my head because of this problem, hope you can understand and help me.
Thank in advance
Events and handlers added to existing elements won't work on clones of those elements added later dynamically. Simply said, your functions to do stuff on drop-down etc on existing rows are limited to those only, and won't apply to any newly generated rows.
For a general solution, consider writing all the event handlers separately, and invoke those again when you add new rows on button click.
Hope this made sense!

Hide a custom column field via SuiteScript based on an option from a dropdown menu

I need to show a custom transaction column field in Netsuite. Netsuite Support Team is useless as well as Netsuite Support website. Can anybody help me with this? I need the field display type to be set to NORMAL when certain options from a dropdown menu are chosen, otherwise, it needs to be hidden.
You cannot do this wholly client side.
Once a list is displayed on a page the columns are fixed.
Your options include:
Use a suitelet and display your header fields as a first page and then your colum fields on the next page after the determining drop-downs have been selected
Make the fields you'd like to hide display only when the drop-downs are selected so at least they are not as much of a bother
Make the column area an inline html table that you control completely.
That last isn't has horrible as it may sound since you can couple that with a hidden sublist of the real items and edit via pop-up suitelet driven dialogs. i.e. the inline table is read-only except for an Edit button. The Edit button triggers a dialog that is sourced from a Suitelet. You do that in an iframe and the post returns a function that populates the selected values. You can also dynamically update the table and skip the post or only add an action button to the suitelet dialog that updates the parent values.

Jquery datatable row selection

I am using the jquery data table. I need to select the rows using the ordinary click, ctrl+A and shift key selection. sample is given below, using javascript and store the rows id in any variable. how we do that? if the samples are code please suggestion here
This is a sample
Same need that javascript , datatable
Let me give you a higher level logic
Create datatable with checkboxes. Make sure you generate id's for those checkboxes and corresponding rows.
On check box click, you can find the id of the row easily. Keep saving them in an array as you keep clicking.
If you want to select all at once, give a specific id for select all checkbox and on click of that checkbox, loop through your data table and grab all the rows and put them in an array.
Once you have the logic for onClick, you can easily add javascript keyboard events.
I apologize for not putting some code together, it's lot of code to write but simple enough.

Drop down box in form with a button to add a second copy of drop down box

I have a simple form that lists user names and for each user, the form displays a drop down box with a list of items that can be assigned to the user. Since it is often necessary to assign multiple items to a user, I need to display a button next to the drop down that says "add another item" which automatically inserts another an identical drop down box below the first one and preserves the selected option in the original drop down box.
You might be thinking - why not just display a series of radio buttons or checkboxes? Can't do that for two reasons, 1) the list of items is too long and 2) there are times when I need to assign the same item to a user twice.
I know this "add another item" button can be done in Javascript, I just don't know the code.
Here's an example of what I need to do (not working because there is no onClick function yet).
http://www.dropthechalk.org/sampleform.html
This has nothing to do with dynamically populating the items in the drop down box, so I've found it hard to search for solutions. Any help or links to resources much appreciated!
Here is a tutorial that I did a while ago on dynamically adding input elements via JavaScript. This should be a good starting point.

Categories

Resources