I have a kendo grid with datasource which have data string array.
I want use the option mode row and filter on fiel organizations but it doesn't work because it wait a string not a array.
The error is : "TypeError: (intermediate value).toLowerCase is not a function"
I have a exmaple here : https://dojo.telerik.com/#lgoubet/ETOXoFot
Here my code :
var organizations_arr = ['org1', 'org2', 'org3', 'org4'];
var data = [
{
Name: 'abc',
Organizations: ["org1, org4"]
},
{
Name: 'def',
Organizations:['org3']
}
];
function orgEditor(container, options) {
$("<select multiple='multiple' data-bind='value:Organizations'/>")
.appendTo(container)
.kendoMultiSelect({
dataSource: organizations_arr,
valuePrimitive: true,
value: options.model.Organizations
});
}
$("#grid").kendoGrid({
dataSource: {
data: data
},
filterable: {
mode: "row"
},
sortable: true,
editable: true,
columns: [{
field: "Name",
width: 200
}, {
field: "Organizations",
width: 150,
template: "#= Organizations.join(', ') #",
editor: orgEditor
}]
});
Do you have a solution ?
Thanks for your help
Related
I have a grid and a multiselect ,i want to filter the grid by the multiselect according to what i select ,and when i de select,the grid should be filterd accordingly,here is my grid:
$("#grid").kendoGrid({
dataSource: ds2,
height: 550,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{ field: "name",
title: "Name",width:"50px"},
{ field: "Description",
title: "Description", width: "80px"
},
{ field: "WindSpeed",
title: "Wind Speed", width: "40px"
},
{ field: "RPM",
title: "RPM", width: "40px"
},
{ field: "Power",
title: "Power", width: "40px"
}
]
});
the data which bind the datasource:
var ds1 = new kendo.data.DataSource({
data: rsturn_f.EventNames
});
var ds2 = new kendo.data.DataSource({
data: rsturn_f.Data
});
and here is the multi select:
$("#evnts").kendoMultiSelect({
placeholder: "Select products...",
dataTextField: "Nme",
dataValueField: "Nme",
//autoBind: false,
select: onSelect,
deselect: onDeselect,
dataSource: ds1
});
by onselect i do this:
function onSelect(e) {
ds2.filter({ field: "Description", operator: "startswith", value: e.dataItem });
}
now if i want to filter on multiple value and un filter by removing the values from multiselect i dont know what should i do,any idea?
You have to use change event of the Multiselect. You can directly use a function in the operation attribute which is passed to the dataSource filter API.
function onChange(e) {
ds2.filter({ field: "Description", value: this.value(),
operator: function(currentValue, filterValues){
if(filterValues.length===0){
return true;
}
if(filterValues.indexOf(currentValue)!==-1){
return true;
}
return false;
}
});
}
I have this grid with a custom multi-select filter. When I click the filter icon an AJAX method calls an API to grab filter values. The method call is defined in the DocType column.
Here is my grid builder function:
$("#attachmentsGrid").kendoGrid({
pageable: {
change: function() {
CH.RelatedItems.GridPager();
}
},
scrollable: false,
sortable: true,
dataSource: attachments,
filterable: {
extra: false,
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to",
contains: "Contains",
}
}
},
columns:
[
{
title: "id",
field: "Id", //turns out this needs to be lower case
sortable: false,
filterable: false,
template: "<input name='cbCheckboxColumn' type='checkbox' onclick='CH.RelatedItems.ToggleAttachmentsByCheckboxColumn()' data-row='#: Id#' />",
headerTemplate: "<input id='cbCheckboxHeader' type='checkbox' onclick='CH.RelatedItems.ToggleAttachmentsByCheckboxHeader()'",
width: "18px",
},
{
title: "Exists?",
field: "IsAlreadyAttached",
type: "boolean",
sortable: false,
template: "<div style='text-align: center'>#: IsAlreadyAttached #</div>",
filterable: false,
width: "110px",
},
{
title: "Icon",
field: "DocType",
sortable: true,
template: "<div style='text-align: center'><img src='" + config.SPHostUrl + "/_layouts/images/#: DocIcon #' /></div>",
width: "60px",
filterable: {
ui: CH.RelatedItems.AttachmentsIconFilter,
extra: false,
},
},
{
title: "File Name",
field: "Name",
sortable: true,
filterable: false,
template: "<a href='#: Url#' target='_blank'>#: Name#</a>",
width: "650px",
},
{
title: "Modified",
field: "LastModifiedDateOnly",
template: "<span>#: LastModified#</span>",
sortable: true,
width: "250px",
filterable: {
ui: CH.RelatedItems.AttachmentsDateFilter,
extra: false
}
},
],
dataBound: CH.RelatedItems.PostGridDataBound
});
The AttachmentsIconFilter function is here:
pub.AttachmentsIconFilter = function (element) {
var menu = $(element).parent();
menu.find(".k-filter-help-text").text("Show document types:");
menu.find("[data-role=dropdownlist]").remove();
var multiSelect = element.kendoMultiSelect({
dataSource: {
transport: {
read: {
datatype: "jsonp",
url: config.WorkPaperViewRelativePath + "/_RelatedItemsPopup/GetAttachmentsUniqueDocIcons/" + config.SPQueryString
}
}
},
}).data("kendoMultiSelect");
menu.find("[type=submit]").on("click", { widget: multiSelect }, CH.RelatedItems.AttachmentsFilterByIcon);
}
When the AttachmentsIconFilter runs, the AJAX call get made twice:
Kendo Double GET
I thought that the property: filter: { extra: false } was supposed to prevent this double GET?
Also, when I select my filters and the grid make a new request to get the filtered records, it does a double POST. The function for the call to filter the grid is here:
pub.AttachmentsFilterByIcon = function (e) {
var icons = e.data.widget.value();
var filter = { logic: "or", filters: [] };
for (var i = 0; i < icons.length; i++)
{
filter.filters.push({ field: "DocIcon", operator: "Contains", value: icons[i].Contains });
}
$("#attachmentsGrid").data("kendoGrid").dataSource.filter(filter);
}
Any help here? What am I missing?
I have a requirement in which I have to show two dropdown list in the Filterable cell of kendo grid. These two dropdown lists would filter two different columns in the kendo grid.
One thought I had is having template which would be some kendo container like some panel probably, and then add two dropdowns to that container.
Is this even possible? If yes how to achieve this?
Here is my kendo grid definition.
ctrl.mainGridOptions = {
dataSource: ctrl.gridDataSource,
columns: [
{
title: 'Col1-Col2',
field: 'Col1',
width: 200,
template: kendo.template($("#col1").html()),
filterable: { cell: { template: ctrl.coonetemplate, showOperators: false } }
},
{
field: 'Col3',
width: 150,
title: 'Col3',
template: kendo.template($("#col3").html()),
filterable: { cell: { template: ctrl.colthreeTemplate, showOperators: false } }
}
]
}
Here is a mockup of what I want to achieve.
There are a few different parts to this.
First, if you want to have multiple filter controls for different pieces of data, you should define a column for each one. Then, put a template on the first column to have it display the data for two columns. Use the attributes option to set a colspan=2. Then, use the attributes option on the second columns to set style="display:none".
The second part is getting the dropdowns. I generally prefer to use the values option to accomplish this. The code below uses this for the OrderID column. The other alternative was the approach you were on, which is to use the cell template. The code below uses this on the ShipName column.
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "string" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
},
height: 550,
filterable: {
mode: "row"
},
pageable: true,
columns: [
{
field: "OrderID",
width: 150,
attributes: {
colspan: 2
},
values: [
{text: "10248", value: "one"},
{text:"10249", value: "two"}
],
template: '#:OrderID# (#:ShipName#)',
filterable: {
cell: {
operator: "eq",
showOperators: false
}
}
},
{
attributes: {
style: "display:none"
},
field: "ShipName",
width: 200,
title: "Ship Name",
filterable: {
cell: {
template: function(args) {
args.element.kendoDropDownList({
dataSource: args.dataSource,
dataTextField: "ShipName",
dataValueField: "ShipName",
valuePrimitive: true
});
},
operator: "eq",
showOperators: false
}
}
},
{
field: "Freight",
width: 255,
filterable: false
}]
});
});
</script>
</div>
Runnable Demo
Kendo Grid filterable cell with custom options column wise and by using this solution it also overwrites general filters settings in case specific column requirement. ASP.NET MVC C#.
columns.Bound(c => c.columnName)
.Format("{0}%")
.Filterable(ftb => ftb
.Cell(cell => cell.ShowOperators(true))
.Extra(false)
.Operators(op => op
.ForNumber(fn => fn
.Clear()
.IsEqualTo(CommonResource.GridFilter_IsEqualTo)
)
)
)
.Title("Column Name");
I am displaying Grid and using detailTemplate to expandRow. But when expand the row, I want to pass the row ID and get datasource and display another grid.
I think detailTemplate won't work in this case. How can I do this ?
Here is my Code
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
pageSize: 20,
data: [
{ id: "1", name: "Andrew", age: "30" },
{ id: "2", name: "Robert", age: "29" },
{ id: "3", name: "Frank", age: "35" }
],
autoSync: true,
schema: {
model: {
id: "id",
fields: {
id: { editable: false, nullable: true, type: "number" },
name: { editable: false },
age: {
validation: { min: 0, required: true },
editable: true,
nullable: true,
type: "number"
}
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
editable: "inline",
columns: [
{ field: "name",title: "Name" },
{ field: "age", title: "Age", width: "180px"},
{ command: ["edit"] }
],
detailTemplate: "<div>Name: #: name #</div><div>Age: #: age #</div>"
});
});
Did you checked this demo from Kendo UI ?
http://demos.telerik.com/kendo-ui/grid/detailtemplate
Similar to your scenario, detail grid is created in detailInit function and data for detail grid is filtered for the current employee using e.data.EmployeeID
I am developing an Asp.net MVC3 application with Entity Framework. I am using Knockoutjs for bindings and KendoUI for the UI part of the view. I was able to implement most of the KendoUi widgets but now I need to use KendoUI grid control which takes its data from SQL server. As far as I understood the grid widget works with XML or JSON.
So I have a db context:
public DbSet<FranchiseInfoDto> Franchises { get; set; }
I have saved some data in the tables in the local Sql server and retrieve it from the controller and serialize it to Json so I can bind it somehow to the grid widjet in the view:
private OmegaDB db = new OmegaDB();
//
// GET: /Franchise/
public JsonNetResult Index()
{
JsonNetResult jsonNetResult = new JsonNetResult { Formatting = Formatting.Indented };
var franchises = db.Franchises.ToList();
jsonNetResult.Data = franchises;
return jsonNetResult;
}
The serialized json data is in this format :
[{ ParentId: 0, Title: "Deposit", Type: "link", Link: "http://www.abv.bg" }, { ParentId: 2, Title: "Cash", Type: "link", Link: "http://www.facebook.com"}];
I read the documentation about the KendoUI Grid and was able to bind it to some local data like this:
var menus = [{ ParentId: 0, Title: "Deposit", Type: "link", Link: "http://www.abv.bg" }, { ParentId: 2, Title: "Cash", Type: "link", Link: "http://www.facebook.com"}];
var dataSource = new kendo.data.DataSource({
data: menus,
schema: {
model: {
fields: {
ParentId: { editable: true },
Title: { editable: true },
Type: { editable: true },
Link: { editable: true }
}
}
}
});
$("#grid").kendoGrid({
toolbar: ["create", "save", "cancel"],
columns: [
{
field: "ParentId",
title: "Id",
width: 50
},
{
field: "Title",
title: "Label",
width: 100
},
{
field: "Type",
title: "Type",
width: 100
},
{
field: "Link",
title: "Link"
}
],
dataSource: dataSource,
editable: true,
groupable: true,
scrollable: true,
sortable: true,
pageable: true
});
But when I tried to bind it to the Index controller returning Json I did not succeed. I tried something like this:
dataSource: {
type: "odata",
transport: {
read: "Franchise/Index" // this is my controller action //where I serialize the data coming from the local sql server to json
}
I am rather new to programming and I am not sure whether this approach is correct. Any suggestions with examples based on my sample code will be greatly appreciated. Thank You!
I managed to populate the grid with the serialized data to json from the database. Here is the controller code returning json data:
public ActionResult SampleData()
{
JsonNetResult jsonNetResult = new JsonNetResult { Formatting = Formatting.Indented };
var f1 = new FranchiseInfoSampleData();
f1.ParentId = 0;
f1.Title = "Deposit";
f1.Type = "functionality";
f1.Link = "http://www.abv.bg";
var f2 = new FranchiseInfoSampleData();
f2.ParentId = 1;
f2.Title = "Cash Out";
f2.Type = "link";
f2.Link = "www.abv.bg";
List<FranchiseInfoSampleData> sampleData = new List<FranchiseInfoSampleData>();
sampleData.Add(f1);
sampleData.Add(f2);
jsonNetResult.Data = sampleData;
return jsonNetResult;
}
And here is the Kendo Grid code:
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "Home/SampleData",
dataType: "json"
}
},
schema: {
model: {
fields: {
ParentId: { editable: true },
Title: { type: "string", editable: true },
Type: { type: "string", editable: true },
Link: { type: "string", editable: true }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 250,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field: "ParentId",
filterable: false
},
{
field: "Title",
width: 100
}, {
field: "Type",
width: 200
}, {
field: "Link"
}
]
});
});