I am using jqgrid to display the data in 10 columns. There is one column PillName, we can store PillName as 100 caharacters in Database. While displaying in jqgrid, its displaying like in the following image:
How to show the value in a proper way so that jqgrid dont get distorted. Ideally, it should break after some characters.
or It can show some 10 characters and then after that ........(dots)?
Kindly Help?
Thanks.
I suppose that you have CSS conflicts between MVC and jqGrid. One sees problems already in the input field of the jqGrid pager. The problem for example can be fixed with additional CSS definition
input.ui-pg-input { width: auto; }
The close problem you have probably with <td> or <tr> elements. You can examine the styles of the grid cell with Developer Tools of Internet Explorer of Chrome oder with Firebug. You can also make a simple test and comment the whole MVC CSS or a large parts of the CSS. I suppose that the grid will looks OK after removing unneeded CSS declaration or including the fix like with the pager in the CSS of your projects.
Related
I have a dynamic Kendo grid, for which I get the data every time from the server with the column configuration. The grids renders the data as expected, but sometimes the grid does not render the data at all and only renders the column headers. The grid does not even recognize the column configuration, which mentions whether the column is hidden or not, column title etc.
When I refresh(ctrl+f5) the browser page the grids starts displaying normally.
When I checked the html generated in both cases I saw following difference
1- The Grid which displays correctly
Has a thead and tbody inside a single table
2- The Grid which does not display the data
Has two different divs for header and content
Please see the following image for Good Grid
And following image for Bad Grid
I am not sure why the same grid has two different htmls? Can anyone please help?
EDIT
One more thing that might be helpful.
The kendo grid definition is in a content.html file. And this file is used as a content URL for kendo tabstrip control. There are around 7 tabs and all the tabs are refering to the same content file.
i am using a jqgrid in my asp.net mvc 3 application. I noticed that changing the width does not work when u use the jqGrid as partialview?
jQuery("#targetGrid").setGridWidth(width);
it works fine as a non partialview though?
Okay there could be three solutions i would like to tell you and i'm not sure about any of those. I can't test them now(not at work).
First add width to your jqgrid parameters.
check this documentation. This has a plenty of options for setting width or rows, columns and others. Search for width, you will get plenty of options.
Second you can specify the table width where you are binding the data.
Third you can make changes in ui.jqGrid.css and specify the width from there itself.
I've added a sortable spry table on my website. It works great everywhere except Internet Explorer. And I'm really struggling because no one can't tell me how to resolve the issue.
In the page, you can see the table right at the bottom.
You're first defining the CSS width like this, and then dynamically replacing it with the real values. However, this is invalid CSS which, apparently, IE not only ignores but discards altogether - the entire style attribute is removed from the DOM.
Good day. I'm making a gwt application with tables using GWT Grid. Now, I want my GWT Grid to have a scrollbar when rowCount is greater than 15. The header is not part of the scrollable area.
My problems are:
How can I enable table/grid content scrolling without including the header?
How can I make my table header look like a button wherein users can click it to sort the specific column?
My current code will allow scrolling when rowCount > 15 including the header. Please help. Thanks in advance.
Maybe it's time to switch to cell widgets, and DataGrid.
Javadoc
Live example (with code)
Documentation on cell widgets, and how to do column sorting (a DataGrid is almost like a CellTable).
Scrolling
I won't dig deep into GWT with this post but I'll try to give some hints on how to do the scrolling part.
If your table's data is wrapped in a separate tag than the table's body, then it shouldn't be a problem. If the table's structure is similar to the following, it shouldn't be a problem:
<table>
<thead>
<tr>
<th>ColumnHeader1</th>
<th>ColumnHeader2</th>
</tr>
</thead>
<tbody>
<tr>
<th>Data1</th>
<th>Data2</th>
</tr>
</tbody>
</table>
To make the data part vertically scrollable, you should add a CSS style to the <tbody> element which sets overflow-y: scroll; when the rowcount is greater than 15. Also you need to set the height or limit it's height by other means (wrapping container) for the scrollbar to appear.
To set the height, I'd consider to get the <tbody>'s offset height right after the 15th row has been added and force it to stay at that. It might go like this:
tbodyElement.setHeight(tbodyElement.getOffsetHeight());
Remember, this has to be done right after adding the 15th row.
Sorting
For that you should wrap your column header names in some kind of a Widget. It could be a HTML or a Label for example. You just need to add ClickHandlers to them and some styling to fill the whole cell and the cursor to switch to a hand with CSS cursor: pointer; while hovering on it.
Conclusion
Well, this was my light overview of this. Without seeing the code you've done it's hard to go any further.
in JQGrid 3.8, is it possible to have an icon instead of text in a column ?
I don't think it's possible but if you have a trick, i'd be happy
There are many ways to add icons in the grid. First way is: the data which be placed in the column header (colNames) or inside of the cell data could be HTML data. So you can easy insert the <img> element in the grid. One more method is th use custom formatters. See here some demos. If the standard jQuery UI icons contain all the icons which you need I would recommend you to use there.