Telerik Forums
UI for ASP.NET MVC Forum
4 answers
370 views

Hi there guys, its me again. I have a tab-strip that calls a details page for a Person,House, and Car tab. These tabs display the data just fine. On each detail page, i have an edit button, when i click the edit button, right now, when i click the edit button,  i am re-directed to the edit page outside of the tab-strip which isn't what i want. How do i make it load up the edit page within the tab-strip and ultimately when i click save, how to i make  re-load the details page again within the tab-strip.

Index.cshtml- from the InfoController

01.<div class="demo-section k-content">
02.    @(Html.Kendo().TabStrip()
03.          .Name("tabstrip")
04.          .Animation(animation => animation.Open(effect => effect.Fade(FadeDirection.In)))
05.          .Items(tabstrip =>
06.          {
07.            tabstrip.Add().Text("Person")
08.               .Content(@<text> <div class="form-group"> @Html.Action("Detail", "Person", new { id = 1 }) </div> </text>);
09. 
10.             tabstrip.Add().Text("House")
11.                .Content(@<text> <div class="form-group"> @Html.Action("Detail", "House", new { id = 1 }) </div> </text>);
12. 
13.             tabstrip.Add().Text("Car")
14.                .Content(@<text> <div class="form-group"> @Html.Action("Detail", "Car", new { id = 1 }) </div></text>);
15.          })
16.)
17.</div>
18. 
19. 
20. 
21.<script type="text/javascript">
22. 
23.    $(document).ready(function () {
24.        $("#tabstrip").kendoTabStrip({
25.            animation: {
26.                open: {
27.                    effects: "fadeIn"
28.                }
29.            }
30.        });
31. 
32.</script>

 

Here is the InfoController.cs

01.using System;
02.using System.Collections.Generic;
03.using System.Linq;
04.using System.Web;
05.using System.Web.Mvc;
06. 
07.namespace JustTestingWeb4.Controllers
08.{
09.    public class InfoController : Controller
10.    {
11.        // GET: Info
12.        public ActionResult Index()
13.        {
14.            return View();
15.        }
16.    }
17.}

 

Here is my Detail.cshtml - for the Person tab

01.@model JustTestingWeb4.Models.Person
02. 
03.<div>
04.    <h4>Person</h4>
05.    <hr />
06.    <dl class="dl-horizontal">
07.        <dt>
08.            @Html.DisplayNameFor(model => model.FirstName)
09.        </dt>
10. 
11.        <dd>
12.            @Html.DisplayFor(model => model.FirstName)
13.        </dd>
14. 
15.        <dt>
16.            @Html.DisplayNameFor(model => model.LastName)
17.        </dt>
18. 
19.        <dd>
20.            @Html.DisplayFor(model => model.LastName)
21.        </dd>
22. 
23.        <dt>
24.            @Html.DisplayNameFor(model => model.Sex)
25.        </dt>
26. 
27.        <dd>
28.            @Html.DisplayFor(model => model.Sex)
29.        </dd>
30. 
31.        <dt>
32.            @Html.DisplayNameFor(model => model.Ssn)
33.        </dt>
34. 
35.        <dd>
36.            @Html.DisplayFor(model => model.Ssn)
37.        </dd>
38. 
39.        <dt>
40.            @Html.DisplayNameFor(model => model.PhoneNumber)
41.        </dt>
42. 
43.        <dd>
44.            @Html.DisplayFor(model => model.PhoneNumber)
45.        </dd>
46. 
47.    </dl>
48.</div>
49.<p>
50.    @Html.ActionLink("Edit", "Edit", "Person", new { id = 1 }, new { @class = "btn btn-primary", @style = "color:white; height:25px; width:35px; font-size: 0.99em; text-align:center" })
51.</p>

 

And here is my Edit.cshtml for  the - Person tab

01.@model JustTestingWeb4.Models.Person
02. 
03.@using (Html.BeginForm())
04.{
05.    @Html.AntiForgeryToken()
06.     
07.    <div class="form-horizontal">
08.        <h4>Person</h4>
09.        <hr />
10.        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
11.        @Html.HiddenFor(model => model.PersonID)
12. 
13.        <div class="form-group">
14.            @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
15.            <div class="col-md-10">
16.                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
17.                @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
18.            </div>
19.        </div>
20. 
21.        <div class="form-group">
22.            @Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-2" })
23.            <div class="col-md-10">
24.                @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
25.                @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
26.            </div>
27.        </div>
28. 
29.        <div class="form-group">
30.            @Html.LabelFor(model => model.Sex, htmlAttributes: new { @class = "control-label col-md-2" })
31.            <div class="col-md-10">
32.                @Html.EditorFor(model => model.Sex, new { htmlAttributes = new { @class = "form-control" } })
33.                @Html.ValidationMessageFor(model => model.Sex, "", new { @class = "text-danger" })
34.            </div>
35.        </div>
36. 
37.        <div class="form-group">
38.            @Html.LabelFor(model => model.Ssn, htmlAttributes: new { @class = "control-label col-md-2" })
39.            <div class="col-md-10">
40.                @Html.EditorFor(model => model.Ssn, new { htmlAttributes = new { @class = "form-control" } })
41.                @Html.ValidationMessageFor(model => model.Ssn, "", new { @class = "text-danger" })
42.            </div>
43.        </div>
44. 
45.        <div class="form-group">
46.            @Html.LabelFor(model => model.PhoneNumber, htmlAttributes: new { @class = "control-label col-md-2" })
47.            <div class="col-md-10">
48.                @Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { @class = "form-control" } })
49.                @Html.ValidationMessageFor(model => model.PhoneNumber, "", new { @class = "text-danger" })
50.            </div>
51.        </div>
52. 
53.        <div class="form-group">
54.            <div class="col-md-offset-2 col-md-10">
55.                <input type="submit" value="Save" class="btn btn-default" />
56.            </div>
57.        </div>
58.    </div>
59.}

 

And Finally here is my PersonController.cs

01.using JustTestingWeb4.Models;
02.using System.Web.Mvc;
03. 
04.namespace JustTestingWeb4.Controllers
05.{
06.    public class PersonController : Controller
07.    {
08.        public DbQuery db = new DbQuery();
09. 
10.        // GET: Person
11.        public ActionResult Index()
12.        {
13.            return View();
14.        }
15. 
16.        public PartialViewResult Detail(int id)
17.        {
18.            var result = db.GetPerson(id);
19.            return PartialView(result);
20.        }
21. 
22.        public PartialViewResult Edit(int? id)
23.        {
24.            var result = db.GetPerson(id);
25.            return PartialView(result);
26.        }
27. 
28.        [HttpPost]
29.        public PartialViewResult Edit([Bind(Include = "PersonID,FirstName,LastName,Sex,Ssn,PhoneNumber")] Person person)
30.        {
31. 
32. 
33.            var result = db.UpdatePerson(person);
34. 
35.            if (result == true)
36.            {
37.                var result1 = db.GetHouse(person.PersonID);
38.                return PartialView("Detail", result1);
39.            }
40. 
41. 
42.            return PartialView(person);
43.        }
44.    }
45.}

 

I have attached images to help explain what i am seeing. Thanks for your help.

Chinonso
Top achievements
Rank 1
 answered on 20 Jun 2017
11 answers
1.8K+ views
I have a form that has a couple of textboxes and the Kendo Upload control.  I also haven event on the submit button to ensure the textboxes have appropriate values in it, but how do I validate the upload?  Or IOW, how do I validate the user has actually selected a file before submitting the form?
Ivan Danchev
Telerik team
 answered on 20 Jun 2017
2 answers
297 views

I have a treelist bound to server data that i need to open to the same branch after refresh.

The refresh is done with a separate button that reloads the data from the database, and returns the path to the last selected tree node as list of the node's id's. Problem is that the tree is set to load data only when needed, so the loop this function runs attempting to expand the tree works too fast, and tries to expand nodes that the tree hasn't loaded yet.

Function code is following

function onRefreshClick() {
            var treelist = $("#treelist").data("kendoTreeList");
 
            treelist.dataSource.read();
             
           $.ajax({
                type: "POST",
                url: '@Url.Action("GetTreePath", "Tree")',
                data: { itemID: currentID },
                success: function (data) {
                    var dataArray = $.map(data, function (el) { return el });
 
                    for (i = 0; i < dataArray.length; i++) {
                        var rows = treelist.content.find("tr:visible");
                        var found = false;
                        for (var iRow = 0; iRow < rows.length; iRow++) {
                            if (found) {
                                break;
                            }
                            row = rows[iRow];
                            var cellI = 0;
                            if (row != undefined) {
                                while (row.cells[cellI] != undefined) {
                                    if (row.cells[cellI].innerText == dataArray[i]) {
 
                                        treelist.expand(row);
 
                                        alert("Opening tree");
 
                                        found = true;
                                        break;
                                    }
 
                                    cellI++;
                                }
                            }
                        }
                         
                    }
                }
            });
        }

The above works if the user dismisses the "opening tree" alert after the tree has loaded and opened the tree branch, but is it possible to make the function wait for the data to be loaded without manual control, or is there some other way to perform this function?

Keijo
Top achievements
Rank 1
 answered on 20 Jun 2017
5 answers
161 views

Hi,

I have a RadGrid in Edit Mode, with a checkbox that when it is checked, a DropDownList's Enabled state should be True. When the checkbox is unchecked, the DropDownList's Enabled state should be False. Unfortunately I cannot get the Enabled state set after using the following code:

 

 

 

Public Sub RDPots_ItemCreated(sender As Object, e As Telerik.Web.UI.GridItemEventArgs)
 
               If TypeOf e.Item Is GridEditableItem AndAlso e.Item.IsInEditMode Then
 
                   ' Checking the status of the Berried checkbox
                   Dim editedItem As GridEditableItem = DirectCast(e.Item, GridEditableItem)
                   Dim chkBerried As CheckBox = CType(editedItem("Berried").Controls(0), CheckBox)
                   chkBerried.AutoPostBack = True
 
                   Dim dropdownBerriedStage As DropDownList = CType(editedItem("BerriedStage").Controls(0), DropDownList)
                   dropdownBerriedStage.AutoPostBack = True
 
                   AddHandler chkBerried.CheckedChanged, AddressOf Me.chkBerried_CheckedChanged
 
                   If bBerried Then
                       dropdownBerriedStage.Enabled = True
                   Else
                       dropdownBerriedStage.Enabled = False
                   End If
 
 
               End If
 
 
       End Sub
 
Sub chkBerried_CheckedChanged(sender As Object, e As System.EventArgs)
 
           Dim checkBerried As CheckBox = CType(sender, CheckBox)
           Dim eitem As GridEditableItem = DirectCast(checkBerried.NamingContainer, GridEditableItem)
 
           If checkBerried.Checked Then
               bBerried = True
           Else
               bBerried = False
           End If
 
       End Sub
Eyup
Telerik team
 answered on 20 Jun 2017
10 answers
2.8K+ views
I have a tab strip with three tabs, each containing a text box  and a save button, for users to enter some comments in.
Depending on the selection of a drop-down list, I need to hide one tab, and rename another one.

The best I can do is disable one tab.  I don't want to have to destroy and recreate the tabs, as I'm already loading data via ajax into each of the text boxes, on the drop-down list change.

How can I change a tab's title, and hide / unhide one.
@(Html.Kendo().TabStrip()
    .Name("tabstrip")
     .Items(items =>
    {
        items.Add().Text("Unplanned").Content(@<text>
    <div style="margin-top:5px;margin-bottom:10px;margin-left:5px;">
    <textarea id="hs1" name="TextArea1" rows="4" style="width: 500px"></textarea>
    <p><button class="k-button" onclick="saveHSOne();">Save</button></p>
        </div>
 
</text>).Selected(true);
 
 
        items.Add().Text("Planned").Content(@<text>
     <div style="margin-top:5px;margin-bottom:10px;margin-left:5px;">
    <textarea id="hs2" name="TextArea2" rows="4" style="width: 500px"></textarea>
    <p><button class="k-button" onclick="saveHSTwo();">Save</button></p>
        </div>
 
 
</text>);
 
 
        items.Add().Text("Specialised").Content(@<text>
     <div style="margin-top:5px;margin-bottom:10px;margin-left:5px;">
    <textarea id="hs3" name="TextArea3" rows="4" style="width: 500px"></textarea>
    <p><button class="k-button" onclick="saveHSThree();">Save</button></p>
        </div>
 
 
</text>);
 
    })
            )
I can disable one tab, but not hide it
if (currentDiv != 'XXX') {
                        //Hide third tab
                            tabStrip.enable(tabStrip.tabGroup.children("li:eq(2)"), false); // disable tab 1
                    }
                    else {
                        //show third tab
                        tabStrip.enable(tabStrip.tabGroup.children("li:eq(2)"), true); // disable tab 1
                    }

Is this possible? I can't see anything in the API about this.
Veselin Tsvetanov
Telerik team
 answered on 20 Jun 2017
2 answers
1.3K+ views

Hi,

Im launching a modal from a kendo grid button, using kendo window.

It opens and displays its content fine, but when I click close, the overlay over the parent remains and I cant do anything.

Heres my code -

Parent View where grid exists -

<tbody>
        @(Html.Kendo().Grid<OriginGreen.Models.CompanySearchGridViewModel.CompanyModel>()
            .Name("CompaniesGrid")
            .Columns(columns =>
            {
                columns.Bound(c => c.Name).ClientTemplate("<a href='" + Url.Action("ManageCompanies") + "/#= CompanyId #'" + ">#= Name #</a>").Title("Name").HeaderHtmlAttributes(new { @class = "customHeaderStyle" }).HtmlAttributes(new { @class = "customGridRowStyle" }).Width(100); //.Filterable(filterable => filterable.UI("nameFilter"));
                columns.Bound(c => c.Plan_Version).Title("Version").HeaderHtmlAttributes(new { @class = "customHeaderStyle" }).HtmlAttributes(new { @class = "customGridRowStyle" }).Width(75);
                columns.Bound(c => c.Duration).Title("Duration").HeaderHtmlAttributes(new { @class = "customHeaderStyle" }).HtmlAttributes(new { @class = "customGridRowStyle" }).Width(80);
                columns.Bound(c => c.Period).Title("Period").HeaderHtmlAttributes(new { @class = "customHeaderStyle" }).HtmlAttributes(new { @class = "customGridRowStyle" }).Width(100);
                columns.Bound(c => c.Annual_Review_Year).Title("AR Year").HeaderHtmlAttributes(new { @class = "customHeaderStyle" }).HtmlAttributes(new { @class = "customGridRowStyle" }).Width(75);
                columns.Bound(c => c.New_Legacy_Plan).Title("New").HeaderHtmlAttributes(new { @class = "customHeaderStyle" }).HtmlAttributes(new { @class = "customGridRowStyle" }).Width(75);
                columns.Bound(c => c.Next_AR_Due_Date).Format("{0:dd/MM/yyyy}").Title("AR Date").HeaderHtmlAttributes(new { @class = "customHeaderStyle" }).HtmlAttributes(new { @class = "customGridRowStyle" }).Width(75).Filterable(f => f.UI("DateFilter")).ClientTemplate(
                     "# if (Next_AR_Due_Date == null) { #" +
                        " N/A " +
                    "# } else { #" +
                      " #=kendo.toString(Next_AR_Due_Date, 'dd/MM/yyyy')# " +
                    "# } #"
                    );
                columns.Bound(c => c.Current_Status).Title("Status").HeaderHtmlAttributes(new { @class = "customHeaderStyle" }).HtmlAttributes(new { @class = "customGridRowStyle" }).Width(100);
                columns.Bound(c => c.AssignedToUserName).Title("Assigned To").HeaderHtmlAttributes(new { @class = "customHeaderStyle" }).HtmlAttributes(new { @class = "customGridRowStyle" }).Width(100);
                columns.Bound(c => c.BordBiaUserName).Title("BB Reviewer").HeaderHtmlAttributes(new { @class = "customHeaderStyle" }).HtmlAttributes(new { @class = "customGridRowStyle" }).Width(100);
                columns.Bound(c => c.ThirdPartyUserName).Title("SGS Reviewer").HeaderHtmlAttributes(new { @class = "customHeaderStyle" }).HtmlAttributes(new { @class = "customGridRowStyle" }).Width(100);
                columns.Command(command => command.Custom("Assign To User").Click("assignToUser")).HeaderHtmlAttributes(new { @class = "customHeaderStyle" }).Width(100);
                //columns.Template(x => { }).ClientTemplate("<a class='k-button k-button-icontext k-grid-EditSpecification sgs-ql-edit' title='Assign To User'  data-modal-title='Edit Specification' href='" + Url.Action("AssignToUser", "Search", new { id = "#= CompanyId #" }) + "'>Assign To User</a>").Width(100);
                //columns.Template(x => { }).ClientTemplate("<a class='k-button k-button-icontext k-grid-EditArticle' href='" + Url.Action("AssignToUser", "Search", new { id = "#= CompanyId #" }) + "'>Assign To User</a>").Width(100);
                //columns.Template(x => { }).ClientTemplate(@Html.ActionLink(Strings.QuickLinksAdd, "AssignToUser", "Search", new { id = "#= CompanyId #" }, new { data_popup_url = Url.Action("AssignToUser"), data_modal_title = "Assign Company to User" }).ToString()).Width(100);
            })
            .ToolBar(tools => tools.Excel())
            .Excel(excel => excel
            .FileName("Company_List_Admin.xlsx")
            .Filterable(true)
            .ProxyURL(Url.Action("Excel_Export_Save", "Plan"))
            .AllPages(true))
            .Events(e => e.DataBound("onRowBound"))
            .Pageable()
            .Sortable()
            .Scrollable()
            .Selectable()
            .Filterable(filterable => filterable
                .Extra(false)
                .Operators(operators => operators
                        .ForString(str => str.Clear()
                            .StartsWith("Starts with")
                            .IsEqualTo("Is equal to")
                            .IsNotEqualTo("Is not equal to")
                            .Contains("Contains")
                        )
                        .ForNumber(num => num.Clear()
                            .IsEqualTo("Is Equal To")
                            .IsNotEqualTo("Is Not Equal To")
                            .IsGreaterThan("Is Greater Than")
                            .IsLessThan("Is Less Than")
                        )
                        .ForDate(dt => dt.Clear()
                            .IsEqualTo("Is Equal To")
                            .IsNotEqualTo("Is Not Equal To")
                            .IsGreaterThan("Is Greater Than")
                            .IsLessThan("Is Less Than")
 
                        )
                    )
            )
            .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .ServerOperation(false)
                                    .PageSize(10)
                                    .Batch(true)
                                    .Model(model =>
                                    {
                                        model.Id(c => c.CompanyId);
                                    })
                                    .Read(read => read.Action("DisplayAdminSearchGrid", "Search").Type(HttpVerbs.Get))
                                )
        )
 
         
    </tbody>
    <div>
 
        @(Html.Kendo().Window()
            .Name("AssignToUser")
            .Title("AssignToUser")
            .Visible(false)
            .Actions(actions => actions
                .Close()
            )
            .Modal(true)
            .Draggable(true)
            .Width(500)
            .Height(250)
        )
    </div>

Script -

 

<script type="text/javascript">
    function assignToUser(e) {
        e.preventDefault();
 
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
 
        var url = "/Portal/Search/AssignToUser/" + dataItem.id;
        var wnd = $("#AssignToUser").kendoWindow({
            title: "Assign To User",
            actions: ["Close"],
            content: url,
            visible: false,
            modal: true
 
        }).data("kendoWindow");
        wnd.center();
        wnd.open();
    }
 
    </script>

 

The view that displays in the modal is a partial view -

 

@model OriginGreen.Models.SearchAssignUserViewModel
@{
    ViewBag.Title = "AssignToUser";
}
 
@*<link href="~/Content/bootstrap.css" rel="stylesheet">
<link href="~/Content/custom_theme/jquery-ui.min.css" rel="stylesheet">
<link href="~/Scripts/Kendo_UI_2017_R2/styles/kendo.common-bootstrap.min.css" rel="stylesheet">
<link href="~/Scripts/Kendo_UI_2017_R2/styles/kendo.bootstrap.min.css" rel="stylesheet">*@
 
@using (Html.BeginForm("EditAssignedUsers", "Search", FormMethod.Post, new { enctype = "multipart/form-data", id = "formEditAssignedUser" }))
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        <div class="row">
            <div class="col-md-12">
                <h4>Assign To User</h4>
                <div>
 
                    Company ID : @Model.Id
                </div>
            </div>
        </div>
        <div class="row">
            @Html.LabelFor(model => model.BordBiaUsers, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-4">
                @Html.DropDownListFor(model => model.BordBiaUserId,
                new SelectListItem[]
                {
                    new SelectListItem
                    {
                        Value = "",
                        Text = "Please Select...."
                    }
                }
                .Union(
                    Model.BordBiaUsers
                        .Select(i => new SelectListItem
                        {
                            Value = i.UserId.ToString(),
                            Text = i.FullName
                        })),
                new { @class = "form-control" })
 
            </div>
        </div>
 
        <div class="row">
            @Html.LabelFor(model => model.ThirdPartyUsers, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-4">
                @Html.DropDownListFor(model => model.ThirdPartyUserId,
                new SelectListItem[]
                {
                    new SelectListItem
                    {
                        Value = "",
                        Text = "Please Select...."
                    }
                }
                .Union(
                    Model.BordBiaUsers
                        .Select(i => new SelectListItem
                        {
                            Value = i.UserId.ToString(),
                            Text = i.FullName
                        })),
                new { @class = "form-control" })
 
            </div>
        </div>
    </div>
 
    @Html.HiddenFor(model => model.Id)
 
    <div class="form-horizontal">
        <div>
            <div class="profilebuttons">
                <input type="submit" value="@Strings.SaveButton" class="btn btn-green btn-default" />
                @*<input type="button" value="@Strings.CancelButton" class="btn btn-green cancel-btn" data-action-url="@Url.Action("SearchAdmin")" />*@
                @Html.ActionLink(Strings.CancelButton, "Index", "Search", new { }, new { @class = "btn btn-green", id = "cancelProfile" })
            </div>
        </div>
    </div>
}

 

Any ideas on why the overlay remains when the modal closes?

Thanks.

Terry
Top achievements
Rank 1
 answered on 19 Jun 2017
1 answer
462 views

If you look at the filters on http://demos.telerik.com/aspnet-mvc/grid/filter-menu-customization you will see the attached image. The text at the top of the filter popup says "Show items with value that:" This string's contents can be changed with:

.Messages(m => m.Info("my text"))

and that works as expected. What I can't understand is why the Filter button shows the same text as a tool tip if you hover on it. Worse yet, the Clear button shows the exact same text, which makes no sense. Hover on the Filter and Clear buttons on that page and you will see what I'm talking about.

Is there a way to set the text at the top of the popup without also setting the Filter and Clear button tool tips?

Or is there a way to set the tool tips to say something else?

Thanks.

Orlin
Telerik team
 answered on 19 Jun 2017
1 answer
148 views

This is strange because I am pretty sure this had been working in the past...

Have a ComboBox using ComboBoxFor with a model property.  Pretty basic config with server filtering.

On form the model property is being set to the DataTextField of the ComboBox. Shouldn't it be the DataValueField? The value is being set correctly when I add an alert to the onSelect event of the ComboBox and output the Value field.

Dimitar
Telerik team
 answered on 16 Jun 2017
1 answer
385 views
I developed an Editor template which is displayed as a modal/pop-up form used to update row data
values on a grid.  I need to show/hide sections on the form based on the values set on the
dropdownlist.  The show/hide functionality works when the dropdownlist value changes. 

However,  I need to set which sections/panels are hidden when the form initially loads before the page is rendered.
I’ve tried retrieving the selected option value in the $(document).ready() function as illustrated in the
source code I’ve included. However, the value/text is either null or undefined when the ready function is invoked.
After the  $(document).ready() function execution completes,  dropdownlist fields display the data from the grid correctly.

How would I go about retrieving the initial value of the dropdown lists before form is rendered in order to process the logic needed to
show / hide the appropriate sections on the form?


Listed below is source code from my EditTemplate:

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

        <div class="form-group">
            @Html.LabelFor(model => model.StepNumber, htmlAttributes: new { @class = "control-label col-md-2" })
            @Html.EditorFor(model => model.StepNumber)
            @Html.ValidationMessageFor(model => model.StepNumber, "", new { @class = "text-danger" })
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.TaskName, htmlAttributes: new { @class = "control-label col-md-2" })
            @Html.EditorFor(model => model.TaskName)
            @Html.ValidationMessageFor(model => model.TaskName, "", new { @class = "text-danger" })
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.ActionID, htmlAttributes: new { @class = "control-label col-md-2" })
            @(Html.Kendo().DropDownList().Name("ActionIDText").DataValueField("ID").DataTextField("ActionName")    
                        .OptionLabel("--select action--").BindTo((System.Collections.IEnumerable)ViewData["actions"])
                        .Value(Model.ActionIDText))
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ActionTarget, htmlAttributes: new { @class = "control-label col-md-2" })
            @(Html.Kendo().DropDownList().Name("ActionTarget")
                        .DataValueField("ID")
                        .DataTextField("ActionTarget")
                        .OptionLabel("--select target--")
                        .BindTo((System.Collections.IEnumerable)ViewData["targets"])
                        .Value(Model.ActionTarget))
        </div>
        <div id="UserPanel" style="display:none" class="form-group">
            @Html.LabelFor(model => model.UserID, htmlAttributes: new { @class = "control-label col-md-2" })
            @(Html.Kendo().DropDownList()
                        .Name("UserID").DataValueField("ID").DataTextField("FullName")
                        .OptionLabel("--select User--").BindTo((System.Collections.IEnumerable)ViewData["users"])
                        .Value(Model.UserID) )
        </div>
        <div id="GroupPanel" style="display:none" class="form-group">
                @Html.LabelFor(model => model.GroupID, htmlAttributes: new { @class = "control-label col-md-2" })
                @(Html.Kendo().DropDownList().Name("GroupIDText").DataValueField("ID").DataTextField("GroupName")
                                .OptionLabel("--select group--").BindTo((System.Collections.IEnumerable)ViewData["groups"])
                                .Value(Model.GroupIDText) )
        </div>
        <div id="SupervisorPanel" style="display:none" class="form-group">
                 @Html.Label("Supervisor", htmlAttributes: new { @class = "control-label col-md-2" })
                 @(Html.Kendo().DropDownList()
                        .Name("ManagerID").DataValueField("ID").DataTextField("FullName")
                        .BindTo((System.Collections.IEnumerable)ViewData["users"])
                        .OptionLabel("--select manager --").Value(Model.UserID) )
       </div>
}

<script>
    $(document).ready(function () {
        alert("read....");
        ConfigureIntialPanel();
        alert("done");
    });

    /* Set initial state of Panels  */
    function ConfigureIntialPanel() {

        var target = $("#ActionTarget option:selected").text();
        var targetvalue = $("#ActionTarget option:selected").val();
        alert('target = ' + target + '      targetvalue =' + targetvalue);

        var target2 = $("#ActionTarget").find("option:selected").text();
        var targetvalue2 = $("#ActionTarget").find("option:selected").prop("value");
        alert('target2 = ' + target2 + '      targetvalue2 =' + targetvalue2);

        if (targetvalue == "Individual") {
            $('#UserPanel').show();
            $('#GroupPanel').hide();
            $('#SupervisorPanel').hide();
            /* alert('targetvalue = Individuel   /   Panel = ' + panel); */
        }
        else if (targetvalue == "Group") {
            $('#UserPanel').hide();
            $('#GroupPanel').show();
            $('#SupervisorPanel').hide();
            /* alert('targetvalue = Groupd   /   Panel = ' + panel);  */
        }
        else if (targetvalue == "Supervisor") {
            $('#UserPanel').hide();
            $('#GroupPanel').hide();
            $('#SupervisorPanel').show();
            /*  alert('targetvalue = Super   /   Panel = ' + panel);  */
        }
        else {
            $('#UserPanel').hide();
            $('#GroupPanel').hide();
            $('#SupervisorPanel').hide();
            /* alert('targetvalue = **Unknown   /   Panel =' + panel);  */
        }
    };

</script>

<script>
            $('#ActionTarget').change(function () {
                var target = $('#ActionTarget option:selected').text();
                var targetvalue = $('#ActionTarget').val();
                 var panel = '#' + target + 'Panel';

                 if (targetvalue == "Individual") {
                     $('#UserPanel').show();
                     $('#GroupPanel').hide();
                     $('#SupervisorPanel').hide();
                 }
                 else if (targetvalue == "Group") {
                     $('#UserPanel').hide();
                     $('#GroupPanel').show();
                     $('#SupervisorPanel').hide();
                 }
                 else if (targetvalue == "Supervisor") {
                     $('#UserPanel').hide();
                     $('#GroupPanel').hide();
                     $('#SupervisorPanel').show();
                 }
            });

</script>

Boyan Dimitrov
Telerik team
 answered on 16 Jun 2017
1 answer
2.1K+ views

There seems to be a difference between the files used on our development server and production server. A comparison between the deployed files shows only the expected differences in web.config.

On out development machine there are no Telerik bundles used, but on the production machine there are the following 4 and the all throw 404 errors.

https://cms1.transguardian.com/bundles/kendo/fonts/glyphs/WebComponentsIcons.ttf?gedxeo

https://cms1.transguardian.com/bundles/kendo/images/kendoui.woff?v=1.1

https://cms1.transguardian.com/bundles/kendo/images/kendoui.ttf?v=1.1

https://cms1.transguardian.com/bundles/kendo/fonts/glyphs/WebComponentsIcons.woff?gedxeo

 

There is no Teleik code in our BundleConfig file other than us include the appropriate JS and CSS files. Nothing close the the paths listed above. I have check that we do have woff files that included in the project, but are set as do not copy.

So far we have only noticed the issues on a page that uses a Telerik MVC Grid that has sub grids. The icons to expand and collapse the sub grid are missing.

This happened when we upgraded to 2017.2.504

 

Any ideas as to how to handle this?

Thanks

Randy

Tsvetina
Telerik team
 answered on 16 Jun 2017
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?