We help IT Professionals succeed at work.

client id with jquery

R8VI
R8VI asked
on
727 Views
Last Modified: 2013-12-17
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

Comment
Watch Question

Add CssClass="scrollable" to the Gridview-tag.

Author

Commented:
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.

Author

Commented:
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?

Author

Commented:
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
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Owh, almost forgot: set SetDivs as the method for the OnItemDataBound-event of the Repeater.

Author

Commented:
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...

Author

Commented:
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

Author

Commented:
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

This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
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.

Author

Commented:
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/Programming/Languages/Scripting/JavaScript/Jquery/Q_26336054.html

Thanks

R8VI

Author

Commented:
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/Programming/Languages/.NET/Q_26336165.html#a33228708

Thanks

R8VI
haha, notice your last one got deleted
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.