I have 4 kendo grids in four tabs of a single tabstrip. The requirement is to populate them based on a single textbox input. How do I populate all four of them from a single datasource?
You should have a datasource which will get data.
Foreach grid have a different datasource.
In the grids datasource initialization do something like:
dataSource: new kendo.data.DataSource({ data: globalDataSource.data() }),
Then you can apply filters foreach grid's datasource inidividually, like:
filter: { field: "name", operator: "startswith", value: "Jane" }
Or you can set each grid datasource based on condition:
if (condition){
$("#grid1").data("kendoGrid").setDataSource(globalDataSource);
}
else{
$("#grid1").data("kendoGrid").setDataSource(new kendo.data.DataSource({data: [] }););
}
Related
I have a application that has a kendo grid.
I can filter the grid using several dropdownlists that are outside the grid.
When I click on search, I add filters to the datasource filter list. For example,
var dataSource = $("#grid").data("kendoGrid").dataSource;
var dataSourceFilterQuery = new Array();
if ($("#something").data("kendoDropDownList").value() !== null) {
dataSourceFilterQuery.push({ field: "something", operator: "IsGreaterThanOrEqualTo", value: ($("#something").data("kendoDropDownList").value()) });
}
dataSource.filter(dataSourceFilterQuery);
Then I get the results I want. It works.
I then have the possibility of saving the values of all the dropdownlists as one filter in localStorage.
const filtersObject = {
Something: whatever.value(),
...
};
this.storage.setItem("Filter", JSON.stringify(filtersObject));
When I restart the application, the dropdownlists are populated with whatever is in localStorage
const filter = JSON.parse(localStorage.getItem("Filter"));
$("#something").data("kendoDropDownList").value(filters.whatever || "");
}
The thing is, I wanted to add these filters, if they exist on localStorage, to the datasource when the application starts so that the user can see the results of the filter he saved when the applications starts and not have to click on search again.
So, what I want is to do apply this
var dataSource = $("#grid").data("kendoGrid").dataSource;
var dataSourceFilterQuery = new Array();
if ($("#something").data("kendoDropDownList").value() !== null) {
dataSourceFilterQuery.push({ field: "something", operator: "IsGreaterThanOrEqualTo", value: ($("#something").data("kendoDropDownList").value()) });
}
dataSource.filter(dataSourceFilterQuery);
before the grid is displayed.
Is this possible?
Tks in advance.
Configure the Grid with
autoBind: false
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-autoBind
and when the page loads, call your filter setup, then trigger the grid load manually (via dataSource.read())
I want to be able to filter a column based on values from a different column.
I have bound a column to ID property and showing Name (using template). When the user filters/sorts, the values of the bound property (ID) are used. I want to use the values of a different property/column.
I have already figured out a way to handle sort (using compare function for kendo.ui.GridColumnSortable) but cannot find a way to handle filter.
PS: I tried using filterMemberPath and sortMemberPath but they only seem to work for server side filtering/sorting.
Talked to Kendo support and found a couple of ways to handle this issue:
if using Kendo version 2016.3 or above, the filter event can be used
filterable: true,
filter: function(e) {
if (e.filter.filters[0].field == "age") {
e.preventDefault();
this.dataSource.filter({ field: "name", operator: "startswith", value: "Jane" });
}
but if using kendo version 2016.1 or below, the following approach works which uses filterMenuInit and binds the click event on filter button
filterable: true,
filterMenuInit: function(e) {
var button = e.container.find(".k-primary");
var fieldName = e.field;
var grid = this;
button.on("click", function(e) {
e.preventDefault()
grid.dataSource.filter({ field: "name", operator: "startswith", value: "Jane" });
});
},
I have many rows in Kendo detailed grid and I am trying to show the sum of the detailed rows in outer grid's data cells. Is there any way I can do so ?
Hi I have created an example for you in this example i am showing total of first grid's columns into second grid's cell.
code:-
//calucalte the total of value column of first grid and create new data
var total=0;
var data=$("#grid").data("kendoGrid").dataSource.data();
$.each(data,function(i,row)
{
total+=row.value;
});
//create dataSource for new grid
var source=[{"total":total}];
//create new grid here
$("#grid2").kendoGrid({
dataSource: source,
schema: {
model: {
id: "id",
fields: {
total: { type: "number", editable: false },
}
}
},
});
working example:-http://jsfiddle.net/mga6f/287/
thanks
With the particular database server we are using it's just as expensive to run a COUNT() query as it is to run the actual query, so I'd prefer to not display the count at all.
Normally, outside of kendo grid, I would just display previous and next buttons but not show the total count. Is it possible to achieve something similar with Kendo Grid?
Set the numeric property of the pageable object in your kendo grid options. That should disable the numeric buttons for you:
$("#grid").kendoGrid({
pageable: {
numeric: false
}
});
See http://docs.kendoui.com/api/web/grid#configuration-pageable.numeric for more info
To set the data to a specific count, in your kendo datasource options, use the schema.total function to return some large value to give you enough paged data:
var dataSource = new kendo.data.DataSource({
schema: {
total: function(response) {
return 100000000;
}
}
});
I am a new user and have not been able to find an example demonstrating what I'm trying to accomplish.
I need to use the same Kendo.DropDownList in two different contexts, but must update one attribute [.Name("DisbursedTo")]. At first I used a hide/show approach with two separate ddl's. It worked, except that each ddl widget required a unique '.Name', so my updates to the model attribute were off. Using one ddl, I'm trying to dynamically change the ddl properties.
By default I load the ddl with 'Locations' data (this works fine). After initial load, I use a simple Radio Button group 'onclick' to switch to 'ADUsers', or back to 'Locations'.
cshtml
<label for="DisbursedTo">Disbursed To:</label>
#(Html.Kendo().DropDownList()
.Name("DisbursedTo")
.DataTextField("Name")
.DataValueField("LocationId")
.SelectedIndex(20)
.DataSource(dataSource => dataSource
.Read(read => read.Action("GetLocations", "Disbursement")) // Specify the action method and controller name
.ServerFiltering(true) // If true the DataSource will not filter the data on the client.
)
)
script
function OwnerTypeClick(ownerTypeValue) {
if (ownerTypeValue == "P") {
alert("calling DisbursedToADUsers");
DisbursedToADUsers();
}
else {
alert("calling DisbursedToLocations");
DisbursedToLocations();
}
}
function DisbursedToADUsers() {
var adUsersIntranetDataSource = new kendo.data.DataSource({
read: {
action: { "GetADUsersIntranet": "Disbursements" }
}
});
var ddl = $("#DisbursedTo").kendoDropDownList({
dataTextField: "displayName",
dataValueField: "EmployeeNumber",
dataSource: adUsersIntranetDataSource,
autoBind: true
});
ddl.dataSource.read();
}
function DisbursedToLocations() {
var locationsDataSource = new kendo.data.DataSource({
read: {
action: { "GetLocations": "Disbursements" }
}
});
var ddl = $("#DisbursedTo").kendoDropDownList({
dataTextField: "Name",
dataValueField: "LocationId",
dataSource: locationsDataSource,
autoBind: true
});
ddl.dataSource.read();
}
I'm getting the following error on the 'ddl.dataSource.read();' so I'm not getting my datasource changed/initialize properly.
0x800a138f - Microsoft JScript runtime error: Unable to get value of the property 'read': object is null or undefined
If anyone has done something similar, I'd greatly appreciate some assistance.
The provided code suggests that you are initializing new DropDownList widgets from the same HTML element every time, and also that new DataSources are created every time.
You can create the two different DataSources outside of the functions, and then in the functions bodies use the DropDownList setDataSource() method to switch between the two dataSources, and the setOptions() method to change the other options like dataTextField and dataValueField, e.g.:
Example
You need to use a Kendo DropDownListFor.