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.
Related
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 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/
I am trying to show products from database into tileview item in devexpress phonejs. Successfully I can load items from datasource into tileview but I would like to group items by the category name and really dont have any idea howto do it. Any help will be appreciated.
JS Code
return {
sale: sale,
departmansSource: {
store: PosApplication.db.Departmans,
select: ["DepartmanID", "DepartmanName"]
},
categoriesSource: {
store: PosApplication.db.Categories,
select: ["CategoryID", "CategoryName"]
},
productsSource: {
store: PosApplication.db.Products,
filter: ["DepartmanID","=", 2],
select: ["ProductID", "ProductName", "DepartmanID", "DepartmanName", "CategoryID", "CategoryName"]
},
approversSource: {
store: PosApplication.db.Approvers,
select: ["ApproverId", "ApproverName"]
},
handleSave: handleSave,
handleCancel: handleCancel,
viewShown: handleViewShown,
notifiy: notifiy
};
Html Code
<div id="urunlertile" data-bind="dxTileView: { height: '550', dataSource: productsSource, itemClickAction: notifiy, baseItemHeight: 70, baseItemWidth: 150, itemMargin: 3, }">
<div data-options="dxTemplate:{name:'item'}">
<p><span data-bind="text: $data.CategoryName"></span></p>
<p><span data-bind="text: $data.ProductName"></span></p>
</div>
</div>
</div>
You can use postProcess callback to group/sort data in your dataSource.
See doc with example:
http://js.devexpress.com/Documentation/Howto/Data_Layer/Data_Layer?version=14_1#Data_Layer_Data_Layer_Reading_Data_Data_Transformation_Post_Processing
Note that dxTileView doesn't support displaying grouped data out of box. Having grouped data like
[{ key: "Category1", items: [{ name: "Product1" }, ...], ...]
you could put nested dxTileView in item template to display products for each category.
I have one Kendo UI Grid in my view page (MVVM Concept). Bind the data from view model. When I reduce the page size.
Kendo UI grid change to Kendo UI Listview. See this image:
How can I do this?
Define one single DataSource for both Grid and ListView.
var ds = {
data : ...,
pageSize: 10,
schema : {
model: {
fields: {
Id : { type: 'number' },
FirstName: { type: 'string' },
LastName : { type: 'string' },
City : { type: 'string' }
}
}
}
};
Then define both a DIV for the Grid and for the ListView:
<div id="grid"></div>
<div id="list"></div>
And initialize the Grid and the ListView:
$("#grid").kendoGrid({
dataSource: ds,
columns :
[
{ field: "FirstName", width: 90, title: "First Name" },
{ field: "LastName", width: 200, title: "Last Name" },
{ field: "City", width: 200 }
]
});
$("#list").kendoListView({
dataSource: ds,
template : $("#template").html()
});
Now, what you should do is display one or the other depending on the width:
// Display Grid (and hide ListView)
$("#grid").removeClass("ob-hidden");
$("#list").addClass("ob-hidden");
// Display ListView (and hide Grid)
$("#grid").addClass("ob-hidden");
$("#list").removeClass("ob-hidden");
Where CSS class ob-hidden is:
.ob-hidden {
display: none;
visibility: hidden;
width: 1px;
}
Now, the only remaining question is invoke one or the other depending on the width. You can user jQuery resize event for detecting changes.
So, enclose both ListView and Grid in a DIV with id container:
<div id="container">
<div id="grid"></div>
<div id="list" class="ob-hidden"></div>
</div>
and define the resize handler as:
$("window").on("resize", function(e) {
var width = $("#container").width();
console.log(width);
if (width < 300) {
console.log("list");
$("#grid").addClass("ob-hidden");
$("#list").removeClass("ob-hidden");
} else {
console.log("grid");
$("#grid").removeClass("ob-hidden");
$("#list").addClass("ob-hidden");
}
});
IMPORTANT: Whatever you do for getting this same result, please, don't create and destroy the Grid and the ListView each time there is a resize. This a computationally expensive operation.
See it in action here: http://jsfiddle.net/OnaBai/JYXzJ/3/
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