Drop downs in tabl strip

6 posts, 0 answers
  1. Richard
    Richard avatar
    4 posts
    Member since:
    Oct 2012

    Posted 03 Dec 2012 Link to this post

    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?
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2190 posts

    Posted 05 Dec 2012 Link to this post

    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!
  3. Richard
    Richard avatar
    4 posts
    Member since:
    Oct 2012

    Posted 05 Dec 2012 Link to this post

    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> 
     
  4. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2190 posts

    Posted 06 Dec 2012 Link to this post

    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!
  5. Preeti
    Preeti avatar
    4 posts
    Member since:
    Jan 2014

    Posted 29 Jan 2014 Link to this post

    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




  6. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2190 posts

    Posted 31 Jan 2014 Link to this post

    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!
Back to Top