Autocomplete selected item to TabStrip

8 posts, 1 answers
  1. Attila
    Attila avatar
    18 posts
    Member since:
    Oct 2016

    Posted 13 Oct 2017 Link to this post

    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.

  2. Attila
    Attila avatar
    18 posts
    Member since:
    Oct 2016

    Posted 13 Oct 2017 Link to this post

    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

  3. Attila
    Attila avatar
    18 posts
    Member since:
    Oct 2016

    Posted 15 Oct 2017 Link to this post

    As far as your reaction comes so slowly, I went further.

    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.
  4. Attila
    Attila avatar
    18 posts
    Member since:
    Oct 2016

    Posted 15 Oct 2017 Link to this post

    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
  5. Attila
    Attila avatar
    18 posts
    Member since:
    Oct 2016

    Posted 16 Oct 2017 Link to this post

    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.

  6. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1348 posts

    Posted 16 Oct 2017 Link to this post

    Hi Attila,

    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);
    has the same parameters as those of the standard ASP.NET MVC Url.Action method and the parameters are set the same way.

    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="@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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Attila
    Attila avatar
    18 posts
    Member since:
    Oct 2016

    Posted 17 Oct 2017 in reply to Ivan Danchev Link to this post

    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

  8. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    1348 posts

    Posted 18 Oct 2017 Link to this post

    Hi Attila,

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top