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.
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?
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
@(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
>);
})
)
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
}
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.
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.
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.
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