I have a two grid columns set up to display as editable drop-down fields. The column definition for each field uses this code to render the selection values:
return '<div class="editCell-innerDiv">' + params.value +
'<img class="alignRight" src="/resource/images/triangle-down_filled_12.png" alt="">' +
'</div>';
and render like this in the grid:
When the user changes a value in one drop-down, I need to clear the value in the other drop-down. When I use this JS code:
params.node.setDataValue('Some_Field', '');
I get this error in the console:
Cannot read properties of null (reading 'getColDef')
What code would I use to programmatically clear the other editable select field in the grid?
The way I do this, although I am not sure if the context is exactly the same (I do it within an event handler for Tab keys), is as follows...
params.node.data.Some_Field = '';
api.refreshCells({ rowNodes: [params.node], force: true });
I am not sure how you will get access to the ag-grid api (the api object in my code sample). This will depend on the context of your code.
Related
I've got a Telerik MVC Server Side Grid with pagination, the component generates a pagination dropdown at the bottom of the table which lets you select the page size.
I would like to change the value of that dropdown programatically from javascript and make it so the grid triggers a refresh with the new value.
I have already tried targetting the dropdown itself like so:
var listViewPagerDropDownList = $(".k-pager-sizes").find("select").data("kendoDropDownList");
listViewPagerDropDownList.value(userPreferencePageSize);
Targetting the pager:
var pager = $(".k-grid-pager").data("kendoPager");
pager.pageSize(userPreferencePageSize);
As well as trying to change it manually with jQuery like so:
var selectBox = $(".k-pager-sizes").find("select");
selectBox.val(userPreferencePageSize);
selectBox.find("option[value='" + userPreferencePageSize + "']").prop("selected", true);
But no matter what I do, it has no effect. Any idea?
Confused as to what you actually want, but to change the pagesizes you need to access the pager's dropdownlist datasource that holds the page values:
// Add a page size of 25 to the dropdown
$("select[data-role='dropdownlist']").data('kendoDropDownList').dataSource.add({text: "25", value: "25"});
You could use other datasource commands to clear existing values.
If you just want to change the page size of the grid, try:
$("#grid").data("kendoGrid").dataSource.pageSize(numberOfRows);
I am trying to create a grid that has a column where the editor is always available, so that editing the cell is a "one click" process. By this I mean rather than having to click on the cell to first switch to edit mode, and then select from the combo box, the user can straight away (using the mouse) click on the combobox down arrow to open it and select a value.
I thought I could do this using a column template (as opposed to editor) as follows...
function createComboTemplate(dataItem) {
var tmpl = '<input style="width:100%" ' +
'kendo-combo-box ' +
'k-data-text-field="\'display\'" ' +
'k-data-value-field="\'rego\'" ' +
'k-data-source="getCarList()"' +
'k-value="dataItem.rego"' +
'k-on-change="handleDDLChange(kendoEvent, dataItem)"/>';
return tmpl;
}
Full code here
The above shows the combo box, however as soon as I click on it, the cell goes to a text edit field. So I thought that perhaps the cell going into edit mode was causing this, so I set the columns editable property to false , but this made no difference.
IF I set the whole grid's editable property to false, then when I click on the combo box, it stays there, however it is empty.
In this example, the combobox data source is via a function, I also tried setting directly to a global list object (incase it was the function call that was the problem), but this didn't work either.
So, I Have a couple of related questions here.
The first, is to do with the property names in the template.
When I create a combobox in straight code, I have as follows (as in the above demo)
function createCombo(container, options, data) {
var dataField = options.field.split('.');
var fieldName = dataField[0];
var input = $('<input/>')
input.appendTo(container)
input.kendoComboBox({
autoBind: true,
filter: "contains",
placeholder: "select...",
suggest: true,
dataTextField: "display",
dataValueField: "rego",
dataSource: data,
value: options.model[fieldName].rego,
change: function (e) {
var dataItem = this.dataItem();
options.model[fieldName]['rego'] = dataItem.rego;
options.model.set(fieldName + '.display', dataItem.display);
}
});
}
So the above snippet has properties like "dataTextField", and "dataSource", etc, but when I created the template, from another example of templates I found, it seemed to use names like "k-data-text-field" and "k-data-source".
Is there any doco, or rules on how these field names map in the "markup" that is used in the templates (I could not find any)? It appear that the property names are prefixed with "k-data", and then the camelcase names converted to the "dash" syntax (similar to what angular does). IS this just the rules that we follow? If not then perhaps my problems are the syntax above is incorrect.
The other question is of course, what have I done wrong to cause the 2 problems
The combobox disappears when I click on it (unless the whole, grid is set to non editable)
Why the combo has no data
Or am I going about this the wrong way.
Thanks in advance for any help!
It appear that the property names are prefixed with "k-data", and then
the camelcase names converted to the "dash" syntax (similar to what
angular does). IS this just the rules that we follow?
Yes - the documentation is here.
The combobox disappears when I click on it (unless the whole, grid is
set to non editable)
This is because the column is editable, so it gets replaced by the default editor. You can prevent this from happening using the technique I described here. I also used it in the demo.
Why the combo has no data
Your template doesn't work; it should be something like this:
var tmpl = '<input style="width:100%" ' +
'kendo-combo-box ' +
'k-data-text-field="\'display\'" ' +
'k-data-value-field="\'rego\'" ' +
'k-data-source="dataItem.carSource"' +
'k-value="dataItem.car.rego" />';
and for that to work, you need to give each data item a reference to the car data (you can't execute a function there, the template is evaluated against a kendo.data.Model instance).
(updated demo)
I've been working on JQGid and has a requirement to combine common cells together in one big cell as shown!
Now the requirement is the add another cell below the last to that would have a clickable button in new cell in the Address column.Which is for adding a new address for adam whose dob is 11/11/1988.
So the help I require is to create a an empty cell dynamically as the datasource for the jqgrid is a json object and I won't be able to modify the json value
PLease let me know any custom formatter you know for this specific odd requirement
Any help would be appreciated
Below given is the cellattr function I've used to combine then Name field
cellattr: function (rowId, val, rawObject, cm, rdata) {
var result;
if (prevCellVal.value == val) {
result = ' style="display: none" rowspanid="' + prevCellVal.cellId + '"';
}
else {
var cellId = this.id + '_row_' + rowId + '_' + cm.name;
result = ' rowspan="1" id="' + cellId + '"'+'"+"';
prevCellVal = { cellId: cellId, value: val };
}
return result ;
}
May be I'm not getting what you are trying to say but this is my current scenario and what I would need to is to move the add new Value dropdown to be added as a new row on the right side under the existing file or files (could be multiple based on the returned value from the server). I have used cellattr function as said above. with the answers i'm not able to fix this.
Using formatter I'm able to move it to the right side when there are no files are returned. But I'm not able to move it to the side with values returned
Further help would be appreciated
Thanks in advance
I posted the answer which shows how one can use rowspan attribute to fill the grid which is close to what you do. The demo from the answer you cellattr, but one can use setCell too to set rowspan too.
I made the demo to demonstrate this. It displays the following grid originally
after one clicks on the button "Click me to add new row" I use addRowData to add the row and use setCell to set new values for rowspan attributes of some previous rows. So one sees the following picture
I disable the button "Click me to add new row" because what I wrote is very rough code. I used just fixed values of rowid instead of analyzing the data and evaluating all required values full dynamically. Nevertheless the demo shows clear that one can fill such grids dynamically.
Inside of click event handler I used just the following calles
$("#list").jqGrid("addRowData", "100", { country: "USA", state: "California",... },
"last");
$("#list").jqGrid("setCell", "60", "state", "", "", {rowspan: "5"});
$("#list").jqGrid("setCell", "10", "country", "", "", {rowspan: "10"});
UPDATED: One can add any HTML fragment (like <button>) in the same way. One more demo add buttons in the grid
I am facing a small problem regarding input validation in mvc telerik grid.
I have it set to batch editting and I'm modifing the cells in an InCell mode.
Now whenever a user enters an invalid value in one of the inputs(Telerik's comboboxes/autocompletes), I'd like to display a message that
the entered value is iligal(this far I've managed on my own).
In addition to the message I'd like to revert the cell's value to it's previus value before
the user input.
So far I've tried:
grid.CancelCell(this);
$('#grid .t-grid-edit-cell input[type="text"]').value or innerText = prevVal;
The closest so far was e.newVal = e.oldVal, although it sometimes throws me a wierd exception in the jquery scripts or displays the combobox's drop down.
All the validatios and things I've tried are from the grid's client event OnSave()
It's same like what i searched before and I have solution for you.
On your OnSave() method has event like OnSave(e) and that 'e' carry all the elemnts and functions inside in my example after validation if not ok i can change that value to old value. Also you can use inspecter element log to look up what is inside 'e'
function onSave(e){
if(!validation)
{
///
}
else
{
e.cell.firstChild.value = "0"; // that is my edited cell
}
}
I am now have editable grid with paging and have two columns, type and value , and they are edited by combo box. I want to have when the column 'type' contains value, the value combo box can filter by the type first. I have implemented a 'beforeload' event to check the if the column type contains value or not and passed as params to the server for retrieve value, however, I found that the combo box is load data to store once only and even the type value is changed, it will not load again.
How can make it load every time based on type value? Can I pass two params to the query ?
You can do this quite simply with the Ext.data.Store.filter() method, like so:
//Inside your combobox
listeners: {
select: function(me) {
store.clearFilter(true);
store.filter("storeVariable", me.getRawValue());
}
}