I am trying to fetch kendo data on selecting particular row using checkbox.
This is part of code of controller.js
$scope.campaignLabelOptions = {
dataSource: {
data: [] ,
},
sortable: true,
pageable : {pageSizes : [5, 10, 25, 50]},
filterable : true,
resizable :true,
reordable :true,
scrollable:true,
columnMenu: true,
selectable :true,
editable: {
confirmation: "Are you sure that you want to delete this record?",
mode: "popup"
},
columns : [
{template: "<input type='checkbox' class='checkbox' ng-click='onClick($event)'/>" },
{field : "campaign_name", title :"Campaign Name", width : "150px", attributes: {style: "font-size: 12px"}},
// {field : "time_line", title :"Timeline", width : "100px",attributes: {style: "font-size: 12px"} },
{field : "spend", title :"Spend", width : "90px",attributes: {style: "font-size: 12px"} },
{field : "campaign_group_status", title :"Status", width : "85px", attributes: {style: "font-size: 12px"}},
{field : "performance", title :"Performance", width : "130px", attributes: {style: "font-size: 12px"}},
// {field : "creation_time", title :"Created Time", width : "135px", attributes: {style: "font-size: 12px"}},
],
};
$scope.checkedIds = [];
$scope.showCheckboxes = function(){
var checked = [];
for(var i in $scope.checkedIds){
if($scope.checkedIds[i]){
checked.push(i);
}
}
alert(checked);
};
$scope.onClick = function(e){
console.log(e);
var element =$(e.currentTarget);
var checked = element.is(':checked');
var row = element.closest("tr");
var grid = element.closest('kendoGrid').getKendoGrid();
var dataItem = grid.dataItem(row);
$scope.checkedIds[dataItem.EmployeeID] = checked;
if (checked) {
row.addClass("k-state-selected");
} else {
row.removeClass("k-state-selected");
}
};
I have copied similar code from http://dojo.telerik.com/exAB/5 for select logic . But here grid variable is coming undefined. Its not getting getKendoGrid() method..
Is there any better way to get row data? If yes what and if not -- how to use this current code?
Related
I have an issue when my columns aren't aligned with the header only when I use setGroupHeaders. As seen in my code, I am setting the column width (as suggested in other posts). I am also using the latest version of jqgrid (just downloaded it today to see if it solves this issue).
My JS:
var jqadminagrid_data = [{}];
var wwidth = $(window).width()*.90;
var fifteen=wwidth*.06;
var onehundred=wwidth*.16;
var seventy=wwidth*.11;
var sixty=wwidth*.09;
var onetwenty=wwidth*.18;
var fiftyfive=wwidth*.08;
var eightyfive=wwidth*.13;
jQuery("#jqadminagrid").jqGrid({
url: "createadminaxml.cfm",
datatype : "xml",
height : 'auto',
colNames : ['CTR Title', 'CTR Name', '', '', 'Status Date', 'End User', 'Signed By', 'Total Cost'],
//colNames : ['CTR Title', 'CTR Name', '', 'Status Date', 'End User', 'Signed By', 'Total Cost'],
colModel : [{
name : 'title',
index : 'title',
width: onehundred
}, {
name : 'ctrname',
index : 'ctrname',
width: sixty
}, {
name : 'status',
index : 'status',
width: onehundred
},{
name : 'statusbutton',
index : 'statusbutton',
width: fiftyfive
}, {
name : 'date',
index : 'date',
width: fiftyfive
}, {
name : 'euname',
index : 'euname',
sortable: true,
width: eightyfive
}, {
name : 'signed',
index : 'signed',
width: seventy
}, {
name : 'total',
index : 'total',
width: fiftyfive
}],
rowNum : 15,
rowList : [15, 30, 45],
pager : '#pjqadminagrid',
sortname : 'ctrname',
toolbarfilter : true,
viewrecords : true,
sortorder : "asc",
autowidth : true,
});
jQuery("#jqadminagrid").jqGrid('setGroupHeaders', {
useColSpanStyle: false,
groupHeaders:[{startColumnName: 'status', numberOfColumns: 2, titleText: '<center><b>Status</b></center>'}]
});
jQuery("#jqadminagrid").navGrid("#pjqadminagrid", {
edit: false, add: false, del: false, search: false, refresh: false
});
$(window).on("resize", function () {
var newWidth = $("#jqadminagrid").closest(".ui-jqgrid").parent().width()*.95;
jQuery("#jqadminagrid").jqGrid("setGridWidth", newWidth, true);
})
Grid with no grouping
Grid with grouping
Any assistance is greatly appreciated.
Can you please, try with some other "standard" UI Theme?
We have the same demo and it is working fine. The only difference is the Theme and and the data.
If possible can you please prepare a online demo - I think the problem is either in the Theme or in the data and the way it is inserted in the Guriddo jqGrid
I have a grid that has a datepicker with a button and a checkbox to reload the grid when the date changes. The datepicker is initialized to today's. This works fine. However I can't figure how to override the default url in the grid. Whenever the grid which is a tree is loaded it reads the default from the url configuration. Only when I click the button then it reloads the treee with the selected date. Even worst when I click in the icons in the tree to expand the child elements it overrides the date and all the loaded data with the value of the default URL. Can somebody tell me how to set the url properly? Also I don't understand why clicking in the elements reloads the tree since I have property loadonce=true.
thanks
$(document).ready(function(){
$("#list").jqGrid({
url : "/reconcile?unMatchedOnly=true",
datatype : "json",
mtype : 'GET',
colModel : [
{name : "data.key.busnDate", label : "Business Date", hidden:false, sorttype:"date", width : 100 },
{name : "data.product", label : "Product", sorttype:"string", width : 50, editable : false},
{name : "data.quantityBought", label : "Quantity Bought", sorttype:"int", width : 100, editable : false},
{name : "matches", label : "match", "edittype":"checkbox","formatter":"checkbox", width : 25, editable : false}
],
cmTemplate: { width: 70 },
treeGrid: true,
pager : '#pager',
treeGridModel: "adjacency",
ExpandColumn: "data.key.busnDate",
rowNum : 25,
height: 'auto',
rowList : [ 25,50,100,200 ],
loadonce:true,
});
jQuery("#list").jqGrid('navGrid', '#pager', {
edit : false,
add : false,
del : false,
view : true,
search : true
});
$('#datePick').datepicker({
onSelect: function (dateText, inst) {
var e = $("#list").data("events");
if (typeof (e) !== "undefined" && typeof (e.reloadGrid) !== "undefined") {
$("#list").trigger("reloadGrid");
}
}
}
);
$("#datePick").datepicker('setDate', new Date());
jQuery("#list").setGridParam({url:'/reconcile?datePick=' + $("#datePick").val() + '&unMatchedOnly=' + $("#unMatchedOnly").val(),page:1});
var url = '/reconcile?datePick=' + $("#datePick").val() + '&unMatchedOnly=' + $("#unMatchedOnly").val();
$("#list").jqGrid('setGridParam', { url: url });
});
$('#showSelected').on('click', function () {
var url = '/reconcile?datePick=' + $("#datePick").val() + '&unMatchedOnly=' + $("#unMatchedOnly").val();
$("#list").jqGrid('setGridParam', { url: url });
$("#list").trigger("reloadGrid");
});
I can't reproduce the problem, which you reports. If you want to load the data of TreeGrid at once then you don't need to use loadonce: true option. Instead of that the items of data should contains the property "loaded":true.
If you need to send some additional parameter to the server then you should use postData parameter with properties defined as functions (see the old answer). You can just use
url: "/reconcile",
postData: {
datePick: function () { return $("#datePick").val(); },
unMatchedOnly: function () { return $("#unMatchedOnly").val(); }
}
As the result the current data from #datePick and #unMatchedOnly will be sent to the server on every loading of the grid. To reload the TreeGrid you will need just use $("#list").trigger("reloadGrid");.
If you do loads the data of the grid on demand then expanding of nodes adds nodeid, n_level and parentid parameters to postData and the value of treeANode parameter will be changed from -1 to the rowid of expanding node. To reset the parameters before reloading you will need to reset treeANode parameter to -1.
I don't know the format of the data, which returns url: "/reconcile", but I suppose that you can use the following code
$(document).ready(function(){
var $grid = $("#list"),
fullReloadOfTreeGrid = function () {
var p = $grid.jqGrid("getGridParam"); // get reference to parameters
p.treeANode = -1; // be sure that we reload full grid
$grid.trigger("reloadGrid");
};
$('#datePick').datepicker({
onSelect: function (dateText, inst) {
fullReloadOfTreeGrid();
}
});
$("#datePick").datepicker('setDate', new Date());
$grid.jqGrid({
url: "/reconcile?unMatchedOnly=true",
datatype: "json",
postData: {
datePick: function () { return $("#datePick").val(); },
unMatchedOnly: function () { return $("#unMatchedOnly").val(); }
},
colModel: [
{name: "data.key.busnDate", label: "Business Date",
sorttype:"date", width : 100 },
{name: "data.product", label: "Product", width: 50},
{name: "data.quantityBought", label: "Quantity Bought",
sorttype:"int", width: 100},
{name: "matches", label: "match",
"template: "booleanCheckbox", width : 25}
],
cmTemplate: { width: 70 },
treeGrid: true,
pager: true,
treeGridModel: "adjacency",
ExpandColumn: "data.key.busnDate"
}).jqGrid('navGrid', {
edit : false,
add : false,
del : false,
view : true
});
$('#showSelected').on('click', function () {
fullReloadOfTreeGrid();
});
});
As I wrote before, resetting of treeANode to -1 will be not required if you really correctly loads all the nodes at once (with loaded:true property in all nodes).
I have a big problem with a Kendo grid when locking columns. The grid has two static columns and one or more columns created dynamically. Without locking any column, the grid works just fine, when i'm locking the static columns (or just one of them), the grid goes mad.
I know that locking columns will create two different tables (with locked and unlocked columns) but in my case, these tables (with different divs) won't align in my page.
I tried to align them manually using CSS (display:inline-block and/or float: left) but when I resize the window, the grid comes back to the wrong form.
I attached two examples:
In the second example, the rest of the columns are situated somewhere under the page (i need to zoom out to see them).
Inserted simplified code (without locked applied)
Code for columns:
var columns = [
{
field: "Field_Locked1",
title: "F1",
editor: "",
attributes: { style: "text-align: left;" },
sortable: false,
footerTemplate: "T",
width: "30px"
},
{
field: "Field_locked2",
title: "F2",
editable: false,
attributes: { style: "text-align: left;" },
template: "#=test(string)#",
footerTemplate: "<div style='text-align: right;'>1</div><hr/><div style= 'text-align: right;'>2</div>",
width: "370px",
sortable: false
}
];
for (var i = 0; i < customColumns.length; i++) {
var itemTab = customColumns[i];
var dinamicColumn = {
field: itemTab.Name,
title: itemTab.Code,
editable: false,
type: "number",
attributes: { style: "text-align: right;" },
sortable: false,
width: "200px",
template: "#= test(string)#",
footerTemplate: "<div style='text-align: right;'>1</div><hr/><div style= 'text-align: right;'>2</div>"
};
columns.splice(columns.length, 0, dinamicColumn);
}
Code for creating grid:
function createGridGeneric(tabElement,columns) {
var gridModel = tabElement.templateDescription.grid;
var idGrid = gridModel.id;
var gridToolbal = gridModel.toolbar != null ? gridModel.toolbar:null;
var gridFooter = gridModel.footer != null ? gridModel.footer : null;
var hasArea = tabElement.filterArea != null ? tabElement.filterArea.visible : false;
var grid = $("#" + idGrid).data("kendoGrid");
if (grid != null) {
$("#" + idGrid).empty();
}
$("#" + idGrid).kendoGrid({
autoBind: false,
columns: columns,
editable: false,
filterable: false,
groupable: false,
selectable: false,
sortable: false,
scrollable: true,
resizable: true,
save: function(e) {
},
saveChanges: function(e) {
},
columnResize: function(e) {
gridColumnResize(e);
},
databound: function(e) { }
});
return grid;
}
I have a KendoUI Grid that is working just fine but I cannot add background color to rows.
I found some code that is supposed to iterate over the rows, but when I run it it simply goes in an infinite loop.
There are many posts about this topic but most of them are far more complex than I would like.
Any help would be greatly appreciated.
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "jsonp",
transport: {
read: "XXXX.xpRest.xsp/xpRest1"},
pageSize: 20},
batch: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
pageSize: 15,
height: 543,
selectable : true,
columns : [{
field : "name",
title : "Name"
},{
field : "strDate",
title : "Start Date",
width : 150
},{
field : "$10",
title : "End Date Date",
width : 150
}],
dataBound: function () {
dataView = this.dataSource.view();
//<!-- for (var i = 0; i < dataView.length; i++) {-->
//<!-- if (i = 0) {-->
//<!-- var uid = dataView[i].uid;-->
//<!-- $("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("onCall"); //alarm's in my style and we call uid for each row-->
//<!-- }-->
//<!-- }-->
}
});
});
dataBound: function (e) {
// Color rows
var rows = e.sender.tbody.children();
for (var j = 0; j < rows.length; j++) {
var row = $(rows[j]);
row.css('background-color', '#FFFFE0');
}
}
I am using the Basic Grid example from jqGrid Demos:
jQuery("#rowed1").jqGrid(
{
url : 'clientArray',
datatype : "local",
colNames : [ 'Inv No', 'Date', 'Client', 'Amount', 'Tax',
'Total', 'Notes' ],
colModel : [ {
name : 'id',
index : 'id',
width : 55,
editable : true,
key: true
}, {
name : 'invdate',
index : 'invdate',
width : 90,
editable : true
}, {
name : 'name',
index : 'name',
width : 100,
editable : true
}, {
name : 'amount',
index : 'amount',
width : 80,
align : "right",
editable : true
}, {
name : 'tax',
index : 'tax',
width : 80,
align : "right",
editable : true
}, {
name : 'total',
index : 'total',
width : 80,
align : "right",
editable : true
}, {
name : 'note',
index : 'note',
width : 150,
sortable : false,
editable : true
} ],
rowNum : 10,
rowList : [ 10, 20, 30 ],
pager : '#prowed1',
sortname : 'id',
viewrecords : true,
sortorder : "desc",
editurl : "clientArray",
caption : "Basic Example"
});
jQuery("#rowed1").jqGrid('navGrid', "#prowed1", {
edit : false,
add : false,
del : false
});
The following events to handle the user clicks on edit, save, and cancel buttons:
jQuery("#ed1").click(function() {
var id = jQuery('#rowed1').jqGrid('getGridParam','selrow');
jQuery("#rowed1").jqGrid('editRow', id);
this.disabled = 'true';
jQuery("#sved1,#cned1").attr("disabled", false);
});
jQuery("#sved1").click(function() {
var rowid = jQuery('#rowed1').jqGrid('getGridParam','selrow');
alert('id: ' + rowid);
jQuery("#rowed1").jqGrid('saveRow', rowid , false );
jQuery("#sved1,#cned1").attr("disabled", true);
jQuery("#ed1").attr("disabled", false);
jQuery("#aded1").attr("disabled", false);
});
jQuery("#cned1").click(function() {
var id = jQuery('#rowed1').jqGrid('getGridParam','selrow');
jQuery("#rowed1").jqGrid('restoreRow', id);
jQuery("#sved1,#cned1").attr("disabled", true);
jQuery("#ed1").attr("disabled", false);
jQuery("#aded1").attr("disabled", false);
});
jQuery("#aded1").click(function() {
jQuery("#rowed1").jqGrid('addRow', 'new');
this.disabled = 'true';
jQuery("#sved1,#cned1").attr("disabled", false);
});
And the html of the buttons:
<input type="BUTTON" id="aded1" value="Add Row" />
<input type="BUTTON" id="ed1" value="Edit row 3" />
<input type="BUTTON" id="sved1" disabled='true' value="Save row 3" />
<input type="BUTTON" id="cned1" disabled='true' value="Cancel Save" />
But the grid is not working properly because:
After saving a new row it keeps selected and I can't select others.
When I cancel the editing of a row, it deletes a few other rows.
When I click for second time
the add new row button, google chrome debugger console displays the error: Uncaught TypeError: Cannot read property 'name' of undefined
I am almost sure that it has something to do with the new row id, but after 2 days of trying I would appreciate a little help, thanks in advance
You are passing the wrong parameters to addRow. From the jqGrid documentation for addRow:
Calling convention:
jQuery("#grid_id").jqGrid('addRow',parameters);
where parameters is a object and has the following default values:
parameters =
{
rowID : "new_row",
initdata : {},
position :"first",
useDefValues : false,
useFormatter : false,
addRowParams : {extraparam:{}}
}
Also, you will want to set rowID equal to a new value each time. You can either do this explicitly or you can set it to undefined to let jqGrid assign a random ID to each new row.
For example:
jQuery("#aded1").click(function() {
var parameters = {
rowid : undefined,
initdata : {},
position :"first",
useDefValues : false,
useFormatter : false,
addRowParams : {extraparam:{}}
};
jQuery("#rowed1").jqGrid('addRow', parameters);
});