or
1 answer
90 views
Hello
I would like to use jQuery ListView to display products for an eshop solution.
Is it possible to nest a jQuery Rating Widget inside the ListView template and set the value when binding the data to the ListView?
I use ASP.Net Core with RazorPages.
Thank u for ur support!
1 answer
469 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>
0 answers
104 views
I'm specifically working with the scheduler, however I believe this applies to any MVVM items.
When double click an event in the scheduler, my editor template is rendered and Kendo binds this to the event being edited. This happens for "free" as I do not do this. Consider this element:
<div data-container-for="title">
<input type="text" data-role="textbox" name="title" required="required" data-bind="value:title" />
</div>The binding to title works perfectly fine and I see my value.
Next, my event has a CategoryId which tags the event and what it is. This is a property I have added. Let me point out that if I replace title above with CategoryId, the integer value of the category displays. So this value is known and part of the bound object. However, I am using a very custom templated dropdown for this.
<div data-container-for="CategoryId">
<input id="CategoryId" data-bind="value: CategoryId, source: categoriesDataSource" data-role="dropdownlist" data-auto-width="true"
data-header-template="categorySearchHeaderTemplate" data-template="categorySearchTemplate" data-text-field="Description"
data-value-field="Id" data-auto-bind="false" />
</div>Hopefully this makes sense. My categories have an Id and a Description. There is a list of them. The event has a CategoryId which holds the value of what category is selected. However this element has its own datasource! Note the data-bind.
// This datasource is created and then kendo.bind() is called to bind to my dropdown
var categoriesViewModel = kendo.observable({
categoriesDataSource: new kendo.data.DataSource({
data: jsonSerializedCategories
})
});This drop down works perfectly fine for templates and for the elements in it. See screenshot below. But the value binding does not work. This is obviously because I had to set my own datasource on it. The value is not found in that datasource; it's in the one Kendo generated and applied to the popup. What is the proper way to set this up? The value is in one datasource and the elements here are in the other one I created.
1 answer
683 views
I want to resize my grid that inside another grid. These grids are hierarchical. I wrote something for that but this works for second click. The processes I mentioned are seen in the pictures (firstclick, secondclick). the red circle shows extand button.
The js code block I wrote for solution but it does not work properly:
// The code inside the databound function of master grid
$("#SiparisListeleGrid td a.k-icon").click(function () { // onclick for a element that opens second grid inside the row
if ($(this).hasClass("k-i-expand")) { // if the grid is expand
// uid of tr element
var tr_UID = $(this).parents("tr").data("uid");
// master grid
var ustGrid = $("#SiparisListeleGrid").data("kendoGrid");
$(ustGrid.dataSource.data()).each(function (i, item) {
if (item.uid == tr_UID) {
var altGrid = $("#Grid_SiparisSatir_" + item.SipUstID).data("kendoGrid");
var rowCount = altGrid.dataSource.view().length;
$("#Grid_SiparisSatir_" + item.SipUstID).attr("style", "height:" + (rowCount * 40 + 125) + "px;");
$("#Grid_SiparisSatir_" + item.SipUstID + " .k-grid-content").css("height", (rowCount * 40));
$("#Grid_SiparisSatir_" + item.SipUstID + " .k-grid-content-locked").css("height", (rowCount * 40));
}
});
}
});
// This code block only works on second clicking the expan button.
// Does not recognize the second grid when clicked for the firs time
// Should I use databound for second grid? However I do not know how can I do that.
Georgi Denchev
Telerik team
answered
on
13 Oct 2022
2 answers
86 views
I am using the Scheduler and making a custom edit screen. I am following the example here.
Each scheduled event can have a category. These are selectable via dropdown. Consider the following portion of the template:
<div class="k-edit-label">
<label for="category">Category</label>
</div>
<div data-container-for="category" class="k-edit-field">
<!-- HERE IS WHERE THE DROPDOWN IS -->
</div>In the example linked, a simple <select> element is used. But I am looking to add a real Kendo dropdown, not a basic select. So I defined it as follows:
var categoryEditorDropdown = Html.Kendo().DropDownList()
.AutoBind(true)
.BindTo(categories)
.DataTextField(nameof(Category.Description))
.DataValueField(nameof(Category.Id))
.HeaderTemplate("Custom defined template which is why I need this over a select")
.OptionLabelTemplate("Custom defined template which is why I need this over a select")
.Name("category")
.ToClientTemplate();Back to my editor template, for the commented green line I tried both the following, and both gave template errors:
<div data-container-for="category" class="k-edit-field">
<!-- Both fail with a template error -->
@categoryEditorDropdown
@Html.Raw(categoryEditorDropdown)
</div>Next, I made a separate script:
<script id="editEventCategoryTemplate" type="text/x-kendo-template">
// Tried both of these and again both fail when editing the event
@categoryEditorDropdown
@Html.Raw(categoryEditorDropdown)
</script>And I updated the editor to try and use it:
<div data-container-for="category" class="k-edit-field">
#= kendo.render(kendo.template($("\\#editEventCategoryTemplate").html())) #
</div>For both tests here the page renders but then throws the same invalid template error when I try to edit an event.
How can I embed templates into each other. I need far more than category here. There are 6 templates in total needed for 6 different fields.
0 answers
77 views
I have two Kendo Schedulers. In the first one the WorkDayStart and WorkDayEnd should be custom to the day(s) being viewed. They are not static at one single time. If I am viewing one single day, I am sure I could inject some Javascript to find these and update them, then rerender the scheduler. But when viewing a week that would not help. Really they need to be a function. Is this possible?
The second scheduler is grouped by a resource of an Employee. So in this case it is more complicated. I have this one locked down to viewing only a single day view (or other views that don't include slots that may be closed like Agenda). But the columns here are dependent on the employee's availability for the day selected. So again a function is needed.
Alternatively, digging in the kendo.all.js, I see a property called "slotTemplate" but this doesn't seem to be exposed in MVC. Is there a workaround using this?
[EDIT]: I finally found the SlotTemplate as part of the views in MVC. Will play around here and possibly I can solve this on my own.
[EDIT 2]: I did get SlotTemplate working, but the real solution is to fix the WorkDayStart and WorkDayEnd. Let's say this is a program for a store. Bob logs in. Bob sees his own schedule on one tab, and the store schedule on another tab. Bob works different hours per day. The store is open different hours per day. It's not always the same. When viewing a week we need to be expanded to the most open day. When viewing a single day we should match that day.
Here's a SlotTemplate tagged in CSHTML:
views.DayView(v => v.Selected(true)).SlotTemplateId("shopSlotTemplate");<script id="mySlotTemplate" type="text/x-kendo-template">
#= getSlotTemplate(data, @loggedInEmployeeId) #
</script>
<script id="shopSlotTemplate" type="text/x-kendo-template">
#= getSlotTemplate(data) #
</script>
<script id="acSlotTemplate" type="text/x-kendo-template">
#= getSlotTemplate(data, 0) #
</script>
function getSlotTemplate(data, employeeId) {
// Get employee ID if not passed in. If still not found then this scheduler is not grouped this way.
if (employeeId === undefined) {
employeeId = data.resources().EmployeeId;
}
let isClosed = isShopClosed(shopSchedule.Shop, data.date);
if ((!isClosed) && (employeeId > 0) && (shopSchedule["Employee" + employeeId] !== undefined)) {
isClosed = isShopClosed(shopSchedule["Employee" + employeeId], data.date);
}
return "<div class=\"" + (isClosed ? "k-nonwork-hour" : "") + "\"> </div>";
}
This required new CSS since the TD element has margins.
div.k-scheduler-content > table > tbody > tr > td > div {
margin: -4px -0.5em;
height: calc(100% + 8px);
width: calc(100% + 1em);
}The end result is that the grid for the scheduler appears how I want it.
But working hours are still inaccurate. They are based on a single date and don't change as I move between days.
1 answer
64 views
Hello
I need your support, please, for the Scheduler (Kendo JQuery UI v2022.2.510)
I have 2 problems: the special characters in the description (example: euro symbol) and the multilines description of the appointments.
I would like to show next invoices to be paid.
The scheduler must be on mounth show, and all event are all day event.
On the event I need to show the number of document, buisness name and the amounth.
I'm trying to implement more filds in schema but the program ignore that.
I also tried to insert html tag in the description filed
(example:
<span class='IntestazioneDocumento'>PA / 1234567890 del 01/01/2000</span>
<span class='aDitta'>Alla ditta Business</span>
<span class='nRata'>Payment 1 di 1</span>
<span class='importo'>Tot. documento 123,45 €</span>)
but the tasg are showed as text.
In every case, the height of the result cell is too short to show all information.
I use the code
kendo.ui.progress($("#scheduler"), false);
urlData = url
$("#scheduler").kendoScheduler({
height: 600,
views: [
"day",
"week",
{ type: "month", selected: true},
"year"
],
timezone: "Europe/Rome",
allDayEventTemplate: $("#event-template").html(),
eventTemplate: $("#event-template").html(),
dataSource: {
batch: true,
transport: {
read: {
url: urlData,
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: " json"
},
update: {
},
create: {
},
destroy: {
}
},
schema: {
model: {
id: "taskId",
fields: {
taskId: { from: "TaskID", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { type: "html", from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
ownerId: { from: "OwnerID", defaultValue: '' },
isAllDay: { type: "boolean", from: "IsAllDay" },
IntestazioneDocumento: { from: "IntestazioneDocumento" },
RagioneSociale: { from: "RagioneSociale" },
}
}
}
},
editable: false,
resources: [
{
field: "ownerId",
title: "Owner",
dataSource: [
{ text: "CENTRAL", value: 0, color: "#0000ff" },
{ text: "LOGGIA", value: 1, color: "#f8a398" },
{ text: "GIOTTO", value: 2, color: "#2572c0" },
{ text: "P_COMM", value: 3, color: "#118640" }
]
}
]
});
$("input[ name=showFarm ]").change(function(e) {
var checked = $.map($("input[ name=showFarm ]:checked"), function(checkbox) {
return parseInt($(checkbox).val());
});
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.dataSource.filter({
operator: function(task) {
return $.inArray(task.ownerId, checked) >= 0
}
});
});
});
1 answer
53 views
I want the editor to open up with the "Title" field pre-focused and with the "No title" text selected.
the below code does not seem to be working.
I am using a custom edit template
edit: function (e) {
var input = e.container.find("title");
input.select();
input.focus(function (e) {
input.select();
});
input.focus();
}
1 answer
98 views
my application uses kendo version 2017.3.1026
In my application I have user name DOM in UI,
I want to use kendo tooltip to show user details .
the user details will be dynamic and coming from server.
how can I achieve this.
Thanks in advance.
1 answer
103 views
{name: “coy a, coy b, coy c”, id:”1,2,3”}
expected result in kendo grid
<a href=“/company/detail/1”>coy a</a>,
<a href=“/company/detail/2”>coy b</a>,
<a href=“/company/detail/3”>coy c</a>
