I am trying to float to right page navigation in webgrid in vs2012. I tried .replace() for <tfoot><tr><td> but I seem to have got it wrong. Please help me out to show page navigation on the right of the footer.
Sample of code given below..
#grdDept.GetHtml(
tableStyle: "webGrid",
firstText: "<<",
lastText: ">>",
previousText: "<",
nextText: ">",
columns: new[] {
grdDept.Column("AssignTo",header: "Assign To",format:#<text><div id="div-AssignTo">#item.AssignToName </div></text>)
}
).ToString().Replace("<tfoot><tr><td","<tfoot><tr><td></td><td></td><td></td><td></td><td></td><td"));
Related
I am using syncfusion ej2 richtexteditor component for asp.net mvc. All tools are working fine but when I add "table" option to the tools it gives error in the console and toolbar does not shows.
Following error appears on the console.
Uncaught TypeError: Cannot read property 'id' of undefined
at e.getObject (constants.js:78)
at e.getItems (constants.js:78)
at e.getToolbarOptions (constants.js:78)
at e.render (constants.js:78)
at e.renderToolbar (constants.js:78)
at e.notify (constants.js:78)
at t.notify (constants.js:78)
at t.render (constants.js:78)
at t.appendTo (constants.js:78)
at Contact:130
Here is my initialization code in the view:
#Html.EJS().RichTextEditor("table").ToolbarSettings(e => e.Items((object)ViewBag.tools)).Value((string)ViewBag.value).QuickToolbarSettings(e => { e.Table((object)ViewBag.table); }).ShowCharCount(true).MaxLength(2000).Render()
Controller code:
public ActionResult Contact()
{
ViewBag.tools = new[] {
"Bold", "Italic", "Underline", "StrikeThrough",
"FontName", "FontSize", "FontColor", "BackgroundColor",
"LowerCase", "UpperCase", "|",
"Formats", "Alignments", "OrderedList", "UnorderedList",
"Outdent", "Indent", "|",
"CreateLink", "Image","table", "|", "ClearFormat", "Print",
"SourceCode", "FullScreen", "|", "Undo", "Redo"
};
ViewBag.table = new[] {
"Rows", "Columns", "tableCellVerticalAlign"
};
ViewBag.value = #"<p>The rich text editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content.
Users can format their content using standard toolbar commands.</p>
<p><b> Key features:</b></p>
<ul>
<li><p> Provides & lt; IFRAME & gt; and & lt; DIV & gt; modes </p></li>
<li><p> Capable of handling markdown editing.</p></li>
<li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
<li><p> Provides a fully customizable toolbar.</p></li>
<li><p> Provides HTML view to edit the source directly for developers.</p></li>
<li><p> Supports third - party library integration.</p></li>
<li><p> Allows preview of modified content before saving it.</p></li>
<li><p> Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
<li><p> Contains undo / redo manager.</p></li>
<li><p> Creates bulleted and numbered lists.</p></li>
</ul>";
return View();
}
Can anyone please tell where I am missing the trick.
The support for tables in EJ2 Rich Text Editor control was provided from the version 16.3.21. Refer to the release notes for more information.
You can use a version specific CDN files to ensure it in your end. Refer to the following links:
Script: http://cdn.syncfusion.com/ej2/16.3.21/dist/ej2.min.js
Theme: https://cdn.syncfusion.com/ej2/16.3.21/material.css
To enable tables in the RTE’s toolbar, you need to add it to the toolslist as shown in the following code.
[View]
#Html.EJS().RichTextEditor("default").ToolbarSettings(e => e.Items((object)ViewBag.tools)).Value((string)ViewBag.value).Render()
[Controller]
public ActionResult Index()
{
ViewBag.value = #"<p>The rich text editor is WYSIWYG ('what you see is what you get') editor useful to create and edit content</p>";
ViewBag.tools = new[] { "Bold", "Italic", "Underline", "StrikeThrough",
"FontName", "FontSize", "FontColor", "BackgroundColor",
"LowerCase", "UpperCase", "|",
"Formats", "Alignments", "OrderedList", "UnorderedList",
"Outdent", "Indent", "|",
"CreateTable", "CreateLink", "Image", "|", "ClearFormat", "Print",
"SourceCode", "FullScreen", "|", "Undo", "Redo" };
return View();
}
Make sure that you have included the dependent scripts and theme files in the _layout.cshtml page. For further information, refer to the Getting Started documentation
Sample
I was using "Table" property in ViewBag.tools to render table icon. I needed to add "CreateTable" instead of Table.
I cannot get the mobile Adaptive Grid features to work using the Kendo JSP wrappers. I have cut everything down as much as possible, and it will not work with the wrappers. I can get everything working perfectly fine with Javascript. The following works perfectly fine:
<div id="grid"></div>
<script>
var gridConfig = {
columns: [
{field: "name", title: "Name"},
{field: "age", title: "Age"}
],
filterable: true,
columnMenu: true,
mobile: true
};
$("#grid").kendoGrid(gridConfig);
</script>
When I look at the grid in a desktop browser, my filter and column menus appear as you would expect. When I view the grid on my cell phone, the filter and column menus push the grid aside and appear as a standard mobile selection list. If I create the same grid using the JSP wrappers, it doesn't work:
<div id="grid">
<kendo:grid name="grid" filterable="true" columnMenu="true" mobile="true" >
<kendo:grid-columns>
<kendo:grid-column title="Name" field="name" />
<kendo:grid-column title="Age" field="age" />
</kendo:grid-columns>
</kendo:grid>
</div>
The filter and column menus display on my phone as they do on the desktop, which makes them unusable since they slide off the viewing area and disappear when I try to scroll to them.
I know the obvious question is why bother with the Wrappers, but I have to due to our usage of Freemarker throughout the application.
What am I missing here?
Had to just modify the source of the latest release (2016.1.112) myself. In case anyone else has a similar issue, adjust the setMobile method of com.kendoui.taglib.GridTag.java.
public void setMobile(java.lang.Object value) {
if (value instanceof String && (((String)value).equalsIgnoreCase("true") || ((String)value).equalsIgnoreCase("false"))) {
setProperty("mobile", Boolean.valueOf((String)value));
}
else {
setProperty("mobile", value);
}
}
Could be better, but it's functional and does what I need for now.
I have a website where I am using several lightboxes on it. It works everywhere really good, also in IE7 :), but in mobile it doesn't show the close button.
My code is the following:
$(".fancybox").fancybox({
beforeShow:function(){
$('html, body').unbind("mousewheel", horizontalScroll);
},
'arrows':true,
'overlayShow': true,
'autoScale': true,
'autoDimensions': false,
'modal': true,
'autoSize' : false,
'width' : '90%',
'showCloseButton' : true,
'hideOnOverlayClick':true,
'keys': {
"next": [13, 32, 34, 39], // enter, space, page down, right arrow, down arrow
"prev": [8, 33, 37] // backspace, page up, left arrow, up arrow
},
afterShow : function() {
$('.fancybox-skin').append('<a title="Close" class="fancybox-item fancybox-close" href="javascript:jQuery.fancybox.close();"></a>');
},
afterClose : function() {
$('html, body').bind("mousewheel", horizontalScroll);
}
});
The website is: http://ahnenwand.hiltl.ch but not all of the pictures are linked to a lightbox. Click on the plus sign, from topleft go 3 to the right and 8 down and there is a image that opens a lightbox to test it.
I don't have any JS mistake and the sprite is also loading. On the topright corner of the lightbox (on mobile) is the area where I can click to close it, but the close button doesn't show up.
Here is a little fiddle, also here the close button doesn't show up on mobile (it works only once then it must be reloaded - sorry)
http://jsfiddle.net/bauralex/f2sx36gz/16/
I hope anyone has an Idea what could be wrong here
Thank you very much
Alex
I have the same problem with a nonmodal box (V 2.1.5). As I found out, the code for the close button is missing in the mobile context, and referencing the background-image doesn't work. My solution was to make the changes via the afterLoad callback:
afterLoad:function(curr, prev) {
if(!jQuery('a.fancybox-close').length) {
jQuery('.fancybox-outer').after('<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>');
jQuery('.fancybox-close').css('background-image','url(/js/fancybox2/fancybox_sprite.png)');
}
}
Make sure to adjust path to the fancybox_sprite.png in your environment.
I am using a webgrid similar to the one mentioned here
#{
var grid = new WebGrid(canPage: true, rowsPerPage: ThisController.PageSize, canSort: true, ajaxUpdateContainerId: "grid");
grid.Bind(Model.Employees, rowCount: Model.TotalRecords, autoSortAndPage: false);
grid.Pager(WebGridPagerModes.All);
#grid.GetHtml(htmlAttributes: new { id="grid" },
columns: grid.Columns(
grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { EmployeeID = item.EmployeeID })),
grid.Column("FullName"),
grid.Column("Title")
));
}
But in my case I am expecting more than 2000 records ,I want to load only 50 records to be loaded on each page,so that the page will load faster. How can I ensure that only first 50 records are loaded when the page gets loaded.and when my user clicks page2 I want to load the next 50 set of records and so on.
Any of you faced anything similar,please suggest me with some sample code
This MSDN Magazine article shows what you want:
Get the Most out of WebGrid in ASP.NET MVC
Read this section: Adding Paging and Sort
As you can see, the data we’re passing contains the full list of
products (295 of them in this example, but it’s not hard to imagine
scenarios with even more data being retrieved). As the amount of data
returned increases, you place more and more load on your services and
databases, while still rendering the same single page of data. But
there’s a better approach: server-side paging. In this case, you pull
back only the data needed to display the current page (for instance,
only five rows).
See this link, it discusses the very same issue of paging in webgrid with large amount of data and an awesome solution to it.
Efficient Paging with WebGrid Web Helper
Hope this helps !
#{
var grid = new WebGrid(canPage: true, rowsPerPage: 50, canSort: true, ajaxUpdateContainerId: "grid");
-remaining code is same as your code
}
just change rowsperpage: to the number of rows u want to display
List<WebGridColumn> webGridColumn=new List<WebGridColumn>();
var grid=new WebGrid(source:model,
defaultSort:"stk_code",
rowsPerPage:Model.Count(),
canPage:true,
canSort:true);
webGridColumn.Add(grid.Column("stcode",header:"Stock Code",canSort:false));
I've got an interesting issue with creating a subgrid in the excellent jqGrid plugin. The main grid is working fine itself. However, when I add the parameters to create the subgrid, I get the new first column but do not get the plus sign. When I inspect the demo using Firebug I see that an href and several classes are added to the first column. I do not see those classes in the first column of my grid. Here's the code:
$("#quotelist").jqGrid({
datatype:'xml',
url:'getQuotes',
mtype: 'GET',
postData:{"a":$("#AccountNumber").val(),
"op":"y",
"cl":"n",
"cd":"All",
"eq":"All",
"sess":$("#SessionID").val(),
"d":new Date().getTime()
},
colNames:['Origin Zip', 'Destination Zip', 'Equipment', 'Commodity'],
colModel:[
{name:'ozip', index:'ozip', title:false, width:140},
{name:'dzip', index:'dzip', title:false, width:40},
{name:'equipment', index:'equipment', title:false, width:40},
{name:'commodity', index:'commodity', title:false, width:40}
],
loadError:function(xhr, st, err) {
alert('loaderror on quote request grid - ' + st)
},
pager:'#pager',
height: 550,
width: 425,
rowNum: -1,
hidegrid: false,
gridview: true,
gridstate:'hidden',
viewrecords: true,
altRows: true,
sortname: 'ozip',
sortorder: 'asc',
caption: 'Carriers',
subGrid:true,
subGridUrl:"getQuoteResponse&a="+$("#AccountNumber").val() +
"&sess=" + $("#SessionID").val(),
subGridModel: [
{name:['Carrier Name','Status'], width:[200,100]}
]
});
Other information:
I included the 'pager' to make sure the icons appear on the pager - they do. I've tried this on jqGrid versions 3.8.2 and 3.6.5 with the same result. jQuery version is 1.4.2, jquery UI version 1.8.2.
I think that the plus isn't appearing because I'm not getting the new classes in the first column when the grid loads, but I have no idea why not. It's weird that the first column appears when subGrid is set to true but then the plus sign isn't loaded.
Any idea? Many thanks for any suggestions!
edit: nevermind! I was editing this post to fix some formatting and found the problem. Too many parameters about hidegrid, gridview, etc. Those were left over from my initial experimentation with jqGrid.
The main problem is that gridview:true can not be used in your case. In the description of the gridview option in the documentation you will find
If set to true we can not use
treeGrid, subGrid, or afterInsertRow
event.
I gone through the same problem when I was working with jQuery Grid. In my case plus icon is not appearing but when I clicked on first column cell my subgrid appear. After searching for hour I finally got solution. In ui.jqgrid.css file include this code.
.ui-icon-plus {
height: 10px;
width: 10px;
background-image: url('../../Images/plus.gif');
}
.ui-icon-minus {
height: 10px;
width: 10px;
background-image: url('../../Images/minus.gif');
}
Image path will be your Image path. I am not giving height and width of image that's why I am not able to see in UI. Hope this help.