Skip to main content

Scrollable GridView with Fixed Headers using jQuery Plugin


Using the same example I have created a jQuery Plugin for Scrollable GridView with Fixed header so that you can directly make a GridView scrollable.
 
HTML Markup
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns = "false">
<Columns>
<asp:BoundField DataField = "ContactName" HeaderText = "Contact Name" />
<asp:BoundField DataField = "City" HeaderText = "City" />
<asp:BoundField DataField = "Country" HeaderText = "Country" />
Columns>
asp:GridView>
form>

 
Applying the Scrollable Grid jQuery Plugin
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript">script>
<script src="Scripts/ScrollableGridPlugin.js" type="text/javascript">script>
<script type = "text/javascript">
    $(document).ready(function () {
        $('#<%=GridView1.ClientID %>').Scrollable({
            ScrollHeight: 300,
            Width: 467
        });
    });
script>

Above you will notice I have referenced the jQuery and the Scrollable Grid plugin JS files. After that you need to initialize the GridView that you want to make as scrollable.
Parameters
ScrollHeight – Height of the Scrollable DIV
Width – Width of the Scrollable DIV (Optional)
Note: Thanks to the suggestion of “Steve Wellens”, I have modified the plugin so that it will automatically calculate the width of the Scrollable DIV based on the offset width of the GridView. Thus the width parameter is now optional. Hence the following will also work
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript">script>
<script src="Scripts/ScrollableGridPlugin.js" type="text/javascript">script>
<script type = "text/javascript">
    $(document).ready(function () {
        $('#<%=GridView1.ClientID %>').Scrollable({
            ScrollHeight: 300
        });
    });
script>
 
Demo
Contact NameCityCountry
Adnaan KhanMumbaiIndia
MariaBerlinGermany
Ana TrujilloMéxico D.F.Mexico
Antonio MorenoMéxico D.F.Mexico
Thomas HardyLondonSweden
Christina BerglundLuleåSweden
Hanna MoosMannheimGermany
Frédérique CiteauxStrasbourgFrance
Martín SommerMadridSpain
Laurence LebihanMarseilleFrance
Elizabeth LincolnTsawassenCanada
Victoria AshworthLondonUK
Patricio SimpsonBuenos AiresArgentina
Francisco ChangMéxico D.F.Mexico
Yang WangBernSwitzerland
Pedro AfonsoSao PauloBrazil
Elizabeth BrownLondonUK
Sven OttliebAachenGermany
Janine LabruneNantesFrance
Ann DevonLondonUK
Roland MendelGrazAustria
Aria CruzSao PauloBrazil
Diego RoelMadridSpain
Martine RancéLilleFrance
Maria LarssonBräckeSweden
Peter FrankenMünchenGermany
Carine SchmittNantesFrance
Paolo AccortiTorinoItaly
Lino RodriguezLisboaPortugal
Eduardo SaavedraBarcelonaSpain
José Pedro FreyreSevillaSpain
André FonsecaCampinasBrazil
Howard SnyderEugeneUSA
Manuel PereiraCaracasVenezuela
Mario PontesRio de JaneiroBrazil
Carlos HernándezSan CristóbalVenezuela
Yoshi LatimerElginUSA
Patricia McKennaCorkIreland
Helen BennettCowesUK
Philip CramerBrandenburgGermany
Daniel ToniniVersaillesFrance
Annette RouletToulouseFrance
Yoshi TannamuriVancouverCanada
John SteelWalla WallaUSA
Renate MessnerFrankfurt a.M.Germany
Jaime YorresSan FranciscoUSA
Carlos GonzálezBarquisimetoVenezuela
Felipe IzquierdoI. de MargaritaVenezuela
Fran WilsonPortlandUSA
Giovanni RovelliBergamoItaly
Catherine DeweyBruxellesBelgium
Jean FresnièreMontréalCanada
Alexander FeuerLeipzigGermany
Simon CrowtherLondonUK
Yvonne MoncadaBuenos AiresArgentina
Rene PhillipsAnchorageUSA
Henriette PfalzheimKölnGermany
Marie BertrandParisFrance
Guillermo FernándezMéxico D.F.Mexico
Georg PippsSalzburgAustria
Isabel de CastroLisboaPortugal
Bernardo BatistaRio de JaneiroBrazil
Lúcia CarvalhoSao PauloBrazil
Horst KlossCunewaldeGermany
Sergio GutiérrezBuenos AiresArgentina
Paula WilsonAlbuquerqueUSA
Maurizio MoroniReggio EmiliaItaly
Janete LimeiraRio de JaneiroBrazil
Michael HolzGenèveSwitzerland
Alejandra CaminoMadridSpain
Jonas BergulfsenStavernNorway
Jose PavarottiBoiseUSA
Hari KumarLondonUK
Jytte PetersenKobenhavnDenmark
Dominique PerrierParisFrance
Art BraunschweigerLanderUSA
Pascale CartrainCharleroiBelgium
Liz NixonPortlandUSA
Liu WongButteUSA
Karin JosephsMünsterGermany
Miguel Angel PaolinoMéxico D.F.Mexico
Anabela DominguesSao PauloBrazil
Helvetius NagyKirklandUSA
Palle IbsenÅrhusDenmark
Mary SaveleyLyonFrance
Paul HenriotReimsFrance
Rita MüllerStuttgartGermany
Pirkko KoskitaloOuluFinland
Paula ParenteResendeBrazil
Karl JablonskiSeattleUSA
Matti KarttunenHelsinkiFinland
Zbyszek PiestrzeniewiczWarszawaPoland

Fixed Bug: More than 14 columns
Contact NameCountryCityContact NameCountryCityContact NameCountryCityContact NameCountryCityContact NameCountryCity
Adnaan KhanIndiaMumbaiAdnaan KhanIndiaMumbaiAdnaan KhanIndiaMumbaiAdnaan KhanIndiaMumbaiAdnaan KhanIndiaMumbai
MariaGermanyBerlinMariaGermanyBerlinMariaGermanyBerlinMariaGermanyBerlinMariaGermanyBerlin
Ana TrujilloMexicoMéxico D.F.Ana TrujilloMexicoMéxico D.F.Ana TrujilloMexicoMéxico D.F.Ana TrujilloMexicoMéxico D.F.Ana TrujilloMexicoMéxico D.F.
Antonio MorenoMexicoMéxico D.F.Antonio MorenoMexicoMéxico D.F.Antonio MorenoMexicoMéxico D.F.Antonio MorenoMexicoMéxico D.F.Antonio MorenoMexicoMéxico D.F.
Thomas HardySwedenLondonThomas HardySwedenLondonThomas HardySwedenLondonThomas HardySwedenLondonThomas HardySwedenLondon
Christina BerglundSwedenLuleåChristina BerglundSwedenLuleåChristina BerglundSwedenLuleåChristina BerglundSwedenLuleåChristina BerglundSwedenLuleå
Hanna MoosGermanyMannheimHanna MoosGermanyMannheimHanna MoosGermanyMannheimHanna MoosGermanyMannheimHanna MoosGermanyMannheim
Frédérique CiteauxFranceStrasbourgFrédérique CiteauxFranceStrasbourgFrédérique CiteauxFranceStrasbourgFrédérique CiteauxFranceStrasbourgFrédérique CiteauxFranceStrasbourg
Martín SommerSpainMadridMartín SommerSpainMadridMartín SommerSpainMadridMartín SommerSpainMadridMartín SommerSpainMadrid
Laurence LebihanFranceMarseilleLaurence LebihanFranceMarseilleLaurence LebihanFranceMarseilleLaurence LebihanFranceMarseilleLaurence LebihanFranceMarseille
Elizabeth LincolnCanadaTsawassenElizabeth LincolnCanadaTsawassenElizabeth LincolnCanadaTsawassenElizabeth LincolnCanadaTsawassenElizabeth LincolnCanadaTsawassen
Victoria AshworthUKLondonVictoria AshworthUKLondonVictoria AshworthUKLondonVictoria AshworthUKLondonVictoria AshworthUKLondon
Patricio SimpsonArgentinaBuenos AiresPatricio SimpsonArgentinaBuenos AiresPatricio SimpsonArgentinaBuenos AiresPatricio SimpsonArgentinaBuenos AiresPatricio SimpsonArgentinaBuenos Aires
Francisco ChangMexicoMéxico D.F.Francisco ChangMexicoMéxico D.F.Francisco ChangMexicoMéxico D.F.Francisco ChangMexicoMéxico D.F.Francisco ChangMexicoMéxico D.F.
Yang WangSwitzerlandBernYang WangSwitzerlandBernYang WangSwitzerlandBernYang WangSwitzerlandBernYang WangSwitzerlandBern
Pedro AfonsoBrazilSao PauloPedro AfonsoBrazilSao PauloPedro AfonsoBrazilSao PauloPedro AfonsoBrazilSao PauloPedro AfonsoBrazilSao Paulo
Elizabeth BrownUKLondonElizabeth BrownUKLondonElizabeth BrownUKLondonElizabeth BrownUKLondonElizabeth BrownUKLondon
Sven OttliebGermanyAachenSven OttliebGermanyAachenSven OttliebGermanyAachenSven OttliebGermanyAachenSven OttliebGermanyAachen
Janine LabruneFranceNantesJanine LabruneFranceNantesJanine LabruneFranceNantesJanine LabruneFranceNantesJanine LabruneFranceNantes
Ann DevonUKLondonAnn DevonUKLondonAnn DevonUKLondonAnn DevonUKLondonAnn DevonUKLondon
Roland MendelAustriaGrazRoland MendelAustriaGrazRoland MendelAustriaGrazRoland MendelAustriaGrazRoland MendelAustriaGraz
Aria CruzBrazilSao PauloAria CruzBrazilSao PauloAria CruzBrazilSao PauloAria CruzBrazilSao PauloAria CruzBrazilSao Paulo
Diego RoelSpainMadridDiego RoelSpainMadridDiego RoelSpainMadridDiego RoelSpainMadridDiego RoelSpainMadrid
Martine RancéFranceLilleMartine RancéFranceLilleMartine RancéFranceLilleMartine RancéFranceLilleMartine RancéFranceLille
Maria LarssonSwedenBräckeMaria LarssonSwedenBräckeMaria LarssonSwedenBräckeMaria LarssonSwedenBräckeMaria LarssonSwedenBräcke
Peter FrankenGermanyMünchenPeter FrankenGermanyMünchenPeter FrankenGermanyMünchenPeter FrankenGermanyMünchenPeter FrankenGermanyMünchen
Carine SchmittFranceNantesCarine SchmittFranceNantesCarine SchmittFranceNantesCarine SchmittFranceNantesCarine SchmittFranceNantes
Paolo AccortiItalyTorinoPaolo AccortiItalyTorinoPaolo AccortiItalyTorinoPaolo AccortiItalyTorinoPaolo AccortiItalyTorino
Lino RodriguezPortugalLisboaLino RodriguezPortugalLisboaLino RodriguezPortugalLisboaLino RodriguezPortugalLisboaLino RodriguezPortugalLisboa
Eduardo SaavedraSpainBarcelonaEduardo SaavedraSpainBarcelonaEduardo SaavedraSpainBarcelonaEduardo SaavedraSpainBarcelonaEduardo SaavedraSpainBarcelona
José Pedro FreyreSpainSevillaJosé Pedro FreyreSpainSevillaJosé Pedro FreyreSpainSevillaJosé Pedro FreyreSpainSevillaJosé Pedro FreyreSpainSevilla
André FonsecaBrazilCampinasAndré FonsecaBrazilCampinasAndré FonsecaBrazilCampinasAndré FonsecaBrazilCampinasAndré FonsecaBrazilCampinas
Howard SnyderUSAEugeneHoward SnyderUSAEugeneHoward SnyderUSAEugeneHoward SnyderUSAEugeneHoward SnyderUSAEugene
Manuel PereiraVenezuelaCaracasManuel PereiraVenezuelaCaracasManuel PereiraVenezuelaCaracasManuel PereiraVenezuelaCaracasManuel PereiraVenezuelaCaracas
Mario PontesBrazilRio de JaneiroMario PontesBrazilRio de JaneiroMario PontesBrazilRio de JaneiroMario PontesBrazilRio de JaneiroMario PontesBrazilRio de Janeiro
Carlos HernándezVenezuelaSan CristóbalCarlos HernándezVenezuelaSan CristóbalCarlos HernándezVenezuelaSan CristóbalCarlos HernándezVenezuelaSan CristóbalCarlos HernándezVenezuelaSan Cristóbal
Yoshi LatimerUSAElginYoshi LatimerUSAElginYoshi LatimerUSAElginYoshi LatimerUSAElginYoshi LatimerUSAElgin
Patricia McKennaIrelandCorkPatricia McKennaIrelandCorkPatricia McKennaIrelandCorkPatricia McKennaIrelandCorkPatricia McKennaIrelandCork
Helen BennettUKCowesHelen BennettUKCowesHelen BennettUKCowesHelen BennettUKCowesHelen BennettUKCowes
Philip CramerGermanyBrandenburgPhilip CramerGermanyBrandenburgPhilip CramerGermanyBrandenburgPhilip CramerGermanyBrandenburgPhilip CramerGermanyBrandenburg
Daniel ToniniFranceVersaillesDaniel ToniniFranceVersaillesDaniel ToniniFranceVersaillesDaniel ToniniFranceVersaillesDaniel ToniniFranceVersailles
Annette RouletFranceToulouseAnnette RouletFranceToulouseAnnette RouletFranceToulouseAnnette RouletFranceToulouseAnnette RouletFranceToulouse
Yoshi TannamuriCanadaVancouverYoshi TannamuriCanadaVancouverYoshi TannamuriCanadaVancouverYoshi TannamuriCanadaVancouverYoshi TannamuriCanadaVancouver
John SteelUSAWalla WallaJohn SteelUSAWalla WallaJohn SteelUSAWalla WallaJohn SteelUSAWalla WallaJohn SteelUSAWalla Walla
Renate MessnerGermanyFrankfurt a.M.Renate MessnerGermanyFrankfurt a.M.Renate MessnerGermanyFrankfurt a.M.Renate MessnerGermanyFrankfurt a.M.Renate MessnerGermanyFrankfurt a.M.
Jaime YorresUSASan FranciscoJaime YorresUSASan FranciscoJaime YorresUSASan FranciscoJaime YorresUSASan FranciscoJaime YorresUSASan Francisco
Carlos GonzálezVenezuelaBarquisimetoCarlos GonzálezVenezuelaBarquisimetoCarlos GonzálezVenezuelaBarquisimetoCarlos GonzálezVenezuelaBarquisimetoCarlos GonzálezVenezuelaBarquisimeto
Felipe IzquierdoVenezuelaI. de MargaritaFelipe IzquierdoVenezuelaI. de MargaritaFelipe IzquierdoVenezuelaI. de MargaritaFelipe IzquierdoVenezuelaI. de MargaritaFelipe IzquierdoVenezuelaI. de Margarita
Fran WilsonUSAPortlandFran WilsonUSAPortlandFran WilsonUSAPortlandFran WilsonUSAPortlandFran WilsonUSAPortland
Giovanni RovelliItalyBergamoGiovanni RovelliItalyBergamoGiovanni RovelliItalyBergamoGiovanni RovelliItalyBergamoGiovanni RovelliItalyBergamo
Catherine DeweyBelgiumBruxellesCatherine DeweyBelgiumBruxellesCatherine DeweyBelgiumBruxellesCatherine DeweyBelgiumBruxellesCatherine DeweyBelgiumBruxelles
Jean FresnièreCanadaMontréalJean FresnièreCanadaMontréalJean FresnièreCanadaMontréalJean FresnièreCanadaMontréalJean FresnièreCanadaMontréal
Alexander FeuerGermanyLeipzigAlexander FeuerGermanyLeipzigAlexander FeuerGermanyLeipzigAlexander FeuerGermanyLeipzigAlexander FeuerGermanyLeipzig
Simon CrowtherUKLondonSimon CrowtherUKLondonSimon CrowtherUKLondonSimon CrowtherUKLondonSimon CrowtherUKLondon
Yvonne MoncadaArgentinaBuenos AiresYvonne MoncadaArgentinaBuenos AiresYvonne MoncadaArgentinaBuenos AiresYvonne MoncadaArgentinaBuenos AiresYvonne MoncadaArgentinaBuenos Aires
Rene PhillipsUSAAnchorageRene PhillipsUSAAnchorageRene PhillipsUSAAnchorageRene PhillipsUSAAnchorageRene PhillipsUSAAnchorage
Henriette PfalzheimGermanyKölnHenriette PfalzheimGermanyKölnHenriette PfalzheimGermanyKölnHenriette PfalzheimGermanyKölnHenriette PfalzheimGermanyKöln
Marie BertrandFranceParisMarie BertrandFranceParisMarie BertrandFranceParisMarie BertrandFranceParisMarie BertrandFranceParis
Guillermo FernándezMexicoMéxico D.F.Guillermo FernándezMexicoMéxico D.F.Guillermo FernándezMexicoMéxico D.F.Guillermo FernándezMexicoMéxico D.F.Guillermo FernándezMexicoMéxico D.F.
Georg PippsAustriaSalzburgGeorg PippsAustriaSalzburgGeorg PippsAustriaSalzburgGeorg PippsAustriaSalzburgGeorg PippsAustriaSalzburg
Isabel de CastroPortugalLisboaIsabel de CastroPortugalLisboaIsabel de CastroPortugalLisboaIsabel de CastroPortugalLisboaIsabel de CastroPortugalLisboa
Bernardo BatistaBrazilRio de JaneiroBernardo BatistaBrazilRio de JaneiroBernardo BatistaBrazilRio de JaneiroBernardo BatistaBrazilRio de JaneiroBernardo BatistaBrazilRio de Janeiro
Lúcia CarvalhoBrazilSao PauloLúcia CarvalhoBrazilSao PauloLúcia CarvalhoBrazilSao PauloLúcia CarvalhoBrazilSao PauloLúcia CarvalhoBrazilSao Paulo
Horst KlossGermanyCunewaldeHorst KlossGermanyCunewaldeHorst KlossGermanyCunewaldeHorst KlossGermanyCunewaldeHorst KlossGermanyCunewalde
Sergio GutiérrezArgentinaBuenos AiresSergio GutiérrezArgentinaBuenos AiresSergio GutiérrezArgentinaBuenos AiresSergio GutiérrezArgentinaBuenos AiresSergio GutiérrezArgentinaBuenos Aires
Paula WilsonUSAAlbuquerquePaula WilsonUSAAlbuquerquePaula WilsonUSAAlbuquerquePaula WilsonUSAAlbuquerquePaula WilsonUSAAlbuquerque
Maurizio MoroniItalyReggio EmiliaMaurizio MoroniItalyReggio EmiliaMaurizio MoroniItalyReggio EmiliaMaurizio MoroniItalyReggio EmiliaMaurizio MoroniItalyReggio Emilia
Janete LimeiraBrazilRio de JaneiroJanete LimeiraBrazilRio de JaneiroJanete LimeiraBrazilRio de JaneiroJanete LimeiraBrazilRio de JaneiroJanete LimeiraBrazilRio de Janeiro
Michael HolzSwitzerlandGenèveMichael HolzSwitzerlandGenèveMichael HolzSwitzerlandGenèveMichael HolzSwitzerlandGenèveMichael HolzSwitzerlandGenève
Alejandra CaminoSpainMadridAlejandra CaminoSpainMadridAlejandra CaminoSpainMadridAlejandra CaminoSpainMadridAlejandra CaminoSpainMadrid
Jonas BergulfsenNorwayStavernJonas BergulfsenNorwayStavernJonas BergulfsenNorwayStavernJonas BergulfsenNorwayStavernJonas BergulfsenNorwayStavern
Jose PavarottiUSABoiseJose PavarottiUSABoiseJose PavarottiUSABoiseJose PavarottiUSABoiseJose PavarottiUSABoise
Hari KumarUKLondonHari KumarUKLondonHari KumarUKLondonHari KumarUKLondonHari KumarUKLondon
Jytte PetersenDenmarkKobenhavnJytte PetersenDenmarkKobenhavnJytte PetersenDenmarkKobenhavnJytte PetersenDenmarkKobenhavnJytte PetersenDenmarkKobenhavn
Dominique PerrierFranceParisDominique PerrierFranceParisDominique PerrierFranceParisDominique PerrierFranceParisDominique PerrierFranceParis
Art BraunschweigerUSALanderArt BraunschweigerUSALanderArt BraunschweigerUSALanderArt BraunschweigerUSALanderArt BraunschweigerUSALander
Pascale CartrainBelgiumCharleroiPascale CartrainBelgiumCharleroiPascale CartrainBelgiumCharleroiPascale CartrainBelgiumCharleroiPascale CartrainBelgiumCharleroi
Liz NixonUSAPortlandLiz NixonUSAPortlandLiz NixonUSAPortlandLiz NixonUSAPortlandLiz NixonUSAPortland
Liu WongUSAButteLiu WongUSAButteLiu WongUSAButteLiu WongUSAButteLiu WongUSAButte
Karin JosephsGermanyMünsterKarin JosephsGermanyMünsterKarin JosephsGermanyMünsterKarin JosephsGermanyMünsterKarin JosephsGermanyMünster
Miguel Angel PaolinoMexicoMéxico D.F.Miguel Angel PaolinoMexicoMéxico D.F.Miguel Angel PaolinoMexicoMéxico D.F.Miguel Angel PaolinoMexicoMéxico D.F.Miguel Angel PaolinoMexicoMéxico D.F.
Anabela DominguesBrazilSao PauloAnabela DominguesBrazilSao PauloAnabela DominguesBrazilSao PauloAnabela DominguesBrazilSao PauloAnabela DominguesBrazilSao Paulo
Helvetius NagyUSAKirklandHelvetius NagyUSAKirklandHelvetius NagyUSAKirklandHelvetius NagyUSAKirklandHelvetius NagyUSAKirkland
Palle IbsenDenmarkÅrhusPalle IbsenDenmarkÅrhusPalle IbsenDenmarkÅrhusPalle IbsenDenmarkÅrhusPalle IbsenDenmarkÅrhus
Mary SaveleyFranceLyonMary SaveleyFranceLyonMary SaveleyFranceLyonMary SaveleyFranceLyonMary SaveleyFranceLyon
Paul HenriotFranceReimsPaul HenriotFranceReimsPaul HenriotFranceReimsPaul HenriotFranceReimsPaul HenriotFranceReims
Rita MüllerGermanyStuttgartRita MüllerGermanyStuttgartRita MüllerGermanyStuttgartRita MüllerGermanyStuttgartRita MüllerGermanyStuttgart
Pirkko KoskitaloFinlandOuluPirkko KoskitaloFinlandOuluPirkko KoskitaloFinlandOuluPirkko KoskitaloFinlandOuluPirkko KoskitaloFinlandOulu
Paula ParenteBrazilResendePaula ParenteBrazilResendePaula ParenteBrazilResendePaula ParenteBrazilResendePaula ParenteBrazilResende
Karl JablonskiUSASeattleKarl JablonskiUSASeattleKarl JablonskiUSASeattleKarl JablonskiUSASeattleKarl JablonskiUSASeattle
Matti KarttunenFinlandHelsinkiMatti KarttunenFinlandHelsinkiMatti KarttunenFinlandHelsinkiMatti KarttunenFinlandHelsinkiMatti KarttunenFinlandHelsinki
Zbyszek PiestrzeniewiczPolandWarszawaZbyszek PiestrzeniewiczPolandWarszawaZbyszek PiestrzeniewiczPolandWarszawaZbyszek PiestrzeniewiczPolandWarszawaZbyszek PiestrzeniewiczPolandWarszawa
The above code has been tested in the following browsers

Internet Explorer  FireFox  Chrome  Safari  Opera 
* All browser logos displayed above are property of their respective owners.


Downloads
You can download the complete source code along with the jQuery Scrollable Grid Plugin using the download link provided below
FreezeGridViewHeaderusingjQueryPlugin.zip

The Plugin has been submitted to jQuery. Thus you can download the plugin from here

 

Comments

Post a Comment

Popular posts from this blog

Editing Child GridView in Nested GridView

Editing Child GridView in Nested GridView In this article we will explore how to edit child gridview in the nested gridview.   Let''s write some code. Step 1:  Add scriptmanager in the aspx page. < asp : ScriptManager   ID ="ScriptManager1"   runat ="server"   EnablePageMethods ="true"> </ asp : ScriptManager > Step 2:  Add below stylesheet for modal popup. < style   type ="text/css">        .modalBackground        {              background-color : Gray;              filter : alpha(opacity=80);              opacity : 0.5;       }        .ModalWindow        {              border : solid1px#c0c0c0;              background : #f0f0f0;              padding : 0px10px10px10px;              position : absolute;              top : -1000px;       } </ style > Step 3:   Create an aspx page and add a Gridview with another gridview in the last TemplateField. The last templatefield will also contain a lable which will
Post a Comment
Read more

Scrollable Gridview With fixheader using JQuery in Asp.net

Scrollable Gridview With fixheader using JQuery in Asp.net Introduction: In this article I will explain how to implement scrollable gridview with fixed header in asp.net using JQuery.  Description:  In Previous posts I explained lot of articles regarding Gridview. Now I will explain how to implement scrollable gridview with fixed header in asp.net. I have one gridview that contains lot of records and I used  paging for gridview  but the requirement is to display all the records without paging. I removed paging at that time gridview occupied lot of space because it contains more records to solve this problem we implemented scrollbar.  After scrollbar implementation if we scroll the gridview we are unable to see Gridview header.   To implement Scrollable gridview with fixed header I tried to implement concept with css and JavaScript but there is no luck because maintaining fixed header working in IE but not in Mozilla and vice versa to solve this browser compatibility proble
Post a Comment
Read more

Nested GridView Example In Asp.Net With Expand Collapse

This example shows how to create Nested GridView In Asp.Net Using C# And VB.NET With Expand Collapse Functionality. I have used JavaScript to Create Expandable Collapsible Effect by displaying Plus Minus image buttons. Customers and Orders Table of Northwind Database are used to populate nested GridViews. Drag and place SqlDataSource from toolbox on aspx page and configure and choose it as datasource from smart tags Go to HTML source of page and add 2 TemplateField in <Columns>, one as first column and one as last column of gridview. Place another grid in last templateField column. Markup of page after adding both templatefields will like as shown below. HTML SOURCE 1: < asp:GridView ID ="gvMaster" runat ="server" 2: AllowPaging ="True" 3: AutoGenerateColumns ="False" 4: DataKeyNames ="CustomerID" 5: DataSour
Post a Comment
Read more