Hi mahesh213,
There are other rows that has some data present. So you can't hide the column.
You only need to hide the current row controls and header.
Refer below code.
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public JsonResult GetCustomers()
{
List<Customer> customers = new List<Customer>();
customers.Add(new Customer { Id = 1, Name = "John Hammond", Country = "United States" });
customers.Add(new Customer { Id = 2, Name = "Mudassar Khan", Country = "India" });
customers.Add(new Customer { Id = 3, Name = "Suzanne Mathews", Country = "France" });
customers.Add(new Customer { Id = 4, Name = "Robert Schidner", Country = "Russia" });
return Json(customers, JsonRequestBehavior.AllowGet);
}
public JsonResult UpdateCustomer(Customer customer)
{
return Json(customer, JsonRequestBehavior.AllowGet);
}
public class Customer
{
public int Id { get; set; }
public string Name { get; set; }
public string Country { get; set; }
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default-v2.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://kendo.cdn.telerik.com/2020.1.114/js/angular.min.js"></script>
<script type="text/javascript" src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
<script type="text/javascript">
var app = angular.module("MyApp", ["kendo.directives"]);
app.controller("MyController", function ($scope, $window, $http) {
$scope.mainGridOptions = {
dataSource: {
type: "json",
transport: {
read: { url: "/Home/GetCustomers" },
update: { url: "/Home/UpdateCustomer" }
},
schema: {
model: {
id: "Id",
fields: {
CustomerId: { editable: false, nullable: true, type: "number" },
Name: { editable: true, nullable: true, type: "string" },
Country: { editable: true, nullable: true, type: "string" }
}
}
},
pageSize: 2,
serverPaging: false,
serverSorting: false
},
editable: "inline",
sortable: true,
pageable: true,
resizeable: true,
columns: [
{ field: "Id", title: "Id", width: "50px" },
{ field: "Name", title: "Name" },
{ field: "Country", title: "Country" },
{
title: 'Action',
command: [{ name: "edit", text: "Edit", iconClass: "k-icon k-i-hyperlink-open" }]
}
],
edit: function (e) {
var container = e.container;
var txtName = container.find("input[name=Name]");
$(txtName).hide();
$("#tblCustomers thead").find("[data-field='Name'] .k-link").html(" ");
},
cancel: function (e) {
var container = e.container;
var txtName = container.find("input[name=Name]");
$(txtName).show();
$("#tblCustomers thead").find("[data-field='Name'] .k-link").html("Name");
}
};
});
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<kendo-grid k-options="mainGridOptions" id="tblCustomers"></kendo-grid>
</body>
</html>
Screenshot
