I am new to kendo UI. In my code, columns are getting created as shown below.
grid = $('#grid').kendoGrid({
columns: [
{
width: 75,
command: [{
name: "Tag",
click: function (e) {
try {
} catch (ex) {
alert(ex.message);
}
}
}]
},
{ field: "Col18", title: "IsTag", width: 75 },
{ field: "Col8", title: "System", width: 75 },
],
Now, in the databound, based on the value from datasource, they are changing the color of the row as show below. My issue is, if the color is green, I want to hide the command button. How can I achieve this.
dataBound: function () {
dataView = this.dataSource.view();
for (var i = 0; i < dataView.length; i++) {
var obj = $("#grid tbody").find("tr[data-uid=" + dataView[i].uid + "]");
switch (dataView[i].Aklr) {
case "R":
obj.addClass("red");
break;
case "R+":
obj.addClass("darkred");
break;
case "G":
obj.addClass("green");
break;
}
}
}
Since you have already added a class to your table row you can accomplish this with CSS.
http://jsbin.com/fogulena/3/edit?html,css,js,output
.green .k-grid-Tag {
display: none;
}
Here, I find the answer.
$("#grid tbody").find("tr[data-uid=" + dataView[i].uid + "] td:eq(0)").html("");
Related
I am using chart.js, Laravel 5.4 and blade templates.
I have to show doughnut chart and when user click on particular area then it should show the name of selected label and value belongs to it in the modal but firstly I am not able to get label name when user click on doughnut chart.
<br>var bookings = {!! json_encode($bookings) !!} ;
<br>var map={"confirmed":{"label":"Confirmed","color":"#4BC0C0"},"cancelled":{"label":"Cancelled","color":"#FFCD56"},"on_request":{"label":"On Request","color":"#FF6384"}}
<br>#if($hasChart)
<br>var labels=[],colors=[],numbers=[],hasChart=false;
<br>for (var property in map) {
<br>if(bookings[property].length>=0){
<br>hasChart=true;
<br>labels.push(map[property]["label"]);
<br>colors.push(map[property]["color"]);
<br>numbers.push(bookings[property].length);
}
}
var ctx = document.getElementById('doughnut-chart').getContext('2d');
<br>var chart = new Chart(ctx, {
<br>type: 'doughnut',
<br>data: {
<br>labels: labels,
<br>datasets: [
<br>{
backgroundColor: colors,
data: numbers
}
]
<br>},
<br>options: {
onClick: (e) => {
<br>//to do get value of selected label
<br>$('#bookingInfoModal').modal('show');
},
<br>maintainAspectRatio: false,
<br>elements: {
<br>arc: {
borderWidth: 0
}
}, <br>
<br>plugins: {
<br>legend: {
display: true,
position: "right",
align: "end",
padding: 50,
labels: {
boxWidth: 10,
color: '#000000',
},
<br>},
<br>},
<br>},
<br>});
I got it. it's working now.
options: {
onClick: (e,legend) => {
console.log(legend[0].index);
alert(chart.data.labels[legend[0].index]);
},
}
Currently free-jqgrid has feature that supports multiselect toolbar, same feature i want to create in jqgrid also.
http://www.ok-soft-gmbh.com/jqGrid/OK/MultiselectIn.htm
More recent code of usage multiselect with free jqGrid can be seen on the demo https://jsfiddle.net/OlegKi/ty4e68pm/16/. The most important parts of the demo I include below:
var dataInitMultiselect = function (elem, searchOptions) {
var $grid = $(this);
setTimeout(function() {
var $elem = $(elem),
id = elem.id,
inToolbar = searchOptions.mode === "filter",
options = {
selectedList: 2,
height: "auto",
checkAllText: "all",
uncheckAllText: "no",
noneSelectedText: "Any",
open: function() {
var $menu = $(".ui-multiselect-menu:visible");
$menu.width("auto");
$menu.css({
width: "auto",
height: "auto"
});
$menu.children("ul").css({
maxHeight: "300px",
overflow: "auto"
});
}
},
$options = $elem.find("option");
if ($options.length > 0 && $options[0].selected) {
$options[0].selected = false; // unselect the first selected option
}
if (inToolbar) {
options.minWidth = "auto";
}
$grid.triggerHandler("jqGridRefreshFilterValues");
$elem.multiselect(options);
// replace icons ui-icon-check, ui-icon-closethick, ui-icon-circle-close
// and ui-icon-triangle-1-s to font awesome icons
var $header = $elem.data("echMultiselect").header;
$header.find("span.ui-icon.ui-icon-check")
.removeClass("ui-icon ui-icon-check")
.addClass("fa fa-fw fa-check");
$header.find("span.ui-icon.ui-icon-closethick")
.removeClass("ui-icon ui-icon-closethick")
.addClass("fa fa-fw fa-times");
$header.find("span.ui-icon.ui-icon-circle-close")
.removeClass("ui-icon ui-icon-circle-close")
.addClass("fa fa-times-circle");
$elem.data("echMultiselect")
.button
.find("span.ui-icon.ui-icon-triangle-1-s")
.removeClass("ui-icon ui-icon-triangle-1-s")
.addClass("fa fa-caret-down")
.css({
float: "right",
marginRight: "5px"
});
}, 50);
},
multiselectTemplate = {
stype: "select",
searchoptions: {
generateValue: true,
//noFilterText: "Any",
sopt: ["in"],
attr: {
multiple: "multiple",
size: 3
},
dataInit: dataInitMultiselect
}
};
declares multiselectTemplate template. The next code fragment uses the template in colModel
colModel: [
...
{
name: "ship_via", width: 85, align: "center",
template: multiselectTemplate
},
...
],
Finally loadComplete include the code, which create filter toolbar after the data are loaded from the server:
loadComplete: function () {
if (!this.ftoolbar) {
// create filter toolbar if it isn't exist
$(this).jqGrid("filterToolbar", {
defaultSearch: "cn",
beforeClear: function() {
$(this.grid.hDiv)
.find(".ui-search-toolbar button.ui-multiselect")
.each(function() {
$(this).prev("select[multiple]").multiselect("refresh");
});
}
});
$(this).triggerHandler("jqGridRefreshFilterValues");
$(this.grid.hDiv)
.find(".ui-search-toolbar button.ui-multiselect")
.each(function() {
$(this).prev("select[multiple]")
.multiselect("refresh");
});
}
},
If required one can reload the data in filter toolbar by destroying it by destroyFilterToolbar method and executing the same code fragment which create it once more (I mean above code inside of loadComplete).
Is it possible to have a dynamic multiple buttons/images per column in a JQGrid 4.7? Each button/image should be clickable to bring up a custom modal pop up. This will only be used to display data, no editing at all.
Any code samples will be appreciated.
Here is a sample visual how it might look like:
Dynamic buttons
Free jqGrid allows to use formatter: "actions" or template: "actions" in multiple columns if you need:
colModel: [
{ name: "a1", template: "actions", width: 44, align: "left",
formatoptions: { mycol: "Q1" } },
{ name: "a2", template: "actions", width: 44, align: "left",
formatoptions: { mycol: "Q2" } },
...
],
actionsNavOptions: {
editbutton: false,// don't display Edit, Save and Cancel buttons
delbutton: false, // don't display Delete button
custom: [
{ action: "open", position: "first",
onClick: function (options) {
var item = $(this).jqGrid("getLocalRow", options.rowid);
alert("Open " + item.name + ", rowid=" + options.rowid);
} },
{ action: "post", position: "first",
onClick: function (options) {
var item = $(this).jqGrid("getLocalRow", options.rowid);
alert("Post " + item.name + ", rowid=" + options.rowid);
} }
],
posticon: "fa-lock",
posttitle: "Confirm (F2)",
openicon: "fa-folder-open-o",
opentitle: "Open (Enter)",
isDisplayButtons: function (options, rowData) {
if (options.mycol === "Q1") {
if (rowData.closed) { // or rowData.closed
return { post: { hidden: true } };
}
} else if (options.mycol === "Q2") {
if (parseFloat(rowData.amount) < 350) { // or rowData.closed
return { open: { hidden: true } };
}
}
}
}
With respect of editbutton: false and delbutton: false properties of actionsNavOptions you remove the standard actions buttons from the corresponding columns. By custom property one defines custom buttons and by callback isDisplayButtons one can include new custom buttons, include some buttons hidden or remove some custom buttons from the columns. The returned value of is described in the old answer and in the wiki article. In the way you have full control over displayed custom buttons and over the onClick behavior.
See the demo https://jsfiddle.net/OlegKi/av7ng1u0/ as an example.
How can I explode pie chart in Kendo DataViz,
my data is coming from database, and my code is like this:
dataSource: {
data: StageData
},
title: {
align: "center",
text: "Clients by Stage",
font: "14px Open Sans",
color: "#3cb2e1"
},
legend: {
visible: false
},
series: [{
type: "pie",
field: "CountClients",
aggregate: "sum",
categoryField: "StageId",
explodeField: function(){
if(categoryField=="Advocate"){
$(this).explode = true;
}
},
overlay: {
gradient: "none"
}
Here I am trying to explode pie when categoryField is "Advocate", But this is not working.
Could anyone suggest me how can I achieve this.
Thanks
I would probably iterate through the StageData, and set an explode value for each object.
$.each(StageData, function(i, s) {
if(s.StageId === 'Advocate') {
s.explode = true;
}
else {
s.explode = false;
}
});
Sample... http://jsbin.com/hiqaj/1/edit
When using a editor grid and my button put a new row at the bottom, validation messages are being hidden by the grid.
I have set up an example here: http://jsfiddle.net/api2304/K54v3/1/
Click on a button Add
Leave the cell Name empty and press tab.
The message will show below the row.
Html:
<div id="grid"></div>
Javascript:
var _dsGrid;
var _grid;
var _this = this;
_this._dsGrid = new kendo.data.DataSource({
autoSync: true,
data: [{ Cod: 0, Name: 'Value0' },
{ Cod: 1, Name: 'Value1' }],
schema: {
model: {
fields: {
Cod: { editable: false },
Name: {
validation: {
required: true,
required: { message: "Custom message" }
}
}
}
}
}
});
_this._grid = $("#grid").kendoGrid({
columns: [
{ field: "Cod" },
{ field: "Name" }
],
selectable: true,
dataSource: _this._dsGrid,
editable: true,
toolbar: [
{ template: kendo.template("<a id='btnAdicionar' class='k-button k-button-icontext'><span class='k-icon k-add'></span>Adicionar</a>") }
],
edit: function(e) {
e.container.find("input[name='Nome']").attr('maxlength', '20');
e.container.find("input").bind("blur", function() {
$("#grid").scrollTop($("#grid")[0].scrollHeight + 200);
});
}
}).
data("kendoGrid");
$("#btnAdicionar").click(function () {
var total = _this._dsGrid.data().length;
var insert = _this._dsGrid.insert(total, {});
_this._dsGrid.page(_this._dsGrid.totalPages());
var ultimoId = _this._dsGrid.data()[total - 1].Nivel;
_this._grid.editRow(_this._grid.tbody.children().last());
});
I found the solution here: http://www.telerik.com/forums/hidden-validators-when-virtual-scrolling-createat-bottom
Put this css on the page:
#grid .k-tooltip-validation {
margin-top: 0 !important;
display: block;
position: static;
padding: 0;
}
#grid .k-callout {
display: none;
}