I have a grid where i have Kendo Tabstrip in toolbar so outside this kendo tabstrip I want to add an export button that should work for all tabstrips. I have added a button but its not appearing in the grid. I am not sure what i am doing wrong. Please advise
So far I have tried this:
toolbar: [
{
template: kendo.template('<kendo-tabstrip><ul><li ng-class="{\'k-state-hover k-state-active\': defaultAllTab}">All</li>')
},
{
template: kendo.template('<li ng-class="{\'k-state-hover k-state-active\': defaultPendingTab}">Pending Review</li>')
},
{
template: kendo.template('<li ng-class="{\'k-state-hover k-state-active\': defaultReviewTab}">Reviewed</li></ul><kendo-tabstrip>')
},
{
template: ' <button class="k-grid-excel pull-right btn btn-default btn-sm">Export to Excel</button>'
}
],
excel: {
fileName: 'Subcategory.xlsx',
proxyURL: '/third-party-management/rest/xls/download',
allPages:true,
filterable: true
},
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
});
}
Please show me the way how to add tooltip for items which have a long length in kendo multi-select.
Add a picture for more specific.
Picture
Thanks.
Use the itemTemplate and/or tagTemplate and add a title attribute with the tooltip text:
$("#multiselect").kendoMultiSelect({
dataSource: [
{ id: 1, name: "Apples", tooltip: "Apples tooltip text" },
{ id: 2, name: "Oranges", tooltip: "Oranges tooltip text" }
],
dataTextField: "name",
dataValueField: "id",
itemTemplate: '<span title="#: tooltip #">#: name #</span>',
tagTemplate: '<span title="#: tooltip #">#: name #</span>'
});
itemTemplate is item while selecting from the dropdown, while tagTemplate is the item once selected.
DEMO
NOTE: you can use the same value for both the text and tooltip.
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 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
I want to use qtip with jqgrid and show a different image depending on which row is selected within the jqgrid. The path of the image could be within the jqgrid as a hidden cell. I have looked around but can't find any documentation on if jqgrid has a relevant row selector that could be used. Does anyone know the selector I want or if I should be trying for a different approach altogether?
The only selector that worked so far is below but it is for the entire grid. I have tried a few things to specify the row but nothing has worked. Any help would be appreciated.
$('#gridtable').qtip({
content: 'Some text',
show: 'mouseover',
hide: 'mouseout',
position: {
corner: {
target: 'topLeft',
tooltip: 'bottomLeft'
}
}
});
My solution was to place an icon within each row that had a wine image and assign it the id of the row. This meant that each row could be given a unique class to hover over. Not pretty but it worked.
if((gridRow['photo'] != "false"))
{
$("#gridtable2").jqGrid('setRowData',i+1,{wine:'<div class ="imageicon'+i+'">'+ret['wine']+' <img src=\"images/icon-wine.png\" height="16" width="13"/></div>'});
path = '<img src="images/winephotos/'
+ gridRow['id']
+'.jpg" width="350" height="450" alt="Wine Image"'
+' class="resize"/>';
$('.imageicon'+i).qtip({
content: $(path)
,
position: {
corner: {
target: 'topLeft',
tooltip: 'bottomLeft'
}
},
show: {
when: 'click',
//ready: true,
solo: true
},
hide: {
when: {
event: 'click',
event: 'mouseout'
}
},
style: {
width: { max: 280 },
name: 'dark'
}
});
}
gridRow=false;
}