Hi, with angular Kendo 14++ we lost the Icon Class. But now how I can cutomize treeview custom drag template?
I whant to add the k-i-cancel icon on some specific node. In the pass I was using:
Then in the getDragStatus I can do the logic and push the correct icon in ngClass.
For now I remove the template because I lost all the other icon like (add, insert, ... )
Its just for visual help, because I validate the drop in the "nodeDrop" fonction.
Thanks
I am using Angular 14.0.4
and Kendo Charts 7.1.0
.
Currently I am displaying the Kendo UI StockChart
in Angular for a period of 2 years in the Navigator as below. When I drag the slider, it is moving month-wise.
Now I want the Slider to move day-wise but the labels should show month-wise. How can I do that?
<kendo-stockchart #stockChart [navigatable]="true" (navigatorSelect)="onNavigatorSelect($event)" (zoomStart)="onZoomStart($event)" (render)="onRender($event)" (navigatorFilter)="onNavigatorFilter($event)"
(seriesClick)="onSeriesClick($event)" (axisLabelClick)="onAxisLabelClick($event)" [transitions]="false">
<kendo-chart-legend [visible]="false"></kendo-chart-legend>
<kendo-chart-area [height]="350" [margin]="{ bottom: 0, left: 7, right: 7, top: 20 }" background="#fff">
</kendo-chart-area>
<!-- x axis -->
<kendo-chart-category-axis>
<kendo-chart-category-axis-item [baseUnit]="categoryBaseUnit"
[labels]="categoryAxisLabels" [line]="{ visible: false }" [majorGridLines]="{ visible: false }" name="categoryAxis">
<kendo-chart-category-axis-item-labels [rotation]="labelRotation"
[position]="axisLabelPosition" [step]="categoryBaseUnitStep" [visual]="categoryLabelsVisual">
</kendo-chart-category-axis-item-labels>
</kendo-chart-category-axis-item>
</kendo-chart-category-axis>
<!-- y axis -->
<kendo-chart-value-axis>
<kendo-chart-value-axis-item [min]="viewBag.minValue" [max]="viewBag.maxValue"
name="valueAxis" [labels]="valueAxisLabels" >
</kendo-chart-value-axis-item>
</kendo-chart-value-axis>
<!-- series -->
<kendo-chart-series>
<kendo-chart-series-item type="column" [data]="viewBag.filteredConsumptionData"
[missingValues]="interpolate"
[field]="viewBag.selectedConsumptionType === 'actual' ? 'consumption_actual' : 'consumption_estimated'"
categoryField="datetime" [style]="'smooth'"
[labels]="{ visible: true, position: 'outsideEnd' }"
[highlight]="{ visible: viewBag.selectedConsumptionView !== 'hourly' }" [gap]="0.15" color="#3eb7cc">
<kendo-chart-series-item-labels [visual]="seriesLabelsVisual"></kendo-chart-series-item-labels>
</kendo-chart-series-item>
</kendo-chart-series>
<kendo-chart-navigator>
<kendo-chart-navigator-select [from]="viewBag?.startDate" [to]="viewBag?.endDate" [mousewheel]="mousewheel">
</kendo-chart-navigator-select>
<kendo-chart-navigator-category-axis [min] ="viewBag?.navigatorSelectedStartDate" [max] ="viewBag?.navigatorSelectedEndDate"
[baseUnit]="navigatorBaseUnit" [baseUnitStep]="navigatorBaseUnitStep" [justified]="true">
<kendo-chart-navigator-category-axis-labels [step]="navigatorStep" [rotation]="labelRotation">
</kendo-chart-navigator-category-axis-labels>
</kendo-chart-navigator-category-axis>
<kendo-chart-navigator-series>
<kendo-chart-navigator-series-item type="line" [data]="navigatorConsumptionData"
[field]="viewBag.selectedConsumptionType === 'actual' ? 'consumption_actual' : 'consumption_estimated'"
categoryField="datetime" [missingValues]="interpolate">
</kendo-chart-navigator-series-item>
</kendo-chart-navigator-series>
</kendo-chart-navigator>
</kendo-stockchart>
let me explain what issue i am facing , i have two cloumns in kendogrid one is dropdown and other is simple textbox
let say dropodown column has (emailadress, website dropdown) now i want to match the exact expression of mail to the other column
if it matches then save the record if not matches than show the toolptip and prevent for saving changes
this is the code
save: function(e) {
// Get the data item being saved
var dataItem = e.model;
// Access properties of the data item and perform actions accordingly
var addressType = dataItem.intInternetAddressTypeID;
var inputField = dataItem.strInternetAddress;
// Perform validation or other actions based on the properties
if (addressType === "2") {
// Email validation for input field
var emailRegex = /^[^\s@@]+@@[^\s@@]+\.[^\s@@]+$/;
if (!emailRegex.test(inputField)) {
// Set validation message on the corresponding cell
e.container.find("[name=strInternetAddress]").closest("td").attr("data-strInternetAddress-msg", "Invalid email address format");
e.preventDefault(); // Prevent saving the record
}
} else if (addressType === "10") {
// Phone number validation for input field
var phoneRegex = /^[0-9]+$/;
if (!phoneRegex.test(inputField)) {
// Set validation message on the corresponding cell
e.container.find("[name=strInternetAddress]").closest("td").attr("data-strInternetAddress-msg", "Invalid phone number format");
e.preventDefault(); // Prevent saving the record
}
}
},
i also enable the tooltip from databound
dataBound: function (e) {
e.sender.element.find("[data-strInternetAddress-msg]").each(function () {
$(this).kendoTooltip({
position: "bottom",
content: $(this).attr("data-strInternetAddress-msg"),
});
});
}but tooltip is not showing in the page , it preventing from saving but not showing tooltip after inspection i found that it creating this html
<td role="gridcell" data-container-for="strInternetAddress" data-strinternetaddress-msg="Invalid email address format"><input type="text" class="k-input k-textbox k-valid" name="strInternetAddress" required="required" data-required-msg="Internet Address is required" data-bind="value:strInternetAddress"></td>
Help me how to show the tooltip not alert i dont want alert
Hi..
I have Radio button. But I don't see the radio getting focus, or any indication that it has focus. How can set the CSS so it show's that it has focus???
<input type="radio' id="radio1" class ="k-radio"
I have tried...
K-radio:focus{
border: 10px solid red;
color : red
}
nothing
Any ideas?
thx
What I want to achieve is changing the colour of a group on a series based on its category. I have an example below.
So if "Group 1" had a sub group value of "B" the colour is set based on that combination. And that colour might be different to "Group 2" + "B".
https://dojo.telerik.com/ahoKociN/2
1) normal select box : (in the iPAD)
<select id="size0" >
<option>S - 6 3/4"</option>
<option>M - 7 1/4"</option>
<option>L - 7 1/8"</option>
<option>XL - 7 5/8"</option>
</select>
2) kendo ui select box :
Question :
How can I input like 1) on mobile while using kendo jquery?
Hi there! I'm not a developer but working with one to try and get a fix for my web application. This specific issue is not happening on any desktop computer but appears to be happening on my MacBook Pro when using Safari (not Chrome) and my 5th Gen iPad in both Safari and Chrome. When access a specific section of the program it begins to 'tab' through every field on that page endlessly. When I check the network log it states 'PerformValidationActions' appears to be in a loop cycling through 'text1_enter' 'text1_leave' 'text2_enter' 'text2_leave' 'text3_enter' 'text3_leave' etc. It EVENTUALLY ends but then when you try to log out you get the error Object reference not set to an instance of an object.
Any help would be GREATLY appreciated!
$.ajax({
url: SendPrompt.fmt(encodedMessage, encodedUserName),
async: true,
contentType: 'application/json',
type: "POST",
dataType: "json",
processData: false,
headers: { Authorization: tokenData() },
beforeSend: setHeader,
success: function (data) {
var answer = data.Answer.replace(/(?:\r\n|\r|\n)/g, '\n\n');
chat.renderMessage({
type: "MyText",
text: answer
}, {
id: kendo.guid(),
name: gptName
});
}, error: function (jqXHR, textStatus, errorThrown) {
console.log("Status:", textStatus);
},
complete: function () {
messageTemplate.animate({ opacity: 0 }, 500, function () {
$(this).css({ display: 'none' });
});
chat.wrapper.find(".k-input").prop('disabled', false);
chat.wrapper.find(".k-button-send").prop('disabled', false);
}
});