In the attached image, we are having issues with the menu bar and spacing between the sub menu's. We are currently running Kendo.UI 2013.2.918. Do the newer versions of Kendo fix this "bug" or is there an fix that we can do with our current version? The screen print is from Chrome version 42.0.2311.135
Code:
@(Html.Kendo().Menu()
.Name("Menu")
.HtmlAttributes(new { @style = "width:99%;border: 0px;"})
.Direction(MenuDirection.Bottom)
.Items(items =>
{
items.Add().Text("home").Action("Index", "Home").ImageUrl(Url.Content("~/Images/B-home%2048.png")).ImageHtmlAttributes(new { style = "width:25px" });
items.Add().Text("search").Action("Index", "Search").ImageUrl(Url.Content("~/Images/B-search%2048.png")).ImageHtmlAttributes(new { style = "width:25px" });
items.Add().Text("activities & alerts").ImageUrl(Url.Content("~/Images/B-Activity%2048.png")).HtmlAttributes(new { style = "width:175px" }).ImageHtmlAttributes(new { style = "width:25px" }).Items(children =>
{
children.Add().Text("bins").Items(binNode =>
{
binNode.Add().Text("central processing unit").Action("Index", "ActivityPage", new { BinID = "1" });
binNode.Add().Text("charge off").Action("Index", "ActivityPage", new { BinID = "7" });
binNode.Add().Text("collateral cashier").Action("Index", "ActivityPage", new { BinID = "9" });
binNode.Add().Text("defensive action").Action("Index", "ActivityPage", new { BinID = "4" });
binNode.Add().Text("delinquency").Action("Index", "ActivityPage", new { BinID = "2" });
binNode.Add().Text("foreclosure / reo").Action("Index", "ActivityPage", new { BinID = "6" });
binNode.Add().Text("legal / bankruptcy").Action("Index", "ActivityPage", new { BinID = "3" });
binNode.Add().Text("office automation assistant").Action("Index", "ActivityPage", new { BinID = "8" });
binNode.Add().Text("settlement").Action("Index", "ActivityPage", new { BinID = "5" });
}).HtmlAttributes(new { style = "width:175px" });
children.Add().Text("my").Items(my =>
{
my.Add().Text("activities").Action("Index", "ActivityMyPage").HtmlAttributes(new { style = "width:175px" });
my.Add().Text("alerts").Action("Index", "Alerts", new { Mine = true });
}).HtmlAttributes(new { style = "width:175px" });
children.Add().Text("office").Items(office =>
{
office.Add().Text("actities").Action("Index", "ActivityPage", new { BinID = "0" }).HtmlAttributes(new { style = "width:175px" });
office.Add().Text("alerts").Action("Index", "Alerts");
}).HtmlAttributes(new { style = "width:175px" });
});
items.Add().Text("reports & portfolios").ImageUrl(Url.Content("~/Images/B-reports%2048.png")).HtmlAttributes(new { style = "width:190px" }).ImageHtmlAttributes(new { style = "width:25px" }).Items(children =>
{
children.Add().Text("reports").Items(sibling1 =>
{
sibling1.Add().Text("my activity report").Action("Index", "StaffMetrics");
sibling1.Add().Text("office activity report").Action("Index", "OfficeMetrics");
}).HtmlAttributes(new { style = "width:190px" });
children.Add().Text("portfolios").Items(sibling2 =>
{
sibling2.Add().Text("office portfolio").Action("Index", "Reports_OfficeLoan");
sibling2.Add().Text("litigation portfolio").Action("Index", "Reports_Litigation", new { status = "true" });
});
children.Add().Text("statisitics").Visible(@Convert.ToBoolean(Session["isManagement"].ToString())).Items(sibling3 =>
{
sibling3.Add().Text("staff report").Action("Index", "ManagerStaffReport");
sibling3.Add().Text("role process report").Action("Index", "RoleMetrics");
});
});
items.Add().Text("admin").ImageUrl(Url.Content("~/Images/B-admin%2048.png")).HtmlAttributes(new { style = "width:100px" }).ImageHtmlAttributes(new { style = "width:25px" }).Items(children =>
{
children.Add().Text("staff").Action("Index", "AdminStaff").HtmlAttributes(new { style = "width:100px" });
children.Add().Text("database").Action("Index", "AdminDatabase").Visible(@Convert.ToBoolean(Session["AdminDatabase"]));
children.Add().Text("website").Action("Index", "AdminWebsite").Visible(@Convert.ToBoolean(Session["AdminWebsite"]));
});
})
)
Hi,
I'm trying to use a MobileListView in my project with this code:
<
div
class
=
"row"
>
<
div
class
=
"col-xs-12"
>
@(Html.Kendo().MobileView()
.Title("Chiamate")
.Header(obj =>
Html.Kendo().MobileNavBar()
.Name("ChiamateNavbar")
.Content(navbar =>
@<
text
>
@navbar.ViewTitle("Chiamate")
</
text
>)
)
.Content(
@<
text
>
@(Html.Kendo().MobileListView<
Telesan.CloudLift.WebApplication.Models.Chiamate.ChiamataListViewModel
>()
.Name("ChiamateListView")
.TemplateId("ChiamateTemplate")
.PullToRefresh(true)
.EndlessScroll(true)
.DataSource(dataSource =>
dataSource
.Read(r => r.Action("ChiamateAjaxList", "Chiamate").Data("onData").Type(HttpVerbs.Post))
.ServerOperation(true)
.Filter(t =>
{
t.Add(m => m.DataOra).IsGreaterThanOrEqualTo(DateTime.Today.AddDays(-3));
t.Add(m => m.IDStato).IsNotEqualTo((Guid)ViewBag.StatoChiuso).And().IsNotEqualTo((Guid)ViewBag.StatoElaborato);
})
.Sort(s => s.Add(m => m.DataOra).Descending())
.PageSize(50)
)
)
</
text
>)
)
</
div
>
</
div
>
But it doesn't render to my page so after a search I've found a possible solution by adding this in _L:
@(Html.Kendo().MobileApplication()
.ServerNavigation(true)
)
Your kendo mobile application element does not contain any direct child elements with data-role="view" attribute set. Make sure that you instantiate the mobile application using the correct container.
This is the _Layout block where @RenderBody is:
<
div
class
=
"cloudlift-container"
>
<
div
class
=
"row"
>
<
div
class
=
"col-xs-12 main-content"
>
@RenderBody()
</
div
>
</
div
>
</
div
>
@(Html.Kendo().MobileApplication()
.ServerNavigation(true)
)
Can somebody help?
I have a grid that has joined tables from a doamin method entity.
I want to edit the grid columns. for some reason, I keep getting a null value for some of the grid colunms.
public ActionResult EditSubscriber([DataSourceRequest] DataSourceRequest gridRequest, Sub editSub, Subs editSubs)
{
if (ModelState.IsValid)
{
// Passin values
Sub subToUpdate = db.Subss.FirstOrDefault(s => s.Sub_ID == editSub.Sub_ID);
subToUpdate .SFirstName = editSub.SFirstName;
subToUpdate .SLastName = editSub.SLastName;
subToUpdate .SEmail = editSub.SEmail;
// Null values. Values are not being passed. Why?
Subs subsToUpdate = db.Subsss.FirstOrDefault(s => s.Subs_ID == editSubs.Subs_ID);
subsToUpdate .SubsStartDate = editSubs.SubsStartDate;
subsToUpdate .SubsEndDate = editSubs.SubsEndDate;
subsToUpdate .SubsStatus = editSubs.SubsStatus;
subsToUpdate .SubsType_ID = editSubs.SubsType_ID;
db.SaveChanges();
}
return Json(new[] { editSub}.ToDataSourceResult(gridRequest, ModelState));
}
Any idea?
I would like to know how to retail the page size that is selected in the pager?
Suppose I select 20 as pagesize on a list page.
I do editing of a row by opening a new page.
Then I come back after completing editing on the list page. Here the count again becomes default (i.e 10) and not 20. How do I preserve this or make this work? I have items more than 10...
I tried both the options give below but nothing seems to be working... Please provide solution.
.Pageable(pager => pager.PageSizes(new int[] { 5, 10, 15, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 100, 200, 500 }))
.Pageable(pageable => pageable
.Refresh(true) //false also tried..
.PageSizes(new int[] { 5, 10, 15, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 100, 200, 500 })
////.Input(true)
)
I have a grid with data on it. When I want to edit the data, I need to press the edit button and a new edit form will open with the current data from the row.
For the textboxes I use:
@Html.EditorFor(model => model.SubStatus)
Now the issue is the dropDownList. Here is my code. the initial value is always blank?
CSHTML code:
@(Html.Kendo().DropDownListFor(m => m.SubType)
.Name("SubsType")
.DataTextField("SubType1")
.DataValueField("SubType_ID")
.DataSource(source =>
{
source.Custom()
.ServerFiltering(true)
.Type("aspnetmvc-ajax")
.Transport(transport =>
{
transport.Read("GetType", "Welcome");
})
.Schema(schema =>
{
schema.Data("Data")
.Total("Total");
});
})
)
Razor code:
public JsonResult GetSubType([DataSourceRequest] DataSourceRequest dropDownRequest)
{
IList<SubType> myViewModels = new List<SubType>();
foreach (SubType subType in db.ExecuteStoredProcedure<SubType>("proc_getType", null))
{
SubType subtype = new SubType()
{
SubType_ID = subType.SubType_ID,
SubType1 = subType.SubType1
};
myViewModels.Add(subtype);
}
return Json(myViewModels.ToDataSourceResult(dropDownRequest), JsonRequestBehavior.AllowGet);
}
Right now I get the list from the database. when the dropdownlist is pressed. but I want to set the initial value of the list to be the current value. How to do it?
From an example in another thread, I was able to enable dragging from a grid onto a TreeView control.
However, the example just fired an alert with the ID of the object that was dragged. What I need to do is insert the dragged row into the TreeView . I can use the append method to add to the TreeView , but can't work out how to identify the node that the grid record was dragged onto.
My current client code is:-
<div class=
"pull-left"
style=
"margin-right:20px;"
>
@(Html.Kendo().TreeView()
.Name(
"Treeview"
)
.ExpandAll(
true
)
.HtmlAttributes(
new
{ style =
"display: inline-block;"
})
.DataTextField(
"Text"
)
.DataSource(ds=>ds
.Model(m=>m
.Id(
"Id"
)
.HasChildren(
"HasChildren"
)
.Children(
"Items"
)
)
.Read(r => r.Action(
"GetMenuTreeItems"
,
"Menu"
)
)
)
)
</div>
<div class=
"pull-left"
style=
"width:500px;"
>
@(Html.Kendo().Grid<BI_II.Models.SSRS_Report>()
.Name(
"Grid"
)
.Columns(col =>
{
col.Bound(o => o.Name).Title(
"Name"
);
//col.Bound(o => o.ItemID).Title("ItemID");
})
.DataSource(ds => ds
.Ajax()
.Model(m => m.Id(p => p.ItemID))
.PageSize(15)
.Read(rd => rd.Action(
"RD_ReportList"
,
"Menu"
)
)
)
.Pageable()
.Sortable()
.Filterable()
)
</div>
<script>
$(document).ready(
function
() {
var
grid = $(
"#Grid"
).data(
"kendoGrid"
),
treeview = $(
"#Treeview"
).data(
"kendoTreeView"
),
itemUID;
grid.table.kendoDraggable({
cursorOffset: {
top: 5,
left: 5
},
filter:
"tbody > tr"
,
group:
"Grid"
,
hint:
function
(e) {
itemUID = e.attr(kendo.attr(
"uid"
));
return
$(
'<div class="k-grid k-widget"><table><tbody><tr>'
+ e.html() +
'</tr></tbody></table></div>'
);
}
});
treeview.element.kendoDropTarget({
group:
"Grid"
,
drop:
function
(e) {
var
model = grid.dataSource.getByUid(itemUID);
treeview.append({ Text: model.Name, Id: model.ItemID });
itemUID =
null
;
}
});
});
</script>
This currently just appends into the TreeView root node.
Thanks
Is it possible to add a kendo context menu to a TreeView node? I can't seem to find any examples or posts about this.
Thanks
<div id=
"tree"
></div>
<script>
var
flatData = [
{ id: 1, parent:
null
, text:
"Item 1"
},
{ id: 2, parent:
null
, text:
"Item 2"
},
{ id: 3, parent:
null
, text:
"Item 3"
},
{ id: 4, parent:
null
, text:
"Item 4"
},
{ id: 5, parent: 1, text:
"Item 1.1"
},
{ id: 6, parent: 1, text:
"Item 1.2"
},
{ id: 7, parent: 1, text:
"Item 1.3"
},
{ id: 8, parent: 3, text:
"Item 3.1"
},
{ id: 9, parent: 3, text:
"Item 3.2"
},
{ id: 10, parent: 5, text:
"Item 1.1.1"
},
{ id: 11, parent: 5, text:
"Item 1.1.2"
},
{ id: 12, parent: 5, text:
"Item 1.1.3"
}
];
// tree for visualizing data
$(
"#tree"
).kendoTreeView({
dataSource: {
transport: {
read:
function
(options) {
var
id = options.data.id ||
null
;
options.success($.grep(flatData,
function
(x) {
return
x.parent == id;
}));
}
},
schema: {
model: {
id:
"id"
,
hasChildren:
function
(x) {
var
id = x.id;
for
(
var
i = 0; i < flatData.length; i++) {
if
(flatData[i].parent == id) {
return
true
;
}
}
return
false
;
}
}
}
}
})
</script>