How tomake datalist repeated column dynamically based on Screen size?

Question

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

Jenith Thakkar · 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

Karthik K · Answer

@ Jenith Thakkar, Thank you so much , that particular link working fine .

Jenith Thakkar · Answer

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

Karthik K · Answer

@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.