Drop downs in tabl strip

[Richard]

I have a tab strip with three tabs, two of which load from partial views and each contains one or two Kendo Drop Downs.

When I click on the tabs with the drop downs the first time, they work fine.  But when I go back to the tab, the drop downs do not appear.

Ideas?

[Vladimir Iliev]

Hi Richard,

 
Could you please check if all DropDownList have unique names - we are able to reproduce such behavior only when there are more than one DropDownLists with same name.

Also for convenience I created example of loading TabStrip tabs content from PartialView which contains DropDownLists - could you please check it and let me know how it differs from you real setup?

Kind Regards,
Vladimir Iliev
the Telerik team

[Richard]

A little more detail.

The tab strip contains a panel, which is loaded from the partial view. After the first use, the drop down, and also the included button do not work.

Here is the tabstrip code:

@(Html.Kendo().TabStrip()   .Name("returnMailTab")   .Animation(false)   .Items(tabstrip =>   {   tabstrip.Add().Text("Search Address Details").Content(@<text> @Html.Kendo().PanelBar().Name("SearchAddressBar").Items(items => { items.Add().Text("Search").LoadContentFrom("AddressSearchPartial", "ReturnMail").Expanded(ShowAddressSearch); }) @Html.Kendo().Grid(Model.SearchResults).Name("AddressSearch").Columns(columns => { columns.Bound(p => p.MailID).HeaderTemplate("&nbsp;").ClientTemplate("<a href='' data-id='#= data.MailID #' class='viewLink' >View</a> | <a href='' data-id='#= data.MailID #' class='addLink' >Add to Queue</a>"); columns.Bound(p => p.Project).HeaderTemplate("Project"); columns.Bound(p => p.MailID).HeaderTemplate("Mail ID"); columns.Bound(p => p.MailType).HeaderTemplate("Mail Type"); columns.Bound(p => p.NameAddress1).HeaderTemplate("Name Address 1"); columns.Bound(p => p.NameAddress2).HeaderTemplate("Name Address 2"); columns.Bound(p => p.NameAddress3).HeaderTemplate("Name Address 3"); columns.Bound(p => p.City).HeaderTemplate("City"); columns.Bound(p => p.State).HeaderTemplate("State"); }).DataSource(dataSource => dataSource.Ajax().Read(read => read.Action("SaerchList", "ReturnMail")).PageSize(20)).Pageable().Scrollable(scrolling => scrolling.Height(500)) </text>);   tabstrip.Add().Text("Search Package Details").Content(@<text></text>);   tabstrip.Add().Text("Queue")   .Selected(true)   .Content(@<text> <div style="margin-left: 100px;"> <div id="queueDivTemplate"> </div> </div> Mail ID: <input type="text" id="mailText" value="@Model.MailID"  /> <input type="button" id='addQueue' value="Add to Queue" class="k-button" /> @Html.HiddenFor(h => h.QueueCount) @Html.HiddenFor(h => h.Projects) @Html.HiddenFor(h => h.AddressTypes) @Html.HiddenFor(h => h.Countries) @Html.HiddenFor(h => h.MailTypes) @if (noneFound) { <div id="notFound" style="background-color: Gray; color: Black; font-weight: bold;"> <label style="margin-left: 10px;"> @ViewBag.ErrorMessage</label> <img id="closeImage" src="@Url.Content("~/Content/images/close_x.jpg")" alt="Close" style="float:right;margin-right:10px;" /> </div> } @Html.Kendo().Grid(Model.Queue).Name("Queue").Columns(columns => { columns.Bound(p => p.Project).HeaderTemplate("Proj"); columns.Bound(p => p.Name).HeaderTemplate("Name"); columns.Bound(p => p.MailID).HeaderTemplate("Mail ID"); columns.Bound(p => p.MailType).HeaderTemplate("Mail Type"); columns.Bound(p => p.MailDate).HeaderTemplate("Mail Date"); columns.Bound(p => p.Status).HeaderTemplate("Status"); columns.Bound(p => p.RemoveText).ClientTemplate("<a href='' data-id='#= data.MailID #' class='removeLink' >Remove</a>").HeaderTemplate("&nbsp"); }).DataSource(dataSource => dataSource.Ajax().Read(read => read.Action("QueueList", "ReturnMail")).PageSize(20)).Pageable().Scrollable(scrolling => scrolling.Height(500)).ToolBar(t => t.Template("<div id=\"toolBarTemplate\"><input type=button' value='Submit Queue Items' id='submitQueue' /></div>")).ClientDetailTemplateId("detailTemplate").Events(events => events.DataBound("dataBound")).ClientDetailTemplateId("detailTemplate") </text>);   }) 

and here is the partial view:

<table> <tr> <td style="text-align: right;">Project * </td> <td> <input id="projectsDropDown" name="1Project" /> </td> </tr> <tr> <td style="text-align: right;">Name Address 1 </td> <td style="text-align: left;"> <input type="text" id="1NameAddress1" /> </td> </tr> <tr> <td style="text-align: right;">Name Address 2 </td> <td style="text-align: left;"> <input type="text" id="1NameAddress2" /> </td> </tr> <tr> <td style="text-align: right;">Name Address 3 </td> <td style="text-align: left;"> <input type="text" id="1NameAddress3" /> </td> </tr> <tr> <td style="text-align: right;">Name Address 4 </td> <td style="text-align: left;"> <input type="text" id="1NameAddress4" /> </td> </tr> <tr> <td style="text-align: right;">Name Address 5 </td> <td style="text-align: left;"> <input type="text" id="1NameAddress5" /> </td> </tr> <tr> <td style="text-align: right;">City </td> <td style="text-align: left;"> <input type="text" id="1City" /> </td> </tr> <tr> <td style="text-align: right;">State </td> <td style="text-align: left;"> <input type="text" id="1State" /> </td> </tr> <tr> <td colspan="2" style="text-align: center;"> <input type="button" id="SearchPartyButton" value="Search" /> </td> </tr> </table> <script type="text/javascript"> $(document).ready(function () { $("#SearchPartyButton").click(function () { $("#NameAddress1").val($("#1NameAddress1").val()); $("#NameAddress2").val($("#1NameAddress2").val()); $("#NameAddress3").val($("#1NameAddress3").val()); $("#NameAddress4").val($("#1NameAddress4").val()); $("#NameAddress5").val($("#1NameAddress5").val()); $("#City").val($("#1City").val()); $("#State").val($("#1State").val()); $("#Project").val($("#projectsDropDown").val()); $("#addressForm").submit(); }); }); </script> 
 

[Vladimir Iliev]

Hi Richard,

There are too many missing dependencies in the provided code - could you please send us run-able project where the issue is reproduced or modify the one that I send you to reproduce the issue?

Kind Regards,
Vladimir Iliev
the Telerik team

[Preeti]

Hi,
[In the code you attached]
When I added the button control to both the partial pages, of tabstrip,page is not loading,I dont know the problem what is happening.

and the next thing is,I have textbox in both the partial pages,and I want to validate the partial page,but after doing httppost,it is redirecting to http://localhost:1553/Inquiry/UserInquiry?Length=11 instead of http://localhost:1553/Home/Inquiry
.
Thanks in Advance

[Vladimir Iliev]

Hi Preeti,

As your last questions are out of the original topic of this support conversation - could you please open a new support ticket / forum post and provide runable project where the issue is reproduced?  This would help us pinpoint the exact reason for this behavior.

Regards,
Vladimir Iliev
Telerik