I'm trying to add a check box column to KendoUI grid.
Here is the fiddle.
I have followed this post from the Kendo forum.
Can somebody please point out what I have done wrong here.
This is the relevant code:
data-columns = '[
{"field":"Name", "filterable":true},
{"field":"Price", "filterable":false},
"UnitsInStock",
{"field":"Recon"},
"template": "<input type='checkbox' #= (Recon == true) ? checked ='checked' : '' # disabled />"
]'
Change your columns to this:
[{"field":"Name", "filterable":true}, {"field":"Price", "filterable":false}, "UnitsInStock", {"field":"Recon", "template": "<input type=\"checkbox\" />" }]'
You had some errors in your syntax there, as well as some unescaped quotes.
Hope this helps.
You can simply add a column as a checkbox column.
data-columns = '[
{"field":"Name", "filterable":true},
{"field":"Price", "filterable":false},
"UnitsInStock",
{"field":"Recon"},
{ selectable: true, width: "50px" } //selectable means it's a checkbox column
]'
In template section use CheckBox see example below:
{
title: "Deck Options",
field: "DeckOption",
template: "<input type='checkbox' #= (DeckOption == true) ? checked ='checked' : '' # disabled/>",
width: "7%",
sortable: {
mode: "single",
allowUnsort: false
}
Related
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
});
}
Within my web application we use this html tag data-section='admin' for it not to display controls in the public side of the site. I was thinking that I would be able to use it within a template column so it would not display the remove column. In there another way to use this data-section in the template column?
if (!kendoGrid) {
$("#kgridPresentation").kendoGrid({
scrollable: false,
toolbar: ["search"],
columns: [
{
template: function (dataItem) {
return "<div align='center' data-section='admin'><a data-section='admin'><span data-section='admin' class='btn btn-red btn-custom' onclick=\"deletePresentation(" + dataItem.MeetingPresentationId + ", 'false')\"> <i class='fa fa-times'></i></span></a></div>";
},
title: "Remove",
width: "73px"
},
{
field: "PresentationTitle",
title: "Presentation Title"
},
{
template: function (dataItem) {
return "" + dataItem.FileManager.FileName + "";
},
field: "FileManager.FileName",
title: "File Name"
},
{
field: "PresentationAuthor",
title: "Presentation Speaker"
}
],
noRecords: {
template: "No Result Found."
},
});
}
What I would do is a function that returns the list of columns with a boolean parameter isAdminSection.
There are many ways to visually hide some columns, like columns.hidden, width 0 etc., but a visitor with basic knowledge of CSS and developer tools could easily modify it and access the admin's options. This can be acceptable for you, if for example the functionality of deleting a presentation is always correctly authenticated on the back-end and would just return a HTTP 403 error for that user. It is however better to not render that column in the first place.
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/
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);
};
I am trying to add a custom command on the toolbar which will call a JavaScript function in my view model. My HTML:
<div id="dependencyGrid" data-role="grid"
data-editable="inline"
data-toolbar="[{'command':[{'text':'+ Add New Record','click':'this.editApp','name':'Edit-App'}]}]",
data-bind="source: dependencies"
data-columns="[
{ command: ['edit', 'destroy'], width: 97},
{ field: 'SystemId', title: 'SystemId', width: 50, hidden: true },
{ field: 'DependentOnSystemId', title: 'Dependent On', width: 190 },
]">
</div>
But I get this error: "Uncaught Error: Custom commands should have name specified" even though I have specified a name. What is my error?
The toolbar should be:
data-toolbar="[{'text':'+ Add New Record','click':'this.editApp','name':'Edit-App'}]"
You have extra "[{'command': ", "}]" and also an extra "," at the end
You can see it here: http://jsfiddle.net/OnaBai/XNcmt/166/