Filtring doesn't work in grid in some cases - kendo-ui
I have a grid. The filtring is working in some cases like a subcompany but doesn't work in almost all other.
This is a code:
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.min.css" />
<script src="//kendo.cdn.telerik.com/2015.2.805/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.2.805/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<div kendo-grid="grid2" k-options="gridOptions" k-rebind="gridOptions" id="grid" k-on-change="handleChange(data, dataItem, columns)" k-selectable="true">
</div>
</div>
</div>
<script>
var subscriberslistItems=[{"monthlyDBID":1603,"monthlyID":"","parkDBID":2,"companyDBID":34,"companyID":"","companyName":"Prima","subCompanyDBID":10,"subCompanyID":"","subCompanyName":"Company1","firstName":"John","lastName":"Meffey","badge":38220010,"curLocation":"52","curLocationDescription":"Out","idNum":"19294","jobTitleID":4,"jobTitleDescription":"Developer","groupID":0,"groupDescription":"","categoryID":4,"categoryDescription":"Desc1","accessProfileID":1,"accessProfileDescription":"Profile 1","monthlyType":2,"monthlyTypeDescription":"Standard","priceTableID":0,"carPlate1":"6523562","carPlate2":"","carPlate3":"","carPlate4":"","carPlate5":"","address":"","phone":"09-7990151","city":"","area":"","zipCode":"","mobile":"050-4224606","fax":"","email":"ayaa10#gmail.com","parkingSpot":"","validFromDate":366854400,"validToDate":505008000,"recordIndex":1},{"monthlyDBID":1622,"monthlyID":"","parkDBID":2,"companyDBID":34,"companyID":"","companyName":"Company 2","subCompanyDBID":10,"subCompanyID":"","subCompanyName":"Child Company 2","firstName":"Tim","lastName":"Tompson","badge":38220000,"curLocation":"52","curLocationDescription":"Out","idNum":"19180","jobTitleID":4,"jobTitleDescription":"Driver","groupID":0,"groupDescription":"","categoryID":4,"categoryDescription":"Category 3","accessProfileID":1,"accessProfileDescription":"Profile 2","monthlyType":2,"monthlyTypeDescription":"Standard","priceTableID":0,"carPlate1":"8044472","carPlate2":"","carPlate3":"","carPlate4":"","carPlate5":"","address":"","phone":"03-5666555","city":"","area":"","zipCode":"","mobile":"052-3233373","fax":"","email":"","parkingSpot":"","validFromDate":368064000,"validToDate":505008000,"recordIndex":2},{"monthlyDBID":1604,"monthlyID":"","parkDBID":2,"companyDBID":34,"companyID":"","companyName":"Company 3","subCompanyDBID":10,"subCompanyID":"","subCompanyName":"Child 1","firstName":"Tim","lastName":"Tompson","badge":38220029,"curLocation":"52","curLocationDescription":"Out","idNum":"8177","jobTitleID":4,"jobTitleDescription":"Driver","groupID":0,"groupDescription":"","categoryID":4,"categoryDescription":"Category 7","accessProfileID":1,"accessProfileDescription":"Profile 5","monthlyType":2,"monthlyTypeDescription":"Standard","priceTableID":0,"carPlate1":"5219217","carPlate2":"","carPlate3":"","carPlate4":"","carPlate5":"","address":"","phone":"","city":"","area":"","zipCode":"","mobile":"050-6996801","fax":"","email":"nave#polfin-ins.co.il","parkingSpot":"","validFromDate":366854400,"validToDate":505008000,"recordIndex":3},{"monthlyDBID":1605,"monthlyID":"","parkDBID":2,"companyDBID":34,"companyID":"","companyName":"Company 7","subCompanyDBID":10,"subCompanyID":"","subCompanyName":"Child 7","firstName":"Hanna","lastName":"Lim","badge":38210651,"curLocation":"52","curLocationDescription":"Out","idNum":"19597","jobTitleID":4,"jobTitleDescription":"Software Developer","groupID":13,"groupDescription":"group 5","categoryID":4,"categoryDescription":"category 1","accessProfileID":4,"accessProfileDescription":"Profile 3","monthlyType":2,"monthlyTypeDescription":"Standard","priceTableID":0,"carPlate1":"8959159","carPlate2":"","carPlate3":"","carPlate4":"","carPlate5":"","address":"","phone":"03-5168855","city":"","area":"","zipCode":"","mobile":"054-3001178","fax":"","email":"hana#orel","parkingSpot":"","validFromDate":366854400,"validToDate":505008000,"recordIndex":4},{"monthlyDBID":1606,"monthlyID":"","parkDBID":2,"companyDBID":34,"companyID":"","companyName":"Company 10","subCompanyDBID":12,"subCompanyID":"","subCompanyName":"Child 1-2","firstName":"Martinי","lastName":"Shepard","badge":38220034,"curLocation":"52","curLocationDescription":"Out","idNum":"2197","jobTitleID":4,"jobTitleDescription":"Developer","groupID":0,"groupDescription":"","categoryID":4,"categoryDescription":"Category 7","accessProfileID":1,"accessProfileDescription":"Profile 5","monthlyType":2,"monthlyTypeDescription":"Standard","priceTableID":0,"carPlate1":"6260067","carPlate2":"","carPlate3":"","carPlate4":"","carPlate5":"","address":"","phone":"03-6257147","city":"","area":"","zipCode":"","mobile":"050-6828838","fax":"","email":"tzahim#charisma-ins.co.il","parkingSpot":"","validFromDate":367113600,"validToDate":505008000,"recordIndex":5},{"monthlyDBID":1607,"monthlyID":"","parkDBID":2,"companyDBID":34,"companyID":"","companyName":"Company 8","subCompanyDBID":12,"subCompanyID":"","subCompanyName":"Child 4","firstName":"Netanel","lastName":"Black","badge":38220032,"curLocation":"52","curLocationDescription":"Out","idNum":"72481","jobTitleID":4,"jobTitleDescription":"Driver","groupID":0,"groupDescription":"","categoryID":4,"categoryDescription":"Category 7","accessProfileID":1,"accessProfileDescription":"Profile 5","monthlyType":2,"monthlyTypeDescription":"Standard","priceTableID":0,"carPlate1":"1471214","carPlate2":"","carPlate3":"","carPlate4":"","carPlate5":"","address":"","phone":"098840010","city":"","area":"","zipCode":"","mobile":"052-5262333","fax":"","email":"rafizakar#walla.co.il","parkingSpot":"","validFromDate":367113600,"validToDate":505008000,"recordIndex":6},{"monthlyDBID":1608,"monthlyID":"","parkDBID":2,"companyDBID":34,"companyID":"","companyName":"Company 4","subCompanyDBID":10,"subCompanyID":"","subCompanyName":"Child 4","firstName":"Mishael","lastName":"Akerman","badge":38220037,"curLocation":"52","curLocationDescription":"Out","idNum":"313043","jobTitleID":4,"jobTitleDescription":"Driver","groupID":0,"groupDescription":"","categoryID":4,"categoryDescription":"Category 6","accessProfileID":1,"accessProfileDescription":"Profile 4","monthlyType":2,"monthlyTypeDescription":"Standard","priceTableID":0,"carPlate1":"7140229","carPlate2":"","carPlate3":"","carPlate4":"","carPlate5":"","address":"","phone":"09-9514169","city":"","area":"","zipCode":"","mobile":"050-5281348","fax":"","email":"amichel#bezeqint.net","parkingSpot":"","validFromDate":367113600,"validToDate":505008000,"recordIndex":7}];
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
gridScript = {
/* read: companieslistItems,*/
dataSource: {
data: subscriberslistItems,
pageSize: 10
},
columns: [
{field: "manageName", title: "Name"},
{field: "manageNumber", title: "Number", width: "78px"},
{field: "manageCategoryDescription", title: "Desc",width:"180px"},
{field: "manageProfileAccess", title: "Access", width: "107px"},
{field: "manageParkingSpot", title: "parkingSpot", width: "107px"},
{field: "companyName", title: "CompanyName",width: "107px"},
{field: "subCompanyName", title: "subCompany",width: "107px"},
{field: "curLocationDescription", title: "curLocation", width: "78px"},
{field: "jobTitleDescription", title: "jobTitle", width: "107px"},
{field: "groupDescription", title: "group", width: "107px"},
{field: "idNum", title: "idNum", width: "107px"},
{field: "manageAddress", title: "manageAddress", width: "107px"},
{field: "manageCity", title: "City", width: "107px"},
{field: "manageArea", title: "Area", width: "107px"},
{field: "manageTelephone", title: "Phone", width: "107px"},
{field: "manageCell", title: "cell", width: "107px"},
{field: "manageEmail", title: "Email", width: "147px"}
],
rowTemplate: "<tr data-uid='#: uid #' class='hasContextMenu' role='row' data-companyName='#: companyName#'>" +
"<td colspan='1' style='text-align: center;' class='statusTemplate'> {{dataItem.firstName}} - {{dataItem.lastName}}</td>" +
"<td colspan='1' style='text-align: center;' class='valDiscount'>{{dataItem.badge}}</td>" +
"<td colspan='1' style='text-align: center;' >{{dataItem.categoryDescription}}</td>" +
"<td colspan='1' style='text-align: center;' >{{dataItem.accessProfileDescription}}</td>" +
"<td colspan='1' style='text-align: center;' >{{dataItem.parkingSpot}}</td>" +
"<td colspan='1' style='text-align: center;' class='valCompany'>#: companyName#</td>" +
"<td colspan='1' style='text-align: center;' class='valSubCompany'>{{dataItem.subCompanyName}}</td>" +
"<td colspan='1' style='text-align: center;' >{{dataItem.curLocationDescription}}</td>" +
"<td colspan='1' style='text-align: center;' >{{dataItem.jobTitleDescription}}</td>" +
"<td colspan='1' style='text-align: center;' >{{dataItem.groupDescription}}</td>" +
"<td colspan='1' style='text-align: center;' >{{dataItem.idNum}}</td>" +
"<td colspan='1' style='text-align: center;' >{{dataItem.address}}</td>" +
"<td colspan='1' style='text-align: center;' >{{dataItem.city}}</td>" +
"<td colspan='1' style='text-align: center;' >{{dataItem.area}}</td>" +
"<td colspan='1' style='text-align: center;' >{{dataItem.phone}}</td>" +
"<td colspan='1' style='text-align: center;' >{{dataItem.mobile}}</td>" +
"<td colspan='1' style='text-align: center;' >{{dataItem.email}}</td>" +
"</tr>",
filterable: true
};
$scope.gridOptions = gridScript;
})
</script>
</body>
</html>
The problem is that there are no errors. I see that it is simply doesn't filter.
Thanks for help!
The problem is that in json field like "badge" is number and kendo ui see is as number but i didn't write for this a schema:
schema: {
model: {
fields: {
badge: { type: "number" }
}
}
}
So, because of this kendo ui can not do a filtering
Related
Use session in external js file
I want to use session in an external js file, but it's not working. I know that it's not possible to access a session in an external AJAX file, but does anyone have solution for it?
When I insert code in my view it runs correctly, moreover I think the URL is incorrect too! I use CodeIgniter for the back-end.
function show_msg() {
$.ajax({
type: 'ajax',
url: '<?php echo base_url(); ?>index.php/chat/showmsg',
async: false,
dataType: 'json',
success: function (data) {
var user = '<?php echo $this->session->userdata('username'); ?>';
var html = '';
var i;
for (i = 14; i >= 0; i--) {
if (data[i].user !== user) {
html +=
'<span style="color:green;font-size:12px;">' + data[i].user + '</span>' + ' ' + '<span style="color:dimgrey;font-size:10px;">' + data[i].date + '</span>' + '<div style="margin-right:25px;margin-bottom:25px;border:0px solid grey; border-radius: 0px 12px 12px 12px; padding:10px;width:auto;background-color:white;;box-shadow:0px 0px 0px 0px grey;direction:rtl;">' + data[i].msg + '</div>';
} else {
html +=
'<span style="color:green;font-size:12px;">' + "" + '</span>' + ' ' + '<span style="color:dimgrey;font-size:10px;">' + data[i].date + '</span>' + '<div style="margin-left:30px;margin-bottom:25px;border:0px solid grey; border-radius: 8px 0px 8px 8px; padding:10px;width:auto;background-color:#bbf490;box-shadow:0px 0px 0px grey;direction:rtl;">' + data[i].msg + '</div>';
}
}
$('#show_data').html(html);
}
});
}
There is no direct way of inserting PHP variables in the external .js files. Because PHP does not parse js files. A quick and dirty way is to declare a JS variable(declare the variable carefully because of global variable pollution, use descriptive name) in the php view file like this.
<script type="text/javascript">
var session_user_id = '<?php echo $this->session->userdata('username'); ?>';
var base_url = '<?php echo base_url(); ?>';
</script>
and use this variable in your external js file
function show_msg() {
$.ajax({
type: 'ajax',
url: base_url + 'index.php/chat/showmsg',
async: false,
dataType: 'json',
success: function (data) {
var user = session_user_id;
var html = '';
var i;
for (i = 14; i >= 0; i--) {
if (data[i].user !== user) {
html +=
'<span style="color:green;font-size:12px;">' + data[i].user + '</span>' + ' ' + '<span style="color:dimgrey;font-size:10px;">' + data[i].date + '</span>' + '<div style="margin-right:25px;margin-bottom:25px;border:0px solid grey; border-radius: 0px 12px 12px 12px; padding:10px;width:auto;background-color:white;;box-shadow:0px 0px 0px 0px grey;direction:rtl;">' + data[i].msg + '</div>';
} else {
html +=
'<span style="color:green;font-size:12px;">' + "" + '</span>' + ' ' + '<span style="color:dimgrey;font-size:10px;">' + data[i].date + '</span>' + '<div style="margin-left:30px;margin-bottom:25px;border:0px solid grey; border-radius: 8px 0px 8px 8px; padding:10px;width:auto;background-color:#bbf490;box-shadow:0px 0px 0px grey;direction:rtl;">' + data[i].msg + '</div>';
}
}
$('#show_data').html(html);
}
});
}
Kendoui- set color in chart dynamically
When we work with KendoUI, we need to specify the backcolor of the chart. like this:
{
category: "Latin America",
value: 16.3,
color: "#068c35"
}
See the full code below or example here. I want to know, instead of specifying the backcolor for each component, is it possible to set the base color and then kendoui will use variation of the base color and set the backcolor for remaining component.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/donut-charts/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
position: "bottom",
text: "Share of Internet Population Growth"
},
legend: {
visible: false
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "donut",
startAngle: 150
},
series: [{
name: "2011",
data: [{
category: "Asia",
value: 30.8,
color: "#9de219"
},{
category: "Europe",
value: 21.1,
color: "#90cc38"
},{
category: "Latin America",
value: 16.3,
color: "#068c35"
},{
category: "Africa",
value: 17.6,
color: "#006634"
},{
category: "Middle East",
value: 9.2,
color: "#004d38"
},{
category: "North America",
value: 4.6,
color: "#033939"
}]
}, {
name: "2012",
data: [{
category: "Asia",
value: 53.8,
color: "#9de219"
},{
category: "Europe",
value: 16.1,
color: "#90cc38"
},{
category: "Latin America",
value: 11.3,
color: "#068c35"
},{
category: "Africa",
value: 9.6,
color: "#006634"
},{
category: "Middle East",
value: 5.2,
color: "#004d38"
},{
category: "North America",
value: 3.6,
color: "#033939"
}],
labels: {
visible: true,
background: "transparent",
position: "outsideEnd",
template: "#= category #: \n #= value#%"
}
}],
tooltip: {
visible: true,
template: "#= category # (#= series.name #): #= value #%"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>
</body>
</html>
You can use js function and logic do there.
{
category: "Africa",
value: 17.6,
color: GetColor
}
example here
Is that what you are looking for?
Based on #ademar's answer, I have updated the solution
this is how the GetColor function looks
var color = "#2b577011";
var percent = -20;
function GetColor(val)
{
var R = parseInt(color.substring(1,3),16);
var G = parseInt(color.substring(3,5),16);
var B = parseInt(color.substring(5,7),16);
R = parseInt(R * (100 + percent) / 100);
G = parseInt(G * (100 + percent) / 100);
B = parseInt(B * (100 + percent) / 100);
R = (R<255)?R:255;
G = (G<255)?G:255;
B = (B<255)?B:255;
var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));
color = "#"+RR+GG+BB;
return color;
}
Here is full code:
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/donut-charts/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
position: "bottom",
text: "Share of Internet Population Growth"
},
legend: {
visible: false
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "donut",
startAngle: 150
},
series: [{
name: "2012",
data: [{
category: "Asia",
value: 53.8,
color: GetColor
},{
category: "Europe",
value: 16.1,
color: GetColor
},{
category: "Latin America",
value: 11.3,
color: GetColor
},{
category: "Africa",
value: 9.6,
color: GetColor
},{
category: "Middle East",
value: 5.2,
color:GetColor
},{
category: "North America",
value: 3.6,
color: GetColor
}],
labels: {
visible: true,
background: "transparent",
position: "outsideEnd",
template: "#= category #: \n #= value#%"
}
}],
tooltip: {
visible: true,
template: "#= category # (#= series.name #): #= value #%"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
var color = "#63C6FF";
var percent = -20;
function GetColor(val)
{
var R = parseInt(color.substring(1,3),16);
var G = parseInt(color.substring(3,5),16);
var B = parseInt(color.substring(5,7),16);
R = parseInt(R * (100 + percent) / 100);
G = parseInt(G * (100 + percent) / 100);
B = parseInt(B * (100 + percent) / 100);
R = (R<255)?R:255;
G = (G<255)?G:255;
B = (B<255)?B:255;
var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));
color = "#"+RR+GG+BB;
return color;
}
</script>
</div>
</body>
</html>
jqGrid Multiselect does not retrieve data
I have a problem in my multiselect for the code below. While adding new row when I select all items in the list of ‘resources’ column (this field is multiselect with checkbox) and save the row, all data of the row saves correctly to the database. But when the same row is retrieved for editing I see all the items of resources selected except the first one. In the above code I am using bootstrap multiselect plugin. But same is the behaviour when I use eric hynds multiselect plugin. This problem appears to be only with the first item in the list.
<html>
<head>
<title>Maintenance Daily Log</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui.theme.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<link rel='stylesheet' href='css/jquery-ui.css'/>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-size: 70%;
}
table, th, td {
font-size: 100%;
}
#editmodlist {
font-size: 70%;
}
div#editmodlist {
width: 1000px;
font-size: 130%;
}
.ui-jqgrid {font-size:0.5em;}
div .mce-tinymce {
margin-left: 5px
}
div .mce-btn button, div .mce-menu-item-normal {
font-size: 80%;
}
ul .ui-multiselect-checkboxes {
font-size: 130%;
}
#ui-datepicker-div {
font-size:120%;
}
div .ui-multiselect-header {
font-size: 100%;
}
.ui-multiselect-menu {
font-size: 150%;
width: 100%
}
button .ui-multiselect {
width: 100%;
}
</style>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src='js/jquery-ui.min.js'></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/tinymce.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script type="text/javascript">
$(function () {
$("#list").jqGrid({
url:'server.php',
datatype: "json",
mtype: "POST",
colNames: ["SL","Date", "Shift", "Equipment","Resources-1", "Resources", "Works done", "Spares used", "Status"],
colModel: [
{name:'id',index:'id', width:30,classes: 'cvteste', hidden:true},
{ name:'date',index:'date',search: true,searchoptions: {searchhidden: true},editrules:{date:true,required:true},datefmt:'dd-mm-Y', width:70, sortable:false,classes: 'cvteste',editable:true, editoptions:{size:10, dataInit:function(el){
$(el).datepicker({dateFormat:'dd-mm-yy'});
}
}},
{ name:'shift',index:'shift',search: true,searchoptions: {searchhidden: true}, edittype:'select', formatter:'select', editoptions:{value:"G:G;A:A;B:B;C:C"}, width:35,align:"center",classes: 'cvteste',editable:true },
{name:'equipment',index:'equipment',width:110,classes: 'cvteste',editable:true, search: true,searchoptions: {searchhidden: true},edittype:'select', editoptions:{dataUrl:'equipments.php'}},
{name:"resources-1", index:"resources-1",width:105,sortable:false, editable:false},
{name: 'resources', index: 'resources', width: 105, align: 'left', editable: true, formatter: 'select', edittype: 'select', hidden:true, editrules:{edithidden:true}, editoptions: { /*dataUrl: 'resources.php',
postData: function (rowid, value, cmName) {
return {
myId: rowid
}
},*/
dataUrl: function(){
var srow = jQuery("#list").jqGrid('getGridParam','selrow');
var myUrl = "resources.php";
if( srow ) {
myUrl = 'resources.php?myId='+srow;
}
return myUrl;
},
multiselect:true,
dataInit: function (elem) {
setTimeout(function () {
$(elem).multiselect({
//minWidth: 150, //'auto',
// height: "auto",
// selectedList: 2,
// checkAllText: "all",
// uncheckAllText: "no",
// noneSelectedText: "Any",
/*open: function () {
var $menu = $(".ui-multiselect- menu:visible");
$menu.width("auto");
return;
}*/
});
}, 2000);
},
multiple: true
// defaultValue: 'IN'
}
},
{ name: "workdone", index: "workdone", width: 80, sortable: false, editable: true,
//edittype: "textarea"
edittype:'custom',
editoptions: {
custom_element: function (value, options) {
var elm = $("<textarea></textarea>");
elm.val(value);
// give the editor time to initialize
setTimeout(function () {
//tinymce.remove();
//var ctr = $("#" + options.id).tinymce();
//if (ctr !== null) {
// ctr.remove();
//}
try {
tinymce.remove("#" + options.id);
} catch(ex) {}
tinymce.init({selector: "#" + options.id, plugins: "link"});
}, 50);
return elm;
},
custom_value: function (element, oper, gridval) {
var id;
if (element.length > 0) {
id = element.attr("id");
} else if (typeof element.selector === "string") {
var sels = element.selector.split(" "),
idSel = sels[sels.length - 1];
if (idSel.charAt(0) === "#") {
id = idSel.substring(1);
} else {
return "";
}
}
if (oper === "get") {
return tinymce.get(id).getContent({format: "row"});
} else if (oper === "set") {
if (tinymce.get(id)) {
tinymce.get(id).setContent(gridval);
}
}
}}
},
{name:'sparesused',index:'sparesused',search: true,searchoptions: {searchhidden: true}, width:150, sortable:false,classes: 'cvteste',editable:true, editoptions:{size:100}},
{name:'status',index:'status',width:110,classes: 'cvteste',editable:true, search: true,searchoptions: {searchhidden: true},edittype:'select', editoptions:{dataUrl:'status.php'}}
],
pager: "#pager",
rowNum: 10,
rowList: [10, 20, 30],
sortname: "date",
sortorder: "asc",
viewrecords: true,
gridview: true,
autoencode: true,
caption: "Maintenane Daily Log",
editurl: "update.php"
});
$("#list").jqGrid("navGrid", "#pager", {add: true, edit:true}, {closeOnEscape:true, recreateForm: true, width:800},{closeOnEscape:true, recreateForm: true, width:800}
);
});
</script>
</head>
<body>
<div><table id="list"><tr><td></td></tr></table>
<div></div>
</div>
</body>
</html>
and in my resources.php I have as below
<?php
if(isset($_REQUEST['myId']))
{
$rowid=$_REQUEST['myId'];
require_once 'config.php';
$result1 = mysqli_query($con,"SELECT resources FROM worksdata WHERE id=$rowid limit 1") or die(mysql_error());
$row=mysqli_fetch_assoc($result1);
$value = $row['resources'];
$result=mysqli_query($con,"SELECT * FROM resources")
or die(mysql_error());
echo "<select multiple='multiple'>";
while($row=mysqli_fetch_assoc($result))
{
echo '<option value="'.$row['resource'].'"';
if (strpos($value,$row['resource']) !== false)
echo " selected='selected' ";
echo '>';
echo $row['resource'];
echo '</option>';
}
echo "</select>";
}
else
{
require_once 'config.php';
$result=mysqli_query($con,"SELECT * FROM resources")
or die(mysql_error());
echo "<select multiple='multiple'>";
while($row=mysqli_fetch_assoc($result))
{
echo '<option value="'.$row['resource'].'"';
echo '>';
echo $row['resource'];
echo '</option>';
}
echo "</select>";
}
?>
What may be the problem here?
Jqgrid pagination icons missing
Issue is pagination icons in jqgrid are not visible. I could see that the .png images are not found in my console.
GET http://localhost:8080/myapp/styles/images/ui-icons_6da8d5_256x240.png 404 (Not Found)
GET http://localhost:8080/myapp/styles/images/ui-icons_6da8d5_256x240.png 404 (Not Found)
Also even though width is 'auto' there is a horizontal scroll bar appearing.
The data gets loaded properly and my DB pagination is working fine. on first page only hand icon is visible and when clicked goes to page 2. but on page 2 no icon is visible.
I downloaded again jqgrid but no .png icons were there in the installation
My jsp code goes as below -
<html>
<head>
<style>
div.ui-jqgrid-titlebar {
height: 10px;
}
#sidebar {
float: left;
width: 150px;
padding: 10px 10px;
// background-color:yellow
}
#container {
margin: 0px 320px 0px 170px;
text-align: center;
// background-color:red
}
</style>
<link rel="stylesheet" href="../styles/ui.all.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="../styles/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="../styles/ui.jqgrid.css" />
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/grid.locale-en.js"></script>
<script type="text/javascript" src="../js/jquery.jqGrid.min.js"></script>
<link href="../images/favicon.ico" type="image/x-icon" rel="shortcut icon">
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript">
//index is used to override the column name passed to the server in the query param sidx
var myColModel = [
{ name: "promId", index: 'Promotionid', width: 60 },
{ name: "promoCode", index: 'promotioncode', width: 110 },
{ name: "name", index: 'name', width: 160 },
{ name: "description", index: 'description', width: 250 },
{ name: "distCode", index: 'distributor_code', width: 110 },
{ name: "status", index: 'status', width: 110 },
{ name: "startDate", index: 'start_date', width: 100, sorttype: "date", align: "right" },
{ name: "endDate", index: 'end_date', width: 100, sorttype: "date", align: "right" },
{ name: "discount", index: 'discount', width: 90 },
{ name: "extension", index: 'extension', width: 90 }
];
$(function () {
$("#list").jqGrid({
url: 'some/url',
datatype: "json",
mtype: "GET",
colNames: ["Promo ID", "Promo Code", "Name", "Description", "Distributor Code", "Status", "Start Date", "End Date", "Discount", "Extension"],
colModel: myColModel,
pager: "#pager",
rowNum: 10,
rowList: [10, 20, 30],
sortname: "end_date",
sortorder: "asc",
viewrecords: true,
gridview: true,
rownumber: true,
autoencode: true,
width: 'auto',
height: 'auto',
caption: "Promotion Summary"
});
});
</script>
</head>
<br></br>
<body>
<br>
<br>
<center>
<hr />
<div class="clear">
<%# include file="header.jsp"%>
</div>
</center>
<div class="sidebar">
<%# include file="/admin/User.jsp"%>
</div>
<br>
<br>
<div id="container" border="2px solid green"
style="left: 5%; position: relative;">
<div id="tableContent" width="100%">
<div>Summary</div>
<div style = "margin: 0px auto 0px 150px;">
<table id="list"><tr><td></td></tr>
</table>
<div id="pager"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
What I found that the images were not downloaded from the version I installed from jqgrid website. Not sure why. so I manually downloaded images from internet and worked fine.
kendoGrid popup editor with listview
Newbie with Kendo UI here, thanks for the help. Having a problem with a selected listview inside a grid popup editor window.
It displays and is selectable, but I can't get it to send the selected listview data to the JSON string
the json string sent to the server:
{"blog"=>{"id"=>"", "title"=>"New title", "content"=>"New content", "published"=>"", "img_name"=>""}}
My code, kendo-grid and kendo-listview:
<script type="text/x-kendo-tmpl" id="image_template">
<div class="product">
<img src="/assets/blog/${img_name}" width="100" />
</div>
</script>
<!-- popup editor template -->
<script id="popup_editor" type="text/x-kendo-template">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="title">Title</label>
<div class="controls">
<input type="text" id="title" name="Title" data-bind="value:title">
</div>
</div>
<div class="control-group">
<label class="control-label" for="published">Published</label>
<div class="controls">
<input type="checkbox" id="published" data-bind="checked: published" />
</div>
</div>
<textarea id="editor" name="content" data-bind="value:content"></textarea>
<div id="listView"></div>
<div class="control-group">
<label class="control-label" for="img_name">Image Name</label>
<div class="controls">
<input type="text" id="img_name" name="img_name" data-bind="value: img_name"/>
</div>
</div>
</form>
</script>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "/posts";
var blogimages = [
{ "img_name": "image_one.jpg"},
{ "img_name": "image_two.jpg"},
{ "img_name": "image_three.jpg"},
{ "img_name": "image_four.jpg"},
{ "img_name": "image_five.jpg"}
];
imageSource = new kendo.data.DataSource({
data: blogimages
});
imageSource.read();
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl,
dataType: "json"
},
update: {
url: function(posts) {
return crudServiceBaseUrl + "/" + posts.id;
},
dataType: "json",
contentType: "application/json",
type: "PUT"
},
destroy: {
url: function(posts) {
return crudServiceBaseUrl + "/" + posts.id
},
dataType: "json",
type: "DELETE"
},
create: {
url: crudServiceBaseUrl,
dataType: "json",
contentType: "application/json",
type: "POST"
},
batch:false,
parameterMap: function(posts, type) {
if (type === "create") {
return JSON.stringify({ post: posts });
}
else if(type === "update") {
return JSON.stringify({ post: posts }, replacer);
}
}
},
pageSize: 10,
schema: {
model: {
id: "id",
fields: {
title: { editable: true, defaultValue: "New title" },
content: { editable: true, defaultValue: "New content" },
published: {editable: true},
img_name: {editable: true}
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
editable: true,
navigatable: true,
sortable: {
mode: "single",
allowUnsort: false
},
pageable: true,
selectable: "row",
height: 490,
toolbar: ["create"],
editable: {
mode: "popup",
template: $("#popup_editor").html()
},
edit: function(e) {
$("#editor").kendoEditor({
tools: [
"bold",
"italic",
"underline",
"justifyLeft",
"justifyCenter",
"justifyRight",
"justifyFull"
]
});
$("#listView").kendoListView({
dataSource: imageSource,
selectable: "multiple",
change: onChange,
template: kendo.template($("#image_template").html())
}).data("kendoGrid");
},
save: function(e) {
},
columns: [
{ field: "title",title:"Title", width: "25%" },
{ field: "created_at", title:"Created", width: "20%" },
{ field: "updated_at", title:"Updated", width: "20%" },
{ field: "published", title:"Published", width: "10%" },
{ command: ["edit", "destroy"], title: " ", width: "20%" }]
});
function onChange() {
var index = this.select().index();
var dataItem = this.dataSource.at(index);
$('#img_name').val(dataItem.img_name);
}
replacer = function(key, value){
if (key=="id"||key=="created_at"||key=="updated_at"){
return undefined;
}else{
return value;
}
}
});
</script>
<style scoped>
.product
{
float: left;
width: 100px;
height: 60px;
margin: 5px;
padding: 5px;
border: 1px solid #cccccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-image: none;
cursor: pointer;
overflow: hidden;
}
.product img
{
float: left;
width: 100px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.k-listview:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.k-listview
{
border: 0;
padding: 0 0 20px 0;
min-width: 0;
}
</style>
I can successfully send img_name data through the input text
<input type="text" id="img_name" name="img_name" data-bind="value: img_name"/>
But I can't get it to change with onChange function in the listview
Any thoughts on this?