We Keep Coding

Kendo ui grid Fiter mode:row

I'm using filter column mode:row in my grid. For my numeric column the menu is showned as below
What i need is a filter in this column as the filter that is used in menu mode
Here is a part of my code
schema: {
data: "results",
total: "total",
model: {
id: "accountingTransactionKey",
fields: {
accountingTransactionKey: { editable: false, nullable: false },
date: { editable: false, nullable: false },
organization: { editable: false, nullable: false },
accountDebit: { editable: false, nullable: true },
costArticleUsed: { editable: false, nullable: true },
accountCredit: { editable: false, nullable: true },
isIntraGroupPartnerOrganization: { editable: false, nullable: true, type: "number" },
currency: { editable: false, nullable: true },
sum: { editable: false, nullable: true, type: "number"},...
...{
field: "sum",
title: "Сумма",
width: "150px",
//format: "{0:n2}",
locked: true,
filterable:
{
multi: true,
cell:
{
operator: "eq",
suggestionOperator: "eq",
showOperators: true
}
},
template: function (dataItem) { return numberWithSpaces(dataItem.sum.toFixed(2)) },
footerTemplate: "<b>" +"#: numberWithSpaces(sum.toFixed(2)) #"+"</b>"
},
There is a soltion for my request?
Thank you

I have tried the following script and it gives me a range filter by using the property extra.
<script>
$(document).ready(function() {
var griddata = createRandomData(50);
$("#grid").kendoGrid({
dataSource: {
data: griddata,
schema: {
model: {
fields: {
City: { type: "string" },
Title: { type: "string" },
BirthDate: { type: "date" },
Age: { type: "number" }
}
}
},
pageSize: 15
},
height: 550,
scrollable: true,
filterable: {
extra: false,
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to"
}
}
},
pageable: true,
columns: [
{
title: "Name",
width: 160,
filterable: false,
template: "#=FirstName# #=LastName#"
},
{
field: "City",
width: 130,
filterable: false,
},
{
field: "Title",
filterable: false,
},
{
field: "BirthDate",
title: "Birth Date",
format: "{0:MM/dd/yyyy HH:mm tt}",
filterable: false,
},
{
field: "Age",
width: 100,
filterable:
{
extra: true
}
}
]
});
});
</script>
If you want to create a customized range filter.
columns: [
{
field: "Age",
filterable: {
cell: { template: betweenAgeFilter }
}
}
]
function betweenAgeFilter(args) {
var filterCell = args.element.parents(".k-filtercell");
filterCell.empty();
filterCell.html('<span style="justify-content:center;"> <span>From:</span><input id="startAge"/><span>To:</span><input id="endAge"/></span>');
$("#startAge").kendoNumericTextBox({
change: function (e) {
var startAge = e.sender.value();
var endAge = $("#endAge").data("kendoNumericTextBox").value();
var dataSource = $("#grid").data("kendoGrid").dataSource;
if (startAge & endAge) {
var filter = { logic: "and", filters: [] };
filter.filters.push({ field: "Age", operator: "gte", value: startAge });
filter.filters.push({ field: "Age", operator: "lte", value: endAge });
dataSource.filter(filter);
}
}
});
$("#endAge").kendoNumericTextBox({
change: function (e) {
var startAge = $("#startAge").data("kendoNumericTextBox").value();
var endAge = e.sender.value();
var dataSource = $("#grid").data("kendoGrid").dataSource;
if (startAge & endAge) {
var filter = { logic: "and", filters: [] };
filter.filters.push({ field: "Age", operator: "gte", value: startAge });
filter.filters.push({ field: "Age", operator: "lte", value: endAge });
dataSource.filter(filter);
}
}
});
}

Kendo DropDownList in Grid not binding until after selection

I have an editable Kendo Grid, with a field that is a dropdownlist. I have a U_UserId and U_Name field that need to be used in that column. The name obviously displays, while the ID should be what is used for binding. I've removed my datasource URLs in the example below, but the DropDownList data displays just fine, with a list of Names and ID values.
I've been looking at this for a while so it's possible I'm missing something obvious. I'm having an identical problem to this question (the dropdown doesn't bind to the user displayed in that row until I click on the dropdown to expand it), but I think my model and fields are correct so I'm not sure why I still can't get the dropdown to bind correctly.
Here is my JS for both the grid and the editor:
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
type: "json-ajax",
transport: {
read: {
url: myUrl,
type: "GET"
}
},
batch: true,
pageSize: 20,
schema: {
data: "Data",
total: "Total",
model: {
id: "OrderId",
fields: {
O_OrderNumber: {
editable: false
},
O_Date: {
editable: false, type: "date"
},
O_InvoiceNumber: {
editable: false
},
O_Status: {
editable: false
},
O_DueDate: {
editable: false, type: "date"
},
U_UserId: {
editable: true
},
U_Name: {
editable: false
},
O_VendorId: {
editable: false
},
O_TrackingNumber: {
editable: false
}
}
}
},
},
scrollable: false,
editable: true,
pageable: true,
columns: [
{
field: "O_OrderNumber",
title: "Order #",
hidden: false
},
{
field: "O_Date",
title: "Pull Date",
hidden: false,
type: "date",
format: "{0:MM/dd/yyyy}"
},
{
field: "O_InvoiceNumber",
title: "Invoice #",
hidden: false
},
{
field: "O_Status",
title: "Status",
hidden: false
},
{
field: "O_DueDate",
title: "Due Date",
hidden: false,
type: "date",
format: "{0:MM/dd/yyyy}"
},
{
field: "U_UserId",
title: "Owner",
hidden: false,
width: 130,
editor: ownerDropDownEditor,
template: "#=U_Name#"
},
{
field: "O_VendorId",
title: "Vendor",
hidden: false
},
{
field: "O_TrackingNumber",
title: "Tracking #",
hidden: false
}
]
}).data("kendoGrid");
});
function ownerDropDownEditor(container, options) {
$('<input required name="' + options.field + '" />')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "Name",
dataValueField: "UserId",
dataSource: {
type: "json",
transport: {
read: {
url: myOtherUrl,
type: "GET"
}
}
}
});
}
Edit: Out of curiosity, I tried changing my dropdownlist to have both the DataTextField and the DataValueField be UserId, and the selection was made right away, but with the ID (int) value being shown instead of the Name (string).

So investigating a little further into my edit above, I found this Telerik post, which made it sound like the dropdown actually binds by an object, and not by dropdown value. There is a data-value-primitive attribute that can be added so that it binds by value. I updated my editor, and it is now behaving as expected:
function ownerDropDownEditor(container, options) {
$('<input required name="' + options.field + '" data-value-primitive="true" />')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "Name",
dataValueField: "UserId",
dataSource: {
type: "json",
transport: {
read: {
url: myOtherUrl,
type: "GET"
}
}
}
});
}

Dropdown field select/returns null kendo ui grid - mvc

I am working on kendo ui grid, the dropdown fills with the data from api call.....
The problem is,
selected item value is not passing to viewModel or passing null value
I am doing something terrible, please help...thanks for your time:)
Script
...
schema: {
model: {
id: "ProjectId",
fields: {
ProjectId: { editable: true, nullable: false, type: "number" },
ClientId: { editable: true, nullable: false, type: "number" },
Name: { editable: true, nullable: true, type: "string" },
// Status: { editable: true, nullable: true, type: "string" },
Status: { editable: true, nullable: true, type: "string", defaultValue: { StatusId: "NotCompleted"}},
IsActive: { editable: true, nullable: false, type: "boolean" },
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
toolbar: ["create"],
scrollable: false,
sortable: true,
groupable: true,
filterable: true,
columns: [
{ field: "Name", title: "Project Name", width: "170px" },
//{ field: "Status", title: "Status", width: "110px" },
{ field: "Status", title: "Status", width: "150px", editor: statusDropDownEditor },
{ field: "IsActive", title: "Active", width: "50px" },
{ command: "", template: "<a href='Project/Task'>Manage Task</a>", width: "30px", filterable: false },
{ command: "", template: "<a href='Project/Setting'>Setting</a>", width: "30px", filterable: false },
{ command: ["edit", "delete"], title: " ", width: "80px" }
],
editable: "popup"
});
function statusDropDownEditor(container, options) {
$('<input required data-value-field="StatusID" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
type: "odata",
transport: {
read: "/api/dropdown/GetProjectStatus"
}
}
});
}

have you add the
dataTextField: "name",
dataValueField: "id"
?

Kendo UI Gantt chart task lable change

I am trying to change Kendo UI Gantt title. i found one demo code, but it was not working
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
dataSource: [{
id: 1,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date("2014/6/17 9:00"),
end: new Date("2014/6/17 11:00")
}],
messages: {
views: {
editor: {
editorTitle:"Edit Task"
}
}
}
});
</script>
Is it possible to change the label on Gantt bars ?
I want some info on left side tree and other info on bars is it possible ?
parent child relation is not retaining if i add gantt columns other than title.
model: {
id: "id",
fields: {
id: { from: "ID", type: "number" },
descr : { from : "DESCR", type: "string"},
orderId: { from: "ORDERID", type: "number", validation: { required: true } },
parentId: { from: "PARENTID", type: "number", defaultValue: null, validation: { required: true } },
start: { from: "START", type: "date" },
end: { from: "END", type: "date" },
Title: { from: "TITLE", defaultValue: "", type: "string" },
percentComplete: { from: "PERCENTCOMPLETE", type: "number" },
summary: { from: "SUMMARY", type: "boolean" },
expanded: { from: "EXPANDED", type: "boolean", defaultValue: true }
}
}
var gantt = $("#gantt").kendoGantt({
dataSource: tasksDataSource,
views: [
"day",
"week",
"month",
{ type: "year", selected: true },
],
columns: [
{ field: "descr", title: "Descr", editable: true, sortable: true },
],
height: 400,
showWorkHours: false,
showWorkDays: false,
snap: false
}).data("kendoGantt");
var gantt1 = $("#gantt1").kendoGantt({
dataSource: tasksDataSource1,
views: [
"day",
"week",
"month",
{ type: "year", selected: true },
],
columns: [
{ field: "title", title: " ", editable: true, sortable: true },
],
height: 400,
showWorkHours: false,
showWorkDays: false,
snap: false
}).data("kendoGantt");

Try starting uppercase:
dataSource: [{
ID: 1,
OrderId: 0,
ParentId: null,
Title: "Task1",
Start: new Date("2014/6/17 9:00"),
End: new Date("2014/6/17 11:00")
}],
EDIT:
Answering to your comment:
Define columns definition:
dataSource: [{
ID: 1,
OrderId: 0,
ParentId: null,
Title: "Task1",
Start: new Date("2014/6/17 9:00"),
End: new Date("2014/6/17 11:00"),
Description: "Some longer description"
}],
columns: [
{ field: "ID", title: "ID", width: 60 },
{ field: "Title", title: "Title", editable: true, sortable: true },
{ field: "Description", title: "Description", width: 100, editable: true, sortable: true }
],

Kendo Grid using inline editing and custom editor dropdown control

I am trying to implement a custom editor for a column on a grid. The editor uses a DropdownList control.
I am able to get the Dropdown to show upon add/edit, however after making a selection and posting the json that is sent contains the default value, not the value that was selected.
My implementation is below it is an excerpt from a Razor page.
Can you help me figure out what I've done wrong here?
<div id="divGrid"></div>
<script>
$(document).ready(function () {
var dsGroupForm = new kendo.data.DataSource({
transport: {
read: {
url: '#Url.Action("GroupForm_Read", "Settings")',
dataType: "json"
},
update: {
url: '#Url.Action("GroupForm_Update", "Settings")',
dataType: "json"
},
destroy: {
url: '#Url.Action("GroupForm_Destroy", "Settings")',
dataType: "json"
},
create: {
url: '#Url.Action("GroupForm_Create", "Settings")',
dataType: "json"
}
},
batch: false,
pageSize: 5,
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "GroupFormId",
fields: {
GroupFormId: { editable: false, nullable: false },
AdGroupId: { required: false },
AdGroupDisplayName: { validation: { required: true } },
FormKey: { validation: { required: true } },
Ordinal: { validation: { required: true } },
FormType: { validation: { required: false } },
FormTypeDisplay: { defaultValue: { FormTypeName: "Form1", FormTypeId: "1" } },
FormProjectionId: { validation: { required: false } }
}
}
}
});
$("#divGrid").kendoGrid({
autobind: true,
dataSource: dsGroupForm,
pageable: true,
height: 430,
toolbar: [{ name: "create", text: "Add"}],
columns: [
{field: "AdGroupDisplayName", title: "Group" },
{ field: "FormKey", title: "Key" },
{ field: "Ordinal", title: "Ordinal", format: "{0:d}", width: "100px" },
{ field: "FormTypeDisplay", title: "Type", width: "150px", editor: formTypeDropDownEditor, template: "#=FormTypeDisplay.FormTypeName#" },
{ field: "FormProjectionId", title: "ProjectionId" },
{ command: [{ name: "edit", text: "Edit" }, { name: "destroy", text: "Remove" }], title: " ", width: "172px" }
],
editable: "inline"
});
});
var formTypeData = new kendo.data.DataSource({
data: [
{ FormTypeName: "Form1", FormTypeId: "1" },
{ FormTypeName: "Form2", FormTypeId: "2" },
{ FormTypeName: "Form3", FormTypeId: "3" }
]
});
function formTypeDropDownEditor(container, options) {
$('<input name="FormTypeDisplay" required data-text-field="FormTypeName" data-value-field="FormTypeId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: true,
dataTextField: "FormTypeName",
dataValueField: "FormTypeId",
dataSource: formTypeData
});
}
</script>

I was able to get it working using a MVC wrapper and by following this post:
http://www.sitereq.com/post/kendo-mvc-dropdown-lists-inside-inline-kendo-mvc-grids
The key was adding the save event due to a known Kendo grid bug - seems to me the Kendo docs should have some mention of this issue.
I tried implementing the same logic using the javascript implementation but could not get it working.

Try this
function formTypeDropDownEditor(container, options) {
$('<input name="' + options.field + '" required data-text-field="FormTypeName" data-value-field="FormTypeId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: true,
dataTextField: "FormTypeName",
dataValueField: "FormTypeId",
dataSource: formTypeData
});
}