[Resolved] Insert row in the middle of the Grid

[Author]

Posts

[igorL-3]

Tell us what you are trying to do? I have a 2 column, 20 row Grid on a Template and I need to inser a row after row 5. I can clear all the rows after 5 and add another row at the bottom but then I will need to re-do the rows I've cleared. Is there an easier way. I know that a item like a grid can be moved up or down but how to do it within the grid.

Is there any documentation that you are following?

Is there a similar example that we can see?

What is the link to your site?

[Luo Yang]

Hello,

With Views loop, you can get current item index with shortcode [wpv-loop-index accumulate="false" pad="false"]:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-loop-index

And you can use above shortcode in Toolset conditional block, check it's value, and display what you want, for example:

[wpv-conditional if="  ( ( '[wpv-loop-index  accumulate="false" pad="false"]' eq '11' ) ) "]
Here insert something
[/wpv-conditional ]

More help:
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-conditional

[igorL-3]

That doesn’t make a lot of sense to me. I don’t have a table in the VIEW I have a grid, as per attached image, on the content template using block editor.
The picture is showing a blank grid with only one row. I have 20 rows that are all populated with items I’m displaying. But I need to have another item displayed in row 5.

[Luo Yang]

There isn't such kind of built-in feature within Views in blocks editor, you might consider custom codes, for example:
1) create a HTML div tag, with CSS class name "insert-this", and display the row you want to insert
2) Use JS codes to move above HTML div tag after the 10th item of view's loop, like this:

jQuery( document ).ready(function() {
   jQuery( 'div.insert-this' ).insertAfter( 'div.tb-grid-column:nth-of-type(10)' );
});

[igorL-3]

My issue is resolved now. Thank you!