Is there any way how to display just a few columns in a grid and other columns as fields in editor?
Let's say that grid shows just basic information as 'ID', 'Name', 'Description' in Read-Only mode but user is able to do a full edit and popup editor show other field from data source as 'Type', 'Date', 'Category', ...
There are many ways how to hide fields from editor, but how to hide them from grid and show in editor?
You can achieve this thing by using hidden property of column. In below demo I have hide the UnitsInStock and UnitPrice column but it shows on popup edit window.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/editing-popup">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.material.min.css" />
<script src="https://kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{ field:"ProductName", title: "Product Name" },
{ field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" , hidden: true, },
{ field: "UnitsInStock", title:"Units In Stock", width: "120px",hidden: true, },
{ field: "Discontinued", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "popup"
});
});
</script>
</div>
</body>
</html>
Let me know if any concern.
Related
How to restrict the check box check to 5 in Kendo UI grid.
I am using Kendo UI grid with check box. I want to restrict check box selection to 5
Please find the code attached
$(function () {
$("#grid").kendoGrid({
dataSource: {
pageSize: 10,
transport: {
read: {
url: "url",
dataType: "json"
}
},
schema: {
model: {
id: "Id",
fields: {
Id: {
type: "string"
},
Title: {
type: "string"
},
OrderDate: {
type: "date",
defaultValue: null
}
}
}
}
},
pageable: true,
persistSelection: true,
change: onChange,
columns: [
{ selectable: true, width: "50px" },
{ field: "Title", title: "Title" },
{ field: "OrderDate", title: "Order Date", format: "{0:MM/dd/yyyy}", encoded: true }
]
});
});
function onChange(arg) {
//console.log("The selected product ids are: [" + this.selectedKeyNames().join(", ") + "]");
}
Thanks in advance
This is tested code according your requirement only difference is that checkbox column created with template.
Reference link : https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Selection/grid-selection-checkbox
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<button id="showSelection">Show selected IDs</button>
<script>
$(document).ready(function () {
//DataSource definition
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: {
editable: false,
nullable: true
},
ProductName: {
validation: {
required: true
}
},
UnitPrice: {
type: "number",
validation: {
required: true,
min: 1
}
},
Discontinued: {
type: "boolean"
},
UnitsInStock: {
type: "number",
validation: {
min: 0,
required: true
}
}
}
}
}
});
//Grid definition
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 430,
//define dataBound event handler
dataBound: onDataBound,
toolbar: ["create"],
columns: [
//define template column with checkbox and attach click event handler
{ template: "<input type='checkbox' class='checkbox' />" },
"ProductName", {
field: "UnitPrice",
title: "Unit Price",
format: "{0:c}",
width: "100px"
}, {
field: "UnitsInStock",
title: "Units In Stock",
width: "100px"
}, {
field: "Discontinued",
width: "100px"
}, {
command: ["edit", "destroy"],
title: " ",
width: "172px"
}
],
editable: "inline"
}).data("kendoGrid");
//bind click event to the checkbox
grid.table.on("click", ".checkbox" , selectRow);
$("#showSelection").bind("click", function () {
var checked = [];
for(var i in checkedIds){
if(checkedIds[i]){
checked.push(i);
}
}
alert(checked);
});
});
var checkedIds = {};
//on click of the checkbox:
function selectRow() {
//// *********Prevent to select more than 5 record*************************
if(Object.keys(checkedIds).length>=5)
{
this.checked=false;
}
/// **********************************
var checked = this.checked,
row = $(this).closest("tr"),
grid = $("#grid").data("kendoGrid"),
dataItem = grid.dataItem(row);
checkedIds[dataItem.id] = checked;
if (checked) {
//-select the row
row.addClass("k-state-selected");
} else {
//-remove selection
row.removeClass("k-state-selected");
}
}
//on dataBound event restore previous selected rows:
function onDataBound(e) {
var view = this.dataSource.view();
for(var i = 0; i < view.length;i++){
if(checkedIds[view[i].id]){
this.tbody.find("tr[data-uid='" + view[i].uid + "']")
.addClass("k-state-selected")
.find(".checkbox")
.attr("checked","checked");
}
}
}
</script>
</body>
</html>
Let me know if you have questions or concerns.
I have implemented kendo grid batch editing feature to my application. I am able to save the changes by the default functionality provided by kendo. Here is the same code I have implemented in my project:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/editing">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.flat.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.flat.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 550,
toolbar: ["create", "save", "cancel"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
{ field: "UnitsInStock", title: "Units In Stock", width: 120 },
{ field: "Discontinued", width: 120, editor: customBoolEditor },
{ command: "destroy", title: " ", width: 150 }],
editable: true
});
});
function customBoolEditor(container, options) {
var guid = kendo.guid();
$('<input class="k-checkbox" id="' + guid + '" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
$('<label class="k-checkbox-label" for="' + guid + '"></label>').appendTo(container);
}
</script>
</div>
</body>
</html>
I need a feature to show the entire grid in edit mode have all the editable column with edit templates. I tried to add same client template as editor template but the behavior is not as expected. Is there any way to show both client template and editor template with a common template?
For e.g.
In the above example, I need Unit Price with numeric textbox present on all the rows. Not only when I click to it.
Here has an example;
$("#grid").kendoGrid({
dataSource: {
schema: {
model: {
id: "id",
fields: {
id: { editable: false }
}
}
},
change: function() {
$("textarea").val(
kendo.stringify(this.view())
);
},
data: [
{ id:1, age: 30, name: "John Doe" }
]
},
columns: [
{ field: "id", width: 50 },
{ field: "age", template: "<input data-bind='value: age' data-role='numerictextbox'>" },
{ field: "name", template:"<input data-bind='value: name' >" }
],
dataBound: function() {
var rows = this.tbody.children();
var dataItems = this.dataSource.view();
for (var i = 0; i < dataItems.length; i++) {
kendo.bind(rows[i], dataItems[i]);
}
}
});
http://jsbin.com/ApoFobA/2/edit?html,js,output
My read action in the kendo UI grid is not getting called.
Can someone please help.
FYI : Please don't worry about the synctactical errors if any. I have just typed in the snippet. The concern is in the javascript where the Transport read action is done.
Here is my code snippet.
********* HTML *********
<html>
<head>
<link rel="stylesheet" href="~/Content/kendo/kendo.common.min.css" />
<link rel="stylesheet" hre="~/Content/kendo/kendo.default.min.css" />
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"> </script>
<script src="~/Scripts/kendo/kendo.all.min.js"></script>
<script src="~/Scripts/kendo/kendo.aspnetmvc.min.js"></script>
<script src="~/Scripts/test.js" type="text/javascript"></script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
********************* Code Behind **********
[HttpGet]
public JsonResult GetMyData()
{int testId=1;
TestManager mana = new TestManager();
List<MyTestDataModel> retVal = mana.GetMyTestData(testId);
return Json(retVal, JsonRequestBehavior.AllowGet);`
}
************************* Javascript test.js **********************
function PopulateWellGrid(level) {
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: '/Home/GetMyData',
//url: '#Url.Action("GetMyData", "Home")'
dataType: "json",
type: "GET"
}
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 600,
sortable: true,
pageable: true,
//detailInit: detailInit,
dataBound: function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [
{
field: "Id",
title: "ID",
width: "110px"
},
{
field: "TestId",
title: "Test Id",
width: "110px"
},
{
field: "Name",
title: "First Name",
width: "110px"
},
{
field: "Status",
width: "110px"
},
{
field: "StartDate",
width: "110px"
}
]
});
}
Try following to see if it works for you. I will show what is working for me in a similar setup. I have type: 'aspnetmvc-ajax' and type:'POST' and the method I have decorated with it [HttpPost] on the server side. However, I have two methods on the server side first returns the view and the second method returns the data.
function PopulateWellGrid(level) {
$("#grid").kendoGrid({
dataSource: {
type: 'aspnetmvc-ajax',
transport: {
read: {
url: '/Home/GetMyData',
//url: '#Url.Action("GetMyData", "Home")'
dataType: "json",
type: "POST"
}
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 600,
sortable: true,
pageable: true,
//detailInit: detailInit,
dataBound: function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [
{
field: "Id",
title: "ID",
width: "110px"
},
{
field: "TestId",
title: "Test Id",
width: "110px"
},
{
field: "Name",
title: "First Name",
width: "110px"
},
{
field: "Status",
width: "110px"
},
{
field: "StartDate",
width: "110px"
}
]
});
}
[HttpGet]
public ActionResult Index(){
return View();
}
[HttpPost]
public JsonResult GetMyData()
{int testId=1;
TestManager mana = new TestManager();
List<MyTestDataModel> retVal = mana.GetMyTestData(testId);
return Json(retVal);`
}
I have a kendo grid connected to a rather large table via odata. I use batch editing. I need to be able to filter all rows that have changes on them so the user can review those changes before they commit the changes to the db. Any idea how could I do that? Thanks
Do you need to show also deleted records (not sync'ed)? Otherwise you can set a filter with the condition:
{
field: "dirty",
operator: "equals",
value: true
}
Something like:
grid.dataSource.filter({
field: "dirty",
operator: "equals",
value: true
});
$(document).ready(function () {
var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 550,
toolbar: [
"create",
"save",
"cancel"
],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}" },
{ field: "UnitsInStock", title: "Units In Stock" },
{ field: "Discontinued" },
{ command: "destroy", title: " " }],
editable: true
}).data("kendoGrid");
$("#dirty").on("click", function(e) {
console.log("dirty", grid.dataSource.data());
grid.dataSource.filter({
field: "dirty",
operator: "equals",
value: true
});
e.preventDefault();
});
$("#all").on("click", function(e) {
grid.dataSource.filter({});
e.preventDefault();
});
});
html {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<button id="dirty" class="k-button">Dirty</button>
<button id="all" class="k-button">All</button>
<div id="grid"></div>
I am having problem getting the Kendo Grid to work correctly. I am using ASP.NET WebAPI to fetch data from SQL Server and display it in the grid. Use the Kendo Grid to do Updates and Deletes.
POST: While debugging I noticed that a NULL object in IE but Chrome gets a valid data.
which I am passing to update the DB.
IE versions 10 and 11. There are no JS errors but the object is NULL on the WEB API.
WEBAPI - GET Works (IE and Chrome),
POST/DELETE does not work in IE (Works in Chrome)
#model dynamic
#{
ViewBag.Title = "FunctionalGroup";
}
<div class=".col-xs-12 .col-sm-6 .col-lg-8">
<div class="well well-sm">
<h2>Functional Groups - Management</h2>
<p>Create, Update and Delete Functional Groups</p>
</div>
<div class="row">
<div class="well well-sm">
<div style="overflow-x: auto" id="FunctionalGroupGrid"></div>
<div id="window"></div>
</div>
</div>
<div>
<button data-role="button" data-icon="cancel"></button>
</div>
</div>
#section Scripts{
<script type="text/x-kendo-template" id="windowTemplate">
<p>Delete <strong>#= FunctionalGroupName #</strong> ? </p>
<p>#= FunctionalGroupDescription # </p>
<button class="k-button" id="yesButton">Yes</button>
<button class="k-button" id="noButton"> No</button>
</script>
<script>
var windowTemplate = kendo.template($("#windowTemplate").html());
var window = $("#window").kendoWindow({
title: "Are you sure you want to delete this record?",
visible: false, //the window will not appear before its .open method is called
modal: true,
resizable: false,
width: "400px",
height: "200px",
}).data("kendoWindow");
var LookupFunctionalGroupType = new kendo.data.DataSource({
transport: {
read: "/api/FunctionalGroupType",
datatype : "json"
}
});
function getfunctionalGroupType(functionalGroupTypeID) {
for (var idx = 0, length = LookupFunctionalGroupType.length; idx < length; idx++) {
if (LookupFunctionalGroupType[idx].FunctionalGroupTypeID === functionalGroupTypeID) {
return LookupFunctionalGroupType[idx].FunctionalGroupTypeName;
}
}
}
function functionalGroupTypeDropDownEditor(container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "FunctionalGroupTypeName",
dataValueField: "FunctionalGroupTypeID",
dataSource: LookupFunctionalGroupType
}).appendTo(container);
}
$(function () {
var baseUrl = "/api/FunctionalGroup";
var datatype = "json";
var contentType = "application/json";
var datasourceFG = new kendo.data.DataSource({
serverPaging: true,
pageSize: 10,
autoSync: false,
batch: true,
transport: {
read: {
url: baseUrl,
dataType: datatype,
contentType: contentType
},
create: {
url: baseUrl,
dataType: datatype,
contentType: contentType,
type: "POST"
},
update: {
url: baseUrl,
dataType: datatype,
contentType: contentType,
type: "PUT"
},
destroy: {
url: baseUrl,
dataType: datatype,
contentType: contentType,
type: "DELETE"
}
, parameterMap: function (data, operation) {
if (operation !== "read" && data.models) {
return kendo.stringify(data.models);
}
else {
return {
take: data.take,
skip: data.skip,
pageSize: data.pageSize,
page:data.page
}
}
},
},
schema: {
data: "Data.$values",
total: "RecordCount",
model: {
id: "FunctionalGroupID",
fields: {
FunctionalGroupID: { editable: false, type: "number" },
FunctionalGroupName: { editable: true, nullable: false, validation: { required: true } },
FunctionalGroupDescription: { editable: true, nullable: false, validation: { required: true } },
FunctionalGroupTypeID: { field: "FunctionalGroupTypeID", type: "number", defaultValue: 101 },
IsActive: { editable: true, nullable: false, type: "boolean" },
CreatedBy: { editable: false, nullable: false, validation: { required: true } },
CreatedDateTime: { editable: false, type: "date", format: "{0:MM/dd/yyyy HH:mm:ss}" },
ModifiedBy: { editable: false},
ModifiedDateTime: { editable: false, type: "date", format: "{0:MM/dd/yyyy HH:mm:ss}" }
}
},
}
});
$("#FunctionalGroupGrid").kendoGrid({
dataSource: datasourceFG,
navigatable: true,
autoBind: false,
pageable: true,
resizable: true,
reorderable: true,
editable: kendo.support.mobileOS ? "popup":true,
groupable: true,
filterable: true,
sortable:true,
columnMenu: true,
selectable: "row",
mobile: true,
toolbar: ["create", "save", "cancel"],
columns: [
{ field: "FunctionalGroupID", width: 50, title: "ID", hidden: true },
{ field: "FunctionalGroupName", width: 150, title: "Functional Group" },
{ field: "FunctionalGroupDescription", width: 200, title: "Description" },
{
field: "FunctionalGroupTypeID", width: 180, title: "Functional Group Type"
, template: '#=getfunctionalGroupType(FunctionalGroupTypeID)#'
, editor: functionalGroupTypeDropDownEditor, filterable:false
},
{
field: "IsActive", width: 80, title: "Is Active",
template: '<input type="checkbox" #= IsActive ? checked="checked" : "" # disabled="disabled" ></input>'
},
{ field: "CreatedBy", width: 100, title: "Created By", hidden: true },
{ field: "CreatedDateTime", width: 100, title: "Created DateTime", format: "{0:MM/dd/yyyy}", hidden: true },
{ field: "ModifiedBy", width: 100, title: "ModifiedBy", hidden: true },
{ field: "ModifiedDateTime", width: 100, title: "Modified DateTime", format: "{0:MM/dd/yyyy}", hidden: true },
{
title: "Actions",
command: [
{
name: "destroy",
text: "Delete",
click: function (e) { //add a click event listener on the delete button
var tr = $(e.target).closest("tr"); //get the row for deletion
var data = this.dataItem(tr); //get the row data so it can be referred later
window.content(windowTemplate(data)); //send the row data object to the template and render it
window.open().center();
$("#yesButton").click(function () {
grid.dataSource.remove(data) //prepare a "destroy" request
//grid.dataSource.sync() //actually send the request (might be ommited if the autoSync option is enabled in the dataSource)
window.close();
})
$("#noButton").click(function () {
window.close();
})
}
}
]
}
]
});
LookupFunctionalGroupType.fetch(function () {
LookupFunctionalGroupType = this.data(); //First fetch the Lookup data
datasourceFG.read(); // This will bind to the grid.
});
});
</script>
Which versoin of IE are you running? Are you seeing JS error in IE?
I see in your secript
},
}
You might want to remove "," if there are no elements following it in the list