or
0 answers
130 views
I dont know if is a known issue but I didnt find another question about this, please let me know if it is a duplicate.
So, the scheduler has a refresh button, when you click it the datasource.read is triggered to load the data.
But for some reason, if you select an event and then click on refresh button, the start date will be changed to the date of the selected event and the old events will disappear due to date filter.
So, the scheduler has a refresh button, when you click it the datasource.read is triggered to load the data.
But for some reason, if you select an event and then click on refresh button, the start date will be changed to the date of the selected event and the old events will disappear due to date filter.
I wrote a dojo to show the issue: https://dojo.telerik.com/omIxeDUx/8
Reproduce steps:
- Open the dojo
- Select an event of any date greater than the first date (fixed 2022-10-10)
- Click the refresh button
- You will see that the start date changed and some events will not be shown.
EDIT
For those who have the same problem, I'm make a workaround (I dont know if will work for any context), I just remove the refresh button of the scheduler and then add a new button which onclick event will just call the datasource.read() function.
The following dojo has this work around: https://dojo.telerik.com/omIxeDUx/9
Hilton Pereira
Top achievements
Rank 1
Rank 1
updated question
on
14 Nov 2022
1 answer
844 views
We have a .Net Core 6 application.
We are using the "jQuery Grid Detail Template" to display a customer's orders in a KendoGrid. Then when the detail template icon is clicked, we fetch the order details and show those rows in another sub kendoGrid.
We are following this example: https://demos.telerik.com/kendo-ui/grid/detailtemplate
We can get this working for our situation, but only for the first customer that is searched.
When a different customer orders are searched, and the detail icon is clicked, we get an error ("Uncaught TypeError: Cannot convert undefined or null to object").
Our UI uses the "kendo-dropdownlist" for customer names, and a "Html.Kendo().DatePicker()" for the From/To date ranges. And a "Html.Kendo().DropDownButton()" for a Search button.
This is what happens when the form is first loaded:
1: user selects customer + date range then clicks [Search]
2: the javascript function "GetMyData()" is called
3: The "$("#myOrders-grid").kendoGrid" is populated correctly
4: when any details icon is clicked, the "detailInit: detailInit" function is called, the detail data is fetched and displayed correctly in sub grid.
PROBLEM occurs here
5: user selects a different customer and clicks [Search]
6: The "$("#myOrders-grid").kendoGrid" is populated correctly
7: BUT when any details icon is clicked, this error is generated: "Uncaught TypeError: Cannot convert undefined or null to object"
the "detailInit: detailInit" function is never triggered
8: HOWEVER: If I select the original customer and original date range from dropdown and press [Search], the details icon works again, but only for the original customer and date range.
It seems like something remembers only the original customer's data. Do I have to clear something from memory?
What am I doing wrong below?
//My pseudo code
function GetMyData(e) {
var formattedStartDate = dateFns.parse(datefrom.value, 'YYYY-MM-DD hh:mm:ss')
var formattedEndDate = dateFns.parse(dateto.value, 'YYYY-MM-DD hh:mm:ss')
var myUrlString = '@Url.Action("GetOrders", "MyController")'
var payloadContent = {
"customerId": parseInt(customerDropdown.value),
"startDate": formattedStartDate,
"endDate": formattedEndDate
}
$("#myOrders-grid").kendoGrid({
dataSource: {
transport: {
read: function(options) {
axios.post(myUrlString, payloadContent).then(function (response) {
options.success(response.data);
})
}
},
pageSize: 10,
sort: { field: "eventStart", dir: "asc" },
schema: {
model: {
fields: {
eventStart: { type: "date" },
...ETC
}
}
}
},
detailTemplate: kendo.template($("#template-details").html()),
detailInit: detailInit,
height: 600,
sortable: true,
pageable: {
numeric: true
},
columns: [
{ field: "eventStart", title: "Event Start", format: "{0:MM/dd/yyyy}", width: "6%" },
...ETC
],
excel: {
fileName: "orders-data.xlsx",
allPages: true,
filterable: true
},
})
}
function detailInit(e) {
var detailRow = e.detailRow;
var detailsUrlString = '@Url.Action("GetDetails", "MyController")'
var payloadContent = {
"customerID": e.data.custId,
"orderID": e.data.orderid
}
detailRow.find(".detailTabstrip").kendoTabStrip({
animation: {
open: { effects: "fadeIn" }
}
});
detailRow.find(".details").kendoGrid({
dataSource: {
transport: {
read: function(options) {
axios.post(detailsUrlString, payloadContent).then(function (response) {
options.success(response.data);
})
}
},
pageSize: 10,
sort: { field: "orderID", dir: "asc" },
schema: {
model: {
fields: {
description: { type: "string" },
...ETC
}
}
},
},
scrollable: false,
sortable: true,
height: 250,
pageable: true,
columns: [
{ field: "description", title:"Description" },
...ETC
]
});
}
<script type="text/javascript" id="template-details">
<div class="detailTabstrip">
<ul>
<li class="k-active">
Order Details
</li>
<li>
Customer Details
</li>
</ul>
<div>
<div class="details"></div>
</div>
<div>
<div class='customer-details'>
<h3>Customer details will go here later</h3>
</div>
</div>
</div>
</script>
2 answers
322 views
We are using the kendoGrid detailTemplate to display a sub grid of data. This is working well.
However, the first column in the grid that contains the right pointer icon has a wide width. the online examples show a narrow width.
How can we control the width of the first column that contains the right pointer icon?
$("#mygrid-grid").kendoGrid({
.....
detailTemplate: kendo.template($("#template-details").html()),
detailInit: detailInit,
....
columns: [
{ field: "eventStart", title: "Event Start", format: "{0:MM/dd/yyyy}", width: "6%" },
......
0 answers
126 views
See the attached screenshot and dojo link. How do I show the values as percentages of the total? For some reason, the chart is starting with 97% rather than 0%.
1 answer
169 views
I want button add title tag. "data refresh".
How can I make it simple?
$("#toolbar").kendoToolBar({
items: [
{ id: "btn_reload", icon: "k-icon k-i-reload", type: "button", overflow: "never" },
Thank you.
Lyuboslav
Telerik team
answered
on
14 Nov 2022
1 answer
142 views
Hi, I want to show the time slot time under the cursor as you move about the scheduler. Similar to attached gif:
The problem is that when I navigate to a different day I can't re-bind the mouse move event. My code looks as follows, any help would be greatly appreciated.
Navigate:
EnableTimeTracking:
Thanks...
Neli
Telerik team
answered
on
11 Nov 2022
1 answer
317 views
Hi,
I'm working with an older version of kendo elements. Currently I'm struggling with an tooltip. My Dropdown List shows additional information. However, when the selection changes, the old and new tooltip is displayed. Attached I have three screemshots, additional information (showing the first display of the tooltip), default tooltip (when there is no additional information) and additional information and default tooltip (after the defautl is displayed and a new item is selected). How can I make it to show only the current tooltip?
Here is my code for the tooltip:
$("#myElement").change(function(){
$("#myElement").kendoTooltip({
filter: ".k-input",
position: "top",
showAfter: 500,
content: function(e){
const dropdownlist = $("#myDdl").data("kendoDropDownList");
const selectedItem = dropdownlist.dataItem();
if (selectedItem.field2 === undefined) {
selectedItem.field2 = "This is the default tooltip";
}
const result = $("<div style='text-align: center';></div>").text(selectedItem.field2).css("width",
(selectedItem.field2.length * .6) + "em");
return result;
}
}).data("kendoTooltip");
});
Neli
Telerik team
answered
on
11 Nov 2022
1 answer
151 views
Georgi Denchev
Telerik team
answered
on
10 Nov 2022
1 answer
189 views
I have a combobox that gets populated with a datasource. How can I disable a single item in the combobox based on the value of a different form field? For example, the combobox has 5 items, A, B, C, D, and E and they are all active. There is a form field called letterDoc and if letterDoc has a value of 8, I want to disable item A.
Is this possible?
Thank you.
Lyuboslav
Telerik team
answered
on
09 Nov 2022
0 answers
805 views
I have a simple grid, with one command button. I'm trying to use the code that is show in your documentation to hide the command button conditionally, based on the data in the grid. However either the "visible" property has no effect, or an error is generated in the console.
The column is defined as:
{
command: [{
name: 'deleteNote',
click: deleteNote,
field: 'ID',
template: "<a class='btn btn-xs btn-danger k-grid-deleteNote'><i class='fa fa-trash-o'></i></a>",
visible: function (dataItem) { return false }
}],
width: "60px",
headerAttributes: {
style: "text-align: center; white-space: normal;",
"class": "k-text-center !k-justify-content-center"
},
attributes: {
style: "text-align: center",
"class": "k-text-center"
},
},The visible property has a simple value in this case for testing. When run, this just produces a template error in the console
Uncaught Error: Invalid template:'<tr data-uid="#=data.uid#" role='row'><td style="text-align: center"class="k-text-center" class="k-command-cell" role='gridcell'>#= function (dataItem) { return false }(data)? '<a class='btn btn-xs btn-danger k-grid-deleteNote'><i class='fa fa-trash-o'></i></a>':'' #</td><td role='gridcell'><span class='DoctorNoteDate'>#: NoteDateTime #</span></td><td class="#= data && data.dirty && data.dirtyFields && data.dirtyFields['DoctorNotes'] ? ' k-dirty-cell' : '' #" role='gridcell'>#= data && data.dirty && data.dirtyFields && data.dirtyFields['DoctorNotes'] ? '<span class="k-dirty"></span>' : '' ##:data.DoctorNotes==null?'':data.DoctorNotes#</td></tr>' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='<tr data-uid="'+(data.uid)+'" role=\'row\'><td style="text-align: center"class="k-text-center" class="k-command-cell" role=\'gridcell\'>'+( function (dataItem) { return false }(data)? '<a class='btn btn-xs btn-danger k-grid-deleteNote'><i class='fa fa-trash-o'></i></a>':'' )+'</td><td role=\'gridcell\'><span class=\'DoctorNoteDate\'>'+$kendoHtmlEncode( NoteDateTime )+'</span></td><td class="'+( data && data.dirty && data.dirtyFields && data.dirtyFields['DoctorNotes'] ? ' k-dirty-cell' : '' )+'" role=\'gridcell\'>'+( data && data.dirty && data.dirtyFields && data.dirtyFields['DoctorNotes'] ? '<span class="k-dirty"></span>' : '' )+''+$kendoHtmlEncode(data.DoctorNotes==null?'':data.DoctorNotes)+'</td></tr>';}return $kendoOutput;'
at Object.compile (kendo.web.js:198:31)
at Object.proxy [as template] (bootstrap?v=ORM1cEjHBVjtwT2V5nbx1jvidFiV26D1Qpa8Hqke8801:538:14)
at init._tmpl (kendo.web.js:55136:37)
at init._templates (kendo.web.js:55229:45)
at new init (kendo.web.js:51117:22)
at HTMLDivElement.<anonymous> (kendo.web.js:2440:36)
at Function.each (bootstrap?v=ORM1cEjHBVjtwT2V5nbx1jvidFiV26D1Qpa8Hqke8801:400:23)
at jQuery.fn.init.each (bootstrap?v=ORM1cEjHBVjtwT2V5nbx1jvidFiV26D1Qpa8Hqke8801:165:17)
at e.fn.<computed> [as kendoGrid] (kendo.web.js:2439:30)
at Object.success (TestDetailPopup.js?ver=1.0.0.12:384:31)
How do I make a command button hide conditionally? (I tried making the template for the button a function returning a string, but I could not access the underlying data, so could not make a proper comparison)
