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/
Related
I am using this framework called Tabulator.
I add a column called Actions where users can perform viewing, editing and deleting records. Those buttons are shown but onclick events ain't working.
initTabulator() {
this.columns = [
{ title: "Name", field: "name", width: 150 },
{ title: "Status", field: "status", width: 150 },
{
title: "Actions",
formatter: function(value, data, type, params, component){
return `
<span class="border border-slate-300 hover:border-slate-400 bg-red-500" onclick="viewFunc()">View</span>
<button class="border border-slate-300 hover:border-slate-400 bg-blue-500">Edit</button>
<button class="border border-slate-300 hover:border-slate-400 bg-green-500">Delete</button>
`;
},
},
];
},
I am expecting that those buttons would trigger my functions, yet it alerts errors that my functions are not defined while in fact my functions are declared.
I have a kendo grid with following structure ;
<div id="kendoGrid" data-role="grid" data-bind="source: search" data-scrollable="true" data-auto-bind="false" data-pageable="true" data-columns="[
{ title: '' , width: '100px',locked:true, attributes: { style: 'overflow: visible' } , template: kendo.template($('#tamplate').html())},
{ field: 'name' , title: 'Name Surname' , width: 200},
{ field: 'date' , title: 'Date' , width: 150 },
{ field: 'residence' ,title: 'Residence' , width: 100 },
{ field: 'approveDate' ,title: 'Approve Date' , width: 200 },
</div>
I am also using a template to customize the data in first column. Here is my template;
<script id="tamplate" type="text/x-kendo-tmpl">
<span data-bind="text: nationality, tooltip: nationality"></span>
</script>
The problem is I am using kendo.data.binder and I have some extended methods such as "tooltip" but when I lock the column, it doesnt work The binder method doesnt get fired. Otherwise it works fine. It might seem easy to use #= nationality # format but I have much more complicated extended methods and I need them up and running. Any help would be appreciated.
After a long search, I found out that the version I am using, 2014.1.528 , is not applying data-bind, I dont know why. But when I switch to version 2016.3.1118, it work fine. here is the dojos ;
2016.3.1118 -> here
2014.1.528 -> here
at the moment, we are unable to upgrade to version 2016 so it will remain like this.
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/
I am struggling to get a custom edit command link working for kendo ui grid. Say I have following grid
<div id="request-grid" style="height: 400px;"></div>
<script type="text/javascript">
$("#request-grid").kendoGrid({
dataSource: dataSource,
columns: [{
field: "Id", title: "Id", width: 20
}, {
field: "FromName", title: "Req Name", width: 150
....
}, {
command: [{ name: "edit", template: kendo.template('#Html.ActionLink("Edit","_SoftwareRequestEdit","SoftwareRequest",new {id = "#= Id #"}, null)') }]
}],
});
</script>
I have used the code above for the edit link, but I don't remember the specifics. I have been scratching my head for the correct syntax for 2 hours now and still couldn't figure out. The above edit command template generates following link
Edit
whereas I was expecting this
Edit
for grid row with Id equal to 3
Any ideas how to correctly generate edit links with correct Id values
Remove kendo.template() from the definition of the template, KendoUI already knows that it has to be a template so it expects a string and not a kendo.template` object. See documentation and examples in their documentation here.
Example:
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [ {
field: "name",
template: "<strong>#: name # </strong>"
}],
dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});
</script>
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