How would I hide a column that should be hidden from view. I handled this by hiding the object, but the column still shows in the UI as a skinny column with nothing in the rows. Is there way to prevent the item from being drawn?
grid.Column(null, null, format: #<input type="hidden" name="RevisionId" value="#item.LatestRevisionId"/>)
Thanks.
The WebGrid helper allows you to apply a CSS class to individual columns using the style property. Unfortunately while this will allow you to hide the column inside the tbody section you cannot apply different styles to column headers. You can apply the same style to all columns which makes it pretty useless. So one possibility is to use CSS:
table th:first-child, table td:first-child {
display: none;
}
This assumes that you want to hide the first column and that the client browser supports the :first-child pseudo selector which might not be the case with legacy browsers.
So in case you need to support legacy browsers you could use jQuery to apply a hidden style to the header and the rows of the first column or to simply hide them directly:
$(function () {
$('table th:first-child, table td:first-child').hide();
});
If you want to have more control I would recommend you checking out the MvcContrib Grid or Telerik Grid.
*strong text*Solution from Darin is only partial as the "table th:first-child" will also hide the "canPage:true" grid footer (used for paging).
Solution is to add additional styling.
In the "head" section of your (or alternatively in the CSS file if you want to apply it on all tables):
<style type="text/css">
.nodisplay {display: none;}
</style>
In the Webgrid section:
footerStyle : "table-footer",
...
grid.Column(null, null, style:"nodisplay", ...
In the CSS file:
.table-footer {
display: normal
}
Related
I'm using jqGrid JS v5.3.0, with styleUI set to Bootstrap. On edit form, the checkbox (created by setting edittype option. also set editoptions: {value:"true:false"}) is aligned to the center of the form. Is there a way to make it align to the left?
Thanks in advance.
The reason for this is the setting in the bootstrap css
.EditTable td input,
.EditTable td select,
.EditTable td textarea {
width: 98%;
display: inline-block;
}
i.e this is caused from width:98%
To correct this there are a lot of ways.
The first one is to use editoptions to set a manual auto width with style options.
edittype : 'checkbox',
editoptions : {value:"true:false", "style":"width:auto"},
The second one (more elegant IMHO) is to set this in css for all check-boxes in the edit form like this:
<style>
.EditTable td input[type="checkbox"]
{
width :auto;
}
</style>
after loading the jqgrid bootstrap css file.
Is it possible to add more drop down or other html elements to the Datatable after the default
Display "5" record
I want to add more drop down to my DataTable between the Default one and the Search Bar which is provided by default.
I have gone through sDom but I am not able to understand the syntax.
Thanks in advance.
You can insert an element <div> between the length menu and the filter box this way :
var table = $('#example').DataTable({
dom : 'l<"#add">frtip'
})
'lfrtip' is the default dom string, so you basically just add an <div id="#add"> to the existing layout. It is adviceable to style #add, especially setting the display type to inline-block so it not break the elements down under :
#add {
display: inline-block;
padding-left: 30px;
float: left;
}
Now you can add <select>'s (or whatever) to the #add element the plain jQuery way :
//insert a label
$('<label/>').text('my dropdown').appendTo('#add')
//insert the select and some options
$select = $('<select/>').appendTo('#add')
$('<option/>').val('1').text('option #1').appendTo($select);
$('<option/>').val('2').text('option #2').appendTo($select);
$('<option/>').val('3').text('option #3').appendTo($select);
demo -> http://jsfiddle.net/ahqbf35w/
i have a html table with percentage width that contain some text. my ajax function change this content to another text with different length, but the td width will re-sizing directly after ajax response. how to apply css3 transition property to column width for soft and animated column re-sizing?
my css code:
table tr td{
color:#00cf00;
padding:2%;
font-family:"Courier New";
font-size:16px;
line-height:3;
transition:width 1s;
}
i think the transition property execute just on hover event.
In ajax success function add the CSS class using $('#id').addClass("class name");
What I want to do is when i click on my image, i want the kendo dorpdownlist to propose me some options. Is it possible ?
I tried to replace the defautl template of dropdownlist with CSS without success.
Here i try simply to replace the default black arrow of the dropdownlist, with no success.
SOURCE : http://docs.kendoui.com/getting-started/web/appearance-styling?x=54&y=12
-----------------------------HTML
<select id="customList" class="k-widget k-dropdown"></select>
-----------------------------Javascript
$("#customList").kendoDropDownList().data("kendoDropDownList");
-----------------------------CSS
#customList .k-icon .k-i-arrow-s
{
background-image:url('../../resources/img/components/addtab.png');
}
But what i really want to achieve is to replace completely the default template of the kendo dropdownlist and to have instead my image.
There are a couple of question to keep in mind:
The HTML element that contains the arrow is not a descendant of customList but descendant of a sibling. This is because KendoUI decorates original elements with others.
You are only re-defining background-image but you there is two additional CSS attributes that you need to redefine: background-position and background-size since it is defined in Kendo UI CSS files for offsetting k-i-arrow-s icon.
So, you should either do:
span.k-icon.k-i-arrow-s {
background-image:url('../../resources/img/components/addtab.png');
background-size: 16px 16px;
background-position: 0 0;
}
if you are ok with redefining every additional elements OR you do it programmatically defining a CSS:
.ob-style {
background-image:url('../../resources/img/components/addtab.png');
background-size: 16px 16px;
background-position: 0 0;
}
and a JavaScript:
var list = $("#customList").kendoDropDownList({...}).data("kendoDropDownList");
$(list.wrapper).find(".k-icon.k-i-arrow-s").addClass("ob-style");
I want to change the pointer to hand when hovering over jqgrid's rows
Is there an API for that?
This can be done more easily using the classes colModel property as below:
{ name: 'Email', index: 'Email', classes: 'pointer' }
From the wiki:
This option allow to add classes to the column. If more than one class will be used a space should be set. By example classes:'class1 class2' will set a class1 and class2 to every cell on that column. In the grid css there is a predefined class ui-ellipsis which allow to attach ellipsis to a particular row. Also this will work in FireFox too.
I just add this into my css file
#mygrid .jqgrow{
cursor:pointer;
}
Use a custom formatter on any cell in the grid. For more info on these, see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter
Here's how I did it. I wanted the first column in my grid to appear like it is a clickable link (but really it triggers a custom jqgrid event, onCellSelect).
Snippet of my grid object:
colModel :[
{name:'ticket', index:'IMINDT', width:125, formatter: pointercursor},
pointercursor is a function name. The code for it is defined like this:
// Custom formatter for a cell in a jqgrid row.
function pointercursor(cellvalue, options, rowObject)
{
var new_formatted_cellvalue = '<span class="pointer">' + cellvalue + '</span>';
return new_formatted_cellvalue;
}
My CSS class of "pointer" is:
.pointer {
cursor: pointer;
text-decoration: underline;
}
That's it!
in css file put this:
.ui-jqgrid .ui-jqgrid-btable { cursor : pointer; }
It seems to me that you have not a jqgrid question, but pure CSS or javascript question. Look at How to get cursor to change before mouse moves when changing the cursor style dynamically for example. It shows how can one change cursor style of a html element. See also in http://www.quirksmode.org/css/cursor.html, that 'hand' is supported not in all browsers.