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
Related
I have created a kendo grid for 10 number of products in my project. I want the kendo window containing the details of the product to popup when I click on the productname displayed in the kendo grid.
I have looked into the demos of the kendo grid but I don't want the details of the product selected to be edited and also I don't want to use a separate column for details button as shown in the examples and demo.
I also looked into the music store demo of kendo ui but I couldn't understand its code as its in jQuery and I am using asp.net mvc with razor syntax for my project
Note:
I want window to appear only when I click on the name of the product and display its details.
You can use:
$('#grid').on("click", "tr.k-state-selected", function (e) {
// open window here
// you have i.e. Id here $('#grid').dataItem($('#grid').select()).Id
});
For this you must set option selectable: "row" in grid configuration.
Otherwise you can use just:
$('#grid').on("click", "tr", function (e) { ... }
You can make use of the detailTemplate for achieving it.
<script>
var wnd,
detailsTemplate;
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
pageSize: 20,
data: createRandomData(50)
},
pageable: true,
height: 550,
columns: [
{ field: "FirstName", title: "First Name", width: "140px" },
{ field: "LastName", title: "Last Name", width: "140px" },
{ field: "Title" },
{ command: { text: "View Details", click: showDetails }, title: " ", width: "180px" }]
}).data("kendoGrid");
wnd = $("#details")
.kendoWindow({
title: "Customer Details",
modal: true,
visible: false,
resizable: false,
width: 300
}).data("kendoWindow");
detailsTemplate = kendo.template($("#template").html());
});
function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
}
</script>
<script type="text/x-kendo-template" id="template">
<div id="details-container">
<h2>#= FirstName # #= LastName #</h2>
<em>#= Title #</em>
<dl>
<dt>City: #= City #</dt>
<dt>Birth Date: #= kendo.toString(BirthDate, "MM/dd/yyyy") #</dt>
</dl>
</div>
</script>
Go to this fiddle for a working demo
[UPDATE]
Here's the code snippet for showing the window while clicking on the Product Name
<script>
var wnd,
detailsTemplate;
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
pageSize: 20,
data: createRandomData(50)
},
pageable: true,
height: 550,
columns: [
{ field: "FirstName", title: "First Name", width: "140px",attributes: { "class": "FirstName"} },
{ field: "LastName", title: "Last Name", width: "140px" },
{ field: "Title" }]
}).data("kendoGrid");
wnd = $("#details")
.kendoWindow({
title: "Customer Details",
modal: true,
visible: false,
resizable: false,
width: 300
}).data("kendoWindow");
detailsTemplate = kendo.template($("#template").html());
$('#grid').on("click", ".FirstName", function (e) {
e.preventDefault();
var dataItem = $("#grid").getKendoGrid().dataItem($(e.currentTarget).closest("tr"));
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
});
});
</script>
<script type="text/x-kendo-template" id="template">
<div id="details-container">
<h2>#= FirstName # #= LastName #</h2>
<em>#= Title #</em>
<dl>
<dt>City: #= City #</dt>
<dt>Birth Date: #= kendo.toString(BirthDate, "MM/dd/yyyy") #</dt>
</dl>
</div>
</script>
Working demo is here
After researching on the web, i´m facing a problem on adding a title into my grid, so my code is:
.html file:
<div id="idGridTiposQuartos" class="gridtiposquartos js-var-grid-tipos-quartos">
<div id="gridTiposQuartos">
</div>
</div>
.js file:
$("#idBtnTiposQuarto").click(function()
{
$("#idGridTiposQuartos").fadeIn(1000);
$("#idBtnQuartos").attr("disabled", false);
$(".k-grid-toolbar", "#gridTiposQuartos").before("<h1>hello</h1>");
$(".k-grid-toolbar", "#gridTiposQuartos").after("<h1>hello</h1>");
(some more code)
$("#gridTiposQuartos").kendoGrid({
dataSource: dataSource,
pageable:
{
messages:
{
display: "{0} - {1} / {2} items",
empty: "0 items",
page: "Page",
of: "of {0}", //{0} is total amount of pages
itemsPerPage: "items per page",
first: "Go to the first page",
previous: "Go to the previous page",
next: "Go to the next page",
last: "Go to the last page",
refresh: "Refresh"
}
},
serverPaging: true,
height: 460,
toolbar:[{name: "create",text: $varGridQuartosBtnNovoPT},{name: "close",text: "X"}],
columns:[{ field:"Nome", title: "Nome" },{ field: "Preco", title:"Preço", format: "{0:c}", width: "100px" },
{command:[{ name: "edit",text:{edit:$varGridQuartosBtnEditarPT,update:$varGridQuartosBtnActualizarPT,cancel:$varGridQuartosBtnCancelarPT}},{ name: "destroy",text:$varGridQuartosBtnApagarPT }],title:" ",width: "230px"}],
editable : {mode : "popup",
window : {title: "Editar",}
(the rest of the code)
I think i have posted the necessary code to show my problem, so my question is, what am i missing here?. any help? thanks.
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 need help using a Kendo UI list view which lives within a grid row detail template.
here is something I have done so far.
<div id="grid">
</div>
<script type="text/x-kendo-template" id="gridDetailTemplate">
<div class='grid-edit'>
<div class='edit-list'></div>
</div>
</script>
<script type="text/x-kendo-template" id="editItemtemplate">
<div class='edit-Item'>
#if(Type=='string'){#
<ul><li><b>#:Name#</b></li><li><input class='inputString' value='#:DataVal()#'/></li></ul>
#}else if(Type=='number'){#
<ul><li><b>#:Name#</b></li><li><input class='inputNumber' data-role='numerictextbox' data-type='number' value='#:DataVal()#'/></li></ul>
#}else if(Type=='date'){#
<ul><li><b>#:Name#</b></li><li><input class='inputDate' data-role='datepicker' value='#:kendo.toString(DataVal(),'MM/dd/yyyy')#'/></li></ul>
#}else if(Type=='boolean'){Name #<input type='checkbox'/>
#}#
</div>
</script>
<script type="text/javascript">
$(document).ready(function () {
$.get("http://localhost:4916/DataAttribute", function (data, status) {
var selFields = new Object();
$.each(data, function (index, elem) {
selFields[elem.Name] = new Object();
selFields[elem.Name]["type"] = elem.Type;
});
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: { url: "http://localhost:4916/Deal",
dataType: "json"
}
},
schema: {
data: "Data", total: "Total",
model: {
fields: selFields
}
}
},
height: 430,
filterable: true,
sortable: true,
pageable: false,
detailTemplate: kendo.template($("#gridDetailTemplate").html()),
detailInit: detailInit,
columns: [{
field: "SecurityName",
title: "Security Name",
width: 250
},
{
field: "DateOfAcquisition",
title: "Date Of Acquisition",
width: 120,
format: "{0:MM/dd/yyyy}"
}, {
field: "Acres",
title: "Acres",
width: 120
}
]
});
});
});
function detailInit(e) {
$.get("http://localhost:4916/DataAttribute", function (data, status) {
var detailRow = e.detailRow;
detailRow.find(".edit-list").kendoListView({
dataSource: {
data: data,
schema: {
model: {
DataVal: function () {
switch (this.get("Type")) {
case "number"
}
if (e.data[this.get("Name")])
return e.data[this.get("Name")];
else
return '';
}
}
}
},
template: kendo.template($("#editItemtemplate").html())
});
});
}
</script>
My code gets dynamic field list and binds it to the data source for grid.
Then, in the detailInit event, I find the div within row detail and convert it into kendo UI list, for which the template have been created.
Now, when I use data-bind="value: DataVal()" ,it doesn't pick up the values of List data source. It works the way I have done i.e. value="#: DataVal() #". But, data-role does not convert the fields to specified types which are datepicker and numericinput in my case.
I believe that data-role not being used is caused due to same issue as data-bind not being read.
Can anyone help me out with this? Also, feel free to suggest any alternate ways and general code improvements. I am an ASP.NET developer and usually don't work on pure html and javascript.
PS: I would be happy to provide the context on what I am trying to achieve here if anyone is interested.
Thanks in advance.
If you can rig up a jsFiddle or jsBin example that would help debug the issue.
However, try removing the parenthesis:
data-bind="value: DataVal"
Kendo should detect that DataVal is a function and call it on its own.
I experienced a similar situation in a listview template. I created a JSFiddle to demonstrate:
http://jsfiddle.net/zacharydl/7L3SL/
Oddly, the solution is to wrap the contents of the template in a div. It looks like your template already has this, so YMMV.
<div id="example">
<div data-role="listview" data-template="template" data-bind="source: array"></div>
</div>
<script type="text/x-kendo-template" id="template">
<!--<div>-->
<div>method 1: #:field#</div>
<div>method 2: <span data-bind="text: field"></span></div>
<input data-role="datepicker" />
<!--</div>-->
</script>
var model = kendo.observable({
array: [
{ field: 'A'},
{ field: 'B'}
]
});
kendo.bind($('#example'), model);