Hi Team,
I have a requirement to show the menu items as a Treeview from the database. I am able to bring the items to the without any issues. The problem I am facing here is, it's not auto-expanding by default even after the Expandall(true) function in component. Even I tried to achieve this functionality using Javascript. But, it is not working since Javascript is executing before the . My code is,
@(Html.Kendo().TreeView()
.Name("treeview")
.DataTextField("Name")
.ExpandAll(true) //This expandall is not working here.
.DataSource(dataSource => dataSource
.Read(read => read
.Action("ReadMenuItem", "GroupWellness")
)
)
.Events(events=> events
.Select("onSelect")
)
)
Java script function //Below function is executing before the data loads in the above tree. So, it is not expanding.
$(document).ready(function () {
$("#treeview").kendoTreeView({
dataBound: function (e) {
var treeView = $('#treeview').data('kendoTreeView');
treeView.expand(".k-item");
}
});
});
After all this methods is not working, I thought of achieving the same treeview using kendo UI JQuery. But, there I am it is throwing 404 error while reading my URL. JQuery part is,
var dataSource = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: '/GroupWellness/ReadMenuItem', //I am facing 404 error here while reading my data source.
dataType: "jsonp"
}
}
});
$("#treeview").kendoTreeView({
dataSource: dataSource
});
Please help me to achieve Expand all functionality by default based on my requirement.
This works:
@(Html.Kendo().Scheduler<Web.CoreFull.Models.Booking.m_Kalendar>()
.Name("calendarDag")
.Date(DateTime.Today)
.Editable(false)
.Height(450)
.Width(700)
.ShowWorkHours(true)
.Views(views =>
{
views.DayView(dayview => dayview.Selected(true));
views.WorkWeekView();
views.WeekView();
views.MonthView();
views.AgendaView();
})
.DataSource(d => d
.Model(m =>
{
m.Id(f => f.ID);
})
.ServerOperation(true)
.Read(read => read.Action("HentKalendar", "Medarbejder").Data("getAdditionalData"))
)
.Deferred()
)
but this does not :
<kendo-scheduler name="calendarDag" date="@DateTime.Today" height="450" width="700" show-work-hours="true" deferred="true">
<views>
<view type="day" selected="true"></view>
<view type="workWeek"></view>
<view type="week"></view>
<view type="month"></view>
<view type="agenda"></view>
</views>
<scheduler-datasource server-operation="true" type="DataSourceTagHelperType.Ajax">
<transport>
<read url="/Medarbejder/HentKalendar" data="getAdditionalData" />
</transport>
<schema>
<scheduler-model id="ID" />
</schema>
</scheduler-datasource>
<editable enabled="false" />
</kendo-scheduler>
on the first treelist load, the component works as expected. however when updating the datasource "treeList.setDataSource (dsnew);" the update or insert of a new item in the treeview does not work. the popup opens, and I can fill in the fields normally, but after clicking the Update button, the popup closes as if I had sent the form information to my route, but it does not send anything. just close the popup, has anyone had this problem, or do you have any idea what might be happening?
I have this definition for my treeview:
<
script
id
=
"treeview-template"
type
=
"text/kendo-ui-template"
>
#: item.text #
# if (!item.items) { #
<
a
class
=
'delete-link'
href
=
'\#'
></
a
>
# } #
</
script
>
<
div
class
=
"demo-section k-content"
>
<
h4
>Recursive data</
h4
>
@(
Html.Kendo().TreeView()
.TemplateId("treeview-template")
.Name("treeview-right")
.BindTo((IEnumerable<
Item
>)ViewBag.recursive, (NavigationBindingFactory<
TreeViewItem
> mappings) =>
{
mappings.For<
Item
>(binding => binding.ItemDataBound((item, group) =>
{
item.Text = group.Name;
item.ImageUrl = group.ImageUrl;
})
.Children(group => group.Items));
})
)
</
div
>
I'm generally struggling with formatting. How do I vertically center the item.Text so that the Text is not posted at the top of the image? The image url is quite tall and it doesn't look right. Also, how do I ensure that the text is not cut off when it is long. I attached a picture.
I've been a developer for a long time. I've also been avoiding JavaScript for a long time. If I'm going to learn ASP.NET Core and use Telerik controls, how much JavaScript must I learn?
When I open the Kendo.Mvc.Examples and look in the wwwroot.lib Folder, I get quite overwhelmed with the sheer number of .js files there.
I have created a web site utilizing Razor pages and that was quite intuitive. I can use C# syntax on the pages and the MVC methodologies are easy to follow. But now, I am attempting to use the Telerik Kendo TreeView and I am bogged down into trying to figure out what script(s) I'm missing in order to get this to work right.
So, does this mean there is no way I'm going to avoid JavaScript in order to use Telerik Kendo controls. If not, I need some directions where to start. There is way to much in the environment to take it all in at once. Do I need to starting drinking JavaScript from a fire hose in order to get this working?
Thanks in advance for your help,
Joel
Hi,
I'm following the steps found here : http://docs.telerik.com/kendo-ui/aspnet-mvc/mvc-core/getting-started#prerequisites
At step 6 it says "Copy the js and styles folders from the telerik.ui.for.aspnetmvc archive to wwwroot\lib\kendo-ui"
But I could'nt find where these files are located. WHere is this archive folder located?
I can't find any in C:\Program Files (x86)\Telerik\
Anything I missed?
I have not seen an example on how to bind the TreeView to an object. I have a simple class that looks like this:
class Group
{
int id,
string name,
List<
Group
> children
}
Can you provide me with an example?
Thanks in advance for your help, Joel
I am having problem with pdf export with header template, we use letter size but however papersize "letter" in pdf export doesn't include all fields and so smaller in size
going up on paper size does help like using A1 is perfect but we use letter for everything,
here below is what I have...
<script type="x/kendo-template" id="Pdf-template">
<div class="page-template">
<div class="header">
<div style="border:1px solid black;width:35%;float:left;padding:10px;">
<div>Scenario: <b>@ViewBag.Rule</b></div>
<div>Scenario\#: <b>3</b></div>
<div>
<div style="float:left">
Run Date: <b>@DateTime.Now.ToShortDateString() </b>
</div>
<div style="float:right;padding-left:20px;">
Rule Version: <b>@ViewBag.RuleVersion</b>
</div>
</div>
<br />
<div>Data Ingestion: <b>@ViewBag.DataIngestion.ToShortDateString()</b></div>
</div>
<div style="border:1px solid black;float:left;width:20%;padding:10px;margin-left: 15%;">
<div> Total Patient Population: <b id="TotalPatients1">@ViewBag.TotalPatients</b></div>
<div>
<div style="float:left"> Matching Patient Population: <b id="MatchingPatients1">@ViewBag.MatchingPatients</b> </div> <div style="float:right;margin-right:5%;"> <b id="MatchingPercentage1">@((((double)ViewBag.MatchingPatients / (double)ViewBag.TotalPatients)).ToString("P2"))</b></div>
</div>
</div>
</div>
</div>
</script>
.Pdf(pdf => pdf
.AvoidLinks()
.AllPages(true)
.PaperSize("Letter")
.Margin("5.5cm", "1cm", "1cm", "1cm")
.Landscape()
.RepeatHeaders(false)
.TemplateId("Pdf-template")
.FileName("filename.pdf")
.ProxyURL(Url.Action("Pdf_Export_Save", "Grid"))
)