I have a scenario where I have a Kendo dropdown, Kendo Datepicker as couple of columns in the grid.
On Add new record, the dropdown should be editable, on Edit mode, this drop down should be non Editable.
I have declared Grid to be Editable in declaration using
.Editable()
model.Field(p => p.CountryName).Editable(true); // where CountryName is kendo dropdown
I am trying to do on Edit this way,
function OnEdit(e) {
if (e.model.isNew() == false) {
e.model.fields["CountryName"].editable = false
}
THe behaviour I observe is Initially on load, Editable is set to true (due to cshtml declaration). When I click on Edit too, the drop down is Editable because of the page load flag that is set.
Even though OnEditmethod is executed and editable is set to false, the grid seems to have loaded before this code execution, hence editable =false is not reflected.
If I click on Edit second time, now the editable is set to false due to the previous call, Hence the dropdown is non editable as expected.
In Summary, the flag setting is not effective for the current action, but for the immediate next action. I am not sure if I have made it clear. Can you guys help?
Update - The other option I tried, during databind to the grid, I tried explicitly settign editable to false to all the grid data. My assumption here was only the loaded rows will have this field set to false. But in this case even the add new record takes Editable false.
var grid2 = $("#Gridprepayment").data("kendoGrid").dataSource.data(requiredData);
$.each(requiredData, function (i, row) {
var model = $("#Gridprepayment").data("kendoGrid").dataSource.at(i);
if (model) {
model.fields["CountryName"].editable = false;
}
});
The best way is to make the column editable .
e.g.
model.Field(d => d.CountryName).Editable(true);
and Onedit function, replace the inner html like mentioned below, for just to display it as label.
function OnEdit(e) {
e.container[0].childNodes['0'].innerHTML = e.model.CountryName;
}
Try disabling the kendo dropdown in the following manner:
function OnEdit(e) {
if (e.model.isNew() == false) {
$("#CountryName").data("kendoDropDownList").enable(false);
}
}
You can try this if you want to show the dropdownList as label in edit mode
function OnEdit(e) {
if(e.container.find("input").attr("id") === 'CountryName') {
this.closeCell();
}
}
Note: The above code was written considering "CountryName" as the id of the dropdown. Please change if the id is different.
I tried this which worked.
It's only a work around :
function OnEdit(e) {
if (e.model.isNew() == false) {
if (e.container.find("input").attr("id") === 'CountryName') {
e.container.find("td:eq(0)").html($("#CountryName").val());
}
}
}
Related
I have a kendo grid with filterable = true, mode=row.
I would like a way to have a button click, fire an event that will toggle hiding and showing the filter row.
Right now, I have it working by editing the innerHTML, but this is not what I want to do in the end, for several reasons.
1) I need to have a saved version of the filter row values before they are removed.
2) After they are removed and re-added they will not work
...
many other reasons, just bad practice and there has to be a better way.
A button that fires the event: toggleFilterClick:
<script type="text/x-kendo-template" id="gridFilter">
<button type="button" class="k-button" id="kendoFilterButton" data-click="toggleFilter"><span class="k-icon k-i-funnel"></span>Filter On/Off</button>
</script>
The Javascript code:
//Gets the innerHTML values before they are removed
var filterRowValues = $(".k-filter-row")[0].innerHTML;
//fired when the button is clicked
var toggleFilterClick = $('#kendoFilterButton').on("click", function () {
if ($(".k-filter-row")[0].innerHTML == '')
{
$(".k-filter-row")[0].innerHTML = filterRowValues;
}
else
{
$(".k-filter-row")[0].innerHTML = '';
}
});
Any thoughts suggestions would be appreciated/
I would just like to hide the actual filter row in the header
I'm not sure if i get the point but if you just want to hide it just simply remove everything except$(".k-filter-row").show(); and $(".k-filter-row").hide();. I create an example where when i hide the filter, the filter condtion will removed, but when it showed again the grid will refiltered with the previous value used to filter
$("#toggle").kendoButton({
click:function(){
if($(".k-filter-row").css("display") == "none"){
$(".k-filter-row").show();
//show again filter and execute previous filter condition
$("#grid").data("kendoGrid").dataSource.filter({field:"ShipName",operator:"contains",value:vm.get("filterOptions.ShipName").toString()});
$("#grid").data("kendoGrid").dataSource.filter({field:"OrderID",operator:"eq",value:vm.get("filterOptions.OrderID")});
}else{
//store the previous filter value
//autocomplete
vm.set("filterOptions.ShipName",$("input[data-role='autocomplete']").data("kendoAutoComplete").value());
vm.set("filterOptions.OrderID",$("input[data-role='numerictextbox']").data("kendoNumericTextBox").value());
//hide filter row
$(".k-filter-row").show();
//to reset filter of the grid when filterable hidden
$("#grid").data("kendoGrid").dataSource.filter({});
}
}
});
See the details in action
DEMO
Have you tried just hiding the row instead of removing it?
//fired when the button is clicked
var toggleFilterClick = $('#kendoFilterButton').on("click", function () {
if ($(".k-filter-row").is(":visible")){
$(".k-filter-row").hide();
}
else{
$(".k-filter-row").show();
}
});
I have a SlickGrid with dataview working pretty good, grid and dataview are synced up for modify and delete selections using syncGridSelection, however an interesting problem occurs on the changed CSS styles. The changed rows CSS stlye are being applied to the same "visible" row number in the grid when I choose a filter set that does not include the actual changed rows. The sort works fine, but I noticed that the filter is not working. Does anyone have a fix for this? Can you paste as much info and code for me as possible because I'm new to SlickGrid. I pasted code that loads up the grid.
function LoadGridData() {
$.getJSON('#Url.Action("GetConfigurations")', function (rows) {
if (rows.length > 0) {
if (rows[0].id = 'undefined') {
$(rows).each(function (index) {
rows[index].newAttribute = "id"
rows[index]["id"] = index;
});
}
};
data = rows;
dataView.beginUpdate();
dataView.setItems(data);
dataView.setFilter(filter);
dataView.endUpdate();
// Refresh the data render
grid.invalidate();
grid.render();
grid.setSelectedRows([]);
dataView.syncGridSelection(grid, true);
});
}
After debugging I found that I had used an older example of marking css changed in function getItemMetadata. The correct code is below. Previously I was referencing data[row]. When Syncing DataView to Grid, the getItem() method returns the correct row. In this case my DataState is my own changed indicator on the view model.
dataView.getItemMetadata = function (row) {
var item = this.getItem(row);
if (item && item.DataState == 2) {
return {
"cssClasses":
"changed"
};
}
How to know when a Kendo grid row is in Edit mode without using grid edit event?
var tanquesGrid = $(".tanques").data("kendoGrid");
tanquesGrid.element.delegate("tbody>tr", "dblclick", function () {
var selectedItem = tanquesGrid.dataItem(tanquesGrid.select());
if (hasWriteAccess && isClosed == false && selectedItem.EquipmentHistoricID != '')
tanquesGrid.editRow($(this));
});
The problem is that when row is in inline edit mode and I double click on it, edit mode disappear, this way (code above) I resolve this in new row where the id ! = '' but when edit an existing row the problem persist.
any ideas??
Sorry about my english
if ( $('#grid').find('.k-grid-edit-row').length ) {
//grid is not in edit mode
} else {
//grid is in edit mode
grid.editRow($(this));
}
It's not in the published API but the grid has a property "editable" which will be non-null when in edit mode.
$('#myGrid').find('.k-grid-edit-row');
When the grid is in edit mode, the editing row has a class of "k-grid-edit-row".
This jquery statement will look for a row with the edit mode class within the table of id = "myGrid".
I've a Kendo grid with editable = incell and more than one required text field. The default values are empty strings. When I click on "Add new record" the first required field is marked as error because it's empty. I can only leave the field after I've done some input. Although the other required fields are still empty I can leave the row.
How can I prevent that a row can't be left without filling all required fields?
Try this,
$('.k-grid-save-changes').on("click", function () {
var grid = $("#grid").data("kendoGrid");
if (grid.editable && !grid.editable.validatable.validate()) {
//What ever you want to do
e.preventDefault();
return false;
}
});
I'm using inline editing in my grid , I have some cases which i want to change the value of a cell inside a column. I'm changing it with setCell ,and it works good. my problem is that after the change the cell losts it's edit mode while all other cells of the row are in edit mode. I want to keep the cell in edit mode after i changed it.
for now what i did is saved the row and then selected it again and made in in edit mode - but i don't think it is a good solution - Is there a way to keep in edit mode while changin it?
Thank's In Advance.
If you need to implement the behavior of dependency cells which are all in the editing mode you have to modify the cell contain manually with respect of jQuery.html function for example. If the name of the column which you want to modify has the name "description", and you use 'blur' event on another "code" column then you can do about the following
editoptions: {
dataEvents: [
{
type: 'blur',
fn: function(e) {
var newCodeValue = $(e.target).val();
// get the information from any source about the
// description of based on the new code value
// and construct full new HTML contain of the "description"
// cell. It should include "<input>", "<select>" or
// some another input elements. Let us you save the result
// in the variable descriptionEditHtml then you can use
// populate descriptionEditHtml in the "description" edit cell
if ($(e.target).is('.FormElement')) {
// form editing
var form = $(e.target).closest('form.FormGrid');
$("#description.FormElement",form[0]).html(descriptionEditHtml);
} else {
// inline editing
var row = $(e.target).closest('tr.jqgrow');
var rowId = row.attr('id');
$("#"+rowId+"_description",row[0]).html(descriptionEditHtml);
}
}
}
]
}
The code will work for both inline and form editing.
The working example of dependent <select> elements you can find here.
blur does not fire if value is changed and enter is pressed immediately without moving to other cell. So better is to use
editrules = new
{
custom = true,
custom_func = function( val, col ) { ... }
},
and move this code from blur to custom_func as described in
jqgrid: how send and receive row data keeping edit mode