This is a migrated thread and some comments may be shown as answers.

Tabstrip within a grid not working.

1 Answer 72 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
John
Top achievements
Rank 1
John asked on 09 Dec 2010, 06:49 PM
I have a grid, and on detail view i am using a tabstrip, each tab strip contains a grid. THe problem is that when clicking on the tabs, nothing happens. I am using 2010.3.1110 release, and have updated all of the jquery.

Here is my site.Master

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="../../Content/Styles/Site.css?v=<%=DateTime.Now%>" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/2010.3.1110/jquery-1.4.3.min.js" type="text/javascript"></script>
    <%=
                Html.Telerik().StyleSheetRegistrar()
                    .DefaultGroup(group => group.DefaultPath("~/Content/2010.3.1110/")
                                                .Add("telerik.common.min.css")
                                                .Add("telerik.iks.min.css"))
    %>
    <script type="text/javascript">
        $(function () {
            $.fn.loadSelect = function (data) {
                return this.each(function () {
                    this.options.length = 0;
                    var select = this;
                    $.each(data, function (index, itemData) {
                        var option = $('<option value="' + itemData.Value + '">' +
                                    itemData.Text + '</option>');
                        $(select).append(option);
                    });
                });
            };
        });

        function submitform() {
            document.myform.submit();
        }

        //do all this when the dom is loaded
        $(function () {
            //get all delete links (note the class i gave them in the html)
            $("a.delete-link").click(function () {
                //basically, if confirm is true (ok button is pressed), then  
                //the click event is permitted to continue, and the link will
                //be followed - however, if the cancel is pressed, the click event will be stopped here
                return confirm("Are you sure you want to delete this?");
            });
        });

        //do all this when the dom is loaded
        $(function () {
            //get all delete links (note the class i gave them in the html)
            $("a.save-before-link").click(function () {
                //basically, if confirm is true (ok button is pressed), then  
                //the click event is permitted to continue, and the link will
                //be followed - however, if the cancel is pressed, the click event will be stopped here
                return confirm("Did you save before clicking this link?");
            });
        });

    </script>
    <asp:ContentPlaceHolder ID="ScriptContent" runat="server" />
</head>
    <body>

        <div id="wrap">

            <div id="main" class="clearfix">

                <div id="header">
                    <asp:ContentPlaceHolder ID="HeaderContent" runat="server" />
                </div>

                <div id="sidebar">
                    <asp:ContentPlaceHolder ID="SideBarContent" runat="server" />
                </div>

                <div id="content">
                    <asp:ContentPlaceHolder ID="MainContent" runat="server" />
                </div>

            </div>

        </div>

            <div id="footer">
                <%
                    Html.RenderPartial("SiteMasterFooter");%>
                <div style="clear: both;"><!-- --></div>
            </div>

            <div style="clear: both;"><!-- --></div>

            <%Html.Telerik().ScriptRegistrar().DefaultGroup(asset => asset.DefaultPath("~/Scripts/2010.3.1110")
                                             .Add("jquery-1.4.3.min.js")
                                             .Add("telerik.common.min.js")
                                             .Add("telerik.examples.min.js")
                                             .Add("jquery.validate.min.js")
                                             .Add("telerik.panelbar.min.js"))
                            .Render();%>
    </body>
</html>

And here is my Grid

        Html.Telerik().Grid(Model)
            .Name("InvoiceDataGrid2")
            .Columns(columns =>
                         {
                             columns.Bound(s => s.Company.CompanyName)
                                 .Title("Company Name");
                             columns.Bound(s => s.ManifestCount)
                                 .Title("# of Manifests");
                             columns.Bound(s => s.ManifestTimeCount)
                                 .Title("Manifest Time");
                             columns.Bound(s => s.FieldOfficeTimeCount)
                                 .Title("Office Time");
                         })
            .DetailView(details => details.Template(e =>
                        {
                            %>
                            <%
                                Html.Telerik().TabStrip().Name("tabstrip_test_" + e.Company.CompanyName )
                                .Items(items =>
                                           {
                                               items.Add().Text("Blah 1").Content(() =>
                                                                                      {
                                                                                          %>
                                                                                          Blah blah blah
                                                                                          <%
                                                                                      });
                                               items.Add().Text("Blah 2").Content(() =>
                                                                                      {
                                                                                          %>
                                                                                          Blah blah blah
                                                                                          <%
                                                                                      });
                                           })
                                           .Render();
                            %>
                            <%
                        }))
            .Pageable(paging => paging.PageSize(5))
            .Sortable()
            .Render();
    %>

Im essentially copying your demo regarding server detail binding, http://demos.telerik.com/aspnet-mvc/grid/detailsserverside but it just doesnt want to work. I have made sure im using telerik.validate.min.js v1.7 and adding in telerik.common.min.js but again, its not working. I need help asap please.

1 Answer, 1 is accepted

Sort by
0
John
Top achievements
Rank 1
answered on 10 Dec 2010, 12:10 AM
Dumbest solution. When naming the tabstrip, i have Manifests_for_ + e.Company.CompanyName Company names have spaces. Aparently Telerik items do not like spaces in names. When i changed it to Company.Id it worked.
Tags
TabStrip
Asked by
John
Top achievements
Rank 1
Answers by
John
Top achievements
Rank 1
Share this question
or