PouchDB database can be used as both local persistence storage and remote
protocol that syncs with server.
Kendo UI widgets like Kendo Grid use DataSource object to be bound to remote (CouchDB) or local data storage .
Is it possible to abstract PouchDB database with Kendo Datasource, and use PouchDB with Kendo UI widgets?
I wrote a library that acts as adapter between Kendo DataSource and PouchDB database, here's the link:
https://github.com/terikon/kendo-pouchdb
You can use following code to initialize DataSource that binds to PouchDB database:
var dataSource = new kendo.data.DataSource({
type: "pouchdb",
transport: {
pouchdb: {
db: db,
idFactory: function (data) {
return data.ProductID;
}
}
});
Here's demo.
Related
I am trying to use a syncfusion ej-grid to auto generate a grid using data retrieved from an ajax call. In doing so, I am running into a problem.
I am getting an error message when the page first renders saying "DataSource must not be empty at initial load since columns are generated from dataSource in AutoGenerate Column Grid". While I understand this, I am struggling because I don't know anything about the datasource until after the ajax call is returned.
This is a .NET CORE 5 razor page....
My razor page:
(note: 'data' below is a json serialized System.Data.DataTable).
<ej-grid id="gridResults" allowPaging="true"></ej-grid>
<script type="text/javascript>
function ajaxResponse(data) {
$('#gridResults').ejGrid({
datasource: data
});
}
</script>
So my questions are two-fold:
First, is there a way to bypass the initial error I am getting about the datasource not being set (since I don't have a datasource yet)...
Second, Will my approach of providing a serialized DataTable work, or do I need to do something different to pass the data via Javascript like this?
Right now when I return from the ajax call, I don't get any errors, but nothing happens...
Thanks in advance!
Greetings from Syncfusion Support.
Query 1: I am getting an error message when the page first renders saying "DataSource must not be empty at initial load since columns are generated from dataSource in AutoGenerate Column Grid".
This issue will occur when we do not bind dataSource and define columns to the Grid. For rendering Grid, we should either define columns or bind data source at the initial rendering.
Since you are not binding data in initial rendering, we suggest you to define columns so that Grid will be rendered without any errors.
Query 2: Will my approach of providing a serialized DataTable work, or do I need to do something different to pass the data via Javascript like this?
For binding data table to Grid after serializing it, we should call the dataSource method of grid and pass the data as parameter to it as shown in below code,
<ej-button id="repeatButton" text="click" size="Medium" show-rounded-corner="true" click="btnClick" />
<ej-grid id="FlatGrid" allow-paging="true">
<e-columns>
<e-column field="No" header-text="Order ID" is-primary-key="true"></e-column>
<e-column field="Name" header-text="Employee ID"></e-column>
</e-columns>
</ej-grid>
<script>
function btnClick(args) {
$.ajax({
url: '/Grid/DataSource',
dataType: "json",
type: 'POST',
success: function (data) {
var grid = $('.e-grid').data("ejGrid"); // grid instance
grid.dataSource(data);
// update grid data source by calling dataSource method and passing data
}
})
}
</script>
[HttpPost]
public ActionResult DataSource()
{
System.Data.DataTable dt = new DataTable("Table1");
DataColumn cl = new DataColumn("No");
dt.Columns.Add(cl);
cl = new DataColumn("Name");
dt.Columns.Add(cl);
DataRow dataRow = dt.NewRow();
dataRow[0] = 1;
dataRow[1] = "John";
dt.Rows.Add(dataRow);
var data1 = Utils.DataTableToJson(dt); // method to serialize data table
return Json(data1); // fetching and returning boolean column
}
In the above code example, we have fetched data using ajax call in button click and bind it to grid using dataSource method.
Please check the below API help documentation,
https://help.syncfusion.com/api/js/ejgrid#methods:datasource
Kindly get back to us for further assistance.
Regards,
Padmavathy Kamalanathan
After the Kendo UI ASP.NET MVC library to the latest version the following code doesn't work:
function Error(e)
{
var gridName = this.options.table.context.id
var grid = $('#' + gridName).data("kendoGrid");
}
The table property is null. How are we supposed to find the sender from the 'e' which is being passed here.
Thanks
There is no error event in the grid API. There is one in the dataSource (which is what I am going to assume you are referencing.)
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#events-error
This event returns an instance of the dataSource object with the this keyword (You can also access the dataSource with e.sender).
The dataSource is not Grid specific, and it seems Telerik has removed the table property from the dataSource.
This thread has a hack that should get what you want.
Get a reference to Kendo Grid from inside the error handler
It is in the updated edit.
I have a page which uses a Kendo Grid attached to a Kendo DataSource which pulls data from the server. When the page initially loads another request is done by the datasource to pull data. This causes a delay in the page actually loading. What I would like to do is send the initial data model in the page response but I cannot find a what to push that data into the DataSource. Has anyone else tried doing this?
Pass json data in your page first call.
Your pass json is set into model.
Set your json into data.
EX.
var dataSource = new kendo.data.DataSource({
data: [
{ name: "John Doe", age: 33 }
]
});
Set datasource of grid.
var grid = $("#grid").data("kendoGrid");
grid.setDataSource(dataSource);
I am wondering if there's an easy way to have the multiselect widget's css functionality shown in this demo
http://demos.kendoui.com/web/multiselect/index.html
applied to an autocomplete widget.
If the only reason for using autocomplete is that the list of values is huge and you want to do server side filtering (serverFiltering) with a multiselect widget as well. You just need to define serverFiltering as true.
Example:
var ds = new kendo.data.DataSource({
transport: {
read: {
url : "getData.php"
}
},
serverFiltering: true
});
$("#items").kendoMultiSelect({
dataValueField: "name",
dataTextField : "name",
dataSource : ds
});
You will receive a some additional parameters saying what the user has typed so far and you server can return only the data that meets the condition.
This JSFiddle (http://jsfiddle.net/OnaBai/rpDuL/) tries to show you how it works. You can start typing a country name and see that it actually filters the data. Since this is just JavaScript I've simulated server filtering implementing a read function that greps the data for those records meeting the condition.
My sample data listview grid structure is like this.
<div id="listView">
<div class="product"><h3>India</h3></div>
<div class="product1"><h3>Gujarat</h3></div>
<div class="product"><h3>Surat</h3></div>
</div>
I want to remove all data item in listview datasource. I am search using kendo ui autocomplete and add new data in datasource grid. so whenever i add new then old data will remove and add new data.
So if you know then please reply.
DataSource are observable object so unless there is a good reason for it, you don't need to recreate, just change the content using data method in DataSource (documentation here)
So the code should be:
var listView = $("#listView").data("kendoListView");
listView.dataSource.data(newData);
See running demo here: http://jsfiddle.net/OnaBai/g6PZ7/
When you add the data to your grid datasource, you can create a new datasource and set the listview datasource like the following:
/// ... do your add code to grid dataSource
var listView = $("#listView").data("kendoListView");
var newDataSource = new kendo.data.DataSource(/* your data source options */);
listView.setDataSource(newDataSource);
See the official documentation for more information here: http://docs.kendoui.com/api/web/listview#methods-setDataSource