This is the grid view showing all records on grid here, but i don't want show in the grid all records?
When ever i click events like add,edit,view,in that time shows the all records...
Suppose showing' Total' in my grid ,,Total is showing only when i click add ,edit ,view
Not in the grid view
colModel:[
{name:'empId',index:'empId',width:3,editable:true,editoptions:{readonly:false,view:true},editrules:{required:false},key:true,formoptions:{rowpos:2,elmprefix:" " }},
{name:'empName',index:'empName',width:3,editable:true,editrules:{required:true},formoptions:{rowpos:3,elmprefix:" " }}]
jQuery("#taskDetails").jqGrid('navGrid','#pagernavTask',{add:true,edit:true,del:true,refresh:true,view:true,search:false})
This is my code...suppose if i add id,name (editable:true) it show dialogue box 2 feilds ..and also it shows in grid view also ,,but and don't want to display in the grid view displays ,it show only when i click edit,add,view (show in dialogue boxes)..Is it possible ????Please reply for this answer
Please any one give me the answer
Thanks in adavance
hiding a column can be done by using hidden: true in your colModel. Moreover by using beforeshowform in your add ,edit ,view u can customize ur own way of showing / hiding a column. For advance details Hidden Columns in jqGrid.
UPDATE
here i hide EmpId by using hidden:true in my colmodel. it can be shown in Add dialog by using beforeshowform event. Same way i have shown empName in Grid but hidden in edit dialog. hope u can understand now.
$(function() {
var grid = $('#MyJqGrid');
var mydata = [
{empId:"1",empName:"alpha",notes:"NA"},
{empId:"2",empName:"beta",notes:"Null"},
{empId:"3",empName:"gamma",notes:"N/A"},
{empId:"4",empName:"delta",notes:"Null"},
{empId:"5",empName:"theta",notes:"aaaa"},
];
grid.jqGrid({
data: mydata,
datatype: "local",
colNames:['empId','empName', 'Notes'],
colModel:[
{name:'empId',index:'empId',sortable:true, editable:true, hidden: true,}, // here field is hidden in grid
{name:'empName',index:'empName',editable:true, sortable: true, hidden: false,}, // here field is shown in grid
{name:'notes',index:'notes',editable:true, sortable: true,},
],
height: "auto",
width : "auto",
pager:'#Mypager',
viewrecords : true,
rowNum: 5,
sortname: "empId",
sortorder :"asc",
rowList:[2,3,5],
caption : "My JqGrid Test",
}).jqGrid('navGrid','#Mypager',{
edit: true,
add: true,
del: false,
search: false,
view: false,
},
{
//Edit Form
beforeShowForm: function(form){
$('#tr_empName',form).hide(); //In Edit form empName is Hidden, initially shown
}
},
{
//Add Form
beforeShowForm: function(form){
$('#tr_empId',form).show(); //In add form EmpId is shown, initially hidden
//$('#tr_empName',form).hide();
},
});
});
Related
When I use celltemplate for ahref link, once the link is clicked the row highlights because i have RowSelection enabled...but i dont want the row to highlight when the link is clicked..only if the row is clicked anywhere but the link.
Also in my below example picture, how do I remove the little arrow so no Menuitems can be displayed for that column?
Code:
$scope.gridOptions = {
showFooter: true,
enableFiltering: true,
enableRowSelection: true,
enableRowHeaderSelection: false,
enableSelectAll: true,
multiSelect: true,
enableColumnResizing: true,
columnDefs: [
{ field:'date', displayName: 'Date', width: 200, aggregationType: uiGridConstants.aggregationTypes.count },
{ field:'notes', displayName: 'Notes', width: 65, enableFiltering: false, enableSorting: false, enableHiding: false, cellTemplate:'View' }
],
data: data
}
Pic:
Here is a possible answer to ui-grid (which is not ng-grid anymore!).
The cell template for a button that does not select the row is:
cellTemplate: '<button class="btn primary" ng-click="$event.stopPropagation();getExternalScopes().showMe(row)">Click Me</button>'
Note the $event.stopPropagation() in the ng-click directive. This will hinder the click to reach the underlying functions of the rowTemplate.
(Note also that I didn't found another way to pass a click event to the controller than by using externalScopes. I'm sure there is a better way but ui-grid is still beta and I'm also pretty new to it)
Second part of your question: Use this headCellTemplate
var headCelltpl = '<div ng-class="{ \'sortable\': sortable }">' +
'<div class="ui-grid-vertical-bar"> </div>' +
'<div class="ui-grid-cell-contents" col-index="renderIndex">' +
'{{ col.displayName CUSTOM_FILTERS }}' +
'</div>' +
'</div>';
and add it to the respective columns in your columnDefs.
headerCellTemplate: headCelltpl
Here is a Plunker with everything included.
Please don't tell me you meant ng-grid:-)
The simple solution is change the row.setSelected to false
cellTemplate: '<button class="btn primary" ng-click="grid.appScope.deSelectRow(row)">Click Me</button>'
$scope.deSelectRow = function(row) {
row.setSelected(false);
};
I have to display an add modal form when the page loads. I do so thusly:
$('#lst_totals').jqGrid('editGridRow','new');
Problem is, I don't know how to set the navgrid when I call it in this way. I set the options on the add modal form in the navgrid like this:
// add options
{ bSubmit: "Add",
width: 350,
recreateForm: true,
recreateFilter: true,
closeOnEscape: true,
closeAfterAdd: true,
editData: { action:'grdTotals' },
},
But these properties are not set for the add modal form I called when the page loads. They only apply to add modal forms that are shown when the add button is clicked. How do I apply options to modal forms that are called from outside of the jqGrid?
Here's the solution. It's as simple as I knew it would be:
$('#lst_totals').jqGrid('editGridRow','new',
{ bSubmit: "Add",
width: 350,
recreateForm: true,
recreateFilter: true,
closeOnEscape: true,
closeAfterAdd: true,
editData: { action:'grdTotals' },
}
);
Basically, since I'm creating a new modal form that's not really part of the navgrid, I have to give it the properties I want it to have. Above, the 'editGridRow' accepts a third parameter {} which can contain these properties.
I have a checkbox for each row within a kendo grid. If the user sorts or filters the grid, the checkmarks are cleared from the checkboxes. How can I prevent the checkboxes from unchecking or re-check them after the sort or filter occurs? Please refer to the following js fiddle to observe the behavior during sorting:
http://jsfiddle.net/e6shF/33/
Here's the code on the jsfiddle for reference (...needed to ask this question):
$('#grid').kendoGrid({
dataSource: { data: [{id:3, test:'row check box will unchecked upon sorting'}]},
sortable: true,
columns:[
{
field:'<input id="masterCheck" class="check" type="checkbox" /><label for="masterCheck"></label>',
template: '<input id="${id}" type="checkbox" />',
filterable: false,
width: 33,
sortable: false // may want to make this sortable later. will need to build a custom sorter.
},
{field: 'test',
sortable: true}
]});
basically the selection is cleared each time because the Grid is redrawn. You can store the check items in an array or object and when the Grid is redrawn (dataBound event) you can mark them again as checked.
To simplify things here is an updated version of you code. Also use the headerTemplate option to set header template - do not name your field like template instead.
var array = {};
$('#grid').kendoGrid({
dataSource: { data: [{id:3, test:'row check box will unchecked upon sorting'}]},
sortable: true,
dataBound:function(){
for(f in array){
if(array[f]){
$('#'+f).attr('checked','checked');
}
}
},
columns:[
{
headerTemplate:'<input id="masterCheck" class="check" type="checkbox" /><label for="masterCheck"></label>',
template: '<input id="${id}" type="checkbox" />',
filterable: false,
width: 33,
sortable: false // may want to make this sortable later. will need to build a custom sorter.
},
{field: 'test',
sortable: true}
]});
var grid = $('#grid').data().kendoGrid;
$('#grid tbody').on('click',':checkbox',function(){
var id = grid.dataItem($(this).closest('tr')).id;
if($(this).is(':checked')){
array[id] = true;
}else{
array[id] = false;
}
})
Link to the fiddle
If you are not too concerned about old browsers HTML5 storage might work for you
http://www.w3schools.com/html/html5_webstorage.asp
And of course jQuery comes with its own data storage capability.
I am working with the Kendo UI Grid. This is my code:
<body>
<div id="myGrid"></div>
<script type="text/javascript">
$(function(){
var rows = [
{name: "name001", id: "001", group: "G1"},
{name: "name002", id: "002", group: "G1"},
{name: "name003", id: "003", group: "G2"},
{name: "name004", id: "004", group: "G2"},
];
var myDataSource =
new kendo.data.DataSource({
data: rows,
pageSize: 3,
});
myDataSource.read();
$("#myGrid").kendoGrid({
dataSource: myDataSource,
columns: [
{field:"name", title:"The Name"},
{field:"id", title:"The Id"},
{field:"group"},
{command:["edit", "destroy"]}
],
scrollable: false,
pageable: true,
sortable: true,
groupable: true,
filterable: true,
editable: "inline"
});
});
</Script>
</body>
But the edit is not working. Opening this grid in a browser gives me a grid that looks as expected with an Edit and a Delete button. I can delete rows with the Delete button. But clicking Edit changes the row into edit mode (with input fields in cells) but changing a value and pressing the Update button does nothing. The row remains in edit mode and the Update button doesn't switch back to "Edit" as it's supposed to.
Can you tell me what's missing? Do I have to configure my datasource somehow?
Yes you missed to configure your Grid's dataSource to know how to update the records. I assume that you want to edit the records only locally (on the client) - without sending them to the server. To actually close the Grid and apply the changes you can use the save event of the Grid and the refresh method.
Here is a jsbin with your case.
If you want to save these changes to the server I suggest you to start with the demos.
I am use jqGrid. I want to add record inline navigation
so this link http://www.trirand.com/blog/jqgrid/jqgrid.html?
when i click in ADD new row icon in navbar. Grid is like view modal view.
<div id="pager"></div>
<table id="ward"></table>
<br />
<script src="js/rowedex3.js" type="text/javascript"> </script>
<script type="text/javascript">
jQuery("#ward").jqGrid({
mtype : 'GET',
url : "listAllWards.html",
datatype : "json",
colNames : [ 'Id', 'Ward Type', 'Description'],
colModel : [ {
name : 'id',
index : 'id',
editable:true,
width : 50
}, {
name : 'name',
index : 'name',
width : 150,
editable:true,
}, {
name : 'decsription',
index : 'decsription',
width : 100,
editable:true,
}],
rowNum : 5,
rowList : [ 5, 10, 30 ],
pager : '#pager',
sortname : 'id',
viewrecords : true,
sortorder : "desc",
caption : "Ward's List",
width : 940,
cellEdit : true,
editurl: "server.html",
});
jQuery("#ward").jqGrid('navGrid', '#pager', {
edit : false,
del : false,
search :false,
});
</script>
If you want to use inline editing for add the row you should use add: false option of navGrid (together with edit: false which you already use) and you should include call of inlineNav after calling of navGrid. You can choose the buttons added by inlineNav by the usage of corresponding options of inlineNav described in the documentation.
UPDATED: You have to remove cellEdit : true option from jqGrid because the usage of both cell editing and inline editing is not supported.
Additionally you have to rename id column to any other name if you need to edit the grid. See the second part on the answer for additional details.
I recommend you to place the whole JavaScript code inside of $(function(){...}); and move it inside of <head>.
You should verify that you use current (now 4.4.1) version of jqGrid.