I am having difficulties controlling the size of Donut component in Kendo-UI (Here).
Here is my code:
<div class="analytic-block">
<h4>Sources</h4>
<span class="text-muted">Recent activity</span>
#(Html.Kendo()
.Chart<ActivityModel>()
.Name("donutChart")
.Legend(legend => legend.Position(ChartLegendPosition.Bottom))
.DataSource(ds => ds
.Read(read => read.Action("Sources", "Statistics"))
.Group(group => group.Add(item => item.SliceLayer))
.Sort(sort => sort.Add(item => Guid.NewGuid().ToString())))
.Series(series =>
{
series.Donut(model => model.Share, model => model.Label, model => model.Color, model => true, mode => true)
.Border(b =>
{
b.Color("white");
b.Width(2);
})
.StartAngle(0)
.Labels(labels => labels.Visible(true)
.Position(ChartPieLabelsPosition.OutsideEnd)
.Template(" #=dataItem.Label #")//.Template("<span style=\"color:#=dataItem.Color#;\"> #=dataItem.Label # </span>")
.Background("transparent")
.Border(1, "grey", ChartDashType.Solid)
.Padding(2))
.Padding(120);
})
.Tooltip(tooltip => tooltip
.Template(" #=dataItem.Label # ")
.Visible(true)))
</div>
and here is the result it produces:
I am able to adjust the size of the chart by changing .Padding(120) but this leaves two large spaces just above and below the chart. I could not find any reference on how to manipulate the size of the area to draw this chart on.
If anyone could suggest a solution, that would be greatly appreciated.
I found my mistake. The div-container must be related to the chart ID:
<div id="donutChart" class="analytic-block">
#(Html.Kendo()
.Chart<ActivityModel>()
.Name("donutChart")
</div>
You should simply set width/height to the div chart element that you turn into a chart.
Here is an example.
Related
I've just started using Telerik, to speed up some of my development, however I'm stuck trying to bring up a normal MVC Details page from a Grid Component.
All I want, is a select button to send the user to something like /Person/Details/5
The reason why I want a separate page (rather than a popup) is that some of the data relationships are complex, and it's better experience that these are displayed in it's own page, rather than a popup.
My model has a few objects, that's why you see the p.person.Title type setup below.
#(Html.Kendo().Grid(Model)
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.person.Title).Width(100);
columns.Bound(p => p.person.Firstname);
columns.Bound(p => p.person.Firstname);
columns.Bound(p => p.person.Surname);
columns.Bound(p => p.person.ABN).Width(210);
columns.Bound(p => p.person.PracticeCode);
columns.Bound(p => p.currentform);
columns.Command(command => { command.Edit(); });
columns.Command(command => { command.Destroy(); });
columns.Command(command => { command.Select(); });
})
.Sortable()
.ToolBar(commands => commands.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.DataSource(dataSource => dataSource
.Server()
.Model(model => model.Id(p => p.person.personkey))
.Create(create => create.Action("Create", "Person"))
.Read(read => read.Action("Details", "Person" ))
.Update(update => update.Action("Update", "Person"))
.Destroy(destroy => destroy.Action("Destroy", "Person"))
The grid itself is working fine, however, when someone selects the "Select" button, I want them to go to the /Person/Details/{id} page. Telerik is almost doing it right, it's sending the user to
/Person/Details?grid-mode=select&person.personkey=11 (I actually want /Person/Details/11 )
So, I noticed that the "Read" method has a few different signatures to enable route values, but I just can't seem to rig it up to get the right route values.
I've tried....
.Read(read => read.Action("Details", "Practitioner", p => p.practitioner.drkey ))
and combinations of, but I just can't seem to get the right route value in there.
How do I correctly specify the right route values ?
I ended by solving this with a Template.
Not exactly the outcome I was looking for, but close enough at this stage.
columns.Bound(p => p.person.pkey).Template(#<text>
#Html.ActionLink("Details" , "Details" , new { id = #item.person.pkey })
</text>);
The trick is that a traditional MVC razor action is placed inside a Telerik Template.
It also removed the need for the .Select and .Read rows.
Here is my issue :
I have two project with similar code to display a dropdownlist inside a kendogrid. In the first project all works fine, in the second project i got a textbox dipslaying instead of a dropdown. I've searched around telerik but nothing could resolve my issue. I think something is missing in my project to make this work fine. Or something is blocking it ! But can't find .. Hope you could help me !
Here is my grid :
#(Html.Kendo().Grid<DisplayUniteMultiple>()
.Name("GridDisplayUniteMultiple")
.ToolBar(t => t.Create().Text("Ajouter un couple Valeur/ Unite"))
.Columns(columns =>
{
columns.Bound(c => c.id).Hidden(true);
columns.Bound(c => c.Valeur);
columns.ForeignKey(c => c.Unite, unitesDeConversion, "Value", "Text").Title("Unité").Width(200);
})
.Editable(editable => editable.Mode(GridEditMode.InCell).Enabled(true))
.Events(e => e.Edit("onGridChange"))
.DataSource(datasource => datasource
.Ajax()
.Update(builder => builder.Url(""))
.PageSize(50)
.Batch(false)
.Model(model =>
{
model.Id(uniteMultiple => uniteMultiple.id);
model.Field(uniteMultiple => uniteMultiple.Valeur);
model.Field(uniteMultiple => uniteMultiple.Unite);
})
.ServerOperation(true)
))
You might missing to add the editor template in your project.
Create a new folder named EditorTemplates in ../Views/Shared/ directory, if there is not already. Then create new file named GridForeignKey.cshtml in that folder and copy below code into it, save and try again.
#model object
#(
Html.Kendo().DropDownListFor(m => m)
.BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
)
I am trying to take off the pagination from a couple of Telerik MVC Grids that have a large amount of data loaded into them (upwards of 5000, probably more once they hit production). With our smaller grids, I would just take off the Pageable property(see code below) and the scrolling functionality just works.
With the larger grids I get a JSON error saying that the length of the string exceeds the value set on the maxJsonLength property. I updated the webconfig to be set to the max value as per this links suggestion but it still gave me the same error.
The version of Telerik that I am using is plain Telerik(not Kendo) and is the MVC version (main UI DLL is Telerik.Web.MVC, version 2012.2.801.340).
All documentation that I have found either points me to the new version of Kendo or a RadGrid, which is not included/supported in my version.
Is there a way to acheive this, either by loading it all at once like this does here, or creating a dynamically loading grid using the Telerik version I have, or am I out of luck? I am also open to suggestions for another way to achieve this, but the results have to be in a Grid of some sort.
Below is the basic code for what I have for all grids. The larger grids that I am having issues with have more columns than this one which help account for the JSON error.
#(Html.Telerik().Grid<ApportionmentCode>()
.DataBinding(dataBinding => dataBinding.Ajax().Select("AjaxGetAppCodes", "AppCode"))
.Name("Grid")
.Columns(columns =>
{
columns.Bound(o => o.Id)
.Title("ID")
.Width(50)
.HtmlAttributes(new { #class = "text-center" })
.Hidden();
columns.Bound(o => o.Code)
.Title("AppCode")
.Width(90)
.HtmlAttributes(new { #class = "text-center" });
columns.Bound(o => o.Description)
.Title("Description")
.HtmlAttributes(new { style = "min-width: 200px;" })
.ClientTemplate("<span class=\"clip tooltip\"><#= Description #></span>");
columns.Command(commands =>
{
commands.Custom("edit")
.Text("Edit")
.ButtonType(GridButtonType.Image)
.Action("Edit", "AppCode")
.ImageHtmlAttributes(new { #class = "t-edit", title = "Edit" })
.DataRouteValues(route => route.Add(o => o.Id));
})
.Width(78)
.HtmlAttributes(new { #class = "nowrap" })
.IncludeInContextMenu(false);
})
.ToolBar(commands => commands.Custom()
.Text("Add")
.Action("Create", "AppCode", Request.GetRouteValues())
.ButtonType(GridButtonType.ImageAndText)
.ImageHtmlAttributes(new { #class = "t-add" })
.HtmlAttributes(new { #class = "addButton" }))
.Filterable()
.ClientEvents(events =>
{
events.OnDataBound("onDataBound");
events.OnComplete("AddGridFilter");
events.OnLoad("OnGridLoad");
})
.ColumnContextMenu()
.Sortable()
.Pageable(paging => paging.PageSize(20).Style(GridPagerStyles.NextPreviousAndNumeric).Position(GridPagerPosition.Bottom)) //When removed, this is the line that causes the JSON error
.Resizable(resizing => resizing.Columns(true))
.Scrollable(a => a.Height("auto")))
Thanks in advance
In the controller, I assume you have something like:
DataSourceResult result = model.ToDataSourceResult(request);
return Json(result, JsonRequestBehavior.AllowGet);
If you use the Newtonsoft package and change it to this, this should allow a larger amount of data through.
DataSourceResult result = model.ToDataSourceResult(request);
var json = Newtonsoft.Json.JsonConvert.SerializeObject(result);
return Content(json, "text/json");
EDIT:
If the problem is too much data and you don't want paging, how about trying virtualization by adding:
.Scrollable(scrollable => scrollable.Virtual(true))
You'll still need a page size, an example is here: http://demos.telerik.com/aspnet-mvc/grid/virtualization-remote-data
Good day,
I have a list which is having elements, based on that list the grid will be obtained. I've a requirement of changing the order of elements in that list. So when i change the order of list and run the report, the grid is obtaining with the order of before list but not with the newly changed order.
Here is the list:
#Html.ListBox("multiselect_to", Model.AvailableColumnsList, new { #class = "form-control bdr_rad_3", size = "8", multiple = "multiple" })
Here is the Kendo Grid code:
#(Html.Kendo().Grid<Entrada.CustomerPortal.UI.Models.JobReport>()
.Name("JobReportGrid")
.ToolBar(tools => tools.Pdf())
.Pdf(pdf => pdf
.AllPages()
.FileName("Kendo UI Grid Export.pdf")
.ProxyURL(Url.Action("Excel_Export_Save", "JobReports")))
.ToolBar(tools => tools.Excel())
.Excel(excel => excel
.AllPages(true)
.FileName("Kendo UI Grid Export.xlsx")
.ProxyURL(Url.Action("Excel_Export_Save", "JobReports")))
.ColumnMenu()
.Columns(columns =>
{
columns.Bound(p => p.JobNumber)//.Title("Job <br/> Number")
.Width(colWidth["Job Number"])
.ClientTemplate("<a class='jobReportGridJN' jnum='#=JobNumber#'>" + "#=JobNumber#" + "</a>"+
#" #if(STAT== true) {# <span><img src='" + Url.Content("~/Images/stat-icon.png") + "'> </span>#}#");
columns.Bound(p => p.DictatorID);
columns.Bound(p => p.JobType);//.Title("Job <br/> Type");
columns.Bound(p => p.DeviceGenerated)//.Title("Device <br/> Generated")
.Width(colWidth["Device Generated"]);
columns.Bound(p => p.AppointmentDate)//.Title("Appointment <br/> Date")
.Width(colWidth["Appointment Date"])
.Format(colFormat["Appointment Date"]);
columns.Bound(p => p.InProcess)//.Title("In <br/> Process")
.Width(colWidth["In Process"])
.Format(colFormat["In Process"]);
columns.Bound(p => p.EditingComplete)
.Width(colWidth["Editing Complete"])
.Format(colFormat["Editing Complete"]);
columns.Bound(p => p.JobStatus);//.Title("Job <br/> Status");
columns.Bound(p => p.MRN);
columns.Bound(p => p.Patient);
})
.Groupable()
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Single)
.Type(GridSelectionType.Row))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read
.Action("JobSearchPaginationGrid", "JobReports")
.Data("residentsReadData"))
.Events(events => events.Error("error_handler"))
.PageSize((int)ViewData["PageSize"])
.Group(group => group.Add<string>((string)TempData["GridGroupBy"]))
.ServerOperation(true)
)
.Pageable(pager => pager.Messages(Info => Info.Empty("No Results Found")))
.Sortable()
.Resizable(resize => resize.Columns(true))
.Scrollable().Selectable(s => s.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
)
Image for Kendo UI grid columns before changing the order of list of elements
Image for List after changing the order
So, Can i reorder the Grid columns based on that list elements after changing the order of list?
It would be more helpful, if anyone answer quickly.
Thanks,
Sai
Haven't tried this myself but after a minute of googling there seems to be 2 steps involved in the process of achieving this if I understand it correctly:
First you have to set reorderable to true for the grid
.Reorderable(reorder => reorder.Columns(true))
http://demos.telerik.com/aspnet-mvc/grid/column-reordering
Reordering the columns programatically at list change event:
var grid = $("#JobReportGrid").data("kendoGrid");
grid.reorderColumn(newOrderIndex, grid.columns[currentIndex]);
http://docs.telerik.com/KENDO-UI/api/javascript/ui/grid#methods-reorderColumn
I have a telerik grid which uses inline editing.
Something I found it does which is quite annoying is when I start editing a row some of the columns resizes, the delete button dissapears and a 'cancel' button appears next to the edit button in the edit buttons column.
This is what it looks like:
This is how the grid is being created:
<%
Html.Telerik().Grid<myapp.Date>("dates")
.Name("MyGrid")
.Pageable()
.Sortable()
.Filterable()
.Groupable()
.DataKeys(keys => keys.Add(c => c.id))
.DataBinding(dataBinding =>
{
dataBinding.Ajax()
.Select("_SelectAjaxEditing", "Dates")
.Insert("_InsertAjaxEditing", "Dates")
.Update("_SaveAjaxEditing", "Dates")
.Delete("_DeleteAjaxEditing", "Dates");
})
.ToolBar(commands => commands.Insert())
.Columns(columns =>
{
columns.Bound(o => o.name);
columns.Bound(o => o.date1);
columns.Command(commands => commands.Edit());
columns.Command(commands=> commands.Delete());
})
.Editable(editing => editing.Mode(GridEditMode.InLine))
.Render();
%>
It is the normal way how Telerik Grid behaves.
You can make those columns hidden, if don't need them.
Or may be you can try to use InCell edit mode.