I have a Kendo grid which is populated from a SQL database. The kendo expand works fine and returns a different kendo grid in the expand when the program first starts but if I do a new search and return different results the expand row does not work.
My code for the expand ->
function detailInitd(e) {
TextvalueFile = "manno test";
$.ajax({
type: "post",
data: JSON.stringify({
search_string: TextvalueFile,
}),
url: "/Search.aspx/File_Search",
dataType: "json",
contentType: 'application/json',
success: function (object) {
response(object);
},
complete: function (object) {
},
error: function (object) {
}
});
function response(object) {
var grid = this;
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
data: object.d,
schema: {
model: {
path: { type: "string" },
st_size: { type: "number" },
},
},
pageSize: 20,
},
reorderable: true,
resizable: true,
navigatable: true,
selectable: "multiple",
scrollable: true,
sortable: true,
filterable: true,
columnMenu: true,
pageable: {
input: true,
numeric: true
},
columns: [
{ field: "path", title: "Path", width: 200 },
{ field: "st_size", title: "Size", width: 60 },
{ field: "st_blks", title: "BLKS", width: 60 },
{ field: "st_acctime", title: "acc Time", width: 70 },
{ field: "st_modtime", title: "mod Time", width: 75 },
]
});
}
};
My code for the original kendo grid ->
function DisplaySearch() {
}
textS.value = value;
valsearch = textS;
$.ajax({
type: "post",
data: JSON.stringify({
search_string: valsearch,
}),
url: "/Search.aspx/display_search",
dataType: "json",
contentType: 'application/json',
success: function (object) {
response(object);
},
complete: function (object) {
},
error: function (object) {
}
});
function response(object) {
$("#searchGrid").kendoGrid({
theme:"Default",
dataSource: {
data: object.d,
schema: {
model: {
archive_header_key: { type: "number" },
group_Name: { type: "string" },
Server: { type: "string" },
archive: { type: "string" },
display_name: { type: "string" },
file_written: { type: "number" },
session_ID: { type: "string" },
create_browse: {type:"number"},
},
},
pageSize: 20,
},
detailInit: detailInit,
dataBound: function () {
this.expandRow(this.tbody.find("tr"));
},
reorderable: true,
navigatable: true,
selectable: "single",
scrollable: true,
sortable: true,
filterable: false,
columnMenu: true,
reordable: true,
resizable: true,
pageable: {
input: true,
numeric: true,
},
columns: [
{ field: "archive_header_key", title: "Key", width: 50 },
{ field: "Server", title: "Server", width: 75 },
{ field: "group_Name", title: "Group", width: 75 },
{ field: "archive", title: "Archive", width: 50 },
{ field: "display_name", title: "Display name", width: 300 },
{ field: "file_written", title: "Files", width: 50 },
{ field: "session_ID", title: "Session", width: 200 },
{field: "create_browse", title:"Browse", Width: 50},
],
change: function(){
var grid = this;
grid.select().each(function(){
var dataItem = grid.dataItem($(this));
testdata = dataItem.archive_header_key;
grid.expandRow(grid.element.closest("tr"));
})
},
dataBound: function () {
this.expandRow();
},
});
}
Any help would be appreciated.
There is some sample code to check if a kendoGrid is already initialized:
https://www.telerik.com/forums/grid-creation-best-practices
It works for me and fixed the expandRow issue.
function searchButtonClick() {
var gridElement = $("#grid"),
grid = gridElement.data("kendoGrid");
if (!grid) {
gridElement.kendoGrid({
...
});
} else {
grid.dataSource.read();
}
}
I think this is duplicated instances. When you are searching, and call your response() you instanciate always an kendoGrid probably, you have to do something like:
Declare an variable out of response() like:
var $searchGrid = null;
And change your response() :
function response(object) {
if($searchGrid){
$searchGrid .destroy();
$("#searchGrid").empty();
$("#searchGrid").remove();
}
$("#searchGrid").kendoGrid({
theme:"Default",
dataSource: {
data: object.d,
schema: {
model: {
archive_header_key: { type: "number" },
group_Name: { type: "string" },
Server: { type: "string" },
archive: { type: "string" },
display_name: { type: "string" },
file_written: { type: "number" },
session_ID: { type: "string" },
create_browse: {type:"number"},
},
},
pageSize: 20,
},
detailInit: detailInit,
dataBound: function () {
this.expandRow(this.tbody.find("tr"));
},
reorderable: true,
navigatable: true,
selectable: "single",
scrollable: true,
sortable: true,
filterable: false,
columnMenu: true,
reordable: true,
resizable: true,
pageable: {
input: true,
numeric: true,
},
columns: [
{ field: "archive_header_key", title: "Key", width: 50 },
{ field: "Server", title: "Server", width: 75 },
{ field: "group_Name", title: "Group", width: 75 },
{ field: "archive", title: "Archive", width: 50 },
{ field: "display_name", title: "Display name", width: 300 },
{ field: "file_written", title: "Files", width: 50 },
{ field: "session_ID", title: "Session", width: 200 },
{field: "create_browse", title:"Browse", Width: 50},
],
change: function(){
var grid = this;
grid.select().each(function(){
var dataItem = grid.dataItem($(this));
testdata = dataItem.archive_header_key;
grid.expandRow(grid.element.closest("tr"));
})
},
dataBound: function () {
this.expandRow();
},
}).data("kendoGrid");;
}
Hope this help
Related
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);
}
}
});
}
I'm having problem with using Kendo UI Grid whenever I click on add new button it always produce this script error.
This is the code that I'm using:
dataSource = new kendo.data.DataSource({
batch: true,
pageSize: 20,
transport: {
read: {
url: 'SaladEntry/GetSupport2/',
dataType: "json"
},
destroy: {
url: 'SaladEntry/DeleteSupportKendo2/',
type: "POST",
contentType: 'application/json'
},
create: {
url: 'SaladEntry/SaveSupportKendo2/',
type: "POST",
contentType: 'application/json',
complete: function (e) {
SupportGrid();
}
},
update: {
url: 'SaladEntry/EditSupportKendo2/',
type: "POST",
contentType: 'application/json',
complete: function (e) {
SupportGrid();
}
},
parameterMap: function (options, operation) {
if (operation == "read") {
return saladparamObj;
}
else {
options.models[0].CountryNo = $('#Country_No').val();
var SaladParamSerialized = JSON.stringify(options.models);
return SaladParamSerialized;
}
}
},
schema: {
model: {
id: "PK",
fields: {
CountryNo: { editable: true, nullable: true },
EffectiveDate: { type: "date" },
stringEffectiveDate: { type: "string" },
ScaleMin: { validation: { required: true } },
ScaleMax: { validation: { required: true } },
Currency: { type: "string" }
}
}
},
sort: {
field: "stringEffectiveDate",
dir: "desc",
compare: function (a, b, dir) {
return kendo.parseDate(a.EffectiveDate) - kendo.parseDate(b.EffectiveDate);
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 300,
toolbar: ["create"],
columns: [
{
field: "stringEffectiveDate", title: "Date",
template: "#= kendo.toString(kendo.parseDate(EffectiveDate, 'yyyy-MM-dd'), 'yyyy-MM-dd') #", width: "100px",
sortable: {
allowUnsort: false,
compare: function (a, b, dir) {
return kendo.parseDate(a.EffectiveDate) - kendo.parseDate(b.EffectiveDate);
}
}
},
{ field: "EffectiveDate", title: "Effective Date", template: "#= kendo.toString(kendo.parseDate(EffectiveDate, 'yyyy-MM-dd'), 'yyyy-MM-dd') #", width: "100px" },
{ field: "ScaleMin", title: "BG1 Min", width: "100px" },
{ field: "ScaleMax", title: "BG7 Max", width: "100px" },
{ field: "Currency", title: "Currency", width: "100px" },
{ command: ["edit", "destroy"], title: "Commands", width: "160px" }
],
height: 300,
scrollable: true,
sortable: true,
filterable: true,
pageable: true,
resizable: true,
selectable: true,
editable: "popup",
cancel: function (e) {
nEdit();
},
edit: function(e) {
e.container.find(".k-edit-label:first").hide();
e.container.find(".k-edit-field:first").hide();
if (!e.model.isNew()) {
var dt = e.container.find("input[name=EffectiveDate]").data("kendoDatePicker");
dt.enable(false);
}
}
}).css("background-color", "#C7D6A7");
No popup modal shown when I click on Add or Edit button. Below is the screenshot of my view.
.andSelf was removed in jQuery 3.0. You are referencing 3.1.1. You'll have to downgrade jQuery or find an update for Kendo.
Hi i have a Kendo grid which works fine but I was wondering if its possible to add another exact one with a button click so i could have multiple instances of the same grid?
I am getting all the data from a sql database.
My code for the grid is ->
function DisplaySearch() {
var textS = $('#searchBox').val();
Textvalue = textS;
$.ajax({
type: "post",
data: JSON.stringify({
search_string: Textvalue,
}),
url: "Search.aspx/display_search",
dataType: "json",
contentType: 'application/json',
success: function (object) {
response(object);
},
complete: function (object) {
},
error: function (object) {
}
});
function response(object) {
$("#searchGrid").kendoGrid({
dataSource: {
data: object.d,
schema: {
model: {
archive_header_key: { type: "number" },
group_Name: { type: "string" },
Server: { type: "string" },
archive: { type: "string" },
display_name: { type: "string" },
file_written: { type: "number" },
session_ID: { type: "string" },
},
},
pageSize: 20,
},
reorderable: true,
navigatable: true,
selectable: "multiple",
scrollable: true,
sortable: true,
filterable: false,
columnMenu: true,
pageable: {
input: true,
numeric: true
},
columns: [
{ field: "archive_header_key", title: "Key", width: 50 },
{ field: "Server", title: "Server", width: 75 },
{ field: "group_Name", title: "Group", width: 75 },
{ field: "archive", title: "Archive", width: 50 },
{ field: "display_name", title: "Display name", width: 300 },
{ field: "file_written", title: "Files", width: 50 },
{ field: "session_ID", title: "Session", width: 200 },
]
});
}
};
any help would be appreciated.
Of course you can! You only need to make sure that the id of the grid is unique.
This code will add a div to a given container and create a grid - with any button click a new grid. Hope it works, I haven't tested it.
var gridNr = 1;
$("#btn").click(function(e){
$("#gridContainer").append("<div id='grid_'" + gridNr + " />");
$("#grid_" + gridNr).kendoGrid({ ... your grid code here ... });
gridNr++;
})
I have the following code:
function grd_onChange(e) {
var grid = $("#grd").data("kendoGrid");
var selectedCell = grid.select();
var index = selectedCell.index();
var row = selectedCell.closest("tr");
var col = selectedCell.closest("td");
alert(row);
}
I would like to know how can I get the column index when a user clicks on a cell of a particular row of the grid.
Please try with the below code snippet.
<body>
<script>
function onChange(arg) {
var grid = $("#Grid").data("kendoGrid");
var row = this.select().closest("tr");
var rowIdx = $("tr", grid.tbody).index(row);
var colIdx = this.select().index();
alert(rowIdx + '-' + colIdx);
}
$(document).ready(function () {
$("#Grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders",
dataType: "jsonp"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
selectable: "multiple cell",
change: onChange,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field: "OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
width: 120,
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name",
width: 260
}, {
field: "ShipCity",
title: "Ship City",
width: 150
}
]
});
});
</script>
<div id="Grid"></div>
</body>
OR
function onDataBound(e) {
var grid = $("#Grid").data("kendoGrid");
$(grid.tbody).on("click", "td", function (e) {
var row = $(this).closest("tr");
var rowIdx = $("tr", grid.tbody).index(row);
var colIdx = $("td", row).index(this);
alert(rowIdx + '-' + colIdx);
});
}
$(document).ready(function () {
$("#Grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders",
dataType: "jsonp"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
dataBound: onDataBound,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field: "OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
width: 120,
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name",
width: 260
}, {
field: "ShipCity",
title: "Ship City",
width: 150
}
]
});
});
<div id="Grid"></div>
Let me know if any concern.
When I press any of the cells the cell get focused but I can't type anything in the field. I also get no console errors whatsoever. Here is the code:
$(document).ready(function () {
datasource = new kendo.data.DataSource({
transport: {
read: {
url: '/DiscountPromotion/Get',
dataType: "json",
},
update: {
url: '/DiscountPromotion/Update',
dataType: "json",
type: "POST",
contentType: "application/json"
},
destroy: {
url: '/DiscountPromotion/Delete',
dataType: "json",
type: "POST",
contentType: "application/json"
},
create: {
url: '/DiscountPromotion/Add',
dataType: "json",
type: "POST",
contentType: "application/json"
},
parameterMap: function(options, operation) {
if (operation !== "read") {
return JSON.stringify({ discountPromotionDto: options });
}
},
},
pageSize: 10,
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
Code: { type: "string" },
StartDate: { type: "date" },
EndDate: { type: "date" },
MinimumCost: { type: "number" },
MaximumCost: { type: "number" },
Quantity: { type: "number" },
CustomerId: { type: "number" },
CountryCode: { type: "string" },
Discount: { type: "number" },
ModelName: { type: "string" }
}
}
}
});
$("#discountpromotiongrid").kendoGrid({
dataSource: datasource,
batch: true,
toolbar: ["create", "save", "cancel"],
height: 400,
navigatable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "ModelName",
title: "ModelName",
editor: modelNameDropDown,
template: "#=ModelName#",
width: 150
},
{
field: "Code",
title: "PromotionCode",
width: 150
},
{
field: "StartDate",
title: "StartDate",
template: '#= kendo.toString(StartDate,"yyyy-MM-dd") #',
width: 120
},
{
field: "EndDate",
title: "EndDate",
template: '#= kendo.toString(EndDate,"yyyy-MM-dd") #',
format: "{0:yyyy-MM-dd}",
parseFormats: ["yyyy-MM-dd"],
width: 120
},
{
field: "MinimumCost",
title: "MinCost",
width: 100
},
{
field: "MaximumCost",
title: "MaxCost",
width: 100
},
{
field: "Quantity",
title: "Quantity",
width: 80
},
{
field: "CustomerId",
title: "CustomerId",
width: 80
},
{
field: "CountryCode",
title: "CountryCode",
width: 40
},
{
field: "Discount",
title: "Discount",
width: 40
},
{
command: "destroy",
title: " ",
width: 120
}],
editable: true
});
function modelNameDropDown(container, options) {
$('<input required data-text-field="ModelName" data-value-field="ModelName" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
optionLabel: "Select model...",
dataSource: {
serverFiltering: true,
transport: {
read: {
url: '/DiscountPromotion/GetModelNamesByCustomerId',
dataType: "json",
type: "POST",
contentType: "application/json"
}
}
}
});
}
Please help! I have no clue what could be wrong.
Here is an image of my grid and when I have pressed a cell. There marker never shows up in the cell so I can't type anything. And this occurs on all of them!
You need to add an edit command to your columns.
{
command: ["edit", "destroy"],
title: " ",
width: 120
}],
editable: "inline"