or
1 answer
116 views
I have a hierarchical grid with inline Batch editing. The grid start off with all child rows expanded (from the databound function). When the user edits one of the child cells the parent grid closes all all child nodes and then the databound event fires and we expand all the rows. Virtual Scrolling is also enabled.
function dataBound() {
var grid = this;
$(".k-master-row").each(function (index) {
grid.expandRow(this);
});
}
The problem is that the user loses focus to what row they were on since the grid closes and reopens all the nodes.
Is there an approach where the grid doesn't have the close all child nodes and reopen? I've tried starting with all child nodes being closed, allowing the user to expand one child node and edit....but after the cell is edited the main grid closes all the child nodes .... I'd prefer the child node to be left expanded so the user isn't confused as what they just edited.
1 answer
150 views
Mihaela
Telerik team
answered
on
31 Oct 2022
1 answer
529 views
Hello
I'm going to create a dialog and place grid and image view in it vertically. At this time, the height of grid and image view should match the height of the dialog, and the area should be divided by a ratio of 8:4.
Whenever I select a row in the grid, I want to take an image file from a specific path and show it in the image view, so is there an example or material that I can refer to?
When I searched for grid in dialog, I saw the kendo window data, but I want to implement it as a dialog instead of a window.
And when you put the grid in the dialog, is there a way to make the height of the grid 100%?
Also, when I searched Kendo image view, I saw the editor, and I wonder if there is a function that outputs only simple images, not editor.
Alexander
Telerik team
answered
on
31 Oct 2022
1 answer
578 views
Hi, I have a kendo dropdownlist which offers the option to remove items with a link. I used Template/ValueTemplate to achieve this.
@(Html.Kendo().DropDownList()
.HtmlAttributes(new { @class = "form-control" })
.Name("dataSelect")
.DataTextField("Text")
.DataValueField("Value")
.Template("<span class=\"k-state-default mr-auto\">#:data.Text#</span><a href=\"\" onclick=\"deleteItem(#:data.Value#)\">Delete</a>")
.ValueTemplate("<span class=\"mr-auto\">#:data.Text#</span><a href=\"\" onclick=\"deleteItem(#:data.Value#)\">Delete</a>")
.DataSource(ds => ds
.Read(read => read
.Url("/Data?handler=ReadData").Data("getForgeryToken")
)))
function deleteItem(itemId) {
var data = $.extend(true, {}, kendo.antiForgeryTokens(), {});
$.ajax({
type: "POST",
url: "/Data?handler=DeleteItem",
headers:
{
"RequestVerificationToken": data.__RequestVerificationToken
},
data: {
itemId: itemId,
},
success: function (response) {
$('#dataSelect').data("kendoDropDownList").dataSource.read();
},
failure: function (response) {
}
});
}
Mihaela
Telerik team
answered
on
31 Oct 2022
1 answer
1.5K+ views
For selected rows, the grid use to add a "k-state-selected" to the row, with the updated selection functionality in the grid, it now only adds a "k-selected" . Is this the correct behavior? I have some custom css style that are tied to tr.k-state-selected. Before I update styles, want to make sure I am understanding the behavior correctly.
1 answer
113 views
We are using Kendo-Scheduler in an Asp.net core app.
The problem we are having is that our events don't display on the calendar.
It looks like the issue is due to having the calendar inside of a "kendo-tabstrip". Our calendar tab is the second of 4. It looks like this is keeping the events from display.
When I try using the kendo-scheduler in a separate "test" app with no "kendo-tabstrip", it works as expected.
Has anyone else had a problem using kendo-scheduler inside of a kendo-tabstrip?
If so, is there a solution?
1 answer
326 views
My grid is not binding whenever a read is made. I programmed it so that when the user presses a button, it gathers search parameters and calls the read() method. It fetches the data and I get results successfully, but it doesn't update in the UI, no loading graphic or anything. I can see the grid but it has no data. I simplified the fields and columns to only one to see if there was an error in the naming but no luck. No console errors. I used tag helper and HTML helper, none work. Below is my code, simplified for this post.
Razor Page
<head>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="~/lib/kendo-ui/styles/kendo.bootstrap-main.min.css" rel="stylesheet" type="text/css" />
<script src="~/lib/kendo-ui/js/jquery.min.js"></script>
<script src="~/lib/kendo-ui/js/jszip.min.js"></script>
<script src="~/lib/kendo-ui/js/kendo.all.min.js"></script>
<script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script>
</head>
<body>
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()
<button type="button" id="btnSearch" onclick="SearchPosInfo()">Search</button>
<kendo-grid name="grdResults" auto-bind="false">
<datasource type="DataSourceTagHelperType.Ajax" page-size="25">
<schema>
<model id="piid">
<fields>
<field name="piid" type="number"></field>
</fields>
</model>
</schema>
<transport>
<read url="Index?handler=Read" data="SearchParams" />
</transport>
</datasource>
<columns>
<column field="piid"></column>
</columns>
<sortable enabled="true" />
<pageable button-count="5" page-sizes="new int[] { 10, 25, 50, 100 }">
</pageable>
</kendo-grid>
.
.
.
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>JS
function SearchParams() {
var searchParams = {
pd: $("#txtNumber").val()
}
var ext = $.extend(true, {}, kendo.antiForgeryTokens(), searchParams);
return ext;
}
function SearchPosInfo() {
$("#grdResults").data("kendoGrid").dataSource.read();
}Response
{"data":[{"piid":37133},{"piid":37525},{"piid":48314},{"piid":56042}],"total":4,"aggregateResults":null,"errors":null}
Stoyan
Telerik team
answered
on
28 Oct 2022
1 answer
96 views
Cannot create grid with french title 'Détail'
var res = html
.Kendo()
.Grid<object>()
.Name("Test")
.Columns(x =>
{
var arr = new char[]{(char)68, (char)233, (char)116, (char)97, (char)105, (char)108 };
var strCreated = new string(arr); //"Détail" - get from localization from french
x.Template(string.Empty)
.HtmlAttributes(new {title = strCreated});
});
var ws = res.ToClientTemplate().ToString();
//Détail => D\u0026#xE9;tail
//<div id="Test" name="Test"></div><script>kendo.syncReady(function(){jQuery("\#Test").kendoGrid({"columns":[{"attributes":{"title":"D\u0026#xE9;tail"}}],"scrollable":false,"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":""},"prefix":""},"schema":{"data":"Data","total":"Total","errors":"Errors","model":{}}}});});<\/script>
That's why cannot parse template on client side.
Code
res.ToComponent().VisibleColumns[0].ToJson()returns 'Détail' when Framework returns 'Détail'.
Some investigations give me that on Core your code is like
HtmlEncoder encoder = HtmlEncoder.Default;
var arr = new char[]{(char)68, (char)233, (char)116, (char)97, (char)105, (char)108 };
var strCreated = new string(arr); //Détail
var encoded2 = encoder.Encode(strCreated);
//endoded == "Détail"When old code is like
var arr = new char[] { (char)68, (char)233, (char)116, (char)97, (char)105, (char)108 };
var strCreated = new string(arr); //Détail
string s = HttpUtility.HtmlAttributeEncode(strCreated).Replace(" ", " ").Replace("'", "'");
s = HttpUtility.HtmlDecode(s);
//s == "Détail"
Alexander
Telerik team
answered
on
28 Oct 2022
1 answer
252 views
Hi,
I have been working with the Scheduler and I can't make it to work.
I have an object that extends ISchedulerEvent with the start and end dates, apart from all the needed parameters:
public class BsScheduleMeeting : ISchedulerEvent
{
private DateTime start;
public DateTime Start
{
get
{
return start;
}
set
{
start = value.ToUniversalTime();
}
}
private DateTime end;
public DateTime End
{
get
{
return end;
}
set
{
end = value.ToUniversalTime();
}
}
}With this we created a scheduler on a Razor view with a custom datasource, defining the model and the transport functionality (is only a read):
@(Html.Kendo().Scheduler<BsScheduleMeeting>()
.Name("scheduler")
.Date(DateTime.Now.Date)
.StartTime(DateTime.Now.Date.AddHours(7))
.EndTime(DateTime.Now.Date.AddHours(22))
.Editable(false)
.Height(700)
.Views(views =>
{
views.DayView(day => day.Selected(true));
})
.Timezone("Etc/UTC")
.DataSource(datasource => datasource
.Custom()
.Schema(schema => schema
.Model(m => {
m.Id(f => f.MeetingID);
m.Field("title", typeof(string)).DefaultValue("No title").From("title");
m.Field("start", typeof(DateTime)).From("start");
m.Field("end", typeof(DateTime)).From("end");
m.Field("description", typeof(string)).From("description");
m.Field("recurrenceID", typeof(int)).From("recurrenceID");
m.Field("recurrenceRule", typeof(string)).From("recurrenceRule");
m.Field("recurrenceException", typeof(string)).From("recurrenceException");
m.Field("isAllDay", typeof(bool)).From("isAllDay");
m.Field("startTimezone", typeof(string)).From("startTimezone");
m.Field("endTimezone", typeof(string)).From("endTimezone");
})
)
.ServerPaging(false)
.ServerFiltering(true)
.Transport(transport => transport
.Read(read =>
{
read.Action("GetJson", "BSSchedule");
})
)
)
)The controller call that returns the data is the next one:
public virtual JsonResult GetJson([DataSourceRequest] DataSourceRequest request)
{
return Json(GetTasks().ToDataSourceResult(request));
}
private IList<BsScheduleMeeting> GetTasks()
{
IList<BsScheduleMeeting> schedulerTasks = new List<BsScheduleMeeting>()
{
new BsScheduleMeeting {
Description = "",
StartTimezone = "UTC",
MeetingID = 1,
Title = "AP Physics",
Start = new DateTime(2022,10,24,8,00,00),
End= new DateTime(2022,10,24,9,00,00),
EndTimezone = "UTC",
RecurrenceRule = null,
RecurrenceID = 1,
RecurrenceException = null,
IsAllDay = false
},
new BsScheduleMeeting {
Description = "",
StartTimezone = "UTC",
MeetingID = 2,
Title = "History",
Start = new DateTime(2022,10,24,9,00,00),
End= new DateTime(2022,10,24,10,00,00),
EndTimezone = "UTC",
RecurrenceRule = null,
RecurrenceID = 2,
RecurrenceException = null,
IsAllDay = false
},
new BsScheduleMeeting {
Description = "",
StartTimezone = "UTC",
MeetingID = 3,
Title = "Art",
Start = new DateTime(2021,10,24,9,00,00),
End= new DateTime(2022,10,24,10,00,00),
EndTimezone = "UTC",
RecurrenceRule = null,
RecurrenceID = 3,
RecurrenceException = null,
IsAllDay = false
},
};
return schedulerTasks.ToList();
}With this, I tryed everything but couldn't make it work. The most common error that I get is this one on Javascript:
and the data is being returned correctly, as shown in the next image:
What can I do so the Scheduler gets the info that I send?
Thank you in advance,
Diego.
Mihaela
Telerik team
answered
on
27 Oct 2022
1 answer
542 views
I have a very simple scenario and can't quite figure out how to manage it with Core and Telerik controls.
I have a DropDownList which I'm successfully filling from an action method. I have form fields below it that relate to the row selected in the DropDownList. What I would like to do is have the form fields change when the selected item in the dropdownlist changes. Simple parent-child relationship, but I can't figure out how to manage this with Core and Telerik. Any suggestions? Thanks.
Aleksandar
Telerik team
answered
on
27 Oct 2022
