I'm wondering if there is any support for styling a Dialog in the .net core version of telerik that I am trialling right now? The documentation lists the ability to add a cssclass but that is only for the button, not for the entire dialog itself, I need to replicate previous functionality we were using where a cssclass is applied to the object in javascript when the dialog has been open for a certain amount of time.
This was the only documentation I could find and it's only able to add a class to the button, not the entire dialog.
Configuration, methods and events of Kendo UI Dialog - Kendo UI for jQuery (telerik.com)
I have a grid defined as such:
@(Html.Kendo().Grid<AuditViewModel>()
.Name("AuditLogGrid")
.Columns(columns =>
{
columns.Bound(c => c.Id).Hidden(true);
columns.Bound(c => c.UserId).HtmlAttributes(new { @class = "k-text-right", style = "vertical-align: text-top" });
columns.Bound(c => c.TableName).HtmlAttributes(new { @class = "k-text-right", style = "vertical-align: text-top" });
columns.Bound(c => c.AuditType).HtmlAttributes(new { @class = "k-text-right", style = "vertical-align: text-top" });
columns.Bound(c => c.KeyValuesValue).Encoded(false).HtmlAttributes(new { @class = "k-text-right", style = "vertical-align: text-top" });
columns.Bound(c => c.OldValuesValue).Encoded(false).HtmlAttributes(new { @class = "k-text-right", style = "vertical-align: text-top" });
columns.Bound(c => c.NewValuesValue).Encoded(false).HtmlAttributes(new { @class = "k-text-right", style = "vertical-align: text-top" });
columns.Bound(c => c.ChangedColumnsValue).HtmlAttributes(new { @class = "k-text-right", style = "vertical-align: text-top" });
})
.Pageable(pager => pager.Refresh(true))
.Sortable()
.Filterable()
.NoRecords()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(10)
.ServerOperation(true)
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.UserId);
model.Field(p => p.TableName);
model.Field(p => p.AuditType);
model.Field(p => p.KeyValuesValue);
model.Field(p => p.OldValuesValue);
model.Field(p => p.NewValuesValue);
model.Field(p => p.ChangedColumnsValue);
})
.Read(read => read.Action("GetAuditLogs", "Audit").Data("forgeryToken"))
))
And in my "GetAuditLogs" controller methods, I pass in the "request.Page" and "request.PageSize" to calculate Skip and Take. The EF query call DOES return records (default is set to 10 records) however when returning from the Controller, the Grid displays "No Records"
My controller method is as follows:
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> GetAuditLogsAsync([DataSourceRequest] DataSourceRequest request)
{
_logger.LogDebug("GetAuditLogsAsync()");
try
{
var logs = await _auditService.GetAsync(null, q => q.OrderByDescending(x => x.DateTime),
string.Empty, request.Page, request.PageSize);
var total = await _auditService.CountAsync(null, string.Empty);
var models = logs.Select(x => new AuditViewModel
{
Id = x.Id,
UserId = x.UserId,
DateTime = x.DateTime,
TableName = x.TableName,
AuditType = x.Type,
KeyValues = string.IsNullOrWhiteSpace(x.PrimaryKey) ? new Dictionary<string, object>() :
JsonSerializer.Deserialize<Dictionary<string, object>>(x.PrimaryKey),
OldValues = string.IsNullOrWhiteSpace(x.OldValues) ? new Dictionary<string, object>() :
JsonSerializer.Deserialize<Dictionary<string, object>>(x.OldValues),
NewValues = string.IsNullOrWhiteSpace(x.NewValues) ? new Dictionary<string, object>() :
JsonSerializer.Deserialize<Dictionary<string, object>>(x.NewValues),
ChangedColumns = string.IsNullOrWhiteSpace(x.AffectedColumns) ? new List<string>() :
JsonSerializer.Deserialize<List<string>>(x.AffectedColumns)
});
var result = await models.ToDataSourceResultAsync(request);
result.Total = total;
return Json(result);
}
catch (Exception ex)
{
_logger.LogError($"GetAuditLogsAsync() | error [{ex}]", ex);
throw;
}
}
And the Audit Service "GetAsync" looks like:
public async Task<IEnumerable<Data.Entities.Audit>> GetAsync(
Expression<Func<Data.Entities.Audit, bool>>? filter = null,
Func<IQueryable<Data.Entities.Audit>, IOrderedQueryable<Data.Entities.Audit>>? orderBy = null,
string includeProperties = "",
int page = 0,
int pageSize = 0)
{
IQueryable<Data.Entities.Audit> query = _dbSet;
if (filter != null)
{
query = query.Where(filter);
}
if (!string.IsNullOrWhiteSpace(includeProperties))
{
query = includeProperties.Split(new[] { ',' }, StringSplitOptions.RemoveEmptyEntries)
.Aggregate(query, (current, includeProperty) => current.Include(includeProperty));
}
var result = orderBy != null
? orderBy(query)
: query;
if (page > 0 && pageSize > 0)
{
result = result.Skip((page - 1) * pageSize).Take(pageSize);
}
return await result.ToListAsync();
}
I have a grid defined as thus:
@(Html.Kendo().Grid<SubServiceViewModel>()
.Name("SubServiceGrid")
.Columns(columns =>
{
columns.Bound(c => c.Id).Hidden(true);
columns.Bound(c => c.Service)
.ClientTemplate("#=Service.Value#")
.Filterable(false)
.Sortable(false);
columns.Bound(c => c.Value);
columns.Bound(c => c.Active).Hidden(true);
columns.Bound(c => c.Deleted).Hidden(true);
columns.Command(c => c.Destroy());
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable(pager => pager.Refresh(true))
.Sortable()
.Filterable()
.NoRecords()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(10)
.ServerOperation(true)
.Events(events => events.Error("error_handler").RequestEnd("onRequestEnd('staticNotifications')"))
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.Service).DefaultValue(ViewData["defaultService"] as ServiceViewModel);
model.Field(p => p.Value);
model.Field(p => p.Active).DefaultValue(EntityLiterals.Yes);
model.Field(p => p.Deleted).DefaultValue(EntityLiterals.No);
})
.Read(read => read.Action("GetSubServices", "SubService").Data("forgeryToken"))
.Create(create => create.Action("CreateSubServices", "SubService").Data("forgeryToken"))
.Update(update => update.Action("UpdateSubServices", "SubService").Data("forgeryToken"))
.Destroy(destroy => destroy.Action("DeleteSubServices", "SubService").Data("forgeryToken"))
))
And if I remove the
.Filterable(true)
I get a JS error when I click the column filter button
Uncaught TypeError: Cannot convert undefined or null to object
at Function.keys (<anonymous>)
at C (kendo.all.js:318535:21)
at init._createForm (kendo.all.js:318535:21)
at init._init (kendo.all.js:318535:21)
at init._click (kendo.all.js:318535:21)
at HTMLAnchorElement.dispatch (jquery.min.js?v=oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl-cbzUq8:2:43184)
at y.handle (jquery.min.js?v=oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl-cbzUq8:2:41168)
C @ kendo.all.js:318535
_createForm @ kendo.all.js:318535
_init @ kendo.all.js:318535
_click @ kendo.all.js:318535
dispatch @ jquery.min.js?v=oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl-cbzUq8:2
y.handle @ jquery.min.js?v=oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl-cbzUq8:2
I'm using Trial for testing. But when the number of items is selected more, the text box displaying the item grows larger, breaking the interface of the page. I just want to show the number of selected items (Checked) to replace checked items, is it possible to process? Please guide how. Displays fine both when the event is selected and the initial default load of items is checked.
Example:
I would like to create the following type of chart:
I have set the BaseUnit to weeks but the label prints as 10/31, 11/7, 11/14 etc
@(Html.Kendo().Chart<FlightLog.Models.Charts.HoursByWeek>()
.Name("chart")
.Theme("bootstrap")
.Title("Monthly Hours")
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.DataSource(ds => ds
.Read(r => r.Url(Url.Page("./DashBoard", "HoursPerWeek")).Type(HttpVerbs.Post))
)
.Series(series =>
{
series.Column(model => model.Hours).CategoryField("Date");
})
.CategoryAxis(axis => axis.Date()
.Labels(labels => labels.Rotation(-45))
.Labels(labels => labels.DateFormats(dateFormat => dateFormat.Months("MMM")))
.BaseUnit(ChartAxisBaseUnit.Weeks)
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis
.Numeric()
.Line(line => line.Visible(false))
.MajorGridLines(lines => lines.Visible(true))
)
)
Hi,
I have a use case where a user can click on a link or button in a parent record in a Kendo Grid, which causes a Kendo Window to become visible and display within it another Kendo Grid listing the child records corresponding to the record clicked in the parent page. In this case, the parent Grid would display a list of Document records; When the user clicks on a link or button in the row of a particular Document, a Window pops up with the Version History records for the Document in another Grid.
Should the Version History Grid be in a partial view, as suggested in https://stackoverflow.com/questions/28772589/load-kendo-grid-in-kendo-window, and then brought into the Window, which is constructed in JavaScript, or is there a better/more standard approach, preferably one that uses html helpers?
Also, how do I set it up so that the Grid in the Window only displays Version History pertaining to the Document that was clicked?
If anybody has links to examples/samples that I can research, or can answer my questions, I'd be most appreciative. I think that similar use cases just use the Grid Hierarchy, but unfortunately it's not an option for my use case.
Thanks!
Taylor
I have a tab strip with several tabs that contains various input fields for a user to modify and I'd like to show some sort of "edit" icon in the header of those tabs which have been modified to give the user a more visual indication of what has been changed before they save any changes.
I can see from the docs that you can set "ImageUrl" or "SpriteCssClasses" on a tab header when setting it up, but in this case, I'm looking at adding/removing images based on changed events from the widgets contained within the tab and can't seem to find any documented way of doing this.
Playing around with things I can do something like the following (where #TabStrip is the name given to my tab strip widget) to add a pencil icon to the header:
$("#TabStrip-tab-1 .k-link").prepend("<span class=\"k-icon k-i-edit\"></span>")
Which will give the following:
This is what I'm after, but I'm ideally looking for a way that is more "official" and supported rather than having to poke around inside the DOM of the tab strip itself.
Is there anything that could be used here or is that JS snippet above the best way to do this?
I'm having problem setting culture in a calendar called from Grid.
Below is my sample:
<script>
kendo.culture("@Model.userSetting.culture");
</script>
....
@(Html.Kendo().Grid<MyProject.Model.ModelName>()
.Name("gTasks")
.Columns(columns =>
{
columns.Bound(p => p.Id).Width(100).Visible(false);
columns.Bound(p => p.taskID).Width(100).Visible(false);
columns.Bound(p => p.Start).Format("{0:" + Model.userSetting.dateFormat + "}").Sortable(true).Width(100).Title("Start").EditorTemplateName("GridCalendarTemplate");
columns.Bound(p => p.End).Format("{0:" + Model.userSetting.dateFormat + "}").Sortable(true).Width(100).Title("End").EditorTemplateName("GridCalendarTemplate");
})
)
....
In Views/Shared/EditorTemplates/GridCalendarTemplate.cshtml
@model DateTime?
@{
var culture = Context.Session.GetString("culture");
}
<script>
kendo.culture("@culture");
</script>
@(Html.Kendo().DatePickerFor(m => m)
.Culture("@culture")
.HtmlAttributes(new { title = Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName("") }))