Trying to use tabstrip, but tabs are not switching

6 posts, 0 answers
  1. Mark
    Mark avatar
    1 posts
    Member since:
    May 2012

    Posted 16 Aug 2012 Link to this post

    Am using Razor for my rendering and while the tabs while load and show, I cannot actually switch between them. So I have 3 tabs and when the page loads, it shows the first, but then if I select the second one, it doesn't actually show the content that is in that. The URL switches, but the content stays the same. Am sure this is something simple I am missing, but nevertheless, I am not seeing it. Can anyone please help? Here is my code in my .cshtml file:

    @using AjaxControlToolkit.HTMLEditor;
    @model TriadUI.Models.SearchViewModel
    @{
        ViewBag.Title = "Search";
    }
    <head>
        <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/app.css")"/>
        <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/kendo/kendo.common.min.css")"/>
        <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/kendo/kendo.default.min.css")"/>
        <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script>
        <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.placeholder.js")"></script>
        <script type="text/javascript" src="@Url.Content("~/Scripts/kendo/kendo.all.min.js")"></script>
     
    </head>
    <div id="searchSect">
        <div id="searchTabs">
            @(Html.Kendo().TabStrip()
                .Name("searchTabs")
                .Events(events => events
                .Activate("onActivate")
                .Select("onSelect")
                )
                .Items(items =>
                            {
                                items.Add().Text("Subscriber")
                                    .Selected(true)
                                    .Content(@<text>
                                                  <div id="subTab">
                                                      Subscriber Text
                                                      @using (Ajax.BeginForm("SearchSubscriber"new AjaxOptions {UpdateTargetId = "subGrid"}))
                                                      {
                                                          <fieldset>
                                                              <legend>Subscriber Search: </legend>
                                                              <label id="subsrchTxt" style="floatleft;">
                                                                  (All fields are not required) ('*' = wildcard)</label><br />
                                                              <div id="subleftInput">
                                                                  @Html.TextBoxFor(m => m.SearchFields.SubscriberName, new {placeholder = "Name", @class = "longTextBox"})<br />
                                                                  @Html.TextBoxFor(m => m.SearchFields.AddressLine1, new {placeholder = "Address Line 1", @class = "longTextBox"})<br />
                                                                  @Html.TextBoxFor(m => m.SearchFields.AddressLine2, new {placeholder = "Address Line 2", @class = "longTextBox"})<br />
                                                                  @Html.TextBoxFor(m => m.SearchFields.City, new {placeholder = "City", tabindex = "4", @class = "longTextBox"})<br />
                                                                  @Html.TextBoxFor(m => m.SearchFields.ZipCode, new {name = "zipCode", placeholder = "Zip Code", @class = "shortTextBox"})
                                                                  @Html.DropDownListFor(z => z.SelectedState, Model.SearchInfoModel.StateSelectList, new {id = "ddlStates", @class = "shortSelectList"})<br />
                                                                  @*                            Phone Type:<select id="Select1" tabindex="8">
                                                                    <option value="1" title="Phone Number">Phone</option>
                                                                    <option value="2" title="Can be reached at?">Reached At</option>
                                                                    <option value="3" title="Fictional Telephone Number">Fict TN</option>
                                                                </select>*@
                                                                  @Html.TextBoxFor(m => m.SearchFields.PhoneNumber, new {@class = "mediumTextBox", placeholder = "Phone Number"})<br />
                                                                  @Html.TextBoxFor(m => m.SearchFields.Email, new {name = "emailAddy", placeholder = "Subscriber Email", @class = "longTextBox"})<br />
                                                              </div>
                                                              <div id="subsrightInput">
                                                                  @Html.TextBoxFor(m => m.SearchFields.SubscriberId, new {name = "subsID", placeholder = "Subscriber ID", @class = "longTextBox"})<br />
                                                                  @Html.TextBoxFor(m => m.SearchFields.LocationId, new {name = "locID", placeholder = "Location ID", @class = "longTextBox"})<br />
                                                                  <input type="text" name="ontSrl" placeholder="ONT Serial #" class="longTextBox"/><br />
                                                                  <input type="text" name="stbSrl" placeholder="STB / Device Serial #" class="longTextBox"/><br /><br />
                                                                  <input type="reset" title="Reset" tabindex="12" onclick="ClearFieldsForSubscriberSearch();" />
                                                                  <input type="submit" title="Search" value="Search" tabindex="11" />
                                                                  <br />
                                                              </div>
                                                              <div class="subButtons">
                                                              </div>
                                                          </fieldset>
                                                      }
                                                  </div>
                                                </text>);
                                items.Add().Text("Location")
                                    .Content(@<text>
                                                  <div id="locTab">
                                                      Location Text
                                                      @using (Ajax.BeginForm("SearchLocation"new AjaxOptions { UpdateTargetId = "locationGrid" }))
                                                      {
                                                          <fieldset>
                                                              <legend>Location Search: </legend>
                                                              <label id="locsrchTxt" style="floatleft;">
                                                                  (All fields are not required) ('*' = wildcard)</label><br />
                                                              <div id="locleftInput">
                                                                  @Html.TextBoxFor(m => m.SearchFields.AddressLine1, new { name = "addy1", placeholder = "Address Line 1", @class = "longTextBox"})<br />
                                                                  @Html.TextBoxFor(m => m.SearchFields.AddressLine2, new { name = "addy2", placeholder = "Address Line 2", @class = "longTextBox"})<br />
                                                                  @Html.TextBoxFor(m => m.SearchFields.City, new { name = "city", placeholder = "City", @class = "longTextBox"})<br />
                                                                  @Html.TextBoxFor(m => m.SearchFields.ZipCode, new { name = "zipCode", placeholder = "Zip Code", @class="shortTextBox"})
                                                                  @Html.DropDownListFor(z => z.SelectedState, Model.SearchInfoModel.StateSelectList, new { id = "ddlStates", @class= "shortSelectList" })<br />
                                                                  @Html.TextBoxFor(m => m.SearchFields.PhoneNumber, new {  name="provNum" ,placeholder="Provisioned Number", @class = "mediumTextBox" })                          
                                                              </div>
                                                              <div id="locrightInput">
                                                                  @Html.TextBoxFor(m => m.SearchFields.LocationId, new { name = "locID", placeholder = "Location ID", @class = "longTextBox"})<br />
                                                                  @Html.TextBoxFor(m => m.SearchFields.SubscriberId, new { name = "subsID", placeholder = "Subscriber ID", @class = "longTextBox"})<br /><br />
                                                                  <input type="reset" title="Reset" tabindex="10" onclick="ClearFieldsForLocationrSearch();"/>
                                                                  <input type="submit" title="Search" value="Search" tabindex="9" />
                                                              </div>
                                                              <div class="subButtons">
     
                                                              </div>
                                                          </fieldset>
                                                      }
                                                  </div>
                                        </text>);
                                items.Add().Text("Device")
                                    .Content(@<text>
                                                  <div id="devTab">
                                                      Device text
                                                      @using (Ajax.BeginForm("SearchDevice"new AjaxOptions { UpdateTargetId = "deviceGrid" }))
                                                      {
                                                          <fieldset>
                                                              <legend>Device Search: </legend>
                                                              @Html.TextBoxFor(m => m.SearchFields.EquipmentId, new { name = "devID", placeholder = "Device ID", @class = "longTextBox" })<br />
                                                              @Html.TextBoxFor(m => m.SearchFields.SubscriberId, new { name = "subsID", placeholder = "Subscriber ID", @class = "longTextBox" })<br />
                                                              @Html.TextBoxFor(m => m.SearchFields.LocationId, new { name = "locID", placeholder = "Location ID", @class = "longTextBox" })<br />
                                                              @Html.TextBoxFor(m => m.SearchFields.PhoneNumber, new {  name="provNum" ,placeholder="Provisioned Number", @class= "longTextBox" })<br />
                                                              @Html.TextBoxFor(m => m.SearchFields.SubscriberName, new {  name="subsName", placeholder="Subscriber Name" , @class= "longTextBox" })<br />                           
                                                              <div class="subButtons">
                                                                  <input type="reset" title="Reset" tabindex="8" onclick="ClearFieldsForDeviceSearch();"/>
                                                                  <input type="submit" title="Search" value="Search" tabindex="7" />
                                                              </div>
                                                          </fieldset>
                                                      }
                                                  </div>
                                                </text>);
                            })
                  )
        </div>
    </div>
    <div id="subGrid">
        @if (Model.SubsriberSearchResults != null)
        {
            <table>
                <tr>
                    <th>
                        SubscriberId
                    </th>
                    <th>
                        Name
                    </th>
                    <th>
                        ContactEmail
                    </th>
                    <th>
                        ContactPhone
                    </th>
                </tr>
                @foreach (var subscriber in Model.SubsriberSearchResults)
                {
                    <tr>
                        <td>@subscriber.ID
                        </td>
                        <td>@subscriber.Name
                        </td>
                        <td>@subscriber.SubContactEmail
                        </td>
                        <td>@subscriber.SubContactPhone
                        </td>
                    </tr>
                }
            </table>
        }
    </div>
    <div id="locationGrid">
        @if (Model.LocationSearchResults != null)
        {
            <table>
                <tr>
                    <th>
                        ID
                    </th>
                    <th>
                        AddressLine1
                    </th>
                    <th>
                        AddressLine2
                    </th>
                    <th>
                        State
                    </th>
                </tr>
                @foreach (var location in Model.LocationSearchResults)
                {
                    <tr>
                        <td>@location.ID
                        </td>
                        <td>@location.AddressLine1
                        </td>
                        <td>@location.AddressLine2
                        </td>
                        <td>@location.StateName
                        </td>
                    </tr>
                }
            </table>
        }
    </div>
    <div id="deviceGrid">
        @if (Model.EquipmentSearchResults != null)
        {
            <table>
                <tr>
                    <th>
                        SerialNumber
                    </th>
                    <th>
                        AssociatedSubscriberId
                    </th>
                    <th>
                        Model
                    </th>
                    <th>
                        Status
                    </th>
                </tr>
                @foreach (var device in Model.EquipmentSearchResults)
                {
                    <tr>
                        <td>@device.SerialNumber
                        </td>
                        <td>@device.AssociatedSubscriberId
                        </td>
                        <td>@device.Model
                        </td>
                        <td>@device.Status
                        </td>
                    </tr>
                }
            </table>
        }
    </div>
    <div id="indexBottom">
        <%Html.RenderPartial("News"); %> <%Html.RenderPartial("SubGrid");%> <%Html.RenderPartial("LocGrid");
        %> <%Html.RenderPartial("DeviceGrid"); %>
    </div>
    @*<input type="submit" value="submit" />*@ 
  2. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 17 Aug 2012 Link to this post

    Hi Mark,

    The used jQuery instance is too old. Kendo UI requires 1.7.1.

    Also, there is a kendo.aspnetmvc.js file that you should include.

    If the problem persists, check for JS errors.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Mark
    Mark avatar
    1 posts
    Member since:
    May 2012

    Posted 17 Aug 2012 Link to this post

    Thanks for the input. I fixed the JQuery version issue and added the kendo.asnet.mvc.js. I ran the page, but still no luck. Checked all my scripts (right now, this is all there is in there). I have the kendo mvc ui listed in the views web.config file and soforth. That said, is there anything else that could stop this? Am I missing some code that I am not seeing? I have included updated code below:

    @using AjaxControlToolkit.HTMLEditor;
    @model TriadUI.Models.SearchViewModel
    @{
        ViewBag.Title = "Search";
    }
    <head>
        <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/app.css")"/>
        <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/kendo/kendo.common.min.css")"/>
        <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/kendo/kendo.default.min.css")"/>
        <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")"></script>
        <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.placeholder.js")"></script>
        <script type="text/javascript" src="@Url.Content("~/Scripts/kendo/kendo.all.min.js")"></script>
        <script type="text/javascript" src="@Url.Content("~/Scripts/kendo/kendo.aspnetmvc.min.js")"></script>
        <script type="text/javascript" src="@Url.Content("~/Scripts/kendo/kendo.tabstrip.min.js")"></script>
    </head>
    <div id="searchSect">
        <div id="searchTabs">
            @(Html.Kendo().TabStrip()
                .Name("searchTabs")
                .Events(events => events
                .Activate("onActivate")
                .Select("onSelect")
                )
                .Items(items =>
                            {
                                items.Add().Text("Subscriber")
                                    .Selected(true)
                                    .Content(@<text>
                                                  <div id="subTab">
                                                      Subscriber Text
                                                      @using (Ajax.BeginForm("SearchSubscriber"new AjaxOptions {UpdateTargetId = "subGrid"}))
                                                      {
                                                          <fieldset>
                                                              <legend>Subscriber Search: </legend>
                                                              <label id="subsrchTxt" style="floatleft;">
                                                                  (All fields are not required) ('*' = wildcard)</label><br />
                                                              <div id="subleftInput">
                                                                  @Html.TextBoxFor(m => m.SearchFields.SubscriberName, new {placeholder = "Name", @class = "longTextBox"})<br />
                                                                  @Html.TextBoxFor(m => m.SearchFields.AddressLine1, new {placeholder = "Address Line 1", @class = "longTextBox"})<br />
                                                                  @Html.TextBoxFor(m => m.SearchFields.AddressLine2, new {placeholder = "Address Line 2", @class = "longTextBox"})<br />
                                                                  @Html.TextBoxFor(m => m.SearchFields.City, new {placeholder = "City", tabindex = "4", @class = "longTextBox"})<br />
                                                                  @Html.TextBoxFor(m => m.SearchFields.ZipCode, new {name = "zipCode", placeholder = "Zip Code", @class = "shortTextBox"})
                                                                  @Html.DropDownListFor(z => z.SelectedState, Model.SearchInfoModel.StateSelectList, new {id = "ddlStates", @class = "shortSelectList"})<br />
                                                                  @*                            Phone Type:<select id="Select1" tabindex="8">
                                                                    <option value="1" title="Phone Number">Phone</option>
                                                                    <option value="2" title="Can be reached at?">Reached At</option>
                                                                    <option value="3" title="Fictional Telephone Number">Fict TN</option>
                                                                </select>*@
                                                                  @Html.TextBoxFor(m => m.SearchFields.PhoneNumber, new {@class = "mediumTextBox", placeholder = "Phone Number"})<br />
                                                                  @Html.TextBoxFor(m => m.SearchFields.Email, new {name = "emailAddy", placeholder = "Subscriber Email", @class = "longTextBox"})<br />
                                                              </div>
                                                              <div id="subsrightInput">
                                                                  @Html.TextBoxFor(m => m.SearchFields.SubscriberId, new {name = "subsID", placeholder = "Subscriber ID", @class = "longTextBox"})<br />
                                                                  @Html.TextBoxFor(m => m.SearchFields.LocationId, new {name = "locID", placeholder = "Location ID", @class = "longTextBox"})<br />
                                                                  <input type="text" name="ontSrl" placeholder="ONT Serial #" class="longTextBox"/><br />
                                                                  <input type="text" name="stbSrl" placeholder="STB / Device Serial #" class="longTextBox"/><br /><br />
                                                                  <input type="reset" title="Reset" tabindex="12" onclick="ClearFieldsForSubscriberSearch();" />
                                                                  <input type="submit" title="Search" value="Search" tabindex="11" />
                                                                  <br />
                                                              </div>
                                                              <div class="subButtons">
                                                              </div>
                                                          </fieldset>
                                                      }
                                                  </div>
                                                </text>);
                                items.Add().Text("Location")
                                    .Content(@<text>
                                                  <div id="locTab">
                                                      Location Text
                                                      @using (Ajax.BeginForm("SearchLocation"new AjaxOptions { UpdateTargetId = "locationGrid" }))
                                                      {
                                                          <fieldset>
                                                              <legend>Location Search: </legend>
                                                              <label id="locsrchTxt" style="floatleft;">
                                                                  (All fields are not required) ('*' = wildcard)</label><br />
                                                              <div id="locleftInput">
                                                                  @Html.TextBoxFor(m => m.SearchFields.AddressLine1, new { name = "addy1", placeholder = "Address Line 1", @class = "longTextBox"})<br />
                                                                  @Html.TextBoxFor(m => m.SearchFields.AddressLine2, new { name = "addy2", placeholder = "Address Line 2", @class = "longTextBox"})<br />
                                                                  @Html.TextBoxFor(m => m.SearchFields.City, new { name = "city", placeholder = "City", @class = "longTextBox"})<br />
                                                                  @Html.TextBoxFor(m => m.SearchFields.ZipCode, new { name = "zipCode", placeholder = "Zip Code", @class="shortTextBox"})
                                                                  @Html.DropDownListFor(z => z.SelectedState, Model.SearchInfoModel.StateSelectList, new { id = "ddlStates", @class= "shortSelectList" })<br />
                                                                  @Html.TextBoxFor(m => m.SearchFields.PhoneNumber, new {  name="provNum" ,placeholder="Provisioned Number", @class = "mediumTextBox" })                          
                                                              </div>
                                                              <div id="locrightInput">
                                                                  @Html.TextBoxFor(m => m.SearchFields.LocationId, new { name = "locID", placeholder = "Location ID", @class = "longTextBox"})<br />
                                                                  @Html.TextBoxFor(m => m.SearchFields.SubscriberId, new { name = "subsID", placeholder = "Subscriber ID", @class = "longTextBox"})<br /><br />
                                                                  <input type="reset" title="Reset" tabindex="10" onclick="ClearFieldsForLocationrSearch();"/>
                                                                  <input type="submit" title="Search" value="Search" tabindex="9" />
                                                              </div>
                                                              <div class="subButtons">
     
                                                              </div>
                                                          </fieldset>
                                                      }
                                                  </div>
                                        </text>);
                                items.Add().Text("Device")
                                    .Content(@<text>
                                                  <div id="devTab">
                                                      Device text
                                                      @using (Ajax.BeginForm("SearchDevice"new AjaxOptions { UpdateTargetId = "deviceGrid" }))
                                                      {
                                                          <fieldset>
                                                              <legend>Device Search: </legend>
                                                              @Html.TextBoxFor(m => m.SearchFields.EquipmentId, new { name = "devID", placeholder = "Device ID", @class = "longTextBox" })<br />
                                                              @Html.TextBoxFor(m => m.SearchFields.SubscriberId, new { name = "subsID", placeholder = "Subscriber ID", @class = "longTextBox" })<br />
                                                              @Html.TextBoxFor(m => m.SearchFields.LocationId, new { name = "locID", placeholder = "Location ID", @class = "longTextBox" })<br />
                                                              @Html.TextBoxFor(m => m.SearchFields.PhoneNumber, new {  name="provNum" ,placeholder="Provisioned Number", @class= "longTextBox" })<br />
                                                              @Html.TextBoxFor(m => m.SearchFields.SubscriberName, new {  name="subsName", placeholder="Subscriber Name" , @class= "longTextBox" })<br />                           
                                                              <div class="subButtons">
                                                                  <input type="reset" title="Reset" tabindex="8" onclick="ClearFieldsForDeviceSearch();"/>
                                                                  <input type="submit" title="Search" value="Search" tabindex="7" />
                                                              </div>
                                                          </fieldset>
                                                      }
                                                  </div>
                                                </text>);
                            })
                  )
        </div>
    </div>
    <div id="subGrid">
        @if (Model.SubsriberSearchResults != null)
        {
            <table>
                <tr>
                    <th>
                        SubscriberId
                    </th>
                    <th>
                        Name
                    </th>
                    <th>
                        ContactEmail
                    </th>
                    <th>
                        ContactPhone
                    </th>
                </tr>
                @foreach (var subscriber in Model.SubsriberSearchResults)
                {
                    <tr>
                        <td>@subscriber.ID
                        </td>
                        <td>@subscriber.Name
                        </td>
                        <td>@subscriber.SubContactEmail
                        </td>
                        <td>@subscriber.SubContactPhone
                        </td>
                    </tr>
                }
            </table>
        }
    </div>
    <div id="locationGrid">
        @if (Model.LocationSearchResults != null)
        {
            <table>
                <tr>
                    <th>
                        ID
                    </th>
                    <th>
                        AddressLine1
                    </th>
                    <th>
                        AddressLine2
                    </th>
                    <th>
                        State
                    </th>
                </tr>
                @foreach (var location in Model.LocationSearchResults)
                {
                    <tr>
                        <td>@location.ID
                        </td>
                        <td>@location.AddressLine1
                        </td>
                        <td>@location.AddressLine2
                        </td>
                        <td>@location.StateName
                        </td>
                    </tr>
                }
            </table>
        }
    </div>
    <div id="deviceGrid">
        @if (Model.EquipmentSearchResults != null)
        {
            <table>
                <tr>
                    <th>
                        SerialNumber
                    </th>
                    <th>
                        AssociatedSubscriberId
                    </th>
                    <th>
                        Model
                    </th>
                    <th>
                        Status
                    </th>
                </tr>
                @foreach (var device in Model.EquipmentSearchResults)
                {
                    <tr>
                        <td>@device.SerialNumber
                        </td>
                        <td>@device.AssociatedSubscriberId
                        </td>
                        <td>@device.Model
                        </td>
                        <td>@device.Status
                        </td>
                    </tr>
                }
            </table>
        }
    </div>
    <div id="indexBottom">
        <%Html.RenderPartial("News"); %> <%Html.RenderPartial("SubGrid");%> <%Html.RenderPartial("LocGrid");
        %> <%Html.RenderPartial("DeviceGrid"); %>
    </div>
    @*<input type="submit" value="submit" />*@ 
  5. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 17 Aug 2012 Link to this post

    Hello Mark,

    Currently the TabStrip script is registered twice, because it is contained also in kendo.all.min.js. Please remove the kendo.tabstrip.min.js script reference.

    I don't see your Select and Activate Javascript handlers. Having non-existent handler references triggers JS errors - are you sure you are seeing those if/when they occur?

    If the problem persists even after making the above adjustments, I suggest you to open a support ticket and send a runnable project, to prevent further message roundtrips.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Mark
    Mark avatar
    1 posts
    Member since:
    May 2012

    Posted 17 Aug 2012 Link to this post

    I add the tabstrip script to see if that changed anything. I do have the select and activate triggers. They are located right below where I name the item as shown here:

        <div id="searchTabs">
            @(Html.Kendo().TabStrip()
                .Name("searchTabs")
                .Events(events => events
                .Activate("onActivate")
                .Select("onSelect")
                )
                .Items(items =>


    Was that the wrong way? I am following the steps as shown in the documentation from what I can see.
  7. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 20 Aug 2012 Link to this post

    Hi Mark,

    What I meant to say is that I don't see functions named onActivate and onSelect. If you don't have them, all scripts will stop working.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready