We Keep Coding

Ag-grid: duplicate node id 107 detected from getRowNodeId callback , this could cause issues in your grid

I am going to do live data streaming on ag-grid datatable, so I used DeltaRowData for gridOptions and added getRowNodeId method as well which return unique value 'id'.
After all, I got a live update result on my grid table within some period I set, but some rows are duplicated so I can notice total count is a bit increased each time it loads updated data. The question title is warning message from browser console, I got bunch of these messages with different id number. Actually it is supposed not to do this from below docs. This is supposed to detect dups and smartly added new ones if not exist. Ofc, there are several ways to get refreshed data live, but I chose this one, since it says it helps to persist grid info like selected rows, current position of scroll on the grid etc. I am using vanilla js, not going to use any frameworks.
How do I make live data updated periodically without changing any current grid stuff? There is no error on the code, so do not try to speak about any bug. Maybe I am wrong with current implementation, Anyway, I want to know the idea or hear any implementation experience on this.
let gridOptions = {
....
deltaRowDataMode: true,
getRowNodeId = (data) => {
return data.id; // return the property you want set as the id.
}
}
fetch(loadUrl).then((res) => {
return res.json()
}).then((data) => {
gridOptions.api.setRowData(data);
})
...

If you get:
duplicated node warning
it means your getRowNodeId() has 1 value for 2 different rows.
here is part from source:
if (this.allNodesMap[node.id]) {
console.warn("ag-grid: duplicate node id '" + node.id + "' detected from getRowNodeId callback, this could cause issues in your grid.");
}
so try to check your data again.
if u 100% sure there is an error not related with your data - cut oof the private data, create a plinkr/stackblitz examples to reproduce your issue and then it would be simpler to check and help you.

Strange conversion of time- and datetime-format in knockout.JS

I have a table in my SQL Server database with two column
'whenDateTime' (datetime,null)
'duration' (time(7),null)
From my javascript I call a JSON-service with
$.getJSON("myService/GetAllHappenings",
function (allData) {
var mappedAction = $.map(allData, function (item) {
return new Happening(item)
});
self.Happenings(mappedAction);
//... some other code...
});
where
self.Happenings = ko.observableArray();
When inspecting "myService/GetAllHappenings" as an URL in my browser (Firefox) I get:
<duration>PT1M</duration>
<whenDateTime>2014-11-12T11:26:00</whenDateTime>
In the database the values are:
sduration whenDateTime
00:01:00.0000000 2014-11-12 11:26:00.000
But when I step through the $.getJSON the values are ok until the line
self.Happenings(mappedAction);
Before this line mappedAction contains the data
"2014-11-12T11:26:00"
"00:01:00"
But just after this line the data are transformed into
"30.06.2020 11:26"
"00:00"
How can this happen?
And how can I fix this?

I think super cool's answer is good. I've ran into weird problems trying to instantiate jQuery-UI datepickers on top of <input type="text"> elements that are supposed to display datetimes when I send them over as datetimes.

How to get filtered value from kendo grid?

My question is how can I fetch filtered value to use it for further operation? and also how can I use footertemplate value? I searched at many forums and telerik method option also but not getting what i want. Please help me if anyone know answer
Thanks!
I tried this:
var dataSource = $("#report").data("kendoGrid").dataSource;
var filteredDataSource = new kendo.data.DataSource({
data: dataSource.data(),
filter: dataSource.filter()
});
filteredDataSource.read();
var data = filteredDataSource.view();

I have created a fiddle for you to check out. It appears that your code does indeed return the filtered data on clicking "Run" below the grid and looking at the console window. So, it is not clear what you are having trouble with. Do you have any browser console errors?

How do I load data for Dojo Dgrid Table using AJAX?

I am exploring using DGrid for my web application. I am trying to have a table similar to this.
The code for the example above is here.
The table uses a memory store as the source of its data - the summary field there is what shows up when we click and expand each row.
I want the details(i.e the text shown when we click a row) to be fetched from the server on clicking on the row instead of being statically loaded along with rest of the page.
How do I modify the above code to be able to do that?
(My requirement is that of an HTML table, each row expandable on clicking, where the data on each expansion is fetched from the server, using AJAX for instance. I am just exploring dgrid as an option, as I get sortable columns for free with dgrid. If there is a better option, please let me know)
EDIT: Basically I am looking for ideas for doing that and not expecting anyone to actually give me the code. Being rather unfamiliar with Dojo, I am not sure what would be the right approach

If your ajax call returns html, you could place a dijit/layout/ContentPane in your renderer, and set the url of the contents you want to fetch in the ContentPane's href property. Assuming that your initial data (the equivalent of the example's memory store) would have a property called "yourServiceCallHref" containing the url you want to lazy load, your could try this :
require(["dijit/layout/ContentPane", ...], function(ContentPane){
renderers = {
...,
table: function(obj, options){
var div = put("div.collapsed", Grid.prototype.renderRow.apply(this, arguments)),
cp = new ContentPane({
href : obj.yourServiceCallHref
}),
expando = put(div, "div.expando", cp.domNode);
cp.startup();
return div;
}
});
If your service returns json, you could probably do something with dojo/request in a similar fashion. Just add your dom creation steps in your request callback and put them inside the div called "expando"...
Another option would be to replace the Memory store by a JsonRest store, and have the server output the same json format than the one you see on the Memory store. That means all the data would be fetched in a single call though...

Kendo Refresh (DropDownList.refresh()) not working ERROR Not define

Im trying to refresh the Drop Down List after another DropDownList is Change But the Refresh() method is Undefined Error Is Promoting.There For I Tried the Read the DataSource again and it shows it loading but the data is still the same.Help to Solve this Issue please.
Code:
$("#DropDownList1").change(function () {
custCode = $("#DropDownList1").val();
$("#titles").data("kendoDropDownList").dataSource.read(); //shows list Loading But Same Data Is present .
$("#titles").data("kendoDropDownList").refresh(); //NOT Working
});

1- Try adding cache: false to disable the cache in Kendo DropDownList's datasource read property:
read: {
url: <<"url">>,
cache: false
}
2- Then call read(),
$("#ddl").data("kendoDropDownList").dataSource.read();
It worked for me :)

For me just this line did the job:
$("#myDropDownList").data("kendoDropDownList").dataSource.read();

You might find passing parameters to the ".data()" of the dataSource useful.
Example:
var myDataSource={bookId: 10, Name: "Kendo"}
$("#titles").data("kendoDropDownList").dataSource.data(myDataSource);
However, you could also try the cascadingFrom attribute of the DropDownList when you want to update one DropDownList based on the selection of another DropDownList
//Houdini

on your read url add '?myDate=' + new Date(). This will refresh the data. Without it (unless you have meta tags to prevent caching) it will give you that data it has already read.

In my case I commented the line
//cascadeFrom: "dropdown1_id"
on the second kendo dropdown and it worked, for some reason it was messing with the data source updates.

Looks like the Kendo dropdownlist has changed. Now the answer is:
var dataSource = new kendo.data.DataSource({
data: my_new_json_list
});
var dropdownlist = $("#products").data("kendoDropDownList");
dropdownlist.setDataSource(dataSource);
Reference: https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/methods/setdatasource