Kendo Grid edit event handler not updating row - kendo-ui

When adding a new item to a Kendo Grid using inline editing, the ContractID datasource is filtered by the selected OrgID. Once a row has been added, the OrgID column is no longer editable (set using isOrgEditable()) but the ContractID is. Unfortunately the cascade doesn't then work for editing and the datasource for ContractID is unfiltered.
To resolve that issue I subscribe to the edit event (data-edit="setContractsDataSource") and filter the data source manually. That works but then the Update button doesn't do anything and the edit is lost.
<div id="grid">
<div class="k-content wide">
<div>
<div data-role="grid"
data-editable="inline"
data-edit="setContractsDataSource"
data-toolbar="[{ name: 'create', text: 'Add Item' }]"
data-columns='[
{ field: "OrgID", title: "Company", editable: isOrgEditable, editor: orgDropDownEditor, template: "#: lookupForOrg(organisationID) #" },
{ field: "ContractID", title: "Contract", editor: contractsDropDownEditor, template: "#: lookupForContract(ContractID) #" },
{ command: ["edit", "destroy"], width: "220px" }
]'
data-sortable="true"
data-pageable="true"
data-filterable="true"
data-bind="source: items"></div>
</div>
</div>
</div>

As is often the case, I resolved the issue while writing the question. For future reference, the reason it wasn't being updated was due to not returning true from the event handler:
function setContractsDataSource(e) {
let orgID = e.model ? e.model.OrgID : this.dataItem().OrgID;
if (orgID) {
$("#contracts").data("kendoDropDownList").setDataSource(contractsData.filter(elt => elt.ContractorID == orgID));
}
return true; // fixed it
}
Subsequently established that the column would only update if it already contained a value, i.e. the new value wouldn't save if previously it had been empty. This telerik forum post helped to resolve it. The editor for the Contracts column needed valuePrimitive: true.
function contractsDropDownEditor(container, options) {
$('<input id="contracts" name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "ContractNo",
dataValueField: "ContractID",
dataSource: contractsData,
optionLabel: "Select contract...",
valuePrimitive: true
});
}

Related

how to include a dropdownlist in every row and pass values to it in a kendo grid using client template

How to display dropdown list in every row using client template in kendo grid?
I googled but i didnt find anything proper.I have a model with a string and a list and i want to bind it to a kendo grid using ajax binding.
You can achieve this by specifying editor for the column in grid. and define the editor property in view model.
Sample: your grid should be
<div id="gridId" data-role="grid"
data-scrollable="true"
data-row-template="your_RowTemplate"
data-editable="true" data-bind="source: GridSource" data-pageable="false"
data-columns="[
{ 'title': 'Head' , 'field': 'yourField','editor':viewModel.yourEditor},
]">
</div>
Now you can define the editor in your view model like this
var viewModel = new kendo.observable({
GridSource:new kendo.data.dataSource({data:[],schema:{model:yourmodel}}) ,
DropdownSouce:[],//setyoursource
yourEditor: function (container, options) {
$('<input data-bind="value: ' + options.field + '" />')
.appendTo(container)
.kendoDropDownList({
dataSource: viewModel.DropdownSouce,
dataTextField: 'Text',
dataValueField: 'Id'
});
}
});

Data and button in same column kendo grid

I am working on HTML5 and javascript.
Is it possible to add data and button in the same column in kendo grid.
Need help.
Also in view page, you can use ClientTemplate to achieve this:
#(Html.Kendo().Grid<ViewModel>().Name("grid")
.DataSource(src => src.Ajax().PageSize(10).Read(read => read.Action("Action", "Controller"))
.Columns(col =>
{
col.Bound(e => e.Name).ClientTemplate("<input type='button' value='CLICK' onclick='XYZ();'><label>#= (Name== null) ? ' ' : Name #</label>");
})
.Selectable()
.Scrollable()
)
Yes, it is! Simply use a template for it. Example:
Define the following template:
<script id="template" type="kendoui/template">
<button class="ob-click-me k-button">Click me</button>
<span>#= LastName #</span>
</script>
and the grid as:
var grid = $("#grid").kendoGrid({
dataSource: ds,
...
columns :
[
{ field: "FirstName", width: 90, title: "First Name" },
{
field: "LastName",
width: 200,
title: "Last Name",
template: $("#template").html()
}
]
}).data("kendoGrid");
You can see a running example even defining a handler for the button here: http://jsfiddle.net/OnaBai/qe3tf4tx/

ng-grid/ui-grid celltemplate on click causes row to be selected.

When I use celltemplate for ahref link, once the link is clicked the row highlights because i have RowSelection enabled...but i dont want the row to highlight when the link is clicked..only if the row is clicked anywhere but the link.
Also in my below example picture, how do I remove the little arrow so no Menuitems can be displayed for that column?
Code:
$scope.gridOptions = {
showFooter: true,
enableFiltering: true,
enableRowSelection: true,
enableRowHeaderSelection: false,
enableSelectAll: true,
multiSelect: true,
enableColumnResizing: true,
columnDefs: [
{ field:'date', displayName: 'Date', width: 200, aggregationType: uiGridConstants.aggregationTypes.count },
{ field:'notes', displayName: 'Notes', width: 65, enableFiltering: false, enableSorting: false, enableHiding: false, cellTemplate:'View' }
],
data: data
}
Pic:
Here is a possible answer to ui-grid (which is not ng-grid anymore!).
The cell template for a button that does not select the row is:
cellTemplate: '<button class="btn primary" ng-click="$event.stopPropagation();getExternalScopes().showMe(row)">Click Me</button>'
Note the $event.stopPropagation() in the ng-click directive. This will hinder the click to reach the underlying functions of the rowTemplate.
(Note also that I didn't found another way to pass a click event to the controller than by using externalScopes. I'm sure there is a better way but ui-grid is still beta and I'm also pretty new to it)
Second part of your question: Use this headCellTemplate
var headCelltpl = '<div ng-class="{ \'sortable\': sortable }">' +
'<div class="ui-grid-vertical-bar"> </div>' +
'<div class="ui-grid-cell-contents" col-index="renderIndex">' +
'{{ col.displayName CUSTOM_FILTERS }}' +
'</div>' +
'</div>';
and add it to the respective columns in your columnDefs.
headerCellTemplate: headCelltpl
Here is a Plunker with everything included.
Please don't tell me you meant ng-grid:-)
The simple solution is change the row.setSelected to false
cellTemplate: '<button class="btn primary" ng-click="grid.appScope.deSelectRow(row)">Click Me</button>'
$scope.deSelectRow = function(row) {
row.setSelected(false);
};

How do I configure a Kendo UI grid to use a DropDownList to edit a cell?

I'm having trouble configuring a `Kendo UI' grid to use a DropDownList as an editor. I have a JS Bin example to reproduce my behavior. The goal is to populate the BinNumber, PartNumber and StockNumber fields once a selection is made from the dropdown. Currently I can't even get the DropDown to bind to the recordset properly. If I make a selection and move to another field, I get [object Object] in the BinNumber field. If I go back in and make another selection, the BinNumber then sticks. I have read the documentation thoroughly but I am still thoroughly confused by it.
For the [object object] mess have a look at this post, there is an attribute introduced back in late 2013 dealing with this issue data-value-primitive="true". In the past I just used to re-map the selection back to ds manually, but the attribute does it all for you, I tested in you jsBin and works fine.
binDropdownEditor: function (container, options) {
$('<input data-text-field="BinNumber" data-value-field="BinNumber" data-value-primitive="true" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: viewModel.binDropDownDataSource
});
}
On change binding (please paste into your JSBin javascript tab):
var bins =["BinNumber:12121"];
var gridDS = new kendo.data.DataSource({
transport: {
read: function (e) {
e.success(bins);
}
},
schema: {
model: {
id:"Row",
fields: {
Row:{type:"string"},
BinNumber: {type:"string"},
PartNumber: {type:"string"},
StockNumber:{type:"string"}
}
}
},
pageSize: 50
});
var binDropDownDataSource = [
{ BinNumber: "12345",PartNumber:"P-2929",StockNumber:"S-06565" },
{ BinNumber: "23456",PartNumber:"P-2323",StockNumber:"S-956565" },
{ BinNumber: "34567",PartNumber:"P-4344",StockNumber:"S-67676" } ];
function appendEditor (container, options) {
$('<input data-text-field="BinNumber" data-value-primitive="true" data-value-field="BinNumber" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: binDropDownDataSource,
change:function(e){
var ddldataitem = this.dataItem();
var griditem = gridDS.at(0); // you might need to tweak this line
griditem.set("PartNumber",ddldataitem.PartNumber);
griditem.set("StockNumber",ddldataitem.StockNumber);
}
});
}
var grid= $("#bins").kendoGrid({
dataSource: gridDS,
scrollable: false,
autoBind:false,
batch:true,
editable : true,
navigatable: true,
toolbar: [ {name: 'custom-create', text: "Add New Line Item"}],
columns: [ {"field":"Row", title: "Row", width: "20px"},
{"field": "BinNumber","title":"Bin", editor: appendEditor},
{"field": "PartNumber", title: "Part ", width: "200px",editable: false },
{"field": "StockNumber", title: "Stock ", width: "200px",editable: false }
]
}).data("kendoGrid");
$(".k-grid-custom-create").on("click", function (e) {
gridDS.add({ Row:"1"});
});
The observable you had plugged in is not really necessary the underling data source is already observable, I have removed it. Please consider improving following line the index won't be always 0 var griditem = gridDS.at(0);
Here's how my DropDown is setup. This is a boolean field, so you will have to adjust it accordingly to your field
columns.Bound(m => m.IsInForecast).Title("Is Forecasted").ClientTemplate(
"# if (IsInForecast == true) { #" +
"<select id='#= OrderId #' onchange=save('#= OrderId #'); style='Width: 80px; color: 'navy' > " +
"<option id='yes' selected value='1'>Yes</option>" +
"<option id='no' value='0'>No</option>" +
"</select>" +
"# } else { #" +
"<select id='#= OrderId #' onchange=save('#= OrderId #'); style='Width: 80px; color: 'navy' > " +
"<option id='yes' value='1'>Yes</option>" +
"<option id='no' selected value='0'>No</option>" +
"# } #"
);

Kendo grid populates under kendo tab strips

I don't see any examples of kendo grid with kendo tabstrips being done. Is that not possible?
As I tried kendo-tabstrip demo and kendo-grid demo. Both are working cool separately, but when I merge the code tabstrips are not showing properly.
I am successfully using a kendo grid inside of a tabstrip. The grid would not display inside of a tab unless I removed "<!DOCTYPE html>". If the DOCTYPE was present then the tab was always blank. I am not sure why that fixed the issue. What exactly do you mean by "not showing properly"?
Edit: I think my issue was actually caused when we had a splitter and grid inside of a tabstrip.
I was successful at adding a kendo grid inside a kendo tabstrip. After bringing in the required js files jquery-3.2.1/kendo.all.min.js, and the required css files kendo.common-bootstrap.min.css/kendo.black.min.css.
My Html
$(document).ready(function () {
$("#tabstrip").kendoTabStrip({
animation: {
open: {
effects: "fadeIn"
}
}
});
$("#grid1").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
});
<div id="tabstrip">
<ul>
<li>Tab with Grid</li>
<li>Tab without Grid</li>
</ul>
<div>
<div id="grid1"></div>
</div>
<div>
<div>Normal content</div>
</div>
</div>
I did not have to remove <!DOCTYPE html>. Both the tabstrip and grid code was grabbed from kendo demos. here: https://demos.telerik.com/kendo-ui/tabstrip/index and here: https://demos.telerik.com/kendo-ui/grid/index

Resources