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

Drop downs in tabl strip

5 Answers 101 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Richard
Top achievements
Rank 1
Richard asked on 03 Dec 2012, 05:34 PM
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?

5 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 05 Dec 2012, 10:56 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Richard
Top achievements
Rank 1
answered on 05 Dec 2012, 11:45 PM
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-left100px;"> <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-colorGraycolorBlackfont-weightbold;"> <label style="margin-left10px;"> @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-alignright;">Project * </td> <td> <input id="projectsDropDown" name="1Project" /> </td> </tr> <tr> <td style="text-alignright;">Name Address 1 </td> <td style="text-alignleft;"> <input type="text" id="1NameAddress1" /> </td> </tr> <tr> <td style="text-alignright;">Name Address 2 </td> <td style="text-alignleft;"> <input type="text" id="1NameAddress2" /> </td> </tr> <tr> <td style="text-alignright;">Name Address 3 </td> <td style="text-alignleft;"> <input type="text" id="1NameAddress3" /> </td> </tr> <tr> <td style="text-alignright;">Name Address 4 </td> <td style="text-alignleft;"> <input type="text" id="1NameAddress4" /> </td> </tr> <tr> <td style="text-alignright;">Name Address 5 </td> <td style="text-alignleft;"> <input type="text" id="1NameAddress5" /> </td> </tr> <tr> <td style="text-alignright;">City </td> <td style="text-alignleft;"> <input type="text" id="1City" /> </td> </tr> <tr> <td style="text-alignright;">State </td> <td style="text-alignleft;"> <input type="text" id="1State" /> </td> </tr> <tr> <td colspan="2" style="text-aligncenter;"> <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> 
 
0
Vladimir Iliev
Telerik team
answered on 06 Dec 2012, 09:22 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Preeti
Top achievements
Rank 1
answered on 29 Jan 2014, 08:39 PM
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




0
Vladimir Iliev
Telerik team
answered on 31 Jan 2014, 02:32 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
TabStrip
Asked by
Richard
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Richard
Top achievements
Rank 1
Preeti
Top achievements
Rank 1
Share this question
or