The below code works and I can create a measurement modal that displays the kgs, grams etc but was wondering if there is a way to do it as a dropdown select2 instead as the list is quite short. the two I've tried below show just the label but no select2 box. Any ideas? regards
$columns = [];
$columns[] = ['label'=>'Quantity','name'=>'quantity','type'=>'number','required'=>true];
$columns[] = ['label'=>'Measure','name'=>'measures_id','type'=>'select2','datatable'=>'measures,measure'];
$columns[] = ['label'=>'Measure2','name'=>'measures_id','type'=>'select2','validation'=>'required|integer|min:0','width'=>'col-sm-5','datatable'=>'measures,measure'];
// $columns[] = ['label'=>'Measure','name'=>'measures_id','type'=>'datamodal','datamodal_table'=>'measures','datamodal_columns'=>'measure','datamodal_select_to'=>'measure:measure','required'=>true];
Found how to do it by changing select2 to select.Not sure what the difference is.
From:
$columns[] = ['label'=>'Measure','name'=>'measures_id','type'=>'select2','datatable'=>'measures,measure'];
to:
$columns[] = ['label'=>'Measure','name'=>'measures_id','type'=>'select','datatable'=>'measures,measure'];
That's correct. Since I cannot comment I'll suggest you the difference by adding an aswer.
The difference is:
Select : Standard HTML element, rendered by the browser and working according to its own code.
Select2: Select2 is a jQuery library that "improves" your select elements by adding HTML code to render options and adding functions. For example, you may add a search box to filter your options, or you can style the dropdown better.
Library url : select2.org
Related
So i have hyperlink at a webpage that is:
<b>456</b>
And i want it to be a button instead of hyperlink.
Like:
<input type="button" class="butt1" name="but" value="456" onclick="123.com'">
I tried to change it inside chrome dev tools and it works, well obviously since i jsut give it href adress manually. Sadly i have no expirience with tampermonkey or greasemonkey at all and very limited javascript knowledge. Wonder if it possible and would appretiate any help.
Here is a sample code based on your example...
First, you need to get the link
If it is only one link, find it based on a selector:
const a = document.querySelector('a.cs');
Create the input
const input = document.createElement('input');
input.type = 'button';
input.className = 'butt1';
input.name = 'but';
input.value = '456';
input.onclick = 'window.location.href=' + a.href;
Note: A better way is to use input.addEventListener('click', function) instead of onclick.
Replace the link with the button
a.parentNode.replaceChild(input, a);
If there are more than one links, then you need to get them and loop through them e.g.
const a = document.querySelectorAll('a.cs');
The excellent dropdown jQuery UI Multiselect widget that supports styling via jQuery UI Themeroller still doesn't have support for including images within the drop down rows.
I didn't see any answers to this problem within Stackoverflow yet it seems to be asked regularly in various areas of the internet, so I am giving the answer to this question below..
(ALSO See my FIDDLE Example to see this in action,)
The following is based on an initial idea by 'pdlove' for introducing the use of images within this excellent UI Multiselect for jQuery.
Adding Image support for line items in check box text area is achieved by setting out the selector option rows html like this:
<option value="somevalue" image="yourimage.jpg" class="multSelktrImg">
normal visible text
</option>
I would also add a class control to your style sheet css file to set the image size being rendered in the option line items of the drop down, along with a couple of position settings for the image, label and span text.
In this example I use the class name 'multSelktrImg', so within the css file it would look something like this:
.multSelktrImg span{position: relative;top: 10px;vertical-align: middle;
display: inline-flex;}
.multSelktrImg input {vertical-align: -2px;}
.multSelktrImg img {position: relative;height: 30px;margin: 2px 6px;top: -10px;}
Now for the change in the src/jquery.multiselect.js file
Search for the following matching code around line 130 (depending on what version id of the script you are using):
// build items
el.find('option').each(function( i ){
var $this = $(this),
parent = this.parentNode,
title = this.innerHTML,
description = this.title,
....
ADD the following line above "title = this.innerHTML,":
image = this.getAttribute("image");
so that it looks like this:
// build items
el.find('option').each(function( i ){
var $this = $(this),
parent = this.parentNode,
image = this.getAttribute("image");
title = this.innerHTML,
description = this.title,
Now Search for the following matching code around line 180:
// add the title and close everything off
html += ' /><span>' + title + '</span></label></li>';
....
Replace the code line with the following to allow for rendering of your images:
// add the title and close everything off
html += ' /><span>';
if (image != null) {
html += '<img src="'+image+'" class="multSelktrImg">';
}
html += title + '</span></label></li>';
save the new version of the script src/jquery.multiselect.js file and now the images will appear in the multiselect drop down. Use the 'multSelktrImg' class value to control the size of the image displayed by altering the pixel size for the class in your css file.
In the FIDDLE version, I have altered the minimized version of the jQuery script, and created an initialisation of the Select object.
Is it possible to render a Grid with one row selected as default (set the right page number and highlight the row)?
For highlighting, try using the "OnRowDataBound" event
.ClientEvents(events => events.OnRowDataBound("onRowDataBound"))
with something like
function onRowDataBound(e) {
var myId = $('#MyId').val();
if (e.dataItem.Id == myId)
e.row.className = 't-state-selected';
}
I'm still trying to figure out how to set the correct initial page number. This bloke might be on to something.
Use the Grid RowAction method, eg:
.RowAction(row => row.Selected = row.DataItem.CustomerCode.Equals(ViewBag.ID))
It is perhaps possible if you iterate in the grid source, locate the row which has to be selected in it, than use a formula to detect on which page will be displayed, and finally change the page index on initial load and select it.
How do we make a tree grid with pager using jqGrid?
I have checked and try the demos, but it didn't show any pager, even though there is a pager div in the code
How do create the pager ?
Tree grid has some limitations which are documented:
Pager functionality currently disabled
for treeGrid
In other place of the documentation you can read almost the same:
Since jqGrid currently does not
support paging, when we have a
treegrid the pager elements are
disabled automatically.
I got pagination to work by modifying the setTreeGrid function. I commented out the following line:
$t.p.pgbuttons = false;$t.p.pginput = false;
The buttons then appeared and the requests were going back to the server to request the information. Now for this I was loading the entire tree to a local variable then using setJSONData to load the data into the tree. It functions the way I would expect it to but I haven't thoroughly tested it.
For RowList
$t.p.multiselect = false;$t.p.rowList = [10,15,20,30];
Try change d.p.pgbuttons = !1; to d.p.pgbuttons = !0; AND d.p.pginput = !1; to d.p.pginput = !0; AND d.p.rowList = []; to d.p.rowList = [10,50,100]; in block setTreeGrid: function () {...}
According to "New functional for treeGrid" Vyacheslav N. Boyko added this feature to jqGrid.And there is a open issue that demands to apply this feature to jqGrid.
I'm using jqGrid with cell editing. I have setup the colModel properties using the editrules option. Everything works fine in that if I edit a cell and try to save an invalid value the grid displays an error dialog, but I need to know how to position the error message dialog that comes up because in the case of my layout it ends up behind a video. I'm not quite sure how to hook into this and there don't seem to be any obvious options on how to do it.
In this case the dialog I would be trying to manipulate is the one with ID of info_dialog.
Also I'm using the clientArray option for cellsubmit.
I realize this is rather old but upon searching I didn't find any indication this might have been added since, so I figured now that I've figured it out I'd let everyone know how I solved the positioning of mine.
$(document).ready(function ()
{
$.jgrid.jqModal = $.extend($.jgrid.jqModal || {}, {
beforeOpen: centerInfoDialog
});
});
function centerInfoDialog()
{
var $infoDlg = $("#info_dialog");
var $parentDiv = $infoDlg.parent();
var dlgWidth = $infoDlg.width();
var parentWidth = $parentDiv.width();
$infoDlg[0].style.left = Math.round((parentWidth - dlgWidth) / 2) + "px";
}
From what I could find in the jqGrid source code, you can add a beforeOpen and an afterOpen. In my case I'd rather position the thing before it's displayed (duh!). Would be nice if there was a parameter to hook it up in the grid declaration, but this does the trick in the mean time.
I hope this helps someone! I spent most of my afternoon on this!
Default value of zIndex parameter of info_dialog is 1000. The function info_dialog from grid.common.js part of jqGrid will be called from grid.celledit.js without usage a 4-th parameter which can change the option.
So the best pragmatical way which I could recomend you is to decrease zIndex value of your div with the video so that it will be less then 1000.