Kendo grid dropdownlist issue - javascript

I'm using a custom template on one of the column in my kendo grid. Everything is fine, when data retrieve, the dropdownlist show correct value. However when i click on edit command, the row become edit mode and the dropdownlist doesn't show its value. Only when i click on the dropdownlist, the item show selected. What I want is it show out the text when its in edit mode.
Before click edit
After click edit
My code:
function customDdlEditor(container, options) {
$('<input required data-text-field="text" data-value-field="value" data-bind="value:' + options.field + '"/>')//data-text-field="text" data-value-field="value" data-bind="value:fieldType"
.appendTo(container)
.kendoDropDownList({
autobinds: false,
dataTextField: "text",
dataValueField: "value",
dataSource: ddl
});
}
var ddl = [{ text: "Text", value: "Text" },
{ text: "Date", value: "Date" },
{ text: "Number", value: "Number"}];
var Grid = $("#grid").kendoGrid({
dataSource: fieldDataSource,
columns: [
...
{ field: "type", title: "Type", editor: customDdlEditor, template: "#= type #" },
...
,
noRecords: true,
}).data("kendoGrid");
var fieldDataSource = new kendo.data.DataSource({
data: gridData,
pageSize: 50,
schema: {
model: {
id: "name",
fields: {
...,
type: { field: "type"},
...
}
}
}
});
Anyone know how to solve this?

If you make your drop down autoBind: true should work.
function customDdlEditor(container, options) {
$('<input required data-text-field="text" data-value-field="value" data-bind="value:' + options.field + '"/>')//data-text-field="text" data-value-field="value" data-bind="value:fieldType"
.appendTo(container)
.kendoDropDownList({
autobinds: true, // <-- auto bind true instead
dataTextField: "text",
dataValueField: "value",
dataSource: ddl
});
}

Related

kendo ui grid popup populating dropddown list

I am looking for a solution on how to get the selected data in a pop-up window using kendo ui grid.
For example, I have a movie and want to change its genre. When I hit the edit button, the window opens up but the already assigned value is not displayed and I have to manually select it.
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: remoteDataSource,
height: 500,
toolbar: ["create"],
editable: "inline",
columns: [{
field: "Title",
title: "Title"
}, {
field: "ReleaseDate",
title: "Release Date",
format: "{0:MM/dd/yyyy}"
}, {
field: "Price",
title: "Price",
format: "{0:c}",
width: "130px"
}, {
field: "Genre.Title",
title: "Genre",
editor: genresDropDownEditor
}, {
field: "Rating.Title",
title: "Rating",
editor: ratingsDropDownEditor
}, {
command: ["edit", "destroy"]
}]
});
Below is the function that populates the dropdown list
function genresDropDownEditor(container, options) {
console.log('genre options', options.model.Genre.Title, options);
$('<input required name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: true,
dataTextField: "Title",
dataValueField: "Id",
dataSource: {
transport: {
read: "http://localhost:62954/api/genres"
}
},
value: options.model.Genre.Title
});
}
Before editing
During editing
Thanks

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"
}
}
}
});
}

How to set Kendo editor as cell template?

Requirement 1:
I need the user to the ability to edit content of the grid all the time, meaning as a template, the user should not be required click on the field and then the editor appears.
Requirement 2: I want a kendo editor for the user to enter/edit values.
The following is what I tried, since I don't know how to do this using template I tried out using editor
Grid setup:
dataSource: {
data: $scope.planOverviewModel,
sort: {
field: "TermName",
dir: "asc"
},
schema: {
model: {
fields: {
TermName: { type: "string", editable: false },
InNetwork: { type: "string", editable: true },
OutNetwork: { type: "string", editable: true }
}
}
},
},
columns: [
{ field: "TermName", title: "Term" },
{
field: "InNetwork",
title: "In-Network",
editor: $scope.setupTextBox
},
{
field: "OutNetwork",
title: "Out-Network",
editor: $scope.setupTextBox
}
],
editable: true,
change: function (e) {
console.log("changed");
if (e.action == "itemchange") {
this.sync();
}
}
Editor setup:
$scope.setupTextBox = function(container, options) {
$('<textarea class="form-control" type="text" data-bind="value:' + options.field + '"> </textarea>')
.appendTo(container).kendoEditor({
resizable: {
content: true,
toolbar: 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
});
}

Kendo UI unable to filtering the grid table

I want to filter the table by last name, but cant work, here is my code
in controller
public JsonResult Filtering()
{
HealthContext rc = new HealthContext();
var last = rc.Profiles.Select(lastt => new SelectListItem { Text = lastt.LastName, Value = lastt.Id.ToString() }).ToList();
return Json(last.ToList(), JsonRequestBehavior.AllowGet);
}
in view
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<label class="category-label" for="Last name"> by last name:</label>
<input type="search" id="LastName" style="width: 230px"></input>
</div>
</script>
and also
the following snippet is for display table and filtering the last name
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "/Profiles/GetJsonData",
dataType: "json"
}
},
pageSize: 10,
},
toolbar: kendo.template($("#template").html()),
height: 250,
filterable: true,
sortable: true,
pageable: true,
defaultSorting: 'LastName ASC',
columns: [{
field: "Id",
filterable: false
},
{
field: "FirstName",
title: "First Name",
width: 100,
}, {
field: "LastName",
title: "Last Name",
width: 200
}, {
field: "Gender",
title: "Gender"
}
]
});
var dropDown = grid.find("#LastName").kendoDropDownList({
dataTextField: "LastName",
dataValueField: "Id",
autoBind: false,
optionLabel: "All",
dataSource: {
severFiltering: true,
transport: {
read: {
url: "/Profiles/Filtering",
dataType: "json"
}
},
},
change: function() {
var value = this.value();
if (value) {
grid.data("kendoGrid").dataSource.filter({ field: "Id", operator: "eq", value: parseInt(value) });
} else {
grid.data("kendoGrid").dataSource.filter({});
}
}
});
});
</script>
so the problem is the drop down list is not show up as well as the value/ data, any idea guys?
In your code you did not share what is behind the grid variable? Also you can find the LastName html element directly by id.
i.e.
var dropDown = $("#LastName").kendoDropDownList({ ...
Rest of your code looks okey, here it is:
http://jsfiddle.net/knWcJ/70/

Categories