i have problem with my kendo grid edit inline using dropdownlist inside the grid, this is my ScreenShoot
screenShoot1->please look field "icon"
when i click the icon's field, the field is change to dropdown list
like this
screenshoot2 after i clicked the field icon
, so what must i do ,if i want the field icon is a dropdown list before clicked ??
this is my code:
$("#customers").kendoDropDownList({
dataTextField: "pis_icon_url",
dataValueField: "pis_icon_id",
valueTemplate: '<span class="selected-value" style="background-image: url(\'#:pis_icon_url#\')"></span>',
template: '<span class="k-state-default" style="background-image: url(\'#:pis_icon_url#\')"\></span>',
dataSource: {
transport: {
read: {
dataType: "json",
url: "/api/icon-priority"
}
},
schema:{
data:'list'
}
},
height: 400
});
var dropdownlist = $("#customers").data("kendoDropDownList");
//in field: "pis_icon_id", please check "template", i already add property "id='customers'" in tag input but it doesn't work
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
columns: [
{ field:"pis_priority_name",title:"Priority Name", width: "180px" },
{ field: "description", title: "Description", width: "380px" },
{ field: "pis_icon_id", title: "Icon", width: "300px",template:"<input id='customers' data-bind='value:pis_icon_id' style='width:100%;'>",
editor:categoryDropDownEditor
// "<div style='width: 100%;'><img src='#:pis_icon_url#' style='width: 22px;height: 22px;'> </div>"
},
{ field: "pis_priority_color", title: "Color",
width: "100px",
editor: function (container, options) {
$("<input type='color' name='"+options.field+"' data-bind='value:" + options.field + "' />")
.appendTo(container)
.attr("pis_priority_color", options.field)
.kendoColorPicker({
buttons: true
});
},
template: "<span style='display: inline-block; width: 50%; height: 50%; background-color: #= pis_priority_color #'></span>"
},
{ field: "is_default",
title: "Default",
width: "100px",
template:"<input name='is_default' class='ob-paid' type='checkbox' data-bind='checked: is_default' #= is_default? checked='checked' : '' #/> "
},
{ field: "active",
title:"Active",
template:"<input name='active' class='ob-paid' type='checkbox' data-bind='checked: active' #= active ? checked='checked' : '' #/> "
,width: "130px"
},
{ command: "destroy", title: " ", width: "150px" }],
editable: {
update:true
}
I was able to get it working using a MVC wrapper and by following this post:
http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#configuration
The key was adding the save event due to a known Kendo grid bug - seems to me the Kendo docs should have some mention of this issue.
I tried implementing the same logic using the javascript implementation but could not get it working.
Related
I create a similar demo relate with my situation. What I want to achieve when checked on the master grid, the details grid will expand and all the checkbox inside it will be checked and also the child grid is selected.
It's possible to do like this without using column template for the checkbox.
DEMO IN DOJO
Example like this screen shot. (this one manually checked)
p/s: I found a similar demo, but this one using column.template for the checkbox.
This example code (which is based on your sample code) answers your requirement, which is...
What I want to achieve when checked on the master grid, the details grid will expand and all the checkbox inside it will be checked and also the child grid is selected.
Try this in the Telerik DOJO. We need to wait for Kendo to finish expanding the detail row (making sure all HTML elements are fully built), hence the setTimeout in detailExpand. Change the delay depending on your needs.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo Grid Master Detail Checkbox</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script></head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
var grid = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 600,
sortable: true,
pageable: true,
detailInit: detailInit,
detailExpand: function(e) {
var $checkbox = $(e.masterRow.context);
if ($checkbox.is(":checked")) {
setTimeout(function() {
e.detailRow.find("tbody tr").each(function() {
var $row = $(this);
$row.find(".k-checkbox").each(function() {
var $checkbox = $(this);
$checkbox.attr("checked", true);
});
$(this).addClass("k-state-selected");
});
}, 250);
}
},
columns: [
{ selectable: true, width: 50 },
{
field: "FirstName",
title: "First Name",
width: "110px"
},
{
field: "LastName",
title: "Last Name",
width: "110px"
},
{
field: "Country",
width: "110px"
},
{
field: "City",
width: "110px"
},
{
field: "Title"
}
]
}).data("kendoGrid");
grid.tbody.on("click", ".k-master-row .k-checkbox", function(e) {
var $checkbox = $(this);
if ($checkbox.is(":checked")) {
var $tr = $checkbox.closest("tr");
var $a = $tr.find(".k-hierarchy-cell a.k-icon");
if ($a.length) {
if ($a.hasClass("k-i-expand")) {
grid.expandRow($tr);
}
}
}
});
});
function detailInit(e) {
var detailgrid = $("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 10,
filter: {
field: "EmployeeID",
operator: "eq",
value: e.data.EmployeeID
}
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ selectable: true, width: 50, headerTemplate: ' '},
{
field: "OrderID",
width: "110px"
},
{
field: "ShipCountry",
title: "Ship Country",
width: "110px"
},
{
field: "ShipAddress",
title: "Ship Address"
},
{
field: "ShipName",
title: "Ship Name",
width: "300px"
}
]
}).data("kendoGrid");
}
</script>
</div>
</body>
</html>
I adapted your first snippet based on the second one that you provided. Check out this revised demo.
Basically, you need to call getKendoGrid() and assign its return value (the actual grid) to the grid variable.
After that, add the change event listener as shown in the second demo snippet that you provided.
grid.tbody.on("change", ".k-checkbox", function() {
var checkbox = $(this);
var nextRow = checkbox.closest("tr").next();
// Note: the row should be expanded at least once as otherwhise there will be no child grid loaded
if (nextRow.hasClass("k-detail-row")) {
// And toggle the checkboxes
nextRow.find(":checkbox")
.prop("checked", checkbox.is(":checked"));
}
});
Also note that it's not .master as in the second demo, but .k-checkbox, as you are not providing a template in the first column (which the second demo does and the checkbox there has the master class).
How do I achieve this, I want to disable radio button on Status Column only when Add New Record and checked on YES.
I don't know which part of script should I give. But here I provide some of it.
My KendoGrid Script
$("#grid").kendoGrid({
dataSource: dataSource,
dataBound: setColor,
height:400,
sortable: true,
columns: [
{ field: "segmentActive", title:"STATUS", width: "120px", editor: RadioSegmentActive,
template: data => data.segmentActive == "y" ? "Yes" : "No" }, // <-- displaying Yes/No insted of y/n
{ field: "marketSegmentName", title:"SEGMENT NAME", width: "120px" },
{ field: "publicPrice", title:"PUBLIC PRICE", width: "120px", editor: RadioPublicPrice,
template: data => data.publicPrice == "y" ? "Yes" : "No"},
{ field: "isHouseUse", title:"HOUSE USE", width: "120px", editor: RadioHouseUse,
template: data => data.isHouseUse == "y" ? "Yes" : "No"},
{ command: ["edit",{ name: "destroy", text: "De-active" }], title: " ", width: "120px" },
],
editable: "inline",
...........
My RadioSegmentActive function
function RadioSegmentActive(container, options) {
var guid = kendo.guid();
$('<input class="k-radio" id="radio3" name="segmentActive" type="radio" value="y" >').appendTo(container);
$('<label class="k-radio-label" for="radio3">YES</label>').appendTo(container); //YES
$('<br>').appendTo(container);
$('<input class="k-radio" id="radio4" name="segmentActive" type="radio" value="n" >').appendTo(container);
$('<label class="k-radio-label" for="radio4">NO</label>').appendTo(container); //NO
}
I am not sure what you mean by "Checked on Yes", but you can do that by handling the edit event of the grid:
editable: "inline",
edit: function(e) {
if (e.model.isNew()) { // We are adding
// if ($("#radio3").prop("checked")) { // Check some field...
$("#radio3").attr('checked', true); // Set yes radio button
$('input[name=segmentActive]').attr("disabled",true); // Disable radio buttons
// }
}
}
We are using the Scroller plugin for our jquery data table to allow virtual scrolling. However, we have requirement to support text wrapping inside a cell, as user would like to view the entire text instead of truncated one. I observed that it does not wrap the text by default. Is there a way to support this feature? Any possible workaround?
Fiddler
https://jsfiddle.net/Vimalan/2koex0bt/1/
html Code:
<table id="example" class="display" cellspacing="0" width="100%"></table>
js code:
var detailsSample = "DataTables and its extensions are extremely configurable libraries and almost every aspect of the enhancements they make to HTML tables can be customised. Features can be enabled, disabled or customised to meet your exact needs for your table implementations."
var dataList = [];
for (var i=1; i<=500; i++)
{
var dataRow = {};
dataRow.ID = i;
dataRow.FirstName = "First Name " + i;
dataRow.LastName = "Last Name " + i;
if (i%5 ==0)
{
dataRow.Details = detailsSample;
}
else
{
dataRow.Details = "Large text "+i;
}
dataRow.Country = "Country Name";
dataList.push(dataRow);
}
$('#example').DataTable( {
data: dataList,
deferRender: true,
scrollX: true,
scrollY: 200,
scrollCollapse: true,
scroller: true,
searching: false,
paging: true,
info: false,
columns: [
{ title: "ID", data: "ID" },
{ title: "First Name", data: "FirstName" },
{ title: "Change Summary", data: "LastName"},
{ title: "Details", data: "Details", "width": "400px" },
{ title: "Country", data: "Country" }
]
} );
Expectation
In the above table, the "Details" column should always have a width of 400px and the text in that column should wrap.
Any suggestion will be greatly appreciated.
Found the solution by wrapping the column data in a div and setting the white-space, width css properties for the div.
Fiddler:https://jsfiddle.net/Vimalan/2koex0bt/6/
JS
$('#example').DataTable( {
data: dataList,
deferRender: true,
scrollX: true,
scrollY: 200,
scrollCollapse: true,
scroller: true,
searching: false,
paging: true,
info: false,
columns: [
{ title: "ID", data: "ID" },
{ title: "First Name", data: "FirstName" },
{ title: "Change Summary", data: "LastName"},
{ title: "Details", data: "Details" },
{ title: "Country", data: "Country" }
],
columnDefs: [
{
render: function (data, type, full, meta) {
return "<div class='text-wrap width-200'>" + data + "</div>";
},
targets: 3
}
]
} );
CSS
.text-wrap{
white-space:normal;
}
.width-200{
width:200px;
}
Not sure if you add in stylesheets or not, but set your table-layout to fixed and add in the white-space. Currently you are using white-space:no-wrap which negates what you're trying to do. Also I set a max-width to all your td's so this will happen whenever there is overflow.
Add this at the end of your jQUery
https://jsfiddle.net/2koex0bt/5/
$(document).ready(function(){
$('#example').DataTable();
$('#example td').css('white-space','initial');
});
If you want to just use the api, do this ( add in anymore CSS to change the styling ).
If you want to do it with CSS, do this:
table {
table-layout:fixed;
}
table td {
word-wrap: break-word;
max-width: 400px;
}
#example td {
white-space:inherit;
}
Js Code:
'columnDefs': [{
render: function (data, type, full, meta) {
let instaText = (data != null && data.length > 25) ? data.substr(0, 25) : data == null?"":data;
return '<div class="text-overflow" title='+'"'+ data +'"' +'>' + instaText + '</div>';
},
targets: [27]
}],
CSS:
{
overflow: hidden;
text-overflow: ellipsis;
max-width: 80%;
}
What is wrong with my code?
I have to check in kendo UI grid is there "OrderType 20" in my column.
If it is, I need to apply my css condition which includes background, but it does not work, can someone help me? thanks
template: '# if (OrderType == "OrderType 20") {#<div class='customClass'>#:OrderType#</div>#} else {#OrderType#}#'
It might help you for nested if else for kendo ui grid row template. i.e.
template: "#if(ErrorDesc==null){# #: DeviceLabel # #}else If(ErrorDesc==""){# #: DeviceLabel # #}else{# #: DeviceText # #}#"
done on easier way: thank You all
template: "#if(OrderType == 'OrderType 20') {#<div class='customClass'>#:OrderType#</div>#} else{##:OrderType##}#"
I would recommend you to write a function and call that in template and code the logic in that. following is the example.
$(gridId).kendoGrid({
dataSource: {
data: datasource
},
scrollable: true,
sortable: true,
resizable: true,
columns: [
{ field: "MetricName", title: "Metric", width: "130px" },
{ field: "OnTrack", title: "On Track", template:'#:changeTemplate(OnTrack)#', width: "130px", attributes: { style: "text-align: center !important;" } },
{ field: "CurrentAmount", title: "Current", template: '$ #:parseFloat(CurrentAmount).toFixed(2)#', width: "130px" },
{ field: "RequiredAmount", title: "Required", template: '$ #:parseFloat(RequiredAmount).toFixed(2)#', width: "130px" }
]
});
function changeTemplate(value)
{
Conditions depending on Your Business Logic
if ()
return "HTML Here";
else
return "HTML Here";
}
{
field: "status",
title: "Status",
width: "80px",
template: "# if (status == '1' ) { # <center><span
style='color:green;'>Active</span></center> #
}
else if (status == '0'){ #
<center><span style='color:red;'>Deactive</span></center>
#} #"
}
You can handle it in grid databound event too.Check this fiddle:
http://jsfiddle.net/Sowjanya51/krszen9a/
You can modify the databound instead of looping through all the cell collection
if(dataItem.OrderType == 'OrderType20')
I have an angularjs - kendo UI grid-based solution. In the controller for the grid I have placed the following code:
$scope.customClick = function(e) {
$scope.$apply(
function() {
e.preventDefault();
alert('customClick');
});
};
$scope.gridOptions = {
dataSource: $scope.gridData,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
scrollable: true,
sortable: true,
filterable: true,
selectable: true,
editable: "inline",
columns: [
{
command :[ {text: "", template: '<input type="checkbox" id="check-all" />', click: $scope.customClick} ]
},
{field: "DocumentKey", title: "Document Key"},
{field: "Sender", title: "Sender"},
{field: "Recipient", title: "Recipient"},
{field: "ChangeDate", title: "ReceivedBy Time"},
{field: "FlowComment", title: "Comment"},
{field: "Location", title: "Location"}
]
};
});
Added checkbox is displayed fine, but I don't know how to handle the click event. $scope.customClick is not triggered after clicking on check box.
A fairly old question, the user had probably found a solution long ago, but in case google search gets someone to this question, it's good to have an answer. JavaScript combined with libraries like KendoUI and AngularJS usually allow us to solve problems by using several different approaches, but here is one of them:
Say you have a grid defined like this:
<div kendo-grid="kendo.myGrid" k-options="gridOptions"></div>
Your JavaScript code to define this grid might look like this:
$scope.gridOptions = {
dataSource: new kendo.data.DataSource({
data: dataFromSomeLocalVariableMaybe,
pageSize: 10
}),
sortable: true,
pageable: {
pageSizes: [10, 20, 50]
},
columns: [{
field: "column1",
title: "Column 1",
width: "100px"
}, {
field: "column2",
title: "Column 2",
width: "120px"
}, {
command: [{
template: "<span class='k-button' ng-click='doSomething($event)'> Do something</span>"
}, {
template: "<span class='k-button' ng-click='doSomethingElse($event)'> Do something else</span>"
}],
title: " ",
width: "100px"
}]
};
Notice the $event that is passed to ng-click call to a function. That $event contains the actual click event data.
If it would be like this, then you would need to have these two functions defined:
$scope.doSomething = function($event) {
// Get the element which was clicked
var sender = $event.currentTarget;
// Get the Kendo grid row which contains the clicked element
var row = angular.element(sender).closest("tr");
// Get the data bound item for that row
var dataItem = $scope.kendo.myGrid.dataItem(row);
console.log(dataItem);
};
$scope.doSomethingElse = function($event) {
// Do something else
};
And that's it.
Omit $scope.
It should as follows:
{ command : {text: "", click:customClick}, template: '<input type="checkbox" id="check-all"/>}
Your command template should include ng directive, in your case ng-change for the checkbox input, which would point to your target function:
{
command :[{
text: "",
template: '<input type="checkbox" id="check-all" ng-change="customClick"/>'
}]
}