Kendo Grid get row and column index on Change event - javascript

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.

Related

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

Get selected dropdown value in inside kendo grid

Requirement: How to get selected drop down value in kendo grid while updating records
By using kendo editor i have implemented dropdown in grid column and i want to save datavaluefiled value
Datasource
ID:1,Interestname:cricket
Id:2,Interestname:football
while submiiting i need to save only value i:e Id
<html>
<head>
<title></title>
</head>
<body>
<div id="grid-container"></div>
#*Scripts*#
<script type="text/javascript">
$(document).ready(function () {
debugger
var gridDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/KendoGrid/GetStudents",
dataType: "json"
},
update: {
url: "/KendoGrid/CreateOrUpdate",
dataType: "json"
},
create: {
url: "/KendoGrid/CreateOrUpdate",
dataType: "json"
},
destroy: {
url: "/KendoGrid/DeleteDetails",
dataType: "json"
},
parameterMap: function (options, operation) {
debugger
if (operation !== "read" && options) {
return options;
}
}
},
pageSize: 5,
schema: {
model: {
id: "Id",
fields: {
Id: { editable: false, nullable: true },
Name: { editable: false, validation: { required: true } },
FatherName: { type: "text", validation: { required: true, min: 1 } },
DateOfBirth: { type: "date" },
Address: { type: "text", validation: { min: 0, required: true } },
Email: { type: "email", validation: { min: 0, required: true } },
Phone: { type: "text", validation: { min: 0, required: true } },
StudnetInterest: { type: "text", validation: { min: 0, required: true } }
}
},
parse: function (data) {
debugger
if (!data.success && typeof data.success !== 'undefined') {
//notifier.logixNotifier("notifyError", data.message);
gridDataSource.read();
}
if (data.success) {
//notifier.logixNotifier("notifySuccess", data.message);
gridDataSource.read();
}
return data;
}
}
});
$("#grid-container").kendoGrid({
dataSource: gridDataSource,
height: 550,
groupable: true,
sortable: true,
toolbar: ["create"],
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5,
},
columns: [
{
field: "Name",
title: "Name",
editable: false
},
{
field: "FatherName",
title: "Father Name",
},
{
field: "DateOfBirth",
title: "Date Of Birth",
format: "{0:MM/dd/yyyy}"
},
{
field: "Address",
title: "Address",
},
{
field: "Email",
title: "Email",
},
{
field: "Phone",
title: "Phone",
attributes: { hideMe: true }
},
{
field: "StudnetInterest",
title: "Student Interest",
editor: interestsDropdown,
values: interestsDropdown
},
{ command: ["edit", "destroy"], title: " ", width: "250px" }
],
// editable: "inline"
editable: "popup"
});
});
#*drop down Data Source*#
var dropDownDataSource = new kendo.data.DataSource({
transport: {
read: {
dataType: "json",
url: "/KendoGrid/GetInterest",
},
}
});
function interestsDropdown(container, options) {
debugger
$('<input required name="' + options.field + '" id="dropintrest" onchange="drop(this)"/>')
.appendTo(container)
.attr('data-bind', 'value:Id')
.kendoDropDownList({
autoBind: false,
dataTextField:"InterestName",
dataValueField:"Id",
dataSource: dropDownDataSource,
});
}
function drop(event) {
debugger
var data= $("#dropintrest").data("kendoDropDownList");
}
</script>
</body>
</html>
I think you may be binding to the wrong property on your model. Also, try setting the valuePrimitive property of your drop down list to true:
$('<input required data-bind="value:' + options.field + '" name="' + options.field + '" id="dropintrest" onchange="drop(this)"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField:"InterestName",
dataValueField:"Id",
dataSource: dropDownDataSource,
valuePrimitive: true
});
According to the documentation:
If set to true, the View-Model field will be updated with the selected item value field. If set to false, the View-Model field will be updated with the selected item.
Hope this helps.

Uncaught TypeError: e(...).parents(...).andSelf on Kendo UI Grid

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.

Kendo grid expand row not working correctly

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

Is it possible to have multiple instances of kendo grid

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

Categories