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="float: left;"> (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="float: left;"> (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 Answers, 1 is accepted
0
Hi Mark,
The used jQuery instance is too old. Kendo UI requires 1.7.1.
If the problem persists, check for JS errors.
Regards,
Dimo
the Telerik team
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!
0
Mark
Top achievements
Rank 1
Rank 1
answered on 17 Aug 2012, 08:01 AM
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="float: left;"> (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="float: left;"> (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" />*@
0
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
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!
0
Mark
Top achievements
Rank 1
Rank 1
answered on 17 Aug 2012, 06:20 PM
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:
Was that the wrong way? I am following the steps as shown in the documentation from what I can see.
<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.
0
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
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!