Link to home
Start Free TrialLog in
Avatar of R8VI
R8VI

asked on

client id with jquery

Hi,

I want to know how i can make the control scrollable http://flowplayer.org/tools/demos/scrollable/index.html

 work with my grid view

I have the code below

Please ehlp

Thanks,

r8VI
<asp:GridView ID="GridViewOutside" runat="server" DataSourceID="SqlDataSource6" AutoGenerateColumns="false"
                    OnRowDataBound="gridviewoutside_RowDataBound">
                    <Columns>
                        <asp:TemplateField HeaderText="Year">
                            <ItemTemplate>
                                <asp:Label ID="lblDescription" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Year") %>'>></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <a class="prev browse left"></a>
                                <div id="dvGalleria" class="scrollable">
                                    <div class="items">
                                        <asp:GridView ID="InsideGridView" runat="server" AutoGenerateColumns="false" DataSourceID="SqlDataSource7">
                                            <Columns>
                                                <asp:TemplateField HeaderText="Picture">
                                                    <ItemTemplate>
                                                        <img border="0" width="75px" alt="image" height="75px" src='<%# DataBinder.Eval(Container, "DataItem.PictureName")%>' />
                                                    </ItemTemplate>
                                                </asp:TemplateField>
                                            </Columns>
                                        </asp:GridView>
                                    </div>
                                </div>
                                </div> <a class="next browse right"></a>
                                <br clear="all" />
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>


    <script type="text/javascript">
        // execute your scripts when the DOM is ready. this is mostly a good habit
        $(function() {

            // initialize scrollable
            $(".scrollable").scrollable();

        });
    </script>

Open in new window

Avatar of Jeroen Timmermans
Jeroen Timmermans
Flag of Netherlands image

Add CssClass="scrollable" to the Gridview-tag.
Avatar of R8VI
R8VI

ASKER

hi,

that doesnt work, please have a look at the screen shot


test.jpg
Have you tried replacing the inner Gridview with a repeater? That gives you more control over the code, Gridviews tend to generate a lot of data that could interfere with the Scrollable-JQuery.
Avatar of R8VI

ASKER

hi,

Thanks for this so i used a repeater but the problem i know face is that its only shows one image at a time please help

See attached scrren shtot and code
Thanks,

R8VI
<asp:GridView ID="GridViewOutside" runat="server" DataSourceID="SqlDataSource6" AutoGenerateColumns="false"
                    OnRowDataBound="gridviewoutside_RowDataBound">
                    <Columns>
                        <asp:TemplateField HeaderText="Year">
                            <ItemTemplate>
                                <asp:Label ID="lblDescription" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Year") %>'>></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <a class="prev browse left"></a>
                                <div class="scrollable">
                                    <div class="items">
                                        <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource7">
                                            <ItemTemplate>
                                                <div class="highslide-gallery">
                                                    <a href='<%# DataBinder.Eval(Container, "DataItem.PictureName") %>' class="highslide"
                                                        onclick="return hs.expand(this)">
                                                        <img border="0" width="75px" alt="image" height="75px" src='<%# DataBinder.Eval(Container, "DataItem.PictureName")%>' />
                                                    </a>
                                                </div>
                                            </ItemTemplate>
                                        </asp:Repeater>
                                    </div>
                                </div>
                                <a class="next browse right"></a>
                                <br clear="all" />
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>

Open in new window

test.jpg
Are you sure it's just showing one picture? Isn't it stacking the images because of the classes attached to the div and a-tags surrounding your image?
Avatar of R8VI

ASKER

when i mean showing one picutre i mean at the time because on
http://flowplayer.org/tools/demos/scrollable/index.html

i can at least see 5 before i have to click enxt arrow, where as in my one i can only see one therefore ahve to click next straight away
ASKER CERTIFIED SOLUTION
Avatar of Jeroen Timmermans
Jeroen Timmermans
Flag of Netherlands image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Owh, almost forgot: set SetDivs as the method for the OnItemDataBound-event of the Repeater.
Avatar of R8VI

ASKER

hi,

before i do this i changed the divs around like  code below.

and i seem to get more then one image but when i click next or previous it gets rid of all images
<asp:GridView ID="GridViewOutside" runat="server" DataSourceID="SqlDataSource6" AutoGenerateColumns="false"
                    OnRowDataBound="gridviewoutside_RowDataBound">
                    <Columns>
                        <asp:TemplateField HeaderText="Year">
                            <ItemTemplate>
                                <asp:Label ID="lblDescription" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Year") %>'>></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField>
                            <ItemTemplate>
                            <asp:Literal ID="ltrlOpen" runat="server" Visible="false" Text="<div>"/>
                                <a class="prev browse left"></a>
                                <div class="scrollable">
                                    <div class="items">
                                        <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource7">
                                            <ItemTemplate>
                                                <a href='<%# DataBinder.Eval(Container, "DataItem.PictureName") %>' class="highslide"
                                                    onclick="return hs.expand(this)">
                                                    <img border="0" width="75px" alt="image" height="75px" src='<%# DataBinder.Eval(Container, "DataItem.PictureName")%>' />
                                                </a>
                                            </ItemTemplate>
                                        </asp:Repeater>
                                    </div>
                                </div>
                                <a class="next browse right"></a>
                                <br clear="all" />
                                <asp:Literal ID="ltrlClose" runat="server" Visible="false" Text="</div>"/>
                                            </ItemTemplate>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>

Open in new window

I meant the ItemTemplate in the Repeater, not the Gridview...
Avatar of R8VI

ASKER

hi theres an error on this

Operator '||' cannot be applied to operands of type 'int' and 'int'      
in the if
protected void SetDivs(object sender, RepeaterItemEventArgs e)
    {
        rptTest = (Repeater)FindControl("Repeater1");

        if ((e.Item.ItemIndex = 0) || (e.Item.ItemIndex % 5))
        {
            Literal ltrlOpen = (Literal)e.Item.FindControl("ltrlOpen");
            ltrlOpen.Visible = true;
        }


        else if (e.Item.ItemIndex % 4 || e.Item.ItemIndex + 1 == rptTest.Items.Count)
        {
            Literal ltrlClose = (Literal)e.Item.FindControl("ltrlClose");
            ltrlClose.Visible = true;
        }
    }

Open in new window

d'oh, what a mistake. It's 35 degrees celcius here, please forgive me.

should be

protected void SetDivs(object sender, RepeaterItemEventArgs e)
    {
        rptTest = (Repeater)FindControl("Repeater1");

        if ((e.Item.ItemIndex == 0) || (e.Item.ItemIndex % 5 == 0))
        {
            Literal ltrlOpen = (Literal)e.Item.FindControl("ltrlOpen");
            ltrlOpen.Visible = true;
        }


        else if (e.Item.ItemIndex % 4 == 0 || e.Item.ItemIndex + 1 == rptTest.Items.Count)
        {
            Literal ltrlClose = (Literal)e.Item.FindControl("ltrlClose");
            ltrlClose.Visible = true;
        }
    }

Open in new window

Avatar of R8VI

ASKER

i am sorry but cant get this to work.

As now i have object reference not set to an instance of an object this is becasue it cant find the repeater
<asp:GridView ID="GridViewOutside" runat="server" DataSourceID="SqlDataSource6" AutoGenerateColumns="false"
                    OnRowDataBound="gridviewoutside_RowDataBound">
                    <Columns>
                        <asp:TemplateField HeaderText="Year">
                            <ItemTemplate>
                                <asp:Label ID="lblDescription" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Year") %>'>></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <a class="prev browse left"></a>
                                <div class="scrollable">
                                    <div class="items">
                                        <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource7" OnItemDataBound="SetDivs">
                                            <ItemTemplate>
                                                <asp:Literal ID="ltrlOpen" runat="server" Visible="false" Text="<div>" />
                                                <a href='<%# DataBinder.Eval(Container, "DataItem.PictureName") %>' class="highslide"
                                                    onclick="return hs.expand(this)">
                                                    <img border="0" width="75px" alt="image" height="75px" src='<%# DataBinder.Eval(Container, "DataItem.PictureName")%>' />
                                                </a>
                                                <asp:Literal ID="ltrlClose" runat="server" Visible="false" Text="</div>" />
                                            </ItemTemplate>
                                        </asp:Repeater>
                                    </div>
                                </div>
                                <a class="next browse right"></a>
                                <br clear="all" />
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>


c#

    protected void SetDivs(object sender, RepeaterItemEventArgs e)
    {
        
        rptTest2 = (Repeater)Page.FindControl("Repeater1");

        if ((e.Item.ItemIndex == 0) || (e.Item.ItemIndex % 5 == 0))
        {
            Literal ltrlOpen = (Literal)e.Item.FindControl("ltrlOpen");
            ltrlOpen.Visible = true;
        }


        else if (e.Item.ItemIndex % 4 == 0 || e.Item.ItemIndex + 1 == rptTest2.Items.Count)
        {
            Literal ltrlClose = (Literal)e.Item.FindControl("ltrlClose");
            ltrlClose.Visible = true;
        }
    }

Open in new window

SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
when i mean doesn't exist, its because its nested inside of a template.  If a repeater is on its own then the page will be able to find it.

Avatar of R8VI

ASKER

hi,

jeroenemans and UnexplainedWays
Could you please help me with the below link please its similar if not the same as here

https://www.experts-exchange.com/questions/26336054/jquery-image-slider-with-datagrid.html

Thanks

R8VI
Avatar of R8VI

ASKER

hi,

jeroenemans and UnexplainedWays
Could you please help me with the below link please its similar if not the same as here


https://www.experts-exchange.com/questions/26336165/repeater-empty-row.html?anchorAnswerId=33228708#a33228708

Thanks

R8VI
haha, notice your last one got deleted