JQGrid - How can I Create Check box in Navigation to Trigger Multiselect or SingleSelect - jqgrid

function bind_single_select() {
if (!$("input#single").length > 0) {
$("span.single_select").prepend("<input type='checkbox' name='single' id='single' checked='checked' style='vertical-align:middle' />");
}
$("table#gridTable").find("tr").click(function () {
if ($("input#single").attr("checked")) {
$(".trSelected").removeClass("trSelected");
$(this).addClass("trSelected");
}
});
}
I found this in Flexigrid but in JQGrid How can I do it.
Another Question :
.navButtonAdd('#pager',
{ caption: "Add",
buttonimg: "/Areas/Pages/Content/Images/add.png",
onClickButton: function () {
PopupCenter('<%= Url.Action("CreatePublisher","Publisher") %>',
'CreatePublisher', '500', '300');
}, position: "last"
})
the buttonimg is not work even I use
ui-icon-plus
Thanks in Advance.

The second part of your question is very easy to answer. The parameter buttonimg is no more supported in the navButtonAdd function. You should use buttonicon instead. An example you can find here. In general as a value of buttonicon you can use any from the jQuery UI Framework Icons.
To toggle multipleSearch parameter you can just define search parameters of navGrid separately and toggle the value of the multipleSearch property. To make all more easy I suggest to use an additional parameter recreateFilter:true.
var grid = jQuery('#list');
var pSearch = { multipleSearch:false, recreateFilter:true };
grid.jqGrid({
// all jqGrid parameters
}).jqGrid ('navGrid', '#pager', {edit:false, add:false, del:false, refresh:true, view:false},
{},{},{},pSearch));
$("#pager_left table.navtable tbody tr").append ( // here 'pager' part or #pager_left is the id of the pager
'<td><div><input type="checkbox" class="myMultiSearch" id="navMultiSearch"/>Multi-Search</div></td>');
$(".myMultiSearch").change(function() {
if ($(this).is(':checked')) {
pSearch.multipleSearch = true;
$(".myMultiSearch").attr("checked","checked");
}
else {
pSearch.multipleSearch = false;
$(".myMultiSearch").removeAttr("checked");
}
});
On the small demo I inserted both internal and external checkboxes to the navigation bar and a custom button additionally:

Related

Kendo grid change indicator and cancel not working

I'm new to Kendo and the Kendo grid but I'm trying to learn how to use the master detail Kendo grid where the detail grid is supposed to support batch editing. The data is available in a local JavaScript object.
This jsFiddle demonstrates the problems I'm seeing.
Here's how the grid is being created - see the jsFiddle for the complete snippet -
$("#grid").kendoGrid({
dataSource: items,
detailInit: createDetail,
columns: [
{ field: "Item", width: "200px" },
]
});
function createDetail(e) {
$("<div/>")
.appendTo(e.detailCell)
.kendoGrid({
dataSource: {
batch:true,
transport: {
read: function (options) {
options.success(e.data.SubItems);
}
}
},
editable:true,
pageable:true,
toolbar: ["save", "cancel"],
columns: [
{ field: "SubItem", title: "Sub Item", width: 200 },
{ field: "Heading1", title: "Heading 1", width: 100 }
]
});
}
When you edit an item in the grid and click to the next cell, the details grid automatically collapses not matter where I click, even in an adjacent cell. When I open it again, I don't see the change indicator in the cell (red notch) but the new value is there.
If I were to hook up the save to an ajax call, Kendo sends the right detail item(s) that were edited.
Nothing happens when I click cancel changes.
How do I get the grid to not collapse and see the change indicators ?
How do I get canceling of changes to work correctly ?
[Update] - Further investigation reveals that if I use an older Kendo version 2011.3.1129 , this works as expected. But if I use the newer 2012.3.1114, it doesn't. Dont know if this is a bug or a change in behavior.
After much effort, I found that the cause seems to be that the master grid is rebinding automatically causing the behavior I observed. I was able to get around this by handling the dataBinding event in the master grid and within that, checking if any of the detail datasources were dirty and if so, calling preventDefault.
Here are relevant code snippets :
dataBinding: function (e) {
if (masterGrid.AreChangesPending()) {
e.preventDefault();
}
}
AreChangesPending : function () {
var pendingChanges = false;
// I gave each detail div an id so that I can get a "handle" to it
$('div[id^="detail_"]').each(function (index) {
var dsrc = $(this).data("kendoGrid").dataSource;
$.each(dsrc._data, function () {
if (this.dirty == true || this.isNew()) {
pendingChanges = true;
}
});
// For some reason, Kendo did not detect new rows in the isNew()
// call above, hence the check below
if (dsrc._data.length != dsrc._total) {
pendingChanges = true;
}
});
return pendingChanges;
}

in extjs how to bind store to view which is included as item in other view

i am working in extjs. i have view as-
QbqnsResultmain.js
Ext.define('Balaee.view.qb.qbqns.QbqnsResultmain',
{
extend:'Ext.form.Panel',
requires:[
'Balaee.view.qb.qbqns.QbqnsResult'
],
id:'QbqnsResultmainId',
alias:'widget.QbqnsResultmain',
title:'Result',
height:400,
items:[
{
xtype:'QbqnsResult',
},
],
buttons:[
{
xtype:'button',
fieldLabel:'review',
action:'getreview',
name:'review',
formBind:true,
text:'Review',
},
{
xtype:'button',
fieldLabel:'papers',
action:'getpapers',
name:'papers',
formBind:true,
text:'Get all papers',
},
]});
and QbqnsResult.js-
Ext.define('Balaee.view.qb.qbqns.QbqnsResult',
{
extend:'Ext.view.View',
id:'QbqnsResultId',
alias:'widget.QbqnsResult',
//store:'kp.PollStore',
store:'qb.QbqnsStore',
config:
{
tpl:'<tpl for="1">'+
'<div id="main">'+
'</br>'+
//'<b>Question :-</b></br>'+
'<h1 id="q">Total number of Questions are:-</h1>{TotalQuestions}</br>'+
'<h1 id="q">Number of attempted Questions:-</h1> {Attempted}</br>'+
'<h1 id="q">Number of correct answers:-</h1> {CorrectAnswers}</br>'+
'<h1 id="q">Total score:-</h1> {Total}</br>'+
'<h1 id="q">Score you got is:-</h1> {Score}</br>'+
'<h1 id="q">percentage you got is:-</h1> {percentage}</br>'+
'<p>---------------------------------------------------------</p>'+
'</div>'+
'</tpl>',
itemSelector:'div.main',
}
});
On click of submit button,i want to show above view. So i had written code in controller as-
check:function()
{
var resultStore=Ext.create('Balaee.store.qb.QbqnsStore');
proxy=resultStore.getProxy();
Ext.apply(proxy.api,{
read:'index.php/QuestionBank/qbpaper/getResult',
create:'index.php/QuestionBank/qbpaper/getResult'
});
Ext.apply(proxy.reader,{
type:'json',
//root:'polls',
root:'questions'
});
Ext.apply(proxy.writer,{
type:'json',
//root:'polls',
root:'data'
});
var getdata=this.getLocalvalue();
console.log(getdata.data);
Paperno=getdata.data.questionPaperNo;
UserId=getdata.data.userId;
var answers = '{"data":[';
answers = answers + '{"paperNo":"'+Paperno+'","userId":"'+UserId+'"}';
answers =answers+']}';
console.log(answers);
resultStore.load({
params:{
data: answers
},
callback: function(records,operation,success){
console.log(records);
console.log("Successfully data send");
},
scope:this
});
var temp= Ext.getCmp('qbqnsId');
temp.removeAll();
var worldChaptor3 =temp.add({xtype:'QbqnsResultmain',
id:'QbqnsResultmainId',
store:resultStore});
},
So i want to bind resultStore to QbqnsResult view's tpl which i have included as xtype in QbqnsResultmain view. But resultStore get binded to Qbqnsresultmain view but not to Qbqnsresult which is included as item in it by means of its xtype. So how to bind store to it. Can someone guide me
One way to do it can be:
var worldChaptor3 =temp.add({xtype:'QbqnsResultmain',
id:'QbqnsResultmainId',
store:resultStore});
worldChaptor3.down('QbqnsResultmain > QbqnsResult').bindStore(resultStore);
But, it would be better if you do it in your QbqnsResultmain, i'll do it on the afterrender event, that way, you can bind the store automatically on creation.

editdata jqgrid transfer data edit

Here is code my jqgrid editing through form.
$("#DataEnergy").jqGrid('navGrid', '#pagergrid',
{}, //options
{editdata: { id_res: $('#resurs').val(), id_obj: readCookie('id_obj')} },// add options
{editdata: { id_res: $('#resurs').val(), id_obj: readCookie('id_obj')} }, // edit options
{editdata: { id_res: $('#resurs').val(), id_obj: readCookie('id_obj')} }, // del options
{} // search options
);
When editing, the data the editdata must be sent in the post request.
Why is not there why?
First of all you should use correct names of parameters: editData and delData (the case is very important in JavaScript).
The next problem is that the call of navGrid will be executed once, but you want probably to have the values of $('#resurs').val() and readCookie('id_obj') at the moment of editing/ading/deliting. To fix the problem you can use function (methods) inside of editData and delData:
var myData = {
id_res: function () { return $('#resurs').val(); },
id_obj: function () { return readCookie('id_obj'); }
};
$("#DataEnergy").jqGrid('navGrid', '#pagergrid',
{}, // navGrid options
{ editData: myData }, // add options
{ editData: myData }, // edit options
{ delData: myData }, // del options
);
For more information see some other old answers: this, this, this, this

JQGRID - Prevent adding empty row after execution of afterSubmit

I have a grid where I put a custom button in the navgrid for inserting totally different data in another table so I used editGridRow("new",…) where in the php url I just post data to a different table. Actually I am stuck with the issue if I submit the form, even if I settled reloadAfterSubmit:false, it add a new empty row in the grid…
You can see the piece of code here:
jQuery("#"+child_table_id).navButtonAdd("#"+pager_id,
{
caption:"Insert",buttonicon:"ui-icon-arrow-1-se",
onClickButton:function(){
var rows = jQuery("#"+child_table_id).getRowData();
if ( rows.length != 0 ) {
jQuery("#"+child_table_id).editGridRow("new",{height:140,width:420,url:"http://.../edit_datatable.php?table_name=mytable&fact=insert&q=1&flag=yes&ref_id="+id_row,
reloadAfterSubmit:false,
recreateForm:true,
closeOnEscape:true,
closeAfterAdd:true,
addCaption:'Insert',
savekey: [true,13],
bSubmit:'Save',
afterSubmit:function(response, postdata){ alert('inserting to a total different table...'); return {0:true} }
});
}
},
position:"last",
title:"Insert new step...",
cursor:"pointer"
});
I tried even to add:
onClickButton:function(){ $("#"+child_table_id).setGridParam({ datatype: 'local' }); }
afterSubmit:function(response, postdata){ return {0:true} },
onclickSubmit : function(params, posdata) {return {0:true} },
afterComplete:function(response, postdata, formid) { $("#"+child_table_id).setGridParam({ datatype: 'json' }); }
but it added anyway a row in the grid…
So how I can prevent jqGrid to add a new empty grid and refreshing the grid?…
You wrote about "inserting totally different data in another table", but you add button to the navigator bar of the grid "#"+child_table_id and your code inside of onClickButton callback adds new row to the same grid:
jQuery("#"+child_table_id).navButtonAdd("#"+pager_id, { ...
onClickButton:function(){
...
jQuery("#"+child_table_id).editGridRow("new", ...
}
});
If you really want to add new row to another grid you should use id of another in the editGridRow (like jQuery("#"+another_table_id).editGridRow("new",...).

Custom Event For Custom JQuery Plugin

I made this jQuery plugin called removable when you click the objects button it slides up and should trigger a custom event like onDone.
Here's what I did (The codeing format is based on jQuery's http://docs.jquery.com/Plugins/Authoring):
init: function(){
return this.each(function(){
$('a', this).click(function(){
$(this).parent().slideUp(function(){
// Somehow trigger the onDone method
})
});
})
},
onDone: function(){
// Default action
},
and this is what I've done when calling the plugin
$('li').removable({
onDone: function(){
// Overwrite default action
},
})
How can this be done?
If all you need is to call it at the end of the animation, just pass it as the second argument to slideUp or even just call it with $(foo).MyPlugin.onDone() inside the callback function.
otherwise look at trigger and bind jQuery functions - you can use any string you want for those event types so you can trigger and bind a MyPluginDone event
EDIT: based on comments you want something simpler -
As it states in the article you quoted, the best way to provide override-able defaults to options is to have your plugin accept an options object, then to get the combined defaults+overrides you do:
var combinedOpts = $.extend({},defaults,overrides);
and get all the values to use from there...
Try this one.
(function($){
jQuery.fn.extend({
removable: function(options) {
var defaults = {
onDone: function(){alert('default action');}
};
var options = $.extend(defaults, options);
return this.each(function() {
$('a', this).click(function(){
$(this).parent().slideUp(function(){
options.onDone.call();
});
});
});
}
});
})(jQuery);
$('li').removable({
onDone: function(){
alert('Overwrite default action');
},
})

Resources