How to display sub grids below a grid - javascript

I'm relatively new to developing and I just started with react. I have a scenario here and iam not able to implement it. So my query is
As in picture below, I need to implement page like there are list of categories and I need to display them in grids( like I have gird1 grid2 grid3...... In below image). And on click of any category I need to display its sub categories in grid right below the selected category(if I click on grid 1 or 2 or 3 or 4 their sub grid should display below those grids). How can I implement this.
Hope u understood my query.
Image here
Thanks in advance

I'm not sure if there are rules against posting a solution that I haven't really developed, but a search on google brought me to this page in w3schools with an example:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_expanding_grid
I'm not sure if it would work on React, but it might be something you could adapt in your solution.

Related

Data pagination for div content

Guys please I need your help, I'm just starting with my programming journey. I've written a code for e-commerce website, where I have div row containing 4 columns each as div column hold the data for each item. Now I'm sure the rows will be much to have enough items on the site but I need it to show 10 or 12 items at a time. I haven't write anything about the pagination because my JavaScript knowledge is close to non. Please I need your help guys🙏
One approach for you to consider is using libraries such as DataTables. It has html table pagination enabled but you need to familiarize yourself with it.

Shopify Customization - How do I put all product images in a scrollable centre column?

I am web developer who is currently working on a project which requires me to do something much more advanced than anything I've ever done before, so if anyone could help it would be heaps appreciated! :) At the moment 1 product image is displayed as the main product image, and there is a sidebar with the rest of the product images. I need them to all be part of one scrollable column like the example below.
Here is an example of what I need to achieve
https://www.ssense.com/en-au/men/product/vetements/black-genetically-modified-volunteer-puffer-jacket/2233187

Trello Filters used with a Power Up

I'm currently working on a PowerUp that will display Trello Cards in additional Quarterly and Annual calendar views. I've tried replicating the setup of the Calendar Power Up, but as far as I can tell, it's developed internally and not stuck with the rules the rest of the Power Ups are tied to. One big item that I can't seem to figure out is how to filter the cards within my Power Up based on the cards filtered in the main Trello board. Does anyone have of know of an example showing how this can be done? Is this simply not possible? Any help or general direction pointing will be greatly appreciated.
have you tried this? The property is read only so I guess you only need an app key.

Splitting the screens in AngularJS

I have a requirement to split the screen into half and display the duplicate data on the other side of the screen. Initially this was achieved through a popup.
Hence user can compare the data without switching the screen. I want to avoid the use of iFrames for this. Could anyone guide me on how to get started with this. My application is pure Angular.
Thanks
Pretty much most of what you're looking for is in this tutorial:
AngularJS, Master-Detail page
It shows how to split the screen into two, and display a clickable list of items on the left, and an item's details on the right. But for your request, it sounds like you'd want the same on both sides..?

Can you render arbitrary HTML in each cell of a YUI datatable?

I want to add paginated table to a page. It should be 2 rows by 4 columns. Each cell contains a thumbnail image and some small links.
We're using YUI elsewhere on the project, so I'd like to use the Datatable. All the examples I see are geared around tabular data (understandable), but my hunch is that I can rewrite the HTML of each cell using Javascript. I don't see the callback function I should hook to rewrite the cells.
Possible? Or am I trying to hammer in a nail with a screwdriver? If there's a simpler way to do this with YUI I'd love to hear about it.
thanks!
jcooper,
To paginate a simple grid of image/text elements, I'd almost prefer to see you use the Paginator without using DataTable. DataTable is a powerful component, but it's working hard to be a lot of things you don't need.
Carousel (http://developer.yahoo.com/yui/carousel/ ), on the other hand, seems like it's trying to be just what you want. http://developer.yahoo.com/yui/examples/carousel/csl_imagentext.html , for example, might be a good place to start.
If that's not quite what you want, you could definitely do this with DataTable. Just create the markup snippets you want to use for each cell, store them in an array, and follow the directions for using an array datasource and pagination.
Regards,
Eric

Categories