I would like to bind combobox into kendo grid
Please give me example code grid that have bind combobox from database
var provinces = $("#ddlProvince").kendoComboBox({
placeholder: "Choose Province",
dataTextField: "pname",
dataValueField: "pcode",
dataSource:data_province
}).data("kendoComboBox");
<div id="gridData"></div>
What you looking for is called custom editor, you can find some example here http://demos.kendoui.com/web/grid/editing-custom.html
Link your field to specific editor
{ field: "Category", title: "Category", width: "160px", editor: categoryDropDownEditor,
Define your editor
function categoryDropDownEditor(container, options) {
$('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Categories"
}
}
});
}
Now when you click edit on specific row, custom editor of your choice is appended.
Related
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.
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.
This is a UI grid entry for creating a check box dynamically,
{
field: 'defaultYn',
displayName: 'DefaultYn',
width: '10%',
enableFiltering: false,
cellTemplate: '<input type="checkbox" ng-model="row.entity.defaultYn" ng-click="grid.appScope.updateRow(row);" ng-true-value="\'Y\'" ng-false-value="\'N\'">'
}
Here in updateRow, need to update the check box value programatically,
$scope.updateRow = function(row) {
SweetAlertService.confirm('Are you sure?','', function(isConfirmed) {
if (isConfirmed) {
}else{
/* deselect the check box, code not working
row.entity.defaultYn= "Y";*/
}
});
Sweet Alert code section
confirm: function(title, message, callback) {
swal({
title: title,
text: message,
type: "warning",
showCancelButton: true,
confirmButtonColor: '#33414e',
confirmButtonTexColor: '#FFF;',
closeOnConfirm: true,
closeOnCancel: true,
timer: 1500
},
function(isConfirm) {
callback(isConfirm);
});
}
Here not able to set the UI grid selected row values check box programmatically.
How can I enable or disable a checkbox in UI grid through angular js code.
Here is the issue http://plnkr.co/edit/Sd7Uk5yTkhPFnzrsDknp?p=preview.
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()),
};
I've hooked up a DropDown editor inside a Grid column, and I've followed the Kendo example here :
http://demos.telerik.com/kendo-ui/grid/editing-custom
I actually do have the downdown editor working in Add/Edit mode, and with the DataSource binded to it. However, I can't figure out why the styling is all messed up.
As you can see in the below image, the dropdown is rendered but there is also an text box rendered just below it.
All appears to be styling fine in my plunker example, http://plnkr.co/edit/mxBYYerPLazQwctQkDjS?p=preview, but not in my real project code.
My HTML :
vm.userDimenGridOptions = { // Kendo grid - USER DIMENSIONS...
selectable: true,
sortable: true,
pageable: true,
columns: [
{ field: "id", width: "50px", hidden: true },
{ field: "dimension", width: "120px", editor: dimenDropDown, template: "#=dimension#" },
{ field: "hierarchy", width: "80px" },
{ template: '<button onclick="return up(\'#=uid#\')">up</button><button onclick="return down(\'#=uid#\')">down</button>' },
{ command: [{ name: "edit", text: '' }, { name: "destroy", text: '' }], width: 170 }
],
editable: "inline",
toolbar: ["create"],
messages: {
commands: {
cancel: "Cancel",
canceledit: "Cancel",
create: "dimension",
destroy: "Delete",
edit: "Edit",
save: "Save changes",
select: "Select",
update: "Update"
}
}
};
My angular controller code :
// SERVER-SIDE DIMENSIONS DATA SOURCE
vm.dimensionsDataSource = new kendo.data.DataSource({
transport: {
read: getDimensionsFromServer
}
});
function dimenDropDown(container, options) {
$('<input id="dimenDropDown" data-text-field="name" data-value-field="name" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoComboBox({
dataTextField: "name",
dataValueField: "name",
dataSource: vm.dimensionsDataSource
});
}
I also wanted to show an image of what the Insepect Elements looks lik in Chrome. Indeed some weird behavior here; see the SPAN inside the SPAN. And within each SPAN tag there's an INPUT tag.
Why two input tags ???
Take the Template off from the column and try. I'm not sure though
{ field: "dimension", width: "120px", editor: dimenDropDown }