or
1.
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<
int
?>" %>
2.
<%= this.Html.Kendo().DropDownList().DataSource(ds => ds.Read(read => read.Action("GetListPort","AjaxCombo")))
3.
.Name(this.ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))
4.
.HtmlAttributes(new { style = "width:99%;" })
5.
%>
1.
function
onDropDownDataBinding(e) {
2.
var
val1 = $(
'#First'
).data(
'tDropDownList'
).value();
3.
e.data = $.extend({}, e.data, {parameter: val1});
4.
}
@(Html.Kendo().Grid((IEnumerable<
Catheter
>)ViewData["catheters"])
.Name("CatheterGrid")
.Columns(columns =>
{
columns.Bound(e => e.CatheterType.Name).Title("Type");
columns.Bound(e => e.EffectiveDate).Title("Placed On").Format("{0:d}");
columns.Bound(e => e.DiscontinuedOn).Title("Discontinued On");
columns.Bound(e => e.Manufacturer.Name).Title("Manufacturer");
columns.Bound(e => e.ClinicianDisplayName).Title("Clinician");
columns.Bound(e => e.Id).Hidden();
columns.Bound(e => e.Id).ClientTemplate(
"<
a
href
=
'" + Url.Action("EditCatheter", Controllers.Patient) + "/#= Id #'
" + "
class
=
'btn btn-sm'
>Edit</
a
>"
).Width(80).Title("");
})
.Pageable(pageable => pageable
.PageSizes(true).PageSizes(new int[] { 20, 50, 100 })
.ButtonCount(5))
.Sortable()
.Filterable()
.Scrollable()
.ClientDetailTemplateId("template")
.ToolBar(toolbar =>
{
toolbar.Template(@<
text
>
<
div
style
=
"float:right"
>
<
a
href
=
'@Url.Action("EditCatheter", Controllers.Patient)/0'
class
=
'btn btn-sm'
>New</
a
>
</
div
>
</
text
>);
})
)
Controller code:
public ActionResult PatientMedInfo(long id)
{
IContextManager contextManager = ManagerConfig.GetManagerForUser(Session[SessionItems.AuthenticatedUser] as DHS.Entities.IDHSPrincipal);
IWorkContext workContext = contextManager.Begin();
DHS.Entities.Patient patient = workContext.GetPatientManager().GetById(id);
ICollection<
DHS.Entities.PatientCatheter
> catheterlog = workContext.GetPatientManager().FindCatheters(patient);
IEnumerable<
Catheter
> cats = catheterlog.Select(cat => new Catheter
{
Id = cat.Id,
CatheterType = cat.CatheterType,
EffectiveDate = cat.EffectiveDate,
DiscontinuedOn = cat.DiscontinuedOn,
Manufacturer = cat.Manufacturer,
Clinician = cat.Clinician
}).OrderBy(x => x.EffectiveDate);
ViewData["catheters"] = cats;
return View(Views.EmployeeMedInfo, CPR.WebPortal.Models.PatientMedInfo.Populate(workContext, workContext.GetPatientManager().GetById(id)));
}
Razor page:
@model PatientMedInfo
@(Html.Kendo().Grid((IEnumerable<
Catheter
>)ViewData["catheters"])
.Name("CatheterGrid")
.Columns(columns =>
{
columns.Bound(e => e.CatheterType.Name).Title("Type");
columns.Bound(e => e.EffectiveDate).Title("Placed On").Format("{0:d}");
columns.Bound(e => e.DiscontinuedOn).Title("Discontinued On");
columns.Bound(e => e.Manufacturer.Name).Title("Manufacturer");
columns.Bound(e => e.ClinicianDisplayName).Title("Clinician");
columns.Bound(e => e.Id).Hidden();
columns.Bound(e => e.Id).ClientTemplate(
"<
a
href
=
'" + Url.Action("EditCatheter", Controllers.Patient) + "/#= Id #'
" + "
class
=
'btn btn-sm'
>Edit</
a
>"
).Width(80).Title("");
})
.Pageable(pageable => pageable
.PageSizes(true).PageSizes(new int[] { 20, 50, 100 })
.ButtonCount(5))
.Sortable()
.Filterable()
.Scrollable()
.ClientDetailTemplateId("template")
.ToolBar(toolbar =>
{
toolbar.Template(@<
text
>
<
div
style
=
"float:right"
>
<
a
href
=
'@Url.Action("EditCatheter", Controllers.Patient)/0'
class
=
'btn btn-sm'
>New</
a
>
</
div
>
</
text
>);
})
public
int
ID {
get
;
set
; }
public
string
NAME {
get
;
set
; }
public
string
DESCRIPTION {
get
;
set
; }
public
virtual
ICollection<OBJECT_ACCESS_T006> OBJECT_ACCESS_T006 {
get
;
set
; }
public
virtual
ICollection<ROLE_FUNCTION_T010> ROLE_FUNCTION_T010 {
get
;
set
; }
public
virtual
ICollection<USER_ROLE_T007> USER_ROLE_T007 {
get
;
set
; }
@(Html.Kendo().Grid<ROLE_FUNCTION_T010>(Model.ROLE_FUNCTION_T010)
.Name(
"Grid"
)
.ToolBar(commands => { commands.Create().Text(AcsViewRes.BtnNewFunct); })
.Columns(columns =>
{
columns.Bound(c => c.ID).Visible(
false
);
columns.ForeignKey(
"FUNCTION_T008"
, ViewBag.FunctionsList).ClientTemplate(
"#: data.FUNCTION_T008 ? FUNCTION_T008.NAME : '"
+
"empty"
+
"'#"
);
columns.Command(command => { command.Destroy().Text(AcsViewRes.SaveDestroy); command.Edit(); });
})
.Pageable()
.Sortable()
.Filterable()
.Editable(mode => mode.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.ServerOperation(
false
)
.Model(model =>
{
model.Id(v => v.ID);
model.Field(v => v.FUNCTION_T008).DefaultValue(ViewBag.DefaultFunction);
})
.Update(r => r.Action(
"LinkFunction"
,
"Function"
))
.Create(r => r.Action(
"LinkFunction"
,
"Function"
))
.Destroy(r => r.Action(
"RemoveFunction"
,
"Function"
))
)
)
[Key]
public
int
ID;
[UIHint(
"FunctionDropDownTemplate"
)]
public
FUNCTION_T008 FUNCTION_T008;
@model FUNCTION_T008
@(
Html.DropDownList(
string
.Empty, ViewBag.FunctionsList
as
SelectList)
)
Hi,
I have created a KendoDiagram using the code below. The data returned is a bit longer than below but esentially it returns 30 items at 3 levels of hierarchy. Everything works great if I have the Stroke Width set to 0. However
if the width is set to >0 the connectors look really untidy as can be seen in the attachment.
Is it possible to change the connector so that instead of going into the top centre of the shape they go into the centre left of the shape?
Thanks
Controller
public JsonResult GetDiagramData()
{
var coo = new ManagementStructure() { Name = "AS", JobRole = "Chief" };
var aj = new ManagementStructure { Name = "AJ", JobRole = "Regional" };
var cd = new ManagementStructure { Name = "CD", JobRole = "Regional" };
var kf = new ManagementStructure { Name = "KF", JobRole = "Regional" };
var mc = new ManagementStructure { Name = "MC", JobRole = "Regional" };
var sm = new ManagementStructure { Name = "SM", JobRole = "Regional" };
var te = new ManagementStructure { Name = "TE", JobRole = "Regional" };
coo.Items.Add(aj);
coo.Items.Add(cd);
aj.Items.Add(new ManagementStructure { Name = "KM", JobRole = "Area" });
aj.Items.Add(new ManagementStructure { Name = "LW", JobRole = "Area" });
cd.Items.Add(new ManagementStructure { Name = "AG", JobRole = "Area" });
cd.Items.Add(new ManagementStructure { Name = "DE", JobRole = "Area" });
cd.Items.Add(new ManagementStructure { Name = "DT", JobRole = "Area" });
cd.Items.Add(new ManagementStructure { Name = "FT", JobRole = "Area" });
cd.Items.Add(new ManagementStructure { Name = "JD", JobRole = "Area" });
cd.Items.Add(new ManagementStructure { Name = "NM", JobRole = "Area" });
cd.Items.Add(new ManagementStructure { Name = "PF", JobRole = "Area" });
cd.Items.Add(new ManagementStructure { Name = "RW", JobRole = "Area" });
cd.Items.Add(new ManagementStructure { Name = "SF", JobRole = "Area" });
kf.Items.Add(new ManagementStructure { Name = "AC", JobRole = "Area" });
kf.Items.Add(new ManagementStructure { Name = "EW", JobRole = "Area" });
kf.Items.Add(new ManagementStructure { Name = "HS", JobRole = "Area" });
var managers = new List<ManagementStructure> { coo };
return Json(managers, JsonRequestBehavior.AllowGet);
}
<script>
function visualTemplate(options) {
var dataviz = kendo.dataviz;
var g =
new
dataviz.diagram.Group({
autoSize:
true
});
var dataItem = options.dataItem;
g.append(
new
dataviz.diagram.Rectangle({
width: 150,
height: 50,
stroke: {
width: 0
},
background:
"#1696d3"
}));
g.append(
new
dataviz.diagram.TextBlock({
text: dataItem.Name,
x: 5,
y: 10,
color:
"#fff"
}));
g.append(
new
dataviz.diagram.TextBlock({
text: dataItem.JobRole,
x: 5,
y: 30,
color:
"#fff"
}));
return
g;
}
</script>
<h2>Test Hierarchy</h2>
<div id=
"canvas"
class
=
"diagram-wrapper"
style=
"margin: auto;"
>
@(Html.Kendo().Diagram()
.Name(
"diagram"
)
.DataSource(dataSource => dataSource
.Read(read => read.Action(
"GetDiagramData"
,
"Home"
)).Model(m => m.Children(
"Items"
))
)
.Layout(l => l.Type(DiagramLayoutType.Tree))
.Layout(l => l.Subtype(DiagramLayoutSubtype.Tipover))
.ShapeDefaults(sd => sd.Visual(
"visualTemplate"
).Stroke(s => s.DashType(
"dashDot"
)).Editable(
false
).Rotatable(
false
).Resizable(
false
)).Draggable(
false
)
.ConnectionDefaults(cd => cd.Stroke(s => s.Color(
"#979797"
).Width(0)))
)
</div>
<script>
$(function () {
// Notice that the Name() of the diagram is used to get its client-side instance
var diagram = $(
"#diagram"
).data(
"kendoDiagram"
);
diagram.zoom(0.75);
});
</script>