I am thinking of using Kendo UI's Grid.
However, I am a bit unsure about it's flexibility and customization.
What I really need is in-line editing, but at the same time I want complete control over this.
For example, we have developed a custom autocomplete (using jquery and javascript). And would like to use this custom-autocomplete in Kendo UI's Grid.
I do not know whether anyone has already used this approach as I cannot find this level of customization in Kendo UI.
Thank you.
Joseph.
It is possible to specify custom editors for each individual field when implementing a kendo grid with inline editing. It can for example be done in using this kind of configuration:
columns: [
{ field:"ProductName",title:"Product Name" },
{ field: "Category", width: "150px", editor: categoryDropDownEditor },
{ field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "150px" },
{ command: "destroy", title: " ", width: "110px" }],
editable: true
where the code for categoryDropDownEditor looks like this:
function categoryDropDownEditor(container, options) {
$('<input data-text-field="CategoryName" data-value-field="CategoryName" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Categories"
}
}
});
}
What happens here is that the categoryDropDownEditor function creates the acutal markup for the editor, for that specific field. In your case, the only thing left to do would be to implement a AutoComplete widget instead of a dropdownlist. This example is grabbed from kendo UI's demo page
I hope answers your question!
Related
I have an existing grid creating in Kendo UI for Jquery. I want to put a static drop down/select box in the first field/cell of the grid on each row. When I do it shows up as "undefined".
Most of the examples I see on her and the Telerik site use an editor. In my case the drop down is static. Once they click on an item they will be redirect to another page to do something. At the moment I just want to get the drop down to show up with hard coded options.
jQuery(function($){
"use strict";
var grid = $("#grid").kendoGrid(){
....
columns: [{
field: "my_links",
title: "My Links",
template: "#=getMyLinks(DATA.user_id)#"
},{
....
}_.data("kendoGrid");
function setGridData(){
....
});
grid.setDataSource(dataSource);
}
setGridData();
});
function getMyLinks(user_id){
$('<input id="my_links" name="my_links/>')
.kendoDropDownList{[
dataSource: [
{ id: 1, name: "View" },
{ id: 2, name: "Create },
{ id: 3, name: "Delete"}
],
dataTextField: "name",
dataValueField: "id"
});
}
I would expect a drop down in the
You should provide DOM element for drop down widget in columns.template field and then initialize all widgets in dataBound event.
$("#grid").kendoGrid({
columns: [{
field: "my_links",
title: "My Links",
template: "<input id="my_links" name="my_links/>"
}],
dataBound: function (){
getMyLinks(DATA.user_id);
}
}).data("kendoGrid");
I am currently working with Kendo UI and am trying to data bind my Kendo observable to my drop down list. My drop down list is customized and is created inside of a Kendo editing popup object. I used a simple approach of just calling the editor in my columns and creating a function that creates a drop down list in that object. Now I am able to data bind with out an issue in my HTML file, however I am finding it difficult to do the same with my current approach.
Currently I am filling up the grid with data, I am able to populate the grid with the client name and client number, but the client type is not being posted. I assume is the failure to appropriately data-bind.
This is my Kendo observable
var viewModel = kendo.observable({
client: {
clientName: "",
clientNumber: "",
clientType: "",
},
dropdownlist: ["HCC", "Tax", "Audit", "Advisory"],
});
This is my Kendo Grid
$("#grid").kendoGrid({
dataSource: client,
toolbar: ["create"],
columns: [{
field: "clientName",
title: "Client Name",
},
{
field: "clientNumber",
title: "Client Number",
},
{
field: "clientType",
title: "Client Type",
editor: categoryDropDownEditor,
}
],
editable: "popup",
})
And this is my customized function which I am having issues data binding.
function categoryDropDownEditor(container) {
$('<input data-role="dropdownlist" data-bind="source: dropdownlist , value: client.clientType">')
.appendTo(container)
.kendoDropDownList({
optionLabel: "Engagement Types",
dataSource: viewModel.dropdownlist,
});
}
replace value: client.clientType to value: clientType:
function categoryDropDownEditor(container) {
$('<input data-role="dropdownlist" data-bind="source: dropdownlist, value: clientType">')
.appendTo(container)
.kendoDropDownList({
optionLabel: "Engagement Types",
dataSource: viewModel.dropdownlist,
});
}
I want to include kendo dropdownlist into my grid.
Everything's going to be fine except one thing.
When i want to "Add Record" with default kendo create toolbar, i can't bind first value fetched from dropdownlist datasource.
Datasource works fine. Dropdownlist works fine too.
If I choose anything from dropdownlist manually, everything works fine.
$scope.mainGridOptions = {
dataSource: {
transport: ...
schema: ...
},
batch: false,
...
toolbar: ["create"],
columns: [
...,{
field: "location_id",
title: "Location",
editor: function(container,options){
var input = $('<input/>');
input.attr('name',options.field);
input.appendTo(container);
input.kendoDropDownList({
autoBind: true,
dataTextField: "text",
dataValueField: "value",
dataSource: locationsDataSource,
index: 0,
});
}
},
...
]
};
I tried this too. except "index", i tried to manually select first item from dataSource. Visually it works fine. Even with Third item selected too, but when i click "Update", data isn't bounded.
input.kendoDropDownList({
autoBind: true,
dataTextField: "text",
dataValueField: "value",
dataSource: locationsDataSource,
dataBound: function(e){
this.select(0);
}
});
Anyone?
So, i found the solution.
It's seem to be a bug of Kendo DropDownList.
I'm bounding it manually after dataSource load from dropdown dataBound event.
Here we go:
editor: function(container,options){
var input = $('<input/>');
input.attr('name',options.field);
input.attr('data-bind','value:' + options.field);
input.appendTo(container);
input.kendoDropDownList({
autoBind: true,
dataTextField: "text",
dataValueField: "value",
dataSource: locationsDataSource,
index: 0,
dataBound: function(){
options.model[options.field] = this.dataItem().value;
}//end databound
});//end dropdownlist
}//end editor
I am using jQuery UI Autocomplete in jqGrid, but the autocomplete list is displayed behind the add / edit form. I am using the latest jQuery UI and jqGrid. Here is the code snippet:
colModel : [
{
name: "birthPlaceId",
index: "birthPlaceId",
editable: true,
edittype: "text",
hidden: true
}, {
name: "birthPlaceName",
index: "birthPlaceName",
editable: true,
editoptions: {
size: 75,
dataInit: function (e) {
$(e).autocomplete({
source: "${ajaxPlacesUrl}",
minLength: 1,
focus: function (event, ui) {
$(e).val(ui.item.label);
},
select: function (event, ui) {
$(e).val(ui.item.label);
$("input#birthPlaceId").val(ui.item.value);
}
});
}
},
editrules: {
edithidden: true,
required: false
},
edittype: "text",
hidden: true,
width: 75
}
]
Here is the JSON data getting from the server for "W":
[{"value":30,"label":"Washington, DC, USA"},
{"value":31,"label":"Windsor, Ontario, Canada"},
{"value":111,"label":"Wylie, Texas, USA"}]
I searched and couldn't find a fix for this. Appreciate any help. Thanks.
The problems with displaying of jQuery UI Autocomplete menu behind the Add/Edit form can be solved typically in one from two ways. The first way will be the usage of appendTo option of jQuery UI Autocomplete. The option van change place of Autocomplete menu on the page. Another way will be to change z-index of Add/Edit form. You can use zIndex property to reduce the default 950 value to some less value. See the answer for the code example.
I am trying to filter my kendo Grid with a multiselect box. I have a grid with serverFiltering turned on with more or less this setup:
// this is in the grid configuration
columns: [
{
title: "Name",
width: 160,
field: mem_ORD_EditieTitel,
filterable: {
ui: multiSelect
}
}, ...
]
// and the function corresponding to the filterable option
function multiSelect(element)
{
var multi = element.kendoMultiSelect({
placeholder: "Select editions",
dataSource: remoteDataSource,
dataTextField: "mem_ORD_EditieTitel",
dataValueField: "mem_ORD_EditieTitel",
optionLabel: "--Select Value--"
}).data('kendoMultiSelect');
}
The problem is that when i select more than one value, the request only includes the first selected item. Is there anyway to fix this? Or does the kendo grid just doesnt feature this? For example:
filter[filters][0][field]:mem_ORD_EditieTitel
filter[filters][0][operator]:eq
filter[filters][0][value]:SomeTitle
filter[logic]:and
Thanks
When I use this definition:
element.kendoMultiSelect({
valuePrimitive: true,
dataSource: kendoDataSource,
dataTextField: textField,
dataValueField: valueField,
optionLabel: optionLabel
}).data("kendoMultiSelect");
Multiple values are posted to the server:
filter[filters][0][field] SubFunctionCode
filter[filters][0][operation] eq
filter[filters][0][value] ICT-2,ICT-3
filter[logic] and
page 1
pageSize 5
skip 0
take 5
The filter[filters][0][value] equals "ICT-2,ICT-3".
The next challenge is how to process the comma-separated value at the server-side. I do not have a solution for this issue...