I have kendo-ui grid, with some fields.
I need one of the fields to be editable on add new row, and not editable on update row.
I try to change data-source definitions before add row, and change it back before update.
But the changing doesn't help.
Is there any way to do it?
Here is what I tried to do:
var schema = {
data: 'results',
model: {
id: 'GroupCode',
fields: {
GCode: { editable: false },
GroupPrincipalId: { editable: false },
GroupPrincipalName: { editable: false },
ChildCount: { editable: true },
}
}
};
onAddClick: function(){
var gridElement = ('#myGrid').data('kendoGrid');
gridElement.dataSource.options.schema.model.fields.GroupPrincipalId.editable = true;
gridElement.dataSource.options.schema.model.fields.GroupPrincipalName.editable = true;
gridElement.addRow();
}
(onAddClick is called by my custom adding-button, not related to kendo-adding-logic);
You can use the approach described here:
http://www.telerik.com/forums/making-column-as-readonly-on-update-and-editable-on-insert-in-grid
When create button is pressed you mark a variable as isCreating and in the edit section you check it and if is false you disable the requiered field/fields.
Related
I am having trouble making a select required in ExtJS.
I tried with allowBlank: false, even afterredner methods but nothing works, I can submit the form with no value in that select.
The code to generate the field is as follows:
OldType: function () {
return {
xtype: 'xEasyGridCombo',
allowBlank: false,
required: true,
valueField: 'fe_code',
displayField: 'fe_name',
dropPanelConfig: {
width: 480,
height: 200
},
searchFieldList: ['fe_code', 'fe_name'],
gridConfig: {
table: 'type_store',
idColumn: 'fe_id',
hasBottomBar: true,
rowLimit: 40,
tools: [],
conditions: [],
forceColumns: ['fe_code', 'fe_name'],
forceSelectFieldsQuery: ' DISTINCT fe_code, CONCAT(fe_name, \'[\', fe_code, \']\') fe_name ',
xColumns: [],
storeBaseParams: {}
},
listeners: {
afterrender: function () {
let oGrid,
sDivision = this.findParentByType('panel').find('KeyNr1', 'Divsion')[0].getValue();
// making sure the grid is rendered
this.getGridList();
oGrid = this.gridList.findByType('uxgrid')[0];
oGrid.store.baseParams.filter = Ext.util.JSON.encode([{
"field": "fe_tip",
"value": (sDivision === '02') ? 'F-GAZ' : 'F-ELEC'
}]);
//store from server try
oGrid.store.reload();
}
}
};
},
What am I doing wrong ? I can't even make it have a default value.
Thanks in advance and happy Holidays !
In the modern toolkit, the formpanel has a beforesubmit event. you can check if the value is selected or not. If you return a false from this event the form will not be submitted.
in the classic toolkit the event is beforeaction.
I have a parent view which contains a Backgrid view. In the parent view's initialize section I define a variable isWellSelected. The variable is toggled in the Backgrid column logic when a tickbox is checked. I am able to watch the variable toggled when a box is ticked and unticked.
However, once an event fires the variable is no longer in scope for the event to see. I suspect I may need to pass the variable to the Backrgrid view but I am unsure how to do that correctly. Please advise.
app.wellCollectionView = Backbone.View.extend({
template: _.template($('#wellTemplate').html()),
initialize: function() {
this.isWellSelected = false;
// isWellSelected toggled to true when a tickbox is checked in the columns block.
var columns = [...];
// instantiate collection
var wellCollection = new app.wellCollection;
// Set up a grid view to use the pageable collection
var wellGrid = new Backgrid.Grid({
columns: columns,
collection: wellCollection
});
// Initialize the paginator
var paginator = new Backgrid.Extension.Paginator({
collection: wellCollection
});
// Render the template
this.$el.html(this.template());
// Render the grid
this.$el.append(wellGrid.render().el);
this.$el.append(paginator.render().$el);
wellCollection.fetch({reset: true}).then(function () {...});
},
events: {
'click #EvaluateWell': function(){
this.evalWell(event, this.isWellSelected);
console.log("In events - isWellSelected: " + this.isWellSelected);}
},
// More stuff
}
Constructive feedback welcome.
Thanks!
Adding a snippet for "columns" as per JT's request:
var columns = [
{
name: '',
label: 'Select',
cell: Backgrid.BooleanCell.extend({
events : {
'change': function(ev){
var $checkbox = $(ev.target);
var $checkboxes = $('.backgrid input[type=checkbox]');
if($checkbox.is(':checked')) {
$checkboxes.attr("disabled", true);
this.isWellSelected = true;
// Disable all checkboxes but this one
$checkbox.removeAttr("disabled");
} else {
// Enable all checkboxes again
$checkboxes.removeAttr("disabled");
this.isWellSelected = false;
}
}
}
})
}, {
name: "api",
label: "API",
editable: false, // Display only!
cell: "string"
}, {
name: "company",
label: "Operator",
editable: false, // Display only!
cell: "string"
}];
For some reason I need to define a hidden column when using KendoUI grid:
var fields = {
ID: { type: "string", editable: true, nullable: false },
HideID : { type: "string", editable: false, nullable: false ,hidden: true },
Name: { type: "string", editable: true, nullable: false }
};
var ColumnsDefine = [
{ field: "ID", title: "ID", width: 100 },
{ field: "HideID", hidden: true },
{ field: "Name", title: "Name", width: 100 }
];
I change the HideID column value using JavaScript (operate the dataItem) without editing the grid's record.
And the JavaScript code to change the hidden field is like below (it's inside a command-click function)
var tr = $(e.target).closest("tr");
var data = this.dataItem(tr);
data.HideID = "123";
Now the problem is when I click the default update button, the background update method is not being called because I didn't make changes to any visible column. But if I modify any visible columns and click update, both the HideID and another field will be updated successfully in the background.
What should I do to notify the KendoUI grid that its data has been changed and fire the update method by clicking the update button?
Your grid dataItem will be a kendo.data.ObservableObject; you need to set your HideID property in such a way that the kendo framework sees the change, using it's set() method:
var tr = $(e.target).closest("tr");
var data = this.dataItem(tr);
data.set("HideID","123");
Once you've done that, you should find that it's dirty field is set to true. That signals to the datasource that this object has changes which need to be saved via the update method.
See also this article which gives a good explanation of how the observableObject can be used for binding https://docs.telerik.com/kendo-ui/framework/mvvm/observableobject#set-field-values
Hope this helps!
I have textfield where I can filter a grid, the problem is it can't filter all column but only one of this, so I want to filter all column with any value enter on the textfield, even it's type or name or email or something, like a gridsearch. Thanks
snippet of my code:
xtype: 'textfield',
label: 'search',
emptyText: 'Enter type...',
listeners: {
change: function (field, value) {
var grid = this.up('grid'),
store = grid.getStore();
if (!value) {
store.getFilters().removeAll();
} else {
store.filter([{property:'type',//can be other property
value:value}]);
}
}
}
If your store has remoteFilter: true, you can use a custom filter function, as explained here
http://docs.sencha.com/extjs/6.0.2/classic/Ext.util.Filter.html
If your store has remoteFilter: false, you need to address the custom filtering server side, implementing an OR clause.
I have a DataTable displaying data for Branches with two custom buttons defined: Add and Update. They are initialized at the top of the Javascript section
var buttons;
var tblBranch;
$.fn.dataTable.ext.buttons.add = {
className: 'button-add',
text: "Add Branch",
action: function (dt) {
onBtnAddClicked()
}
};
$.fn.dataTable.ext.buttons.update = {
className: 'button-update',
text: "Update",
action: function (dt) {
onBtnUpdateClicked()
}
};
I'd like to disable the Edit button on page load and only enable it to be clickable when a row has been selected. Problem is, I'm using custom buttons and I can't find anything on datatables.net about how to enable/disable them depending on conditions. So far what I've tried is this:
tblBranch = $("#tblBranches").DataTable({
dom: 'Blfrtip',
buttons: {
buttons :[
'add', 'update'
]
}
select: true;
})
$("#tblBranches tbody").on('click', 'tr', function () {
if (tblBranch.row(this).hasClass('selected')) {
$('button-update').removeClass("DTTT_disabled");
}
else {
table.$('tr.selected').removeClass('selected');
$('button-update').addClass("DTTT_disabled");
}
});
But I don't know what the code to disable the Edit button when the page loads should be like, and I've looked here, here, here and here.
Thanks for any guidance.
The last link you are referring to hold the solution you are looking for. But the documentation is a little bit vague, guess it need a solid example. It is not clear how you create the buttons (you show both methods) but below is an inline example, it would work with constructor as well. Simply give the button a class, like .edit and set it to disabled from start :
var table = $('#example').DataTable( {
dom: 'Bfrtip',
select: true,
buttons: [
{
text: 'Edit',
className: 'edit',
enabled: false,
action: function (e, dt, node, config) {
//do something
}
},
{
text: 'Add',
action: function (e, dt, node, config) {
//do something
}
}
]
})
Then use the Select plugins select and deselect events to update the enabled status of the .edit button :
$('#example').on('select.dt deselect.dt', function() {
table.buttons( ['.edit'] ).enable(
table.rows( { selected: true } ).indexes().length === 0 ? false : true
)
})
demo -> https://jsfiddle.net/pmee6w2L/