Style my div structure as a tree structure - javascript

Check this URL.
My divs are created dynamically in nested structure. I have to style this div to sports tournament structure. I don't know how to structure.
I want my structure like this.Now my code is working fine. Styling only the problem.
[1]: http://plnkr.co/edit/xKSwHAUdXcGZcwHTDmiv?p=preview

I am using org chart to achive my requirement.check below link
[https://jsfiddle.net/dhaarani/adx0ad49/][1]
page load one structure is shown. click the structrue again one is created.
change the input box value. sibilling and child will be created. inputbox value mustbe lessthan 100.
and one more condition check the one row contain all the input box values total is lessthan 100 than only create sibilling and child otherwise nothing will be happen.

Related

How to get Only selected node in Antd Tree

I'm using Antd and I want to create a second Tree with all Checked nodes in the First Tree,
Take a look here please
When i click on the Validate button, a new Tree Shouls be showed and contain only selected fields in the parent one.
How Can i Achieve it ?
Code : https://codesandbox.io/s/modern-browser-glh4n?file=/index.js
Thanks!

JS - dynamic inserting items into array on button click

So while creating a project I've encounter a problem. I have a container, let's call it container with assigned index, so it looks like container0 etc. Inside that container I have buttons to copy ( and delete ) this particular segment with all it's data. I also have index array to make sure all id's are unique. I have a working project, but I want to solve this particular situation, when I have multiple containers, and in page source containers have indexes like [0,1,5,8,6,7,9,12,10,11]. What I am doing right now is whenever somebody clicks button inside let's say container[7] and user wants to copy that container 3 times I will have [0,1,5,8,6,7,13,14,15,9,12,10,11], and the way I've solved this problem is inside button handler I get id of container like const index = parseInt(e.target.id.match(/\d+/)[0]); and then using querySelector I select which container I want to get data from. What I would like for you to help me figure out, how may I get container Id inside which button was clicked in different, easier way instead of matching id from button ( copy and delete button also have id, which is equal to container id). Also one more thing, I use eventDelegetion to add eventListeners for newly created segments.

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.

Add dynamic column to table in smart-table [angularjs]

I needed a little help over here on adding dynamic columns to table and I'm using smart-table project https://lorenzofox3.github.io/smart-table-website/
Please look at plunker
https://plnkr.co/edit/uTDa6hfwdgGtGWkYqL7S?p=preview
Click on add new column, it will update the table header, but I can't update the td element because I haven't created or binded any td element for new column.
Need help on two things.
1) Any number of new columns might come in future from server dynamically, so I can't bind any element statically in html like I did right now.
2) This is a little long one(I want to create a only one header as MV and in colspan I want current and next) and How do I accomplish that one ? If I divide like that, how do I go frame the data ?
Additional Note on Question 1: I have tried dynamically showing the data in table. please look at line 27 in index.html. But again, If I go with this approach, the values get binded to different different columns since, data's are framed dynamically on controller. To be simple, there is no guarantee that data will be in in this order.
(SNo, companyName, companyFullName, MarketValueCurrent, MarketValueNext, QuarterCurrent, QuarterNext)
companyName might come first or at last. If I go by dynamic looping using ng-repeat, it binds MarketValueNext in first column, then companyName, etc in whichever the order the data is coming.
Thanks in advance.

Display dynamic items on page after initial page load

I am using ASP.Net mvc to render my html view.
The view contains a dropdown list and a label
I load drop down list using a collection in my view model.
Lets say that the collection is called fruit
IList<Fruit> fruit
Fruit is defined as
FruitId
Name
FruitType
The dropdown list will display each Fruit name and have a value of FruitId
When I change the value of the drop down list I want to have the value of my label display FruitType.
I can think of a couple ways of doing this:
Write out Label tags for all values of FruitType. Give a css class to display the first one on load and add javascript to show/hide labels in the select onchange event
Provide json array of Fruit in the html somewhere (I would serialise the Fruit list on page load and put the resulting script on the page somewhere). I would add javascript to the onchnage event of the select to search the json and change the label value accordingly.
I have 2 questions:
Am I missing something obvious, could this be done in a better way?
If no 2 is a good idea, where should I put the json in the html so that the js can use it?
Another approach is that when you generate the dropdown list, include a data-attribute, say data-fruit-type where you store the FruitType, then when the dropdown value changes, just read the data-fruit-type attribute from the selected item.

Categories

Resources