I am struggling to select, and manipulate, the dropdown from the jqGrid.
jQuery("#grid")...
colModel: [...
{ name: 'StateId', index: 'StateId', width: 350, align: 'center', stype: 'select',
edittype: 'select', searchoptions: { sopt: ['eq'] },
editoptions: { value: controllerMethods.GetStates()} },...
.
.
.
jQuery("#grid").jqGrid('filterToolbar', { stringResult:true, searchOnEnter:false });
I simply need to be able to set a default selected value of the dropdown control and I am unable to achieve that :(
Any help is appreciated!
You can use an additional searchoptions option
searchoptions:{
dataInit:function(el){
$("option:contains("+defaultCategory+")",el).attr("selected", "selected");
setTimeout(function(){
$(el).trigger('change');
},500);
}
}
where defaultCategory is the option which you want have default. See small demo here.
I believe I found the way:
var stateIdDropDown = $('#gs_StateId');
In this case the gs_StateId is the DOM Id of the element (found out by the help of Firebug).
However, please reply If someone knows of a way on how to select the element in the following fashion:
var stateIdDropDown = $('#myGrid>whatever...StateId');
Thanks everyone.
Appendix 1:
.
.
.
//Preset default search filter.
SetGridSearchDefaults: function (grid)
{
var gridInfo = new Object();
var postData = grid.jqGrid('getGridParam', 'postData');
if (postData.filters==null)
{
postData.filters = '{"groupOp":"AND","rules":[{"field":"StateId","op":"eq","data":"1"}]}'
grid.jqGrid('setGridParam', { postData: postData });
}
},
//Pre-Select dropdowns.
PreSelectDropDowns: function ()
{
$('select#gs_StateId').val('1');//Status New
},
.
.
.
The SetGridSearchDefaults is called on Grid's beforeRequest event!
The PreSelelectDropDown is called on Grid's gridComplete event, please not the snippet!
jQuery("#grid").jqGrid({
.
.
.
gridComplete: function () {
if (firstLoad == true) {
commonMethods.PreSelectDropDowns(); //Pre-Select filter dropdowns.
firstLoad = false;
}
.
.
.
In this way I have managed to preserve the MVC pattern by forcing the GUI to drive the controller, i.e. I set the default search criteria at the GUI level.
Related
I'm loading several Selectize select inputs in one page, like this:
var selectizeInput = [];
$('.select-photo-id').each(function (i) {
var selectedValue = $(this).val();
selectizeInput[i + 1] = $(this).selectize({
'maxOptions': 100,
'items': [selectedValue],
'onType': function (input) {
$.post("admin/ajax/search_photos_for_postcards",
{input: input},
function (data) {
$(this).addOption(data);
$(this).refreshOptions();
}, 'json');
}
});
});
The event onType makes a function call that returns a list of new options which I want to make available right away in the Selectize input. Is there any way to call the Selectize instance from there? As you can see from the code, I tried accessing it with $(this), but it fails. I also tried with $(this).selectize, but it's the same. Which is the correct way to do it?
I managed to fix it:
'onType': function (input) {
var $this = $(this);
$.post("admin/ajax/search_photos_for_postcards",
{input: input},
function (data) {
$this[0].addOption(data);
$this[0].refreshOptions();
}, 'json');
}
You probably want to use the load event provided by the Selectize.js API as seen in the demos. Scroll until you find "Remote Source — Github" and then click "Show Code" underneath it.
I have added a common Surface and a Scrollview (actually a FlexScrollView) to a SequentialLayout and then added the layout to my View as the following code shows:
function _createCameraView() {
var layoutViews = [];
this.cameraView = new View({
size: [undefined, this.options.footerSize]
});
var layout = new SequentialLayout({
size: [undefined, this.options.footerSize],
direction: Utility.Direction.Y
});
var backgroundSurface = new Surface({
size: [undefined, 120],
content: 'some content',
classes : ['photo-guide-content'],
properties: {
backgroundColor: 'transparent',
zIndex: 4
}
});
// detail list
var detailsList = new FlexScrollView({
layout: ListLayout,
direction: Utility.Direction.X, // set direction to horizontal
paginated: true,
//autoPipeEvents: true,
useContainer: true,
container : {
size: [undefined, 60],
properties : {
'z-index' : 5,
}
}
});
layoutViews.push(backgroundSurface);
layoutViews.push(detailsList);
layout.sequenceFrom(layoutViews);
this.cameraView.add(alignModifier).add(layout);
}
Then I've added a RenderController on another view and I'm using it to display my cameraView like this:
function _selectCamera() {
if (!this.cameraView) {
_createCameraView.call(this);
}
this.footerRender.hide(this.mapView);
this.footerRender.show(this.cameraView);
}
I know I don't need to call the hide method from the render on the function above, just the show method and it should swap the views with a smooth opacity transition, which is defined by default. Although when using this Sequential Layout I'm not getting this effect. I know it has to do with this layout because I've tried to switch the layout to a FlexibleLayout and a GridLayout, and it works fine with these two. So, my question is, why doesn't work with the SequentialLayout? I've also noticed it has a method called setOutputFunction(outputFunction), is there a way to use it so the layout uses the opacity returned from the RenderController or how can it be fixed some other way?
Try adding a getSize method to your view.
Something like this:
this.cameraView.getSize = function() {
return [undefined, undefined];
};
My auto YUI autocomplete zindex is off. How can I force the autocomplete DIV to the top.
Below I am using a standard template for YUI:
YAHOO.util.Event.onDOMReady(function(){
YUI().use("autocomplete", "autocomplete-filters", "autocomplete-highlighters", function (Y) {
var inputNode = Y.one('#name'),
tags = [
'css',
'css3',
'douglas crockford',
'ecmascript',
'html',
'html5',
'java',
'javascript',
'json',
'node.js',
'pie',
'yui'
],
lastValue = '';
inputNode.plug(Y.Plugin.AutoComplete, {
activateFirstItem: true,
minQueryLength: 0,
queryDelay: 0,
source: tags,
resultHighlighter: 'startsWith',
resultFilters: ['startsWith']
});
// When the input node receives focus, send an empty query to display the full
// list of tag suggestions.
inputNode.on('focus', function () {
inputNode.ac.sendRequest('');
});
// When there are new AutoComplete results, check the length of the result
// list. A length of zero means the value isn't in the list, so reset it to
// the last known good value.
inputNode.ac.on('results', function (e) {
if (e.results.length) {
lastValue = inputNode.ac.get('value');
} else {
inputNode.set('value', lastValue);
}
});
// Update the last known good value after a selection is made.
inputNode.ac.after('select', function (e) {
lastValue = e.result.text;
});
});
});
Simply to put the z-index in the css. Setting via JS used to be allowed, but as of YUI 3.4.0 it's a css-only flag (https://github.com/yui/yui3/blob/master/src/autocomplete/HISTORY.md).
The relevant CSS is (adjust your z-index as necessary):
.yui3-aclist { z-index: 100; }
PS., your YAHOO. line is from YUI2, so that is quite peculiar and definitely not a standard template.
By the time your callback in the YUI().use(...) section is called, the dom should be ready. No ondomready required.
In trying to implement a filterToolbar search in jquery, but when I write in the textbox it doesnt send the value, the search field nor the operator: I used an example, here is the code in html file
jQuery(document).ready(function () {
var grid = $("#list");
$("#list").jqGrid({
url:'grid.php',
datatype: 'xml',
mtype: 'GET',
deepempty:true ,
colNames:['Id','Buscar','Desccripcion'],
colModel:[
{name:'id',index:'id', width:65, sorttype: 'int', hidden:true, search:false},
{name:'examen',index:'nombre', width:500, align:'left', search:true},
{name:'descripcion',index:'descripcion', width:100, sortable:false, hidden:true, search:false}
],
pager: jQuery('#pager'),
rowNum:25,
sortname: 'nombre',
sortorder: 'asc',
viewrecords: true,
gridview: true,
height: 'auto',
caption: 'Examenes',
height: "100%",
loadComplete: function() {
var ids = grid.jqGrid('getDataIDs');
for (var i=0;i<ids.length;i++) {
var id=ids[i];
$("#"+id+ " td:eq(1)", grid[0]).tooltip({
content: function(response) {
var rowData = grid.jqGrid('getRowData',this.parentNode.id);
return rowData.descripcion;
},
open: function() {
$(this).tooltip("widget").stop(false, true).hide().slideDown("fast");
},
close: function() {
$(this).tooltip("widget").stop(false, true).show().slideUp("fast");
}
}).tooltip("widget").addClass("ui-state-highlight");
}
}
});
$("#list").jqGrid('navGrid','#pager',{edit:false,add:false,del:false});
$("#list").jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false,
defaultSearch: 'cn', ignoreCase: true});
});
and in the php file
$ops = array(
'eq'=>'=', //equal
'ne'=>'<>',//not equal
'lt'=>'<', //less than
'le'=>'<=',//less than or equal
'gt'=>'>', //greater than
'ge'=>'>=',//greater than or equal
'bw'=>'LIKE', //begins with
'bn'=>'NOT LIKE', //doesn't begin with
'in'=>'LIKE', //is in
'ni'=>'NOT LIKE', //is not in
'ew'=>'LIKE', //ends with
'en'=>'NOT LIKE', //doesn't end with
'cn'=>'LIKE', // contains
'nc'=>'NOT LIKE' //doesn't contain
);
function getWhereClause($col, $oper, $val){
global $ops;
if($oper == 'bw' || $oper == 'bn') $val .= '%';
if($oper == 'ew' || $oper == 'en' ) $val = '%'.$val;
if($oper == 'cn' || $oper == 'nc' || $oper == 'in' || $oper == 'ni') $val = '%'.$val.'%';
return " WHERE $col {$ops[$oper]} '$val' ";
}
$where = ""; //if there is no search request sent by jqgrid, $where should be empty
$searchField = isset($_GET['searchField']) ? $_GET['searchField'] : false;
$searchOper = isset($_GET['searchOper']) ? $_GET['searchOper']: false;
$searchString = isset($_GET['searchString']) ? $_GET['searchString'] : false;
if ($_GET['_search'] == 'true') {
$where = getWhereClause($searchField,$searchOper,$searchString);
}
I saw the query, and $searchField,$searchOper,$searchString have no value
But when I use the button search on the navigation bar it works! I dont konw what is happening with the toolbarfilter
Thank You
You use the option stringResult: true of the toolbarfilter. In the case the full filter will be encoded in filters option (see here). Additionally there are no ignoreCase option of toolbarfilter method. There are ignoreCase option of jqGrid, but it works only in case of local searching.
So you have to change the server code to use filters parameter or to remove stringResult: true option. The removing of stringResult: true could be probably the best way in your case because you have only one searchable column. In the case you will get one additional parameter on the server side: examen. For example if the user would type physic in the only searching field the parameter examen=physic will be send without of any information about the searching operation. If you would need to implement filter searching in more as one column and if you would use different searching operation in different columns you will have to implement searching by filters parameter.
UPDATED: I wanted to include some general remarks to the code which you posted. You will have bad performance because of the usage
$("#"+id+ " td:eq(1)", grid[0])
The problem is that the web browser create internally index of elements by id. So the code $("#"+id+ " td:eq(1)") can use the id index and will work quickly. On the other side if you use grid[0] as the context of jQuery operation the web browser will be unable to use the index in the case and the finding of the corresponding <td> element will be much more slowly in case of large number rows.
To write the most effective code you should remind, that jQuery is the wrapper of the DOM which represent the page elements. jQuery is designed to support common DOM interface. On the other side there are many helpful specific DOM method for different HTML elements. For example DOM of the <table> element contain very helpful rows property which is supported by all (even very old) web browsers. In the same way DOM of <tr> contains property cells which you can use directly. You can find more information about the subject here. In your case the only thing which you need to know is that jqGrid create additional hidden row as the first row only to have fixed width of the grid columns. So you can either just start the enumeration of the rows from the index 1 (skipping the index 0) or verify whether the class of every row is jqgrow. If you don't use subgrids or grouping you can use the following simple code which is equivalent your original code
loadComplete: function() {
var i, rows = this.rows, l = rows.length;
for (i = 1; i < l; i++) { // we skip the first dummy hidden row
$(rows[i].cells(1)).tooltip({
content: function(response) {
var rowData = grid.jqGrid('getRowData',this.parentNode.id);
return rowData.descripcion;
},
open: function() {
$(this).tooltip("widget").stop(false, true).hide().slideDown("fast");
},
close: function() {
$(this).tooltip("widget").stop(false, true).show().slideUp("fast");
}
}).tooltip("widget").addClass("ui-state-highlight");
}
}
Has anyone discovered a way to extend or modify the functionality of the SharePoint Datasheet view (the view used when you edit a list in Datasheet mode, the one that looks like a basic Excel worksheet)?
I need to do several things to it, if possible, but I have yet to find a decent non-hackish way to change any functionality in it.
EDIT: An example of what I wish to do is to enable cascading filtering on lookup fields - so a choice in one field limits the available choices in another. There is a method to do this in the standard view form, but the datasheet view is completely seperate.
Regards
Moo
I don't think you can modify it in any non-hackish way, but you can create a new datasheet view from scratch. You do this by creating a new ActiveX control, and exposing it as a COM object, and modifying the web.config file to make reference to the new ActiveX control.
There's an example here:
Creating a custom datasheet control.
Actually, you can do this. Here is a code snippet I stripped out of someplace where I am doing just what you asked. I tried to remove specifics.
var gridFieldOverrideExample = (function (){
function fieldView(ctx){
var val=ctx.CurrentItem[curFieldName];
var spanId=curFieldName+"span"+ctx.CurrentItem.ID;
if (ctx.inGridMode){
handleGridField(ctx, spanId);
}
return "<span id='"+spanId+"'>"+val+"</span>";
}
function handleGridField(ctx, spanID){
window.SP.SOD.executeOrDelayUntilScriptLoaded(function(){
window.SP.GanttControl.WaitForGanttCreation(function (ganttChart){
var gridColumn = null;
var editID = "EDIT_"+curFieldName+"_GRID_FIELD";
var columns = ganttChart.get_Columns();
for(var i=0;i<columns.length;i++){
if(columns[i].columnKey == curFieldName){
gridColumn = columns[i];
break;
}
}
if (gridColumn){
gridColumn.fnGetEditControlName = function(record, fieldKey){
return editID;
};
window.SP.JsGrid.PropertyType.Utils.RegisterEditControl(editID, function (ctx) {
editorInstance = new SP.JsGrid.EditControl.EditBoxEditControl(ctx, null);
editorInstance.NewValue = "";
editorInstance.SetValue = function (value) {
_cellContext = editorInstance.GetCellContext();
_cellContext.SetCurrentValue({ localized: value });
};
editorInstance.Unbind = function () {
//This happens when the grid cell loses focus - hide controls here, do cleanup, etc.
}
//Below I grabbed a reference to the original 'BindToCell' function so I can prepend to it by overwriting the event.
var origbtc = editorInstance.BindToCell;
editorInstance.BindToCell = function(cellContext){
if ((cellContext.record) &&
(cellContext.record.properties) &&
(cellContext.record.properties.ID) &&
(cellContext.record.properties.ID.dataValue)){
editorInstance.ItemID = cellContext.record.properties.ID.dataValue;
}
origbtc(cellContext);
};
//Below I grabbed a reference to the original 'OnBeginEdit' function so I can prepend to it by overwriting the event.
var origbte = editorInstance.OnBeginEdit;
editorInstance.TargetID;
editorInstance.OnBeginEdit = function (cellContext){
this.TargetID = cellContext.target.ID;
/*
. . .
Here is where you would include any custom rendering
. . .
*/
origbte(cellContext);
};
return editorInstance;
}, []);
}
});
},"spgantt.js");
}
return{
fieldView : fieldView
}
})();
(function () {
function OverrideFields(){
var overrideContext = {};
overrideContext.Templates = overrideContext.Templates || {};
overrideContext.Templates.Fields = {
'FieldToOverride' : {
'View': gridFieldOverrideExample.fieldView
}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
}
ExecuteOrDelayUntilScriptLoaded(OverrideFields, 'clienttemplates.js');
})();
Also, there are a couple of other examples out there. Sorry, I don't have the links anymore: