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!
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 function that creates a kendo grid which has the button to download it as a ".xlsx" file.
There is a dropdown that when is changed, calls this function again.
function CreateGrid(result) {
var chartSeries = result.ChartData;
var gName = $("#dropdown1 option:selected").text();
// Create Grid
$("#grid1").kendoGrid({
toolbar: ["excel"],
excel: {
fileName: "Grid1_"+gName+".xlsx",
filterable: true,
allPages: true
},
columns: [
{ field: "column1", width: "90px", title: "<strong>Item1</strong>" },
{ field: "column2", width: "80px", title: "<strong>Item2</strong>" },
{ field: "column3", width: "120px", title: "<strong>Item3</strong>", format: "{0:c2}" }
],
groupable: false,
resizable: true,
pageable: false,
scrollable: true,
filterable: false,
sortable: true,
pageSize: 50
});
// Set Grid data source
$("#grid1").data("kendoGrid").setDataSource(
new kendo.data.DataSource({
//Set the data of the grid as the result array of object.
data: result.ChartData
})
);
}
The problem is, when i click in the button to download the file, it downloads every grid previously made when I want only the current one.
For example, i created the grid once, then i changed the dropdown and the grid changed to the values corresponding to the new dropdown value, but when I click in the button, it downloads 2 files, from the first grid made and the one showing.
If I change the dropdown again, then the values will change according to the dropdown value but if I click to download the file,it downloads the previous 2 files + the one in the grid.
It seems that even thought i cant see the previous grids anymore, they are still there so I want to know how can I destroy/erase/clean them.
I would suggest you to remove the grid before creating a new one. This function would delete it and also would return you the current data in the grid, if you want to re-assign it:
function removeGrid(g) {
var tmp = [];
try {
tmp = g.data("kendoGrid").dataSource.data();
} catch (e) { }
var container = g.parent();
g.remove();
container.append("<div id='" + g.attr("id") + "' class='" + g.attr("class") + "'></div>");
return tmp;
}
Then you could call it like this:
var gName = $("#dropdown1 option:selected").text();
removeGrid($("#grid1"));
// Create Grid
$("#grid1").kendoGrid({
...
}
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 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.
I've set up my kendo ui grid to read data from an MVC action that returns JSON. I'm using the free version of Kendo and not the MVC specific, due to cost.
The issue is that when the page loads and does the initial population of the grid it doesn't show the loading spinner. After grid is populated and I go to another page or sort a column it shows up.
If I set the height parameter of the grid, I get the initial spinner but the grid only shows one row (should have shown 20).
Does anyone know why you have to set the height parameter? Or any way of getting the spinner to work without setting the height.
My kendo javascript kode:
$("#grid").kendoGrid({
dataSource: new kendo.data.DataSource({
transport: {
read: url,
parameterMap: function (options) {
var result = {
pageSize: options.pageSize,
skip: options.skip,
take: options.take,
page: options.page,
};
if (options.sort) {
for (var i = 0; i < options.sort.length; i++) {
result["sort[" + i + "].field"] = options.sort[i].field;
result["sort[" + i + "].dir"] = options.sort[i].dir;
}
}
return result;
}
},
requestStart: function () {
//kendo.ui.progress($("#loading"), true); <-- this works on initial load, but gives two spinners on every page or sort change
},
requestEnd: function () {
//kendo.ui.progress($("#loading"), false);
},
pageSize: 20,
serverPaging: true,
serverSorting: true,
schema: {
total: "total",
data: "data"
},
}),
height: "100%", <-- I want to avoid this as it renders the grid way to small
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "PaymentRefId",
title: "Id"
},
{
field: "DueDate",
title: "Due Date"
},
{
field: "Credit",
title: "Amount"
},
{
field: "InvoiceGroupId",
title: " ",
sortable: false,
template: 'See details'
}
],
});
I had this same issue. It actually is rendering the spinner / progress bar, but because the grid content area initially has no height, you can't see it. This worked for me. Give it a shot:
// This forces the grids to have just al little height before the initial data is loaded.
// Without this the loading progress bar / spinner won't be shown.
.k-grid-content {
min-height: 200px;
}
The solution var to use a variable to tell me if the dataset load was the initial one or not. It's not a perfect solution, but it's the only one I've been able to make work.
var initialLoad = true;
$("#grid").kendoGrid({
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "PaymentRefId",
title: "Id"
},
{
field: "DueDate",
title: "Due Date"
},
{
field: "Credit",
title: "Amount"
},
{
field: "InvoiceGroupId",
title: " ",
sortable: false,
template: 'See details'
}
],
});
var ds = new kendo.data.DataSource({
transport: {
read: url,
parameterMap: function (options) {
var result = {
pageSize: options.pageSize,
skip: options.skip,
take: options.take,
page: options.page,
};
if (options.sort) {
for (var i = 0; i < options.sort.length; i++) {
result["sort[" + i + "].field"] = options.sort[i].field;
result["sort[" + i + "].dir"] = options.sort[i].dir;
}
}
return result;
}
},
requestStart: function () {
if (initialLoad) <-- if it's the initial load, manually start the spinner
kendo.ui.progress($("#invoiceGroupGrid"), true);
},
requestEnd: function () {
if(initialLoad)
kendo.ui.progress($("#invoiceGroupGrid"), false);
initialLoad = false; <-- make sure the spinner doesn't fire again (that would produce two spinners instead of one)
},
pageSize: 20,
serverPaging: true,
serverSorting: true,
schema: {
total: "total",
data: "data"
},
});
Chances are, because you are creating and setting the datasource in the grid's initialization, the grid loads so fast that you don't see a load spinner. If you look at all the web demos for kendogrid on their website, you rarely see the initial load spinner. On large remote datasources that take longer to load, you would see it.
If I set the height parameter of the grid, I get the initial spinner but the grid only shows one row (should have shown 20)
It's not that it only shows one row. It's because it failed to read it your height property value so it defaulted to as small as possible. Height takes in a numeric pixel value and does not accept percentages. It couldn't read your value, so it probably took longer to initialize the grid, which allowed you to see the load spinner. Instead, height should be set like height: 400, for example. But this is besides the point.
If you really want the user to see a load spinner on start, try loading the datasource outside of the grid initialization. Basically, load the grid first, and load the datasource after so that there is slightly more delay between the grid rendering and datasource setting.
$("#grid").kendoGrid({
//kendoGrid details... but exclude dataSource
});
var ds = new kendo.data.DataSource({
//DataSource details...
});
And then set the datasource like this:
var grid = $("#grid").data("kendoGrid");
grid.setDataSource(ds);
grid.refresh();
However, I think this would still load pretty fast.
Another last resort if you still really want the spinner is to trick the user into thinking it's taking longer to load and manually call the load spinner like you've tried. Call kendo.ui.progress($("#loading"), true);, execute a small delay function for say 250ms and then turn the load spinner off, and then call grid.setDataSource(ds); and refresh.