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.
Related
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 have a grid below when user click on subcategory Name column i am populating another grid on right side that is data for selected row, I want to add function to subcategory Name column when user click i want to refresh right side grid data to default. (no data should be display in right side until user select a row).
angular.module('thirdPartyManagementApp').value('subCategoryGridConfig', {
subCategoryGrid: {
sortable: true,
filterable: true,
selectable: true,
height: 600,
toolbar: [
{
template: kendo.template('<kendo-tabstrip><ul><li ng-class="{\'k-state-hover k-state-active\': defaultAllTab}">All</li>')
},
{
template: kendo.template('<li ng-class="{\'k-state-hover k-state-active\': defaultPendingTab}">Pending Review</li>')
},
{
template: kendo.template('<li ng-class="{\'k-state-hover k-state-active\': defaultReviewTab}">Reviewed</li></ul><kendo-tabstrip>')
}
],
columns: [
{
template: '<strong><span ng-if="this.dataItem.sortCode === 1" class="text-success">NEW</span><span ng-if="this.dataItem.sortCode === 2" class="text-danger">!</span></strong>',
width: '30px'
},
{
template: kendo.template('{{this.dataItem.subCategoryName}}<br/>Vendors...'),
field: 'subCategoryName',
title: 'Subcategory',
width: '100px',
template: (function(e) {
subCategoryGrid.columns.filter(function(data) {
return data.field === "subCategoryName";
})
subCategoryGrid.refresh();
});
},
{
field: 'status',
title: 'Status',
width: '65px'
}
]
},
Kendo grid hasn't sorting event, but datasource contains change event that fires when data changed and also sorted:
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#events-change
Try update data in this event handler
Don't forget check e.action to prevent loop
I have a renderer set up on my Sencha Ext.JS 3.4 EditorGridPanel. I allow the user to click a button, add rows and fill in various cells in those rows, and I set up a cue banner to show some useful text as soon as a blank row is added.
My cue banner solution is based on another SO answer, and the solution works great except for one small caveat: when someone types in text in one of the cells and later reverts that text to blank, whatever was there before is kept instead of becoming blank. You can edit to your heart's content, but as soon as you try to delete all text in a cell, your changes are ignored.
I've looked through the Sencha docs on the renderer and the onblur and even the listener parameters, and I've tried trapping the onblur event, but no events seem to even fire (using Chrome developer tools breakpoints). Is there a way to get this to work so that someone can revert the text to blank once they've typed?
Some Relevant Code:
(per comment request)
function renderCueBanner( value, metaData, record, rowIndex, colIndex, store ) {
if( !value && record.phantom )
return 'Double-click, and type';
else
return value;
}
//other code
MyCompany.ui.grid.Macros = Ext.extend(Ext.grid.EditorGridPanel, {
title: 'Macros',
//other code
var config = {
stripeRows: true,
viewConfig: { emptyText: 'No Macros to display' },
loadMask: true,
store: store,
sm: sm,
tbar: tbar,
colModel: new Ext.grid.ColumnModel({
defaults: {
menuDisabled: true
},
columns: [sm, {
header: 'Macro Category',
dataIndex: 'group',
sortable: true,
editor: {
fieldLabel: 'Macro Category',
forceSelection: false,
typeAhead: false,
valueField: 'name',
xtype : 'MyCompany.ui.autocompleter.MacroGroup'
},
renderer : renderCueBanner,
width: 150
}, {
header: 'To',
dataIndex: 'to',
editor: {
xtype: 'textfield',
allowBlank: false
},
sortable: true,
renderer : renderCueBanner,
width: 400
}],
listeners: {
'onblur' : {
fn: renderCueBanner,
handler: renderCueBanner,
delay: 100
}
},
isCellEditable: function(col, row) {
if (!Lynx.userCan('write')) {
Ext.Msg.alert(
'Access Denied',
'You are a read only user'
);
return false;
}
return Ext.grid.ColumnModel.prototype.isCellEditable.call(this, col, row);
}
}),
//...other code...
};
The problem is most likely caused by allowBlank:false in combination with the default value of revertInvalid:true.
The behavior is as expected in fact: You do not allow the field to stay blank so the editor reverts to the last valid, non-blank value.
Try to add revertInvalid:false or remove allowBlank:false (preferred) and it should work.
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 }
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.