or
0 answers
114 views
Hi,
I was trying to insert rows when my one of my columns in the spreadsheet has values in all rows. Are we able to detect the function or event before the data loss validation?
What i want to achieve is that before this validation is trigger, i will delete off some of the rows automatically in the spreadsheet itself.
I tried the insertRow event, but this validation check will take place before that was executed. Thanks in advance.
Regards,
Brian
Brian
Top achievements
Rank 1
Iron
Rank 1
Iron
asked
on
17 Jan 2022
1 answer
304 views
I'm using UI for ASP.NET Core release 2021.3.1207
I have a modal dialog, containing a Switch control plus a few other controls, that is displayed when a button is pressed.
When I simply show the modal, all is fine.
When I try to set the value of the Switch 'check' then show the modal, the switch is being re-initialized and there are TWO 'k-switch-container' tagsets. Closing the dialog and showing again adds a THIRD 'k-switch-container'. etc. etc.
These extra 'k-switch-container' effects are:
- cannot tab directly to the next field, as focus disappears until TAB is pressed again. Happens for every additional <span> so eventually you need to press multiple tabs just to visit the next field.
- also when you are 'focussed' on one of these phantom locations, you can still press SPACE which toggles the Switch.
Have I done something wrong or is this a bug?
Thanks,
My Dialog
<div class="modal-body">
<form id="frmEvent" novalidate="novalidate" class="form-validation">
<div class="form-group">
<label>@L("Title")</label>
<input id="txtTitle" type="text" class="form-control border-2" placeholder="@L("title")" />
</div>
<div class="mb-2">
<div class="form-group">
@(Html.Kendo().Switch()
.Events(ev => ev.Change("onChangeAllDay"))
.Name("swAllDay")
)
<label class="ml-2 mb-2">
@L("AllDayEvent")
</label>
</div>
</div>
....
</form>
</div>
My Button Event
** if I uncomment these two lines, I start getting additional nested k-switch-container span tags upon EVERY show of the modal
function newEvent() {
var today = new Date();
$("#txtTitle").val('');
$("#txtDescription").val('');
$("#StartDatePicker").val(today.toLocaleDateString(kendoCurrentCulture));
$("#StartTimePicker").val('');
//var allDaySwitch = $("#swAllDay").kendoSwitch().data("kendoSwitch");
//allDaySwitch.check(false);
$("#eventModal").modal('show');
}
Here's the HTML after just loading the modal WITHOUT setting check.
<div class="form-group">
<span class="k-switch k-widget k-switch-off" role="switch" tabindex="0" aria-checked="false" style="">
<input id="swAllDay" name="swAllDay" type="checkbox" value="true" data-role="switch">
<span class="k-switch-container">
<span class="k-switch-label-on">On</span>
<span class="k-switch-label-off">Off</span>
<span class="k-switch-handle"></span>
</span>
</span>
<input name="swAllDay" type="hidden" value="false">
<script>kendo.syncReady(function(){jQuery("#swAllDay").kendoSwitch({"change":onChangeAllDay});});</script>
<label class="ml-2 mb-2">
All Day Event
</label>
</div>Here's the HTML after just loading the modal WITH setting check, several times.
<div class="form-group">
<span class="k-switch k-widget k-switch-off" role="switch" tabindex="0" aria-checked="false" style="">
<span class="k-switch k-widget k-switch-on" role="switch" tabindex="0" aria-checked="true" style="">
<span class="k-switch k-widget k-switch-off" role="switch" tabindex="0" aria-checked="false" style="">
<span class="k-switch k-widget k-switch-on" role="switch" tabindex="0" aria-checked="true" style="">
<span class="k-switch k-widget k-switch-off" role="switch" tabindex="0" aria-checked="false" style="">
<span class="k-switch k-widget k-switch-off" role="switch" tabindex="0" aria-checked="false" style="">
<input id="swAllDay" name="swAllDay" type="checkbox" value="true" data-role="switch">
<span class="k-switch-container">
<span class="k-switch-label-on">On</span>
<span class="k-switch-label-off">Off</span>
<span class="k-switch-handle">
</span>
</span>
</span>
<span class="k-switch-container">
<span class="k-switch-label-on">On</span>
<span class="k-switch-label-off">Off</span>
<span class="k-switch-handle"></span>
</span>
</span>
<span class="k-switch-container">
<span class="k-switch-label-on">On</span>
<span class="k-switch-label-off">Off</span>
<span class="k-switch-handle"></span>
</span>
</span>
<span class="k-switch-container">
<span class="k-switch-label-on">On</span>
<span class="k-switch-label-off">Off</span>
<span class="k-switch-handle"></span>
</span>
</span>
<span class="k-switch-container">
<span class="k-switch-label-on">On</span>
<span class="k-switch-label-off">Off</span>
<span class="k-switch-handle"></span>
</span>
</span>
<span class="k-switch-container">
<span class="k-switch-label-on">On</span>
<span class="k-switch-label-off">Off</span>
<span class="k-switch-handle"></span>
</span>
</span>
<input name="swAllDay" type="hidden" value="false">
<script>kendo.syncReady(function () { jQuery("#swAllDay").kendoSwitch({ "change": onChangeAllDay }); });</script>
<label class="ml-2 mb-2">
All Day Event
</label>
</div>
1 answer
1.6K+ views
Hello, I can try add years after change calendar. but is not working
- using culture:"th-TH" (not working)
- set value: example value: moment(new Date()).add(543, 'years').format('DD/MM/YYYY') (not working after change calendar)
I want results after change calendar:
12/01/2565 (Buddhist Year) just add 543
example link
$("#datepicker").kendoDatePicker({
culture:"th-TH",
format: 'dd/MM/yyyy',
value: moment(new Date()).add(543, 'years').format('DD/MM/YYYY'),
open: function(e) {
console.log('open');
this.value(moment(this.value()).add(543, 'years').format('DD/MM/YYYY'));
},
change: function(e) {
e.preventDefault();
console.log('change');
console.log(this.value());
console.log(moment(this.value()).add(543, 'years').format('DD/MM/YYYY'));
},
close: function() {
console.log('close');
// this.value(moment(this.value()).add(543, 'years').format('DD/MM/YYYY'));
}
});
Patrick | Technical Support Engineer, Senior
Telerik team
answered
on
14 Jan 2022
1 answer
211 views
The spreadsheet widget displays (it's under tab -- CONTRACTS) but the data does not display. However, if I resize the browser page - the data shows up.
I have tried to find the issue - but nothing. I can remove all the tabs and sections -- just leaving the grid; the result shows the grid and data just fine. It seems to make me think it has an issue with the page size. I hope that this is not the case - because I will want to insert 3-5 more grids on this page. Separated by CSS Tabs.
AJ
Martin
Telerik team
answered
on
14 Jan 2022
1 answer
988 views
Hello i am using ajax and kendogrid to put into the table and format it however i realize i have no idea how to when user selected a row it display the id maybe in console.log etc ? how can i do it
This is my ajax call and append into the table and kendogrid format it
This is being call from my ajax query to be append into this table
This is how my code look like
<script>
/* Call the ajax to load to load to #customer-list tbody */
$.ajax({
url: "https://ecoexchange.dscloud.me:8090/api/get",
method: "GET",
// In this case, we are going to use headers as
headers: {
// The query you're planning to call
// i.e. <query> can be UserGet(0), RecyclableGet(0), etc.
query: "UserGet(0)",
// Gets the apikey from the sessionStorage
apikey: sessionStorage.getItem("apikey")
},
success: function (data, xhr, textStatus) {
//console.log(data)
const buildTable = data => {
const table = document.querySelector("#user-list tbody");
for (let i = 0; i < data.length; i++) {
let row =
`
<tr>
<td class="cell-user-name"style="padding-left: 20px;"><img src = "${data[i].Picture}" class="picture" width="100px" height="100px" onError="this.onerror=null;this.src='../../assets/images/placeholder-avatar.jpg';" ></img></td>
<td class="cell-user-name" style="padding-right: 80px; padding-top: 10px; font-weight: bold; font-size: 18px;">${data[i].Name}</td>
</tr>
`;
table.insertAdjacentHTML('beforeEnd', row);
}
};
// Fetch method
const getData = async (url) => {
const response = await fetch(url, {
method: 'GET',
headers: {
query: "UserGet(1)",
// Gets the apikey from the sessionStorage
apikey: sessionStorage.getItem("apikey")
}
});
const json = await response.json();
$("#loading-container").hide();
return buildTable(json);
};
/*Error GET http://127.0.0.1:5501/testEnv/view/public/manageCustomers/null 404 (Not Found) */
/* But code are able to fetch the data */
getData ("https://ecoexchange.dscloud.me:8090/api/get")
},
error: function (xhr, textStatus, err) {
console.log(err);
}
});
$(window).on("resize", function(e) {
console.log("width:", $("#user-list").width(), "height:",$("#user-list").height())
});
$("#user-list").kendoGrid({
height: $(window).height()-$("#user-list").position()["top"]-130,
selectable: "single",
// width: $(window).width()-$("#customer-list").position()["width"]-10,
//pageSize: 10,
scrollable: {
endless: true,
},
columns: [
{
field: "",
title: "Profile",
headerAttributes: { "class": "k-text-center" },
width: 150
},
{
field: "",
title: "User Name",
},
],
});
$("#user-list tbody").on("click", "tr", function(e) {
const btns = $('.select-row');
var rowElement = this;
var row = $(rowElement);
var grid = $("#user-list").getKendoGrid();
if (row.hasClass("k-state-selected")) {
var selected = grid.select();
selected = $.grep(selected,function(x){
var itemToRemove = grid.dataItem(row);
var currentItem = grid.dataItem(x);
return itemToRemove != currentItem
})
btns.prop('disabled', true).removeClass('disabled dark');
grid.clearSelection();
grid.select(selected);
e.stopPropagation();
}else{
grid.select(row)
e.stopPropagation();
btns.prop('disabled', false).removeClass('disabled dark');
}
});
I would need some help as to how to display the userID as this is my response for my response database ?
Nikolay
Telerik team
answered
on
14 Jan 2022
1 answer
113 views
I ran into a error when trying to use a template to provide an axis label. After digging into it further, it appears that the chart resolves its axis labels twice when there is no font associated with the label, and the first time through the series data isn't fully populated, and the value that is passed in is not the final value.
Here is a dojo for reference. If you run this, the console will have messages where the series data element is undefined and for one set of values, followed by messages where it is defined with the correct values. If you then uncomment the font line in the valueAxis label definition and run it again, the console will only have messages where the series data element is defined.
I don't know if it's a bug, but it certainly caught me by surprise.
Nikolay
Telerik team
answered
on
14 Jan 2022
1 answer
262 views
Hi, i want to remove the delete functionality for tasks within the gantt based on several aspects, one of which would be a field in the record set, another would be based on a user permission level.
I have the delete being cancelled but i'd like to stop the delete key from working and removal of the delete icon.
Any help would be appreciated.
Edit: we are using gantt within an MVC application
Neli
Telerik team
answered
on
13 Jan 2022
0 answers
126 views
Dears,
I have issue that offline feature not update grid column with dropdownlist
non-dropdownlist is working but I have e.g category and product in my grid when update it shows old value
after update when click edit again it shows the update value
please help
Thanks
jas
Top achievements
Rank 1
Rank 1
asked
on
12 Jan 2022
1 answer
141 views
In previous version of kendo UI 2017 R3, kendo grid was sending separate instances of row when expanding multiple rows together. But, in latest version Kendo UI 2021 R3, it is sending all the instances together, due to which DetailInit method is repeating the rows.
Steps:
Copy paste the below code in kendo dojo
Select old version 2017 R3 and run.
Then change the version to 2021 R3 then run.
kendo Dojo Code:
<script>(function onDojoReady(global, $, kendo){
function InitChildGrid(e){
var row = e.detailRow;
var jGrid = $("<div />", { "class": kendo.format("grey-detail-row js-grey-detail-row_{0}_{1}", e.data.ID, e.data.FirstName) });
var dataSource = [
{
ID: e.data.ID,
FirstName: e.data.FirstName,
LastName: e.data.LastName
}
];
// This should be only shown in Adarsh.
if(e.data.ID == 1){
dataSource.push({
ID: 4,
FirstName: "hello",
LastName: "world"
});
}
if(e.data.ID == 2){
dataSource.push({
ID: 5,
FirstName: "Super",
LastName: "Duper"
});
}
jGrid.appendTo(e.detailCell).kendoGrid({
scrollable: false,
//sortable: true,
//pageable: true,
//groupable: false,
//selectable: 'row',
dataSource: dataSource,
columns: [
{ field: "ID" },
{ field: "FirstName" },
{ field: "LastName" }
]
}).data("kendoGrid");
}
function InitParentGrid(){
var dataSource = [
{
ID: 1,
FirstName: "Adarsh",
LastName: "Choudhary"
},
{
ID: 2,
FirstName: "Shashwat",
LastName: "Singh"
},
{
ID: 3,
FirstName: "Omkar",
LastName: "Gokale"
}
];
var jGrid = $("#ParentGrid");
var kGrid = jGrid.kendoGrid({
dataSource: dataSource,
dataBound: function(){
this.expandRow(this.tbody.find("tr.k-master-row"));
},
detailInit: InitChildGrid,
scrollable: false,
selectable: 'row',
columns: [
{ field: "ID" },
{ field: "FirstName" },
{ field: "LastName" }
]
}).data("kendoGrid");
}
$(document).ready(function(){
InitParentGrid();
});
})(window, jQuery, kendo);
</script>
<div id="ParentGrid"></div>
Output in old version:
Output in latest version:
Georgi Denchev
Telerik team
answered
on
12 Jan 2022
2 answers
359 views
Hello,
I have a question about grids loading: some customers could receive the fully loaded content on the UI, while some received a different loaded content for the same JSP code. Here are how the loaded HTML using the same code look like in the browser for two different customers:
for one customer:
<div id="transportGrid">
<div class="k-header k-grid-toolbar ">...</div>
<table role="grid" tabindex="0" data-role="selectable" class="k-selectable" style aria-activedescendant="transportGrid_active_cell">...</table>
<div class="k-pager-wrap k-grid-pager k-widget k-floatwrap userDefinedBgColor" data-role="pager">...</div>
<div class="k-resize-handle">...</div>
</div>
for the second customer:
<div id="transportGrid">
<div class="k-header k-grid-toolbar">...</div>
<div class="k-grid-header" style="padding-right: 17px;">...</div>
<div class="k-grid-content k-auto-scrollable userDefinedBgColor">...</div>
<div class="k-pager-wrap k-grid-pager k-widget k-floatwrap userDefinedBgColor" data-role="pager">...</div>
</div>so for the first customer, the <divs> containing the k-grid-header and k-grid-content are ignored and replaced by <table> element.
Do you know the reason of the difference of the loaded contents?
Thanks in advance for your help and answer.
Best regards,
Antsa Rakotoarimalala
