VB .net Fixed Header and X-Y scrollable ListView with JQUERY/JavaScript-Updated

VB .net Fixed Header and X-Y scrollable ListView with JQUERY/JavaScript-Updated - Printable Version

+- 0Day Forums (https://zeroday.vip)
+-- Forum: Coding (https://zeroday.vip/Forum-Coding)
+--- Forum: JScript (https://zeroday.vip/Forum-JScript)
+--- Thread: VB .net Fixed Header and X-Y scrollable ListView with JQUERY/JavaScript-Updated (/Thread-VB-net-Fixed-Header-and-X-Y-scrollable-ListView-with-JQUERY-JavaScript-Updated)

VB .net Fixed Header and X-Y scrollable ListView with JQUERY/JavaScript-Updated - outmarch796316 - 07-24-2023

I have a huge ListView, like 30 Columns by alot of rows within a DIV in the midddle of the page
I need to have a fixed header and I have to be able to scroll on the x-axis in order to see all my columns. The header should of course remain fixed at top and each header colum has to align with each column.

Note: I am using a MasterPage. and the ListView is in another Contentpage.

I have found the exact script and css of what I am looking for but am unable to adapt it to my app. I keep getting Jscript Object error. I dont know where to put wich part of the script so it works with asp .nets masterpage dynamics

Here is what i want to implement in my app:
[This is what I need][1]

[To see links please register here]

[1]:

[To see links please register here]

The aspx code in my content page is basically the same code as in the jsfiddle

I will adapt it to my listview once it works with the table

there is no codebehind in this contentpage and i use the same html in the aspx page as in the jsfiddle.

This is my Site.Master.vb behind code

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
'----This scripts runs itself. JavaScript function in the MasterPage Page_Load() event
Dim someScript As New StringBuilder
someScript.Append("""<script type=""text/javascript"">""")
someScript.Append(" var headerWidth,")
someScript.Append("contentWidth,")
someScript.Append("leftWidth,")
someScript.Append("clientWidth,")
someScript.Append("documentWidth;")
someScript.Append(" function performWidth() {")
someScript.Append("$('.header').width(""99999em"");")
someScript.Append("headerWidth = $('.header > *').first().outerWidth(true);")
someScript.Append(" $('.header').width(headerWidth);")
someScript.Append(" $('.right').width(""99999em"");")
someScript.Append("contentWidth = $('.right > *').first().outerWidth(true);")
someScript.Append("$('.right').css({ left: leftWidth });")
someScript.Append(" $('.right').width(contentWidth);")
someScript.Append("clientWidth = window.document.body.clientWidth;")
someScript.Append("documentWidth = $(document).outerWidth(true);")
someScript.Append("};")
someScript.Append(" $(document).ready(function () {")
someScript.Append("$(document).scroll(function (e) {")
someScript.Append(" var ratio = (document.body.scrollLeft) / (documentWidth - clientWidth);")
someScript.Append("$('.header').css({ left: -(headerWidth - clientWidth) * ratio });")
someScript.Append("});")
someScript.Append("});")
someScript.Append("$(window).resize(function () {")
someScript.Append(" });")
someScript.Append("</script>")
someScript.Append("<script language='javascript'>alert('The script ran after script ran');</script>")
Page.ClientScript.RegisterStartupScript(Me.GetType(), "onload", someScript.ToString.Trim)

End Sub

nothing usefull in Site.Master.aspx.

Thx in advance. I've lost 2.5 days on this..My boss is badtrippin a fixed header is starting to cost alot of money Plz help.

RE: VB .net Fixed Header and X-Y scrollable ListView with JQUERY/JavaScript-Updated - effectse - 07-24-2023

An error here :

var performWidth = function () {

$('.header').width("99999em");
headerWidth = $('.header > *').first().outerWidth(true);
$('.header').width(headerWidth);
$('.right').width("99999em");
contentWidth = $('.right > *').first().outerWidth(true);
$('.right').css({ left: leftWidth });
$('.right').width(contentWidth);
clientWidth = window.document.body.clientWidth;
documentWidth = $(document).outerWidth(true);
}; // <-- Missing semicolon

But you can just do your function like this :

function performWidth() {
$('.header').width("99999em");
headerWidth = $('.header > *').first().outerWidth(true);
$('.header').width(headerWidth);
$('.right').width("99999em");
contentWidth = $('.right > *').first().outerWidth(true);
$('.right').css({ left: leftWidth });
$('.right').width(contentWidth);
clientWidth = window.document.body.clientWidth;
documentWidth = $(document).outerWidth(true);
}

RE: VB .net Fixed Header and X-Y scrollable ListView with JQUERY/JavaScript-Updated - holoblastic709 - 07-24-2023

I have finally managed it after 4 days and lots of testing. Install JScrollPane to your Visual Studio project via Nuget

Everything has to happen in the content page: the script and the call

This is the script to be pasted in any <asp:content> of the contentpage.


<link type="text/css" href="Styles/jquery.jscrollpane.css" rel="stylesheet" media="all" />


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>


<script type="text/javascript" src="Scripts/jquery.mousewheel.js"></script>


<script type="text/javascript" src="Scripts/jquery.jscrollpane.min.js"></script>

then use this script

<%--Script qui ajoute un event lors de l'utilisation des scrollbar--%>
<script type="text/javascript">
$(document).ready(function () {
$('#parentFixed')
.bind('jsp-scroll-y',
function (event, scrollPositionY, isAtTop, isAtBottom) {
$(".headerFixed").css("top", scrollPositionY);
}
)
.bind('jsp-scroll-x',
function (event, scrollPositionX, isAtLeft, isAtRight) {
$(".lefter").css("left", scrollPositionX);
)
.jScrollPane();
});
// alert('I was invoked at the end of the script'); //test pour voir si le scripte roule
</script>

this is the css needed

#parentFixed
{

height:800px;
background-color:#cccccc;
overflow:auto;
}

.headerFixed{

color:White;
background-color:green;
font-size:20px;
position:static;
z-index:222;
}

.headerFixed table td{
border: 1px solid #000000 ;
min-width: 150px;

}

.wrapperfixed{

height:600px;
font-size:20px;
}

/*Celui la ici si on voulais un header fixe vertical aligné a gauche*/
.wrapperfixed .lefter{
float:left;
width:100px;
height:800px;
background-color:red;
position:relative;
}

.wrapperfixed .content{
float:left;
}

.wrapperfixed .content table td{

border: 1px solid #000000 ;
min-width : 150px;
}

.wrapperfixed .content table th
{
border: 1px solid #000000 ;
min-width: 150px;
}

and this is how to use it in the asp page



<div id="parentFixed">
<div class="headerFixed">
<table id="tableHeader">
<tr>
<td><asp:LinkButton ID="Q" runat="server"><%= getCellText("Q")%></asp:LinkButton></td>
<td> <asp:LinkButton ID="W" runat="server"><%= getCellText("W")%></asp:LinkButton></td>
<td> <asp:LinkButton ID="E" runat="server"><%= getCellText("E")%></asp:LinkButton></td>
<td> <asp:LinkButton ID="R" runat="server"><%= getCellText("R")%></asp:LinkButton></td>
<td><asp:LinkButton ID="T" runat="server"><%= getCellText("T")%></asp:LinkButton></td>
<td><asp:LinkButton ID="Y" runat="server"><%= getCellText("Y")%></asp:LinkButton></td>
<td><asp:LinkButton ID="U" runat="server"><%= getCellText("U")%></asp:LinkButton></td>
<td><asp:LinkButton ID="I" runat="server"><%= getCellText("I")%></asp:LinkButton></td>
<td><asp:LinkButton ID="O" runat="server"><%= getCellText("O")%></asp:LinkButton></td>
<td><asp:LinkButton ID="P" runat="server"><%= getCellText("P")%></asp:LinkButton></td>
<td><asp:LinkButton ID="S" runat="server"><%= getCellText("S")%></asp:LinkButton></td>
<td><asp:LinkButton ID="L4" runat="server"><%= getCellText("L4")%></asp:LinkButton></td>
<td><asp:LinkButton ID="L5" runat="server"><%= getCellText("L5")%></asp:LinkButton></td>
<td><asp:LinkButton ID="A" runat="server"><%= getCellText("A")%></asp:LinkButton></td>
<td><asp:LinkButton ID="D" runat="server"><%= getCellText("D")%></asp:LinkButton></td>
<td><asp:LinkButton ID="F" runat="server"><%= getCellText("F")%></asp:LinkButton></td>
<td><asp:LinkButton ID="G" runat="server"><%= getCellText("G")%></asp:LinkButton></td>
<td><asp:LinkButton ID="H" runat="server"><%= getCellText("H")%></asp:LinkButton></td>
<td><asp:LinkButton ID="J" runat="server"><%= getCellText("J")%></asp:LinkButton></td>
<td> <asp:LinkButton ID="K" runat="server"><%= getCellText("K")%></asp:LinkButton></td>
<td><asp:LinkButton ID="L" runat="server"><%= getCellText("L")%></asp:LinkButton></td>
<td> <asp:LinkButton ID="Z" runat="server"><%= getCellText("Z")%></asp:LinkButton></td>
<td> <asp:LinkButton ID="X" runat="server"><%= getCellText("X")%></asp:LinkButton></td>
<td> <asp:LinkButton ID="C" runat="server"><%= getCellText("C")%></asp:LinkButton></td>
<td><asp:LinkButton ID="V" runat="server"><%= getCellText("V")%></asp:LinkButton></td>
<td><asp:LinkButton ID="B" runat="server"><%= getCellText("B")%></asp:LinkButton></td>
<td><asp:LinkButton ID="N" runat="server"><%= getCellText("N")%></asp:LinkButton></td>
<td><asp:LinkButton ID="M" runat="server"><%= getCellText("M")%></asp:LinkButton></td>
<td><asp:LinkButton ID="QQ" runat="server"><%= getCellText("QQ")%></asp:LinkButton></td>
<td><asp:LinkButton ID="QW" runat="server"><%= getCellText("QW")%></asp:LinkButton></td>
<td><asp:LinkButton ID="QL" runat="server"><%= getCellText("QL")%></asp:LinkButton></td>
<td><asp:LinkButton ID="QE" runat="server"><%= getCellText("QE")%></asp:LinkButton></td>
<td><asp:LinkButton ID="QR" runat="server"><%= getCellText("QR")%></asp:LinkButton></td>
<td><asp:LinkButton ID="QT" runat="server"><%= getCellText("QT")%></asp:LinkButton></td>
<td><asp:LinkButton ID="QY" runat="server"><%= getCellText("QY")%></asp:LinkButton></td>
<td><asp:LinkButton ID="QU" runat="server"><%= getCellText("QU")%></asp:LinkButton></td>
<td><asp:LinkButton ID="COM" runat="server"><%= getCellText("COM")%></asp:LinkButton></td>
</tr>
</table>
</div><%--FIN HEADER FIXED--%>
<%--Wrapper FIXED--%>
<div class="wrapperfixed">
<div class="content"><%--Content FIXED--%>

<table>

<asp:ListView ID="ListView1" runat="server" EnableEventValidation="true">

<ItemTemplate>

<tr style="background-color: <%# BgColor(Eval("A"))%>">
<td width="106px">
<asp:Label runat="server" ID="lb_LB1"><a href="Desk.aspx?id=<%# Eval("Q")%>"><%# Eval("Q")%></a></asp:Label>
</td>
<td width="106px">
<asp:Label runat="server" ID="lb_LB2"><a href="Desk.aspx?id=<%# Eval("Q")%>"><%# Eval("W")%></A></asp:Label>
</td>
<td width="106px">
<asp:Label runat="server" ID="lb_LB3"><%# Eval("E")%></asp:Label></td>
<td width="106px">
<asp:Label runat="server" ID="lb_LB4"><%# Eval("R")%></asp:Label></td>
<td width="106px">
<asp:Label runat="server" ID="lb_LB5"><%# Eval("T")%></asp:Label></td>
<td width="106px">
<asp:Label runat="server" ID="lb_LB6"><%# Eval("Y")%></asp:Label></td>
<td width="106px">
<asp:Label runat="server" ID="lb_LB7"><%# Eval("U")%></asp:Label></td>
<td>
<asp:Label runat="server" ID="lb_LB8"><%# Eval("I")%></asp:Label></td>
<td>
<asp:Label runat="server" ID="lb_LB9"><%# Eval("O")%></asp:Label></td>
<td>
<asp:Label runat="server" ID="lb_LB10"><%# Eval("P")%></asp:Label></td>
<td>
<asp:Label runat="server" ID="lb_LB12"><%# Eval("S")%></asp:Label></td>
<td>
<asp:Label runat="server" ID="Label4"><%# Eval("L4")%></asp:Label></td>
<td>
<asp:Label runat="server" ID="Label5"><%# Eval("L5")%></asp:Label></td>
<td>
<asp:Label runat="server" ID="lb_LB11"><a href="Reservation.aspx?<%# getLink(Eval("A"), Eval("Q") , Eval("F"))%>"><%# Eval("A")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB13"><%# Eval("D")%></asp:Label></td>
<td>
<asp:Label runat="server" ID="lb_LB14"><%# Eval("F")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB15"><%# Eval("G")%></asp:Label></td>
<td>
<asp:Label runat="server" ID="lb_LB16"><%# Eval("H")%></asp:Label></td>
<td>
<asp:Label runat="server" ID="lb_LB17"><%# Eval("J")%></asp:Label></td>
<td>
<asp:Label runat="server" ID="lb_LB18"><%# Eval("K")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB19"><%# Eval("L")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB20"><%# Eval("Z")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB21"><%# Eval("X")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB22"><%# Eval("C")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB23"><%# Eval("V")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB24"><a href="Employee.aspx?id=<%# Eval("L")%>"><%# Eval("B")%></a></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB25"><a href="Employee.aspx?id=<%# Eval("L")%>"><%# Eval("N")%></a></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB26"><%# Eval("M")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB27"><%# Eval("QQ")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB28"><%# Eval("QW")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB29"><%# Eval("QL")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB30"><%# Eval("QE")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB31"><%# Eval("QR")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB32"><%# Eval("QT")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB33"><%# Eval("QY")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB34"><%# Eval("QU")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB35"><%# Eval("COM")%></asp:Label><%--Comments--%>
</td>
</tr>

</ItemTemplate>

<AlternatingItemTemplate>

<tr style="background-color: <%# BgColor(Eval("A"))%>">
<td style="width:106px;">
<asp:Label runat="server" ID="lb_LB1"><a href="Desk.aspx?id=<%# Eval("Q")%>"><%# Eval("Q")%></A></asp:Label>
</td>
<td style="width:106px;">
<asp:Label runat="server" ID="lb_LB2"><a href="Desk.aspx?id=<%# Eval("Q")%>"><%# Eval("W")%></A></asp:Label>
</td>
<td style="width:106px;">
<asp:Label runat="server" ID="lb_LB3"><%# Eval("E")%></asp:Label>
</td>
<td style="width:106px;">
<asp:Label runat="server" ID="lb_LB4"><%# Eval("R")%></asp:Label>
</td>
<td style="width:106px;">
<asp:Label runat="server" ID="lb_LB5"><%# Eval("T")%></asp:Label>
</td>
<td style="width:106px;">
<asp:Label runat="server" ID="lb_LB6"><%# Eval("Y")%></asp:Label>
</td>
<td style="width:106px;">
<asp:Label runat="server" ID="lb_LB7"><%# Eval("U")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB8"><%# Eval("I")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB9"><%# Eval("O")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB10"><%# Eval("P")%></asp:Label>
</td>
<%--<td><asp:Label runat="server" ID="Label1"><a href="Reservation.aspx?deskId=<%# Eval("Q")%>"><%# Eval("A")%></a></asp:Label></td>--%>

<td>
<asp:Label runat="server" ID="lb_LB12"><%# Eval("S")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="Label6"><%# Eval("L4")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="Label7"><%# Eval("L5")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB11"><a href="Reservation.aspx?<%# getLink(Eval("A"), Eval("Q") , Eval("F"))%>"><%# Eval("A")%></a></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB13"><%# Eval("D")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB14"><%# Eval("F")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB15"><%# Eval("G")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB16"><%# Eval("H")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB17"><%# Eval("J")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB18"><%# Eval("K")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB19"><%# Eval("L")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB20"><%# Eval("Z")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB21"><%# Eval("X")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB22"><%# Eval("C")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB23"><%# Eval("V")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB24"><a href="Employee.aspx?id=<%# Eval("L")%>"><%# Eval("B")%></a></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB25"><a href="Employee.aspx?id=<%# Eval("L")%>"><%# Eval("N")%></a></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB26"><%# Eval("M")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB27"><%# Eval("QQ")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB28"><%# Eval("QW")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB29"><%# Eval("QL")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB30"><%# Eval("QE")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB31"><%# Eval("QR")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB32"><%# Eval("QT")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB33"><%# Eval("QY")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB34"><%# Eval("QU")%></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lb_LB35"><%# Eval("COM")%></asp:Label><%--Comments--%>
</td>
</tr>

</AlternatingItemTemplate>
</asp:ListView>

</table>

</div><%--FIN CONTENT FIXED--%>
</div><%--FIN WRAPPER FIXED--%>
<div class="scrollarea"></div><%--Pour activer le javascript du jscrollpane--%>
</div><%--Fin ParentFixed--%>