I am initialize a Grid from an existing table with is working fine but the search toolbar is missing? Is there something I am doing wrong to search from an existing table?
dojo
https://dojo.telerik.com/#mcdevittnccn/OpEluMeF
Add search fields:
$(document).ready(function() {
$("#grid").kendoGrid({
sortable: true,
toolbar: ["search"],
search: {
fields: ['model', 'year', 'category', 'airconditioner']
},
});
});
Example: Search toolbar
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've used the hierarchical kendo for showing my data, I mean each row has a child which contains a grid of rows' details,my kendo should appear based on the data that user enter in inputs and after click on a button , it works well for the first time but if user change the inputs' data and click the button again, the kendo does not show the grid of details it just show me my parent grid but if the user refresh the page and then change the data and click the button it works fine. after a lot of search I couldn't find the reason.can anyone help me
var grid;
var createGrid = function () {
grid = $("#mygrid").kendoGrid({
dataSource: {
data: schema.PNR_item,
schema: {
hasChildren: true,
model:{
fields:fields,
}
},
pageable: true,
height: 550,
pageSize: 6,
serverPaging: true,
serverSorting: true,
//columns
},
height: 600,
sortable: true,
pageable: true,
scrollable: true,
resizable:true,
columns: columns,
detailTemplate: '<div class="grid" ></div>',
detailInit: function (e) {
e.detailRow.find(".grid").kendoGrid({
dataSource: e.data.Details,
columns: details_columns,
schema:{
model:{
fields: details_fields
}
}
});
},
}).data("kendoGrid");
}//end of createGrid function
createGrid();
I am using kendo Grid. When i am filtering with combo box on a column, then the filtering working but the filtering cross button right side of the filter button is not showing.To see this i need to drag column of the grid. How can i see the cross button when i am filtering.
{
field: "BranchId",
type: "number",
title: "Branch",
width: "200px",
editable: true,
nullable: true,
hidden: false,
values: Branches,
},
Try to give a custom width size to the columns
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...