Hi!
I have the following lines in my _Layout.cshtml:
@Html.Kendo().AutoComplete().Name("search").DataTextField("Name").MinLength(3).Placeholder("Search...").DataSource(source => source.Read(read => read.Action("GetSiteInfos", "SiteInfo"))).AutoWidth(true).HtmlAttributes(new { style = "width: 50%;" }).Events(ev => ev.Select("onSiteSelect"))
and the Javascript for the selection is:
<script type="text/javascript">
function onSiteSelect(e) {
var selected = this.dataItem($(e.item));
var id = selected.Id;
$("#selectedSiteId").val(id);
}
</script>
It's working perfectly: the value of the field 'id' is stored in a HiddenField:
@Html.Hidden("selectedSiteId")
Now my problem is, that I have a TabStrip in this _Layout.cshtml and I would like to show some database results for the selected Id depending on the page I choose in the TabStrip.
@Html.Kendo().TabStrip().Name("siteTabStrip").Animation(animation => animation.Open(effect => effect.Fade(FadeDirection.In))).Items(tabstrip =>
{
tabstrip.Add().Text("First page").Content(@Html.Partial("_FirstPartial").ToHtmlString());
tabstrip.Add().Text("Second page").Selected(true).Content(@Html.Partial("_SecondPartial").ToHtmlString());
}).HtmlAttributes(new { @class = "k-state-active" })
How can I pass the hidden field value to the TabStrip item? Every TabStrip page will show a partial view. These partial views should call an action with the Id as a parameter and will show us different results from database. But this TabStrip will be rendered as soon as I load the page and before using the AutoComplete!
Thanks for your help.
7 Answers, 1 is accepted
Rank 2
I've found some partial solution: I should use the LoadContentFrom method of tabstrip.
In this case it looks like this:
tabstrip.Add().Text("First page").LoadContentFrom("GetSiteInfo", "SiteInfo", new { id = "AAA1234" });
Using the onSiteSelect javascript as mentioned before, how can I pass that result to this LoadContentFrom method as parameter? As you can see, if I add it statically it works of course.
Thanks for your help
Rank 2
So my _Layout.cshtml has the header tag with @Html.Kendo().AutoComplete()... element with event of Select.
@using Kendo.Mvc.UI
@model Rollout2.Models.SiteInfo
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function onSiteSelect(e) {
var selected = this.dataItem($(e.item));
var id = selected.Id;
$("#selectedSiteId").val(id);
var result = $.ajax({
url: '@Url.Action("GetSiteInfoSearchResult","SiteInfo")',
method: 'GET',
data: { id: id },
dataType: 'text',
async: false,
success: function (response) {
//this.model = response;
//alert(this.model.Id);
}
})
//.responseText
;
//return result;
}
</script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-right">
<nav>
<ul id="menu" class="nav navbar-nav navbar-right">
@if (Request.IsAuthenticated)
{
<li>@Html.Kendo().AutoComplete().Name("search").DataTextField("Name").MinLength(3).Placeholder("Item to search...").DataSource(source => source.Read(read => read.Action("GetSiteInfos", "SiteInfo"))).AutoWidth(true).HtmlAttributes(new { style = "width: 50%;" }).Events(ev => ev.Select("onSiteSelect"))</li>
}
</ul>
@Html.Partial("_LoginPartial")
</nav>
</div>
</div>
</header>
<div id="body">
@Html.Hidden("selectedSiteId")
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix" id="mainBody">
@RenderBody()
@RenderPage("_TabStripPartial.cshtml", Model)
</section>
</div>
</body>
</html>
I don't know if I have to do anything in the Javascript section success, that's why many lines were commented.
This part above works: I start to type in the autocomplete box, after 3 characters I got the list, and selecting one of them would trigger the Javascript. The ID of the selected item will be in the Hidden field. (I don't know if this is the right direction for the solution).
What I want is to show the strongly typed tabstrip partial view with the selected model, this is it:
_TabStripPartial.cshtml:
@using Kendo.Mvc.UI
@model Rollout2.Models.SiteInfo
@if (Request.IsAuthenticated)
{
@Html.Kendo().TabStrip().Name("siteTabStrip").Animation(animation => animation.Open(effect => effect.Fade(FadeDirection.In))).Items(tabstrip =>
{
tabstrip.Add().Text("Page 1").Selected(true).LoadContentFrom("GetSiteInfo", "Antenna", (Model != null) ? Model.Id : "");
tabstrip.Add().Text("Page 2").LoadContentFrom("GetSiteInfo", "SiteInfo", (Model != null) ? Model.Id : "");
}).HtmlAttributes(new { @class = "k-state-active" })
}
Here I didn't get the selected model, don't know why.
Controller action for the 1 Page:
[HttpGet]
public ActionResult GetSiteInfo(string id)
{
Antenna result = _antennaResultRepository.GetById(id);
return PartialView("_AntennaPartial", result);
}
Controller action for Page 2:
[HttpGet]
public ActionResult GetSiteInfo(string id)
{
SiteInfo result1 = _siteInfoResultRepository.GetById(id);
Antenna result4 = _antennaResultRepository.GetById(id);
ItemFullViewModel result = new ItemFullViewModel
{
SiteInfo = result1,
Antenna = result4
};
return PartialView("_MainInfoPartial", result);
}
Both partial views of course starting with strongly type declaration: _AntennaPartial has '@model Antenna' and _MainInfoPartial has '@model ItemFullViewModel'
I'm stuck after selecting the autocomplete result: cannot show any item descriptions on tabpages.
Simply I want a search field where I select and item and can show all its descriptions in tabstrip panels. Then search for another one and so on.
Rank 2
I tried to upload my zipped solution, but your file limit is 2MB and your js folder is much more bigger, so I have uploaded the zip file with my example here:
https://www.crushsoft.eu/downloads/KendoTest.zip
Thanks
Rank 2
Now I found the solution, I've updated the zip file mentioned above.
What I don't understand:
- the columns in rows are missing when I got the result on any of the tabs (search for the word "First" or "Second"). The result in the partial view is in container, in container there's a row and then come the columns but all the results are not in row...
- the second I don't understand: I have a license with support responding 24 hours (Devcraft Complete)! My first question was almost 4 days ago and no response from you. Is it possible to get some response for our license?
Many thanks.
I am glad you found the correct syntax to be used to send the id parameter to the Action. Actually if you inspect the definition of the .LoadContentFrom method you will find that this overload (Action, Controller, routeValues):
public TBuilder LoadContentFrom(string actionName, string controllerName, object routeValues);As for the content of the Tabs not being displayed as columns this is caused by Bootstrap css not being loaded on the page. You are loading Kendo Bootstrap theme css files and these are the files needed to apply the Kendo Bootstrap theme (one of our built-in themes) to the Kendo widgets. This theme recreates the look of Twitter Bootstrap to some extent, but if you want to make use of Bootstrap's grid layout you need to load Bootstrap's css, for example:
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><link href="@Url.Content("~/Content/kendo/2017.3.913/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css" /><link href="@Url.Content("~/Content/kendo/2017.3.913/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" /><link href="@Url.Content("~/Content/kendo/2017.3.913/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" /><script src="@Url.Content("~/Scripts/kendo/2017.3.913/jquery.min.js")"></script><script src="@Url.Content("~/Scripts/kendo/2017.3.913/angular.min.js")"></script><script src="@Url.Content("~/Scripts/kendo/2017.3.913/jszip.min.js")"></script><script src="@Url.Content("~/Scripts/kendo/2017.3.913/kendo.all.min.js")"></script><script src="@Url.Content("~/Scripts/kendo/2017.3.913/kendo.aspnetmvc.min.js")"></script>As for the response time, indeed Devcraft Complete provides response time within 24h for support tickets submitted through the Online Ticketing System. This is valid Monday through Friday (excludes Saturday and Sunday, as well as public holidays). The current thread is submitted as a forum thread, i.e. it is not a support ticket in the ticketing system, but a public thread in the Telerik forums, thus the mentioned response time for support tickets does not apply to it. You can find more details on the support plans on the Support Plans page. Let us know in case you have other questions regarding the response time.
Regards,
Ivan Danchev
Progress Telerik
Rank 2
Hi Ivan!
Thanks for your reply. Can you write me the exact order of loading all the css files? Because it's not clear for me. Checked your documents too, but it's not working me all the time...
So basically we all have (when creating a new mvc project):
- Site.css
- kendo.common-bootstrap.min.css
- kendo.bootstrap.min.css
- kendo.common.min.css
- some exact theme kendo css (for example: kendo.moonlight.mobile.min.css)
- and of course the bootstrap.css
And what about all the scripts loading order? First all the kendo's or all the native js files.
About the response time: thanks for your correction. It wasn't clear that the 24h is for support tickets only. I'd rather use the forum, because I like others to learn from my problems and didn't want to flood your ticket system, but in the future if I have urgent question (most of them is that of course, like at anybody) I'll drop you a ticket.
Have a nice day
The correct order of loading the CSS and js files would be:
- Site.css
- bootstrap.min.css (Twitter's Bootstrap CSS must be loaded before Kendo UI CSS files)
- kendo.common.min.css
- kendo.[theme].min.css (the kendo.bootstrap.min.css in your previous reply is an example of one of the theme-specific CSS files)
More details on order of loading and information on the different CSS files used by Kendo UI is available here.
Kendo UI js files have to be loaded after jQuery since the widgets depend on it.
- jquery.min.js
- kendo.all.min.js
Example showing both CSS and js references.
kendo.all.min.js contains the scripts for all the widgets so there is no need for loading individual scripts, but if for some reason you want to load only the scripts for specific widgets you can find the list of files and the order of loading in this documentation section.
Regards,
Ivan Danchev
Progress Telerik