I have a kendo combobox to determine what data is being called in the sql backend. The rows from the sql table are added to a table element below the combobox and one of those elements is a button that saves the data when edited. For some reason when i change to another client at times it will call the button event to save an item in the table but apply it to the next combobox value and leads to data being copied from one client to the other. Not sure how to being fixing this issue but I have isolated it to the change event via loggers.
here is some code :
<form id="form1" runat="server" autocomplete="none"> <div id ="lineitemeditdiv" runat="server" style="padding:1%;"> Companies : <select id="clientbillingcompanies" runat="server"></select><br/> <script> window.onload = function() { //$('#clientbillingcompanies').chosen({change: onChangeKB}); $('#clientbillingcompanies').kendoComboBox(); $("#clientbillingcompanies").parent().css('width',"50%"); $("#clientbillingcompanies").data('kendoComboBox').input.attr('autocomplete','off'); $("#clientbillingcompanies").data('kendoComboBox').bind("change", onChangeKB) }; </script> <table id="lineitemtable" runat="server" > </table> <br /> <button id="submitlineitem" >Add</button> </div> </form>
In my diagram I have an event handler on the 'select'; so once a selection of 1 or more shapes is selected then the function fires and the args.selection is stored in a variable. As what is stated is that the args.selection is an array of shapes and/or connections.
I then have a javascript function that gets called when a button is clicked and the following javascript code is run....
function arrangeH(item) {
if (selection === null || selection.length === 1) { return true; }
var diagram = $("#diagram").data("kendoDiagram");
for (var i = 0; i < selection.length; i++) {
var shapeId = selection[i].id;
if (selection[i] instanceof kendo.dataviz.diagram.Shape) {
var posX = selection[i]._bounds.x; posX = Math.round(posX);
var posY = item._bounds.y; posY = Math.round(posY);
console.log('recorded position for: ' + shapeId);
$.ajax({
type: "POST", url: "ReportOutMap.aspx/saveMapPos", data: "{p1:'" + posX + "',p2:'" + posY + "',p3:'" + encodeURIComponent(shapeId) + "',p4:'false'}", contentType: "application/json; charset=utf-8", dataType: "json", sync: "false"
}).done(function (values) {
console.log('saved position for: ' + shapeId);
selection[i].position(new kendo.dataviz.diagram.Point(posX, posY));
}).fail(function (xhr, textstatus) { console.log('failed to save position for: ' + shapeId); });
}
}
}
The purpose of this function is to place all the shapes on the same Y axis point as the shape passed to the function. However, when this is run the new position is stored in the database BUT the actual visual position of the shape does not move. When I look at the browser console log pane, there is a javascript error stating the following...
Uncaught TypeError: Cannot read property 'position' of undefined
at Object.<anonymous> (ReportOutMap.aspx:876)
at i (jquery.min.js?v=1:2)
at Object.fireWith [as resolveWith] (jquery.min.js?v=1:2)
at y (jquery.min.js?v=1:4)
at XMLHttpRequest.c (jquery.min.js?v=1:4)
I feel like I am missing something, but the selection[i] has been identified as a shape?
Hi,
We have following requirement.
We need to display logical file folders with third party api. (Which asynchronously call)
How can we directly show third level without navigate?
If we use navigate then there are 7 calls for api and we want to avoid that. How we can achieve this when control loads?
Like currently
When user loads the control
First call for root api
When user clicks on 1st level folder
Two API calls are made
and same way for 2nd and 3r level.
We have already loading data upto 3 level but still filemanager doesn't expand automatically.
How we can expand shared folder id when filemanager control loads?
I have a kendoGrid (for JQuery) with 5 columns. Lets say those columns are called columns A, B, C, D and E. I only want columns A and B to be inline editable. If the user clicks on Columns C, D, E I want nothing to happen.
What event can I use to prevent the user from editing columns C, D and E while still allowing columns A and B to be inline editable?
I have tried using the beforEdit event but there seems to be no way to identify which cell is being edited. I have tried using the edit event but it is too late at this point. The field is all ready showing in EDIT mode to the user when this event is being called.
Any other ideas?
How can we add 2 more fields in Schedular UI?
I would like to add one field called location with textbox
and another field called group which is dropdown?
Do we have any example on this?
I populate my grid with objects of a specific class, but when i get them via Grid.dataItems(), they are no longer that specific class but plain objects. is there a way to not have Kendo Grid lose their Initial Class type? Or better yet, have the Grid just use the original objects i give? I want to be able to call the specific class's methods from the individual dataItems, but i can't because of this.
Thanks
Keith
The tasks are placed in wrong date in the chart panel.
for example: the "T2" task has start date (20/10/2020) and end date (23/10/2020) but in the chart is placed in (6/11) - (9/11).
this is the configuration I used for rendering the component:
kendo.jQuery(chartElement).kendoGantt({
views: [{type:
'week'
, selected:
true
, slotSize: 30}],
rowHeight: 10,
toolbar: [
'pdf'
],
listWidth:
"0%"
,
editable:
false
,
selectable:
true
,
tooltip: {
visible:
true
,
template: `
#= task.tooltip #`
},
range: {
start:
new
Date(
this
.model.startDate),
end:
new
Date(
this
.model.endDate)
},
showWorkDays:
false
,
workDayStart:
this
.model.startDate,
workDayEnd:
this
.model.endDate,
taskTemplate: `<div style=
"background-color: #= backgroundColor #; padding: 4px 8px; border-radius: 2px"
> #= title # </div>`,
});
// this is how I added data into the chart
const dataSource =
new
kendo.data.GanttDataSource({
data:
this
.listOfScheduleTasksForGanttChart.map(task => {
const startDate =
new
Date(task[
this
.ganttChartTasksGridStartDate]);
const endDate =
new
Date(task[
this
.ganttChartTasksGridEndDate]);
return
{
id: task.scheduleTaskId,
orderId: task.sortId,
parentId: task.parentId,
title: task.taskName,
start: startDate,
end: endDate,
backgroundColor: task.backColor,
expanded:
true
,
tooltip: task.toolTip
}
})
});
Hi
I have custom columns defined for Grid table:
columns: [
{
field: "ID",
width: 50,
filterable: false,
attributes: {"data-test":'#=ID#'},
media: "(min-width: 900px)"
},
{
field: "IDstatus",
width: 50,
filterable: false,
attributes: {"data-status": '#=Status#'},
media: "(min-width: 600px and max-width: 900px)"
},
…
What I would like to do is to change 'Status" in attributes by taking out parts of code/text from it, but when I try to get this to work in this way:
attributes: {"data-status": '# var z = Status; var re = /<span.*?<\/span>/gm; z = String(z).replace(re, ""); # #=z#'},
… it throws "Invalid template" error.
I was trying to escape quotations, add quotations or remove them, even using non-regex replace but with no success.
Is it possible to just get "review" from this cell to fill in "data-status" attribute?
Status cell is rendered on PHP page as:
<td><span class="k-icon k-i-track-changes-enable"></span> review</td>
--
Thank you in advance for your reply,
Karol Kaminski