I want to bind kendo ui grid with custom checkbox template binding row index as checkbox Id like the following:
var record = 1;
$scope.mainGridOptions = {
dataSource: {
data: $scope.LockingList,
pageSize: 15
},
schema: {
// the data, which the data source will be bound to is in the "list" field of the response
data: "EmployeeList",
type: "json"
},
sortable: true,
filterable: {
extra: false,
operators: {
string: {
eq: "Is equal to",
neq: "Is not equal to"
}
}
},
pageable: true,
dataBound: function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());
record = (this.dataSource.page() - 1) * this.dataSource.pageSize();
},
columns: [{
field: "EmployeeName",
title: "Employee Name",
},
{
template: "<input type='checkbox' id='#= ++record #' class='checkbox' ng-checked='dataItem.Locked' ng-click='LockByTask(dataItem)' /> <label for='#= ++record #'></label>",
title: "<input type='checkbox' id='header' title='Select all' ng-click='toggleSelectAll($event)' /><label for='header'></label>",
width: 60
}
],
editable: "popup"
};
I got record is not defined and can't bind row number.How to I do this? Thanks.
Related
Need a demo or source when use a dropdownlist in mode table on filter column in kendo grid of jquery or angularjs.
{
field: "VolunteerConnectName",
title: vm.module_resources.VolunteerConnect_Text,
filterable: {
cell: {
template: function (args) {
args.element.kendoDropDownList({
dataSource: args.dataSource,
optionLabel: "Seleccione",
dataTextField: "VolunteerConnectName",
dataValueField: "VolunteerConnectName",
valuePrimitive: true
});
},
operator: "eq",
showOperators: false
},
},
width: "20%"
},
filterable and values for rows and values for mode table.
{
field: "VolunteerConnect",
title: vm.module_resources.VolunteerConnect_Text,
width: "20%",
values: [
{ text: "Sí", value: true },
{ text: "No", value: false }
],
template: function (dataItem) {
var content = "";
content = (dataItem.VolunteerConnect) ? "Sí" : "";
return content;
},
filterable: true
}
I am trying to use serverPaging with the Kendo UI grid. In order to pass the total pages. I am passing a model which consists of the data list, and the total count. My problem is that I can't figure out how to parse the model in the Kendo grid.
Here is my Controller code:
$scope.mainGridOptions = {
dataSource: {
transport: {
read: {
url: '/SSQV4/SSQV5/Search/GetSearch',
type: "GET"
}
},
schema: {
total: "Total"
},
pageSize: 25,
serverPaging: true
},
sortable: true,
pageable: true,
resizable: true,
columns: [{
field: "CompanyID",
title: "Company ID"
}, {
field: "CompanyName"
}, {
field: "City"
}, {
field: "State"
}, {
field: "Deficiencies"
}]
};
The data returned is a list ("results"), and the recordcount ("Total"). Normally, I would use a service to get the data and parse the two like below:
myService.GetSearch()
.success(function(data)){
$scope.myDataList = data.results;
$scope.myDataCount = data.Total;
})
I cannot figure out how to use "results" and "Total" in the Kendo Grid when it is returned by my web api.
Any assistance is greatly appreciated.
I figured this one out. I had to add "results" to the schema. This worked:
$scope.mainGridOptions = {
dataSource: {
transport: {
read: {
url: '/SSQV4/SSQV5/Search/GetSearch',
type: "GET"
}
},
schema: {
data: "results",
total: "Total"
},
pageSize: 25,
serverPaging: true
},
sortable: true,
pageable: true,
resizable: true,
columns: [{
field: "CompanyID",
title: "Company ID"
}, {
field: "CompanyName"
}, {
field: "City"
}, {
field: "State"
}, {
field: "Deficiencies"
}]
};
I have a grid that is filled with data from the server when the controller is being initialized and the grid allow batch editing and i have a custom delete command that will mark the dataItem as MarkedAsDeleted. My requirements is:-
If i update any row in the grid, the corresponding item in the angular dataSource didn't get updated. How to do this??
If the user click the custom delete command , i want to mark the item to be MarkAsDeleted but i want that item to be hidden from the grid but still exists in the data source.
I want to handle changes in the grid, so i can mark the corresponding item to be updated for example.
This is my code:-
var dataSource = new kendo.data.DataSource({
data: this.jobCategory.minorCategories,
batch: true,
schema: {
model: {
id: "id",
fields: {
id: { editable: false, nullable: true },
name: { type: "string", validation: { required: true, pattern: '.{3,200}' } },
notes: { type: "string" }
}
}
}
});
this.gridOptions = {
toolbar: [{ name: "create", text: "Add a new minor category" }],
dataSource: dataSource,
autoBind: true,
height: 300,
editable: true,
sortable: true,
columns: [
{
field: "name",
title: "Name"
}, {
field: "notes",
title: "Notes"
},
{
command: [
{
text: "",
template: '<span class="k-button-icontext" ng-click="vm.test(dataItem)">Delete</span>'
}
]
}
]
};
test(dataItem): void {
dataItem.markAsDeleted = true;
}
and this is my html
<div kendo-grid="minorCategoriesGrid" k-options="vm.gridOptions">
</div>
Bulk edit is currently not available for Kendo UI grid (Angular 2). I'm hoping that it will be available with the major release that has been announce for January 18th.
I am using Kendo UI grid in angular js. Grid is displaying correctly.
but I want to hide a particular column based on user type.
I have tried like below, but its not working.
Here my angular controller code:
$scope.blogGridOptions = {
dataSource: {
pageSize: 10,
autoBind: false,
transport: {
read: function (e) {
$http.get('/Blog/GetAllBlogs')
.then(function success(response) {
if (response.data.success) {
e.success(response.data.blogs);
}
});
gridCallback = e;
}
}
},
sortable: true,
pageable: true,
resizable: true,
filterable: true,
columns: [{
field: "BlogTitle",
title: "Blog Title",
width: "300px",
filterable: false
}, {
field: "BlogContent",
title: "Blog Content",
width: "300px",
filterable: false
}, {
field: "ApprovalStatus.ApprovalStatus",
title: "Approval Status",
width: "300px",
filterable: false
}, {
field: "Actions",
width: "300px",
template: function (e) {
var str = '';
str = str + 'Edit';
str = str + ' | Delete';
return str;
},
filterable: false
}, {
hidden: function (e) { return e.userDetails.UserTypeId == 1 ? false : true; } ,
title: "Approve",
template: function (e) {
return '<button type="button" class="btn btn-success" ng-click="blog.approveBlogs(dataItem,2)"><i class="fa fa-check"></i></button> <button type="button" class="btn btn-danger" ng-click="blog.ignoreBlogs(dataItem,3)"><i class="fa fa-close "></i></button>';
}
}]
}
MVC View code:
<div kendo-grid="blogGrid" options="blogGridOptions" id="gridBlog"></div>
if usertypeid is 1, that column should show, for other users, it should be hidden.
PLease help to resolve this issue.
You can use hidecolumn in your dataBound event that is on the options of the grid. Not sure where you are getting the userTypeId from, but let's say it's bound to the controller and the column's name is 'approved'
dataBound: function(e) {
if(vm.userDetails.UserTypeId !== 1){
this.hideColumn('approved');
}
},
I added two extra columns in in kendo grid which have not data in datasource. I add two textboxes in these two columns using template.Now I want to push the values of these two columns into an angular array oncheckbox checked. I search alot about this in google and in stackoverflow. But did not find any relevant answer for my problem Here is the code for adding template in kendo grid
$scope.qualifySubGridColumns = [
{ template: "<input type='checkbox' class='subCheck checkbox' ng-click='getSelectedRow(dataItem)' />" },
{ field: "subList", template: "<input type='number' ng-minlength='0' ng-init='prefferedUser.subList=0'>", title: "SubList" },
{ field: "level", template: '<input type="number" ng-model="prefferedUser.level" ng-minlength="0" ng-init="prefferedUser.level=0">', title: "Level" },
{ field: "lastName", title: "Last Name" },
{ field: "firstName", title: "First Name" },
{ field: "email", title: "Email" },
{ field: "address1", title: "Address 1" },
{ field: "address2", title: "Address 2" },
{ field: "phone", title: "Phone" }
];
and here I want to fetch these columns. But I have no Idea How can i fetch sublist and level field values in selectedRow Array. Please Experts Help me
$scope.selectedRow = [];
$scope.getSelectedRow = function (data) {
$scope.selectedRow.push({ userId: data.substituteId});
// $scope.selectedRow.push({ userId: data.substituteId, sublist: sublist, level: level });
console.log("mydata", $scope.selectedRow);
};
I'm not sure familiar with anuglar, but I've done this in the past using just kendo.
Here is a simple grid I created with a checkbox on one column, and a text input on another column. The dataSource schema only has an id and a name property. But by adding the data bindings to the template input fields, those properties will be added to the dataSource data item.
<div id="grid"
data-role="grid"
data-columns="[{ field: 'id', title: 'Select', template: '<input type=\'checkbox\' data-bind=\'checked: selected\' />' },
{ field: 'name', title: 'Name' },
{ title: 'Age', template: '<input type=\'number\' data-bind=\'value: age\' />' }]"
data-bind="source: itemsDataSource">
</div>
Then if you dump the dataSource the grid is bound to (itemsDataSource in my instance), the items that you have changed the checkbox, or textbox will have those properties.
See sample running at JSBin
From there, you should be able to pull out the fields you want if the selected field is true etc.
I am not sure but it worked for me...
Html:
<body>
<div kendo-grid k-options="gridOptions" k-ng-delay="gridOptions" k-on-change="selected=data"></div>
</body>
<script id="RowId" type="text/x-kendo-template">
<tr>
<td><input ng-model="dataItem.Name"></td>
</tr>
</script>
Js:
$scope.Array= new kendo.data.ObservableArray([Object,Object]);
$scope.gridOptions = {
dataSource: new kendo.data.DataSource({
pageSize: 20,
data: $scope.Array,
autoSync: true,
schema: {
model: {
id: "Id",
}
}
}),
sortable: true,
resizable: true,
autoSync: true,
scrollable: true,
columns: [
{
field: "Name",
title: "Name",
editable: True,
},
],
rowTemplate: kendo.template($("#RowId").html()),
};