I am trying to migrate from HighCharts. One thing it does it auto select the proper amount of labels for the space. See attached. Is there a dynamic way to do something similar. I really like how it breaks date and then time. Where are using heavy one minute data and need to be able to dynamically create the labels.
I see the skip and I see the steps but I really need to be able to have it dynamic.
Hi,
I have a property stakeHolder he is an object type of Developer.
In my grid I want to add a product but the field stakeHolder is editable(false) and i put on it the name I want hard coded.
The problem is if I use stakeHolder.Name then sorting and filtering work good but when i trying to add row then an error occurred " StakeHolder is not defined"
and when I use stakeHolder then everything is working great except for sorting and filtering (as I know filtering/sorting don't work on object)
what can I do?
namespace TaskManagementUI.Models
{
public class Developer
{
public int? ID { get; set; }
[Required(ErrorMessage = "Please enter a name")]
[Display(Name = "Name")]
public string Name { get; set; }
}
@(Html.Kendo().Grid<TaskManagementUI.Models.ProductViewModel>()
.Name("GridProducts")
.Columns(columns =>
{
columns.Bound(c => c.ID).Hidden();
columns.Bound(c => c.Name).Title("Name").Width(200);
columns.Bound(c => c.CreateDate).Title("Creation date").Format("{0: MM/dd/yyyy}").Width(200);
columns.Bound(c=>c.StakeHolder.Name).Title("Creator").Width(200);
columns.Bound(c => c.Description).Title("Description").Width(250);
columns.Command(command => command.Custom("ADDPROJECT").Text("Add Project").Click("addProject")).Title("Add Project").Width(170).HtmlAttributes(new { id = "addProjectButton" });
columns.Command(command => { command.Edit().UpdateText("SAVE"); command.Destroy(); }).Width(250);
})
.Resizable(resize => resize.Columns(true))
.Filterable()
.ToolBar(toolbar =>
{
toolbar.Excel();
toolbar.Create().Text("Add New Product");
})
.Editable(editable => editable.Mode(GridEditMode.InLine).TemplateName(""))
.Excel(excel => excel
.AllPages(true)
.FileName("Products.xlsx")
.Filterable(true)
.ForceProxy(true)
.ProxyURL(Url.Action("FileExportSave", "Home")))
.Pageable(pager => pager
.Refresh(true)
.PageSizes(true)
.PageSizes(new int[] { 6, 15, 20 })
.ButtonCount(5))
.Sortable(sortable =>
{
sortable.SortMode(GridSortMode.MultipleColumn)
.Enabled(true);
})
.Scrollable()
.Events(e=>e.Edit("onProductEdit").Save("onProductSave").Cancel("onProductCancel").DataBound("onDataBoundSavedProducts"))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("errorHandlerProduct"))
.Model(model =>
{
model.Id(item => item.ID);
model.Field(a => a.StakeHolder.Name).DefaultValue(new Developer {ID=52,Name="Uriel Ash"}).Editable(false);
model.Field(a => a.CreateDate).Editable(false);
})
.Read(read => read.Action("GetSavedProducts", "Product"))
.Update(update => update.Action("UpdateProduct", "Product"))
.Destroy(update => update.Action("DeleteProduct", "Product"))
.Create(update => update.Action("CreateProduct", "Product"))))
I am trying to use popup editing with a grid that uses <dynamic> so that I can pass in any model and re-use it.I was able to reproduce my issue by editing the "editing_popup.cshtml" file in the "Kendo.MvcExamples" solution.
Notice that I explicitly told the template "ProductViewModel" to be used. Initally it wasn't using that template, until I moved it into Views\Shared\EditorTemplates. But once I did I got the same error I get from my own project:
Inner Exception: System.InvalidOperationException: The model item passed into the dictionary is of type 'System.Object', but this dictionary requires a model item of type 'Kendo.Mvc.Examples.Models.ProductViewModel'.
I understand WHY, I'm getting this error; the grid basically treats dynamic as an object and that is what is being sent to the viewmodel's template ("ProductViewModel.cshtml"). My question, is is there someway I can get around it, even if I have to pass in a "Type" object.
@(Html.Kendo().Grid<
dynamic
>()
.Name("grid")
.Columns(columns =>
{
columns.Bound("ProductName");
//columns.Bound(p => p.ProductName);
//columns.Bound(p => p.UnitPrice).Width(120);
//columns.Bound(p => p.UnitsInStock).Width(120);
//columns.Bound(p => p.Discontinued).Width(120);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ProductViewModel"))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:550px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
//.Model(model => model.Id(p => p.ProductID))
.Model(model => model.Id("ProductID"))
.Create(update => update.Action("EditingPopup_Create", "Grid"))
.Read(read => read.Action("EditingPopup_Read", "Grid"))
.Update(update => update.Action("EditingPopup_Update", "Grid"))
.Destroy(update => update.Action("EditingPopup_Destroy", "Grid"))
)
)
<
script
type
=
"text/javascript"
>
function error_handler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}
</
script
>
Hi, I've looked through all the similar support questions and answers regarding adding custom fields to the Scheduler Editor. I've downloaded the sample MVC projects (SchedulerCustomViewDemo) and it looks straightforward. I'm missing something basic because I cannot get a custom text field or check box to populate the Model when editing a Scheduled Event or creating a new one. I've added the fields to the database, refreshed the EF6 edmx, and added them to my ViewModel. Since these fields are not populated in the model, they don't get saved to the db on create or edit.
For example i have a textarea field called Summary that I add to the editor by modifying the CustomEditorTemplate.html (I just copied CustomEditorTemplate.html into my project, leaving all fields as they were and adding my own):
<div class="k-edit-label">
@(Html.LabelFor(model => model.Summary))
</div>
<div data-container-for="summary" class="k-edit-field">
@(Html.TextAreaFor(model => model.Summary, new { @class = "k-textbox", data_bind = "value:summary" }))
</div>
for a checkbox I do this:
<div class="k-edit-label">
@(Html.LabelFor(model => model.IsPublished))
</div>
<div data-container-for="isPublished" class="k-edit-field">
<input data-bind="checked: isPublished" data-val="true" id="IsPublished" name="IsPublished" type="checkbox" />
</div>
These new fields show up fine but how do i get these bound to the model so that the call to:
public virtual JsonResult EventSchedule_Create([DataSourceRequest] DataSourceRequest request, EventScheduleViewModel evt)
fills the EventScheduleViewModel properly?
Love the way theScheduler handles the recurring events but stymied on the databinding. The fields that came in the sample project (Title, Start, End, isAllDay etc. bind properly, just not my custom ones...
Thanks.
Hi,
The items in my drop down list are quite long - is there a way of wrapping the text in the options used within the dropdown list so that all the text can be displayed?
If so, is there also a way of indenting the "wrapped" lines (all except the first line)?
I was able to do this in chosen.js, but would I am using the telerik dropdown in this instance due to it's virtualisation capabilities.
Regards,
Sean
I have set up a asp.net MVC web app and in the layout.cshtml I set a mobilelayout and mobiletabstrip. The mobile application's server navigation has been set to false, so that the partial views are obtained from the controller via ajax but they are only gotten once (never refreshed). I have set a couple of events on the view for before show and was thinking that I could go and grab the latest partial view from the controller here.
Is this process a good idea or is there a better way?
I am getting error after i integrated Cube to Pivotgrid in cshtml. however, cube is producing result in excel when i tried. please see attached image for error and excel result generated from cube.
this is the major piece my manager is looking before he approves Telerik license budget and i have only 3 days left to trial version.
please help ASAP.
here is the code.
@(Html.Kendo().PivotConfigurator()
.Name("configurator")
.HtmlAttributes(new { @class = "hidden-on-narrow" })
.Filterable(true)
.Sortable()
.Height(580)
)
@(Html.Kendo().PivotGrid()
.Name("pivotgrid")
.ColumnWidth(200)
.Height(580)
.HtmlAttributes(new { @class = "hidden-on-narrow" })
.Filterable(true)
.Sortable()
.Configurator("#configurator")
.DataSource(dataSource => dataSource.
Xmla()
.Columns(columns =>
{
columns.Add("[Incident].[Status]").Expand(true);
})
.Rows(rows => rows.Add("[Clients].[Id]"))
.Measures(measures => measures.Values(new string[] { "[Measures].[Incident Count]" }))
.Transport(transport => transport
.Connection(connection => connection
.Catalog("NextGenToolIncidentCube")
.Cube("[IncidentAnalyticalCube"))
.Read(read => read
.DataType("text")
.ContentType("text/xml")
.Type(HttpVerbs.Post)
)
)
.Events(e => e.Error("onError"))
)
)
Propagating Page properties of a server generated "Telerik.Windows.Documents.Spreadsheet.Model.Workbook" in a web rendered "Telerik.Web.Spreadsheet.Workbook"
Heads up, this is only for licensed developers who can access the commercial library source code.
At present the documents.spreadsheet workbook has a richer capacity than a web.spreadsheet workbook, especially around page setting. I don't know the roadmap, but expect at some point the web Spreadsheet component will take on a richer feature set that aligns with Excel application.
A Telerik document workbook is converted to it's web version for viewing in a browser by using the FromDocument() method. The features that are lost from the sheets of the original document workbook include:
The listed items are those I wanted to deal with, there may be more but they were of no concern to me at this time.
My project has a Controller/ViewModel
Telerik.Windows.Documents.Spreadsheet.Model.Workbook serverSideModel;
... lots of serverSideModel method calls that create a spreadsheet, including page settings ...
return
View(serverSideModel);
and a View
@model Telerik.Windows.Documents.Spreadsheet.Model.Workbook
...
@(
Html.Kendo().Spreadsheet()
.Name(
"mySpreadsheet"
)
.BindTo(Telerik.Web.Spreadsheet.Workbook.FromDocument(Model))
// <--- convert to web version for viewing in browser
...
)
At this point the Spreadsheet component in the browser will display the spreadsheet that was created server side.
The component has a download button and you can select to download as an .xlsx.
The downloaded Excel will have lost any page properties that were in the original server side Telerik document. This is because the internal javascript for creating the excel download does not render any Excel xml related to page layout.
Why not?
Because web spreadsheet model does not implement page setup features. The FromDocument() conversion works, but all the page properties info in the document spreadsheet is ignored.
How can this be remedied ?
1. Explicitly add the original pageSetup features to the converted object.
2. Modify library source code to render pageSetup features in the Excel xml that becomes the download.
Step 1.
After the web spreadsheet (as a FromDocument) is rendered, the document page properties can be explicitly reattached by code in a kendo.syncReady funtion.
For example, at bottom of the View, add a script block:
<script>
kendo.syncReady(
function
() {
var
book = $(
"#mySpreadsheet"
).data(
"kendoSpreadsheet"
);
@
for
(
var
index=0; index < Model.Sheets.Count; index++)
{
var
sheet = Model.Worksheets[index];
var
pageSetup = sheet.WorksheetPageSetup;
var
left = (pageSetup.Margins.Left > 4) ? UnitHelper.DipToInch(UnitHelper.PointToDip(pageSetup.Margins.Left)) : pageSetup.Margins.Left;
var
right = (pageSetup.Margins.Right > 4) ? UnitHelper.DipToInch(UnitHelper.PointToDip(pageSetup.Margins.Right)) : pageSetup.Margins.Right;
var
top = (pageSetup.Margins.Top > 4) ? UnitHelper.DipToInch(UnitHelper.PointToDip(pageSetup.Margins.Top)) : pageSetup.Margins.Top;
var
bottom = (pageSetup.Margins.Bottom > 4) ? UnitHelper.DipToInch(UnitHelper.PointToDip(pageSetup.Margins.Bottom)) : pageSetup.Margins.Bottom;
var
header = (pageSetup.Margins.Header > 4) ? UnitHelper.DipToInch(UnitHelper.PointToDip(pageSetup.Margins.Header)) : pageSetup.Margins.Header;
var
footer = (pageSetup.Margins.Footer > 4) ? UnitHelper.DipToInch(UnitHelper.PointToDip(pageSetup.Margins.Footer)) : pageSetup.Margins.Footer;
var
orientation = (pageSetup.PageOrientation == Telerik.Windows.Documents.Model.PageOrientation.Landscape) ?
"Landscape"
:
"Portrait"
;
var
scale = pageSetup.ScaleFactor.Width * 100;@* convert from telerik scaleFactor to excel scale % *@
<text>
book.sheets()[@index].showGridLines(
false
);
book.sheets()[@index].pageSetup = {
viewTags:
'view="pageBreakPreview" zoomScaleNormal="85" zoomScaleSheetLayoutView="100"'
,
// I know the innards of Excel xml enough to to this. I did not want to deal making changes in the library source that handled view, zoomScalNormal and zoomScaleSheetLayoutView as actual properties
margins: {
left: @left,
right: @right,
top: @top,
bottom: @bottom,
header: @header,
footer: @footer},
orientation:
"@(orientation.ToLower())"
,
scale: @scale,
headerFooterSettings: {
header: {
leftSection: {
text:
"@pageSetup.HeaderFooterSettings.Header.LeftSection.Text"
},
centerSection: {
text:
"@pageSetup.HeaderFooterSettings.Header.CenterSection.Text"
},
rightSection: {
text:
"@pageSetup.HeaderFooterSettings.Header.RightSection.Text"
}
},
footer: {
leftSection: {
text:
"@pageSetup.HeaderFooterSettings.Footer.LeftSection.Text"
},
centerSection: {
text:
"@pageSetup.HeaderFooterSettings.Footer.CenterSection.Text"
},
rightSection: {
text:
"@pageSetup.HeaderFooterSettings.Footer.RightSection.Text"
}
}
}
};
</text>
}
@*
replace standard download button response of a Export... dialog
with
a direct download as Excel
*@
$(
"#mySpreadsheet .k-i-download"
)
.parent(
".k-button"
)
.unbind()
.on(
"click"
,
function
(e) {
$(
"#mySpreadsheet"
).data(
"kendoSpreadsheet"
).saveAsExcel();
return
false
;
});
});
</script>
Step 2. Modify kendo.all.js
This is for licensed developers only.
Patch your licensed copy of the commercial library source code (v 2017.3.1026) with the attached patch file.
The view must include the modified library code that has been copied into your asp-net mvc project, and can not use the minified cdn version. The original licensed kendo-ui complete library source code can be downloaded from your account login.
Myview.cshtml
...
<script src=
"~/Scripts/kendo/2017.3.1026/js/kendo.all.js"
></script>
// modified version contains new magic
...
V
Now when you download your richly featured server side generated spreadsheet from the view it will still contain those rich features.