Adding Pair of Drop downs Dynamically using Jquery - javascript

Am working on a ASP.NET MVC4 project. In UI i need to bring a following kind of sequence/cascading dropdowns.![Cannot add image since less reputation][1]
When "Left Table" and "Right Table" drop downs changed-show the tables column(s) names of respective tables using ajax as 2 dropdowns Named MasterKeys and SlaveKeys (from respecte tableNames) .when add button pressed load same coumnNames to two more dropdowns below to previously added.
I need to know how to add pair of dropdowns each time when add clicked(adding Multile joinKeys to join tables).That too to the same div with new line but with same content as previous (above it) so that they fall below the previous.
I tried this using jquery/javascript-adding dynamic elements.

Related

How to get button to act as column search filter within ag-grid and search for a set list of items?

SUMMARY: I have a column for ids within an ag-grid table. How can I get a button-click to only display some of the rows (for which I have a list of ids), while not re-writing the whole table?
BACKGROUND: I am using the community version of ag-grid and am using it with Javascript. I have a column with the id numbers in it. When I click a button (or something else eventually, but start with a button for simplicity), is it possible for it to act as a filter within the table, and hence could be undone by clicking another button to clear the filter?
In case that wasn't cleaar, I am looking to do:
1. Click button1
2. Display certain rows within a table whose id numbers are in my list variable
3. Have this button1's action act as a filter that can be undone by a button2 (which could be programmed perhaps like a clear filter button)
Is this possible to do with a quickfilter? Otherwise, if this isn't possible, how could I do this when over-writing the table, whilst still having the option to 'instantly' revert back to the original table
(I don't think I need to add code as I am unsure of how to build in this functionality)
Thanks in advance.

Change the first field of the first row of a grid with bootstrap

I have a one page html empty, one controller angular and one service angular.
In my service I have implemented a grid with bootstrap, with 8 columns. when i put in my data i create 8 rows with all the same fields each other.
i want to understand how change the html code of the first line in the first field.
an example could be:
i have a table 8x8 when i click on first field of first row it show me the string "Hello" and when i click on other first field it show me the string "Good".
Simply i want change the html code row of a table already implemented with bootstrap, the first row.

Dividing the main view in MVC to multiple sub views

I want to create a view that that is divided internally into many sub views
that will be displayed beside each other, i.e
The view will contains something like steps that when user fill one of the sub views he should click next button on the sub view to show the next sub view which will be displayed directly beside the old sub view .
I am using c# , MVC5 , JavaScript , Jquery .
i am thinking about creating ViewModel that conatins all my data of all sub views from all required tables , then create a view that is strongly typed to that view model .
In the strongly typed view , i am thinking to create a main Div html element that will contain another sub div elements (will be displayed Horizontally beside each other) and there will be a horizontal scroll to scroll through these sub div elements, each of them have fixed width and contains also a part of the fields for a certain part of data ,
in the first load of the page , there will be only the first sub div which will be visible to the user and it contains a tabular data , when user click on one line of this data it should show only the second sub div and an editable fields to be filled or edited and a button with text continue , when user clicks on the butoon continue on the second sub div view , it should display the third div element that will also contain some editable fields and a next button , when user click on that button it should display the fourth div ...etc , and at the final step it should display a submit button to save the data in all this divs elements and at the same time firs the validations of the page.
i am trying to find another solution rather than using partial views , it this idea will gonna work , because i have no time to implement and test , i should give a quick decision ,
Or if there is a better solution , i would be happy to know it .
i also need the submit button at the end, to horizontally scroll automatically to the sub div if it contains a validation error.
i am Open for any suggestions regarding this but i don't want to use Angular or NodeJS.

Angular ng- grid - hide/remove column input from column menu

When you use the flag 'showColumnMenu' with true value.
the ng-grid is rendered with button on the right end top panel.
Using this button we can hide/show the column on the grid.
In my Case I don't want to make it possible for some column to be visible on the grid - Meaning I want the the column menu box will be rendered with out some column.
Iv'e created plunker which demonstrated my problem
> http://plnkr.co/edit/VXOzBIRfyY3FoCTct9PI?p=preview
In that plnkr - I set column 'Id' to be invisible using (visible: false)
But if the user click on the column menu on the right end panel
he will be able to set it visible..
EDIT
Another scenario that I need to cover is case where there is some other
column say 'name' that I don't want the let the user configure it (by setting it as invisible) inside the column menu - meaning that column 'name' must always be on the grid!
and the user does not need to see it in the column menu..
So, if only i could hide those columns (id,name) inside the column menu
my problem will be solved..
Thanks!
You can do that editing a bit menuTemplate.html in ng-grid source file
Find line starting from :$templateCache.put('menuTemplate.html',
and line
<label><input ng-disabled=\"col.pinned\" type=\"checkbox\" class=\"ngColListCheckbox\" ng-model=\"col.visible\"/>{{col.displayName}}</label>\r" +
change to
<label ng-hide=\"col.colDef.alwaysVisible\"><input ng-disabled=\"col.pinned\" type=\"checkbox\" class=\"ngColListCheckbox\" ng-model=\"col.visible\"/>{{col.displayName}}</label>\r" +
now you can add
alwaysVisible:true
to columnDefs and it's done
Please see here working demo http://plnkr.co/edit/qmoILJ5LTMSlH7Uv9Rw8?p=preview
Why not just turn off the column menu? It sounds like you basically don't want to use it anyway. Is it important for your users to be able to hide the age column, when they can't control any other?
For hiding ID, I'd recommend not putting in the list of columns in the first place. Even if you don't include it in the grid, it will still be present in the data and accessible by your code. The grid is just a place to display information to the user, so don't put info in there that you don't want to display.
Edit: Check out UI-Grid, the updated version of the Ng-Grid project: http://ui-grid.info/
It has a new ColumnDef property, "EnableHiding" for exactly this case.
Here's their documentation for upgrading from ng-grid: http://ui-grid.info/docs/#/tutorial/099_upgrading_from_2

add div from drop down menu selection jquery

I am able to add a row with the dom but how can I get a div to display to the right of drop down depending on what is selected?
Here is an example of what I have so far: http://jsbin.com/#/afojid/1/edit
The first drop down is working correctly but the rest I would like to add when the button is clicked and I would like them to work the same way as the orginal drop down menu. So that if Asian is selected an add section will appear to the right, if Other is selected an other add section will appear to the right, and so on for each time the add button is clicked. I tried clone but I don't want anything to be selected when the add button is clicked
The fact that you're working with ids instead of classes more or less universally makes this very challenging. You should update your code to work with classes and appropriately clone the *Info tables when you create new dropdowns.
You're using an old version of jQuery, so .on is not available to you for delegation. Instead, use .delegate:
$(document).delegate('#typeofEthnicity,[id^=newDDMenu]', 'change', showEthnicity)
This will call the showEthnicity function for the original dropdown and any added dropdowns, but you also have to clone all of the *Info divs and put them in the appropriate spot in the table (I suppose the same spot as the appended row). If you use classes, then it's a simple matter of finding the dropdown's parent row and then locating the corresponding child with the appropriate class to be shown.

Categories

Resources