How tomake datalist repeated column dynamically based on Screen size?

Karthik K

Hi,

In Our Current Project Requirement .we Have a situation to List out the items in DataList.

In MobileView - Need to show items (1 - Repeated Column Manner ).

In Desktop View - Need to show items ( 3 - Repeated Column Manner ). How can I achieve this? how can I make this repeated column value dynamically? based on the screen width. Suggest me with Sample Code.

This is Mobile View

Thanks in Advance,

Karthik K

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Jenith Thakkar6y ago
Accepted answer
Hi

You need to set RepeatColumns property of DataList based on window width.
You can do it by calling page base method using jquery ones Page get loads also if it gets resize from browsers.
Here i added one button which is hidden on page and assigned onclick event to where it sets RepeatColumns property of DataList using Hidden field value.
Hidden field value gets sets on basis of window size also when we resize window. Refer the below sample for understanding and implement it in your code by your own logic as per your requirement.

Check this link for that

https://www.aspforums.net/Threads/184417/Dynamically-change-repeat-column-of-DataList-as-per-screen-size-using-jQuery-in-ASPNet/

Marked as a answer if it's helpful for you
+1
Karthik K6y ago
@ Jenith Thakkar,

Thank you so much , that particular link working fine .
0
Jenith Thakkar6y ago
You have to do some changes in that code
like changes the dimension in
resize function of jquery

Also

So repeat column value set as 5 so you need to do apply changes according to your req

Thank you
0
Karthik K6y ago
@Jenith ,

I have tried the above you mentioned URL already, that sample code. but the data not come as mentioned in that Post instead its comes as follows.

0