In the footer of kendo grid, it displays "items per page" and "items" How to put them in a resource file for localization.
Thanks,
you can localize or modify text as follows
pageable: {
messages: {
display: "{0} - {1} of {2} items", //{0} is the index of the first record on the page, {1} - index of the last record on the page, {2} is the total amount of records
empty: "No items to display",
page: "Page",
of: "of {0}", //{0} is total amount of pages
itemsPerPage: "items per page",
first: "Go to the first page",
previous: "Go to the previous page",
next: "Go to the next page",
last: "Go to the last page",
refresh: "Refresh"
}
}
refer http://demos.telerik.com/kendo-ui/grid/localization
when you are building the grid and setting its properties such as filtering, column names etc.
you could overwrite the custom kendo grid messages as:
gridbuilder.Pageable().Messages(m => {
m.Display("{0} - {1} of {2} My customized items");
m.Empty("No result found custom msg");
})
The contents of Display and Empty, items per page...etc attributes can then be easily moved to a resource file and read from the resource file.
If you don't want to change the acutal the pager messages it would be a better approach to take advantage of the Kendo culture javascript files.
These files have the localisation messages and you will need to only set this once via the layout page.
Example Below:
#using Microsoft.AspNetCore.Http;
#model Microsoft.AspNetCore.Http.HttpContext
#inject UserManager<User> UserManager
#inject IHttpContextAccessor ContextAccessor
<!-- Load kendo language and culture scripts -->
#{
var languageDev = UserManager.GetUserAsync(ContextAccessor.HttpContext.User).Result.UserLanguageCode;
switch (languageDev)
{
case "es":
{
<script src="~/lib/kendo-ui/js/cultures/kendo.culture.es.min.js" type="text/javascript"></script>
<script src="~/lib/kendo-ui/js/messages/kendo.messages.es-ES.min.js" type="text/javascript"></script>
break;
}
case "zh":
{
<script src="~/lib/kendo-ui/js/cultures/kendo.culture.zh.min.js" type="text/javascript"></script>
<script src="~/lib/kendo-ui/js/messages/kendo.messages.zh-CN.min.js" type="text/javascript"></script>
break;
}
case "ru":
{
<script src="~/lib/kendo-ui/js/cultures/kendo.culture.ru.min.js" type="text/javascript"></script>
<script src="~/lib/kendo-ui/js/messages/kendo.messages.ru-RU.min.js" type="text/javascript"></script>
break;
}
default:
{
<script src="~/lib/kendo-ui/js/cultures/kendo.culture.en.min.js" type="text/javascript"></script>
<script src="~/lib/kendo-ui/js/messages/kendo.messages.en-GB.min.js" type="text/javascript"></script>
break;
}
}
<script type="text/javascript">kendo.culture("#languageDev");</script>
}
Check out for a list of cultures available: https://cdnjs.com/libraries/kendo-ui-core
Related
I am trying to create a textbox that autocomplete when a user start do search for some name, but it's not working.
Here is my view:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css" type="text/css" rel="Stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#txtSearch").autocomplete({
source: '#Url.Action("pesquisarUsuario")',
minLength: 0
});
});
</script>
<h2>Index</h2>
#using (#Html.BeginForm())
{
#Html.TextBox("pesquisa", null, new { id = "txtPesq" })
<input type="submit" value="Pesquisar" />
}
And here is my controller:
public JsonResult pesquisarUsuario(string term)
{
List<string> usuario;
usuario = db.usuario.Where(u => u.nomecompleto.StartsWith(term))
.Select(u => u.nomecompleto).ToList();
return Json(usuario, JsonRequestBehavior.AllowGet);
}
Am I missing something? because my textbox does not show any users when I start do write.
First try if usuario returns anything. :-)
Try in your browser: http://localhost:port/yourcontroller/pesquisarUsuario?term=t
It should return all records starting with 't'.
If it does not return anything, here is your problem.
If it does, try to set the full url:
$(document).ready(function () {
$("#txtSearch").autocomplete({
source: 'http://yourserver/yourcontroller/pesquisarUsuario',
minLength: 0
});
});
EDIT:
I have created this tutorial with a fully working example: http://r2d2.cc/2014/09/11/autocomplete-jquery-ui-with-asp-net-mvc-simple-example/
I've a view rendered with Razor engine and I need to open at a button click a popup to insert a new user (i've already got my view/controller for the InsertUser)
I wish to know what the correct workflow to perform this, if I open it with jQuery how do I tell after the insert to close the view? my controller doesn't know it's on a popup and I've not seen any CloseResult as ActionResult... I'm using also KendoUI, I've seen it has the Window control....this as well won't help me on this.....what's best to use for opening a popup?
Thanks
Try reading this article on progressive enhancement, while you might not want to do it progressivly the article contains all the little recipes you will need to do it.
Your get action would be like this:
[HttpGet]
public ActionResult ContactUs()
{
return PartialView("_ContactUs");
}
Your post like this:
[HttpPost]
public ActionResult ContactUs(ContactUsInput input)
{
if (!ModelState.IsValid)
{
return PartialView("_ContactUs", input);
}
return PartialView("_ThanksForFeedback", input);
}
The front end something like this:
<script src="#Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script type="text/javascript">
$.ajaxSetup({ cache: false });
$(document).ready(function () {
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this).attr("data-dialog-id"))
.appendTo("body")
.dialog({
title: $(this).attr("data-dialog-title"),
close: function () { $(this).remove() },
modal: true
})
.load(this.href);
});
$(".close").live("click", function (e) {
e.preventDefault();
$(this).closest(".dialog").dialog("close");
});
});
</script>
<a class="openDialog" data-dialog-id="emailDialog"
data-dialog-title="Contact Us" href="/Home/ContactUs">Contact Us</a>
I'm trying to implement the solution provided in this question here:
How to pass Model Value through ActionLink
So in my view I have an action link
#Html.ActionLink("Look up registration", "RegLookup", "Vehicle", new {#id="check"},null)
And in a Javascript file I have :
$(function ()
{
$("#check").click(function (e) {
e.preventDefault();
}
I've cut the function down to just preventing the default action of the action link.
In the view I've also referenced the java script files
<script src="~/Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="~/Scripts/GetRegistrationPlate.js" type="text/javascript"></script>
However when I click on the action link the default method continues to fire.
What might I have missed?
For one there are many syntax errors. Try this
$(function () {
$("#check").click(function (e) {
e.preventDefault();
return false;
});
});
Edit: Also, change the ActionLink to
#Html.ActionLink("Look up registration", "RegLookup", "Vehicle", new { #id = "check" }, new { #id = "check" })
The first id is for the route, the second id is for the html element.
I am developing an application in ExtJs using Rails, wherein there's a tab panel. The main tab contains the list of buttons on the left . Clicking on each button would open a new tab, and would render a grid or form. When i add new record from the form, it is displayed at once on the grid, but if i close the tab panel and click on the button again, no grid is displayed.
How to load the grid along with the data again ?
P.S: when i manually refresh the browser, it's displayed again !!
Thanks in advance !!
MyCode :
//** MyUnit.js in Units controller**//
MyUnit = Ext.extend(MyUnitUi, {
initComponent: function() {
MyUnit.superclass.initComponent.call(this);
//Insert records...
var sbtn=Ext.getCmp('btnSave');
sbtn.on('click',function(){
var grid = Ext.getCmp('maingrid');
var unitname = Ext.getCmp('unitname').getValue();
var description = Ext.getCmp('description').getValue();
var frm=Ext.getCmp('myform');
Ext.Ajax.request({
url: '/units',
method: 'POST',
params: {'data[unitname]':unitname,'data[description]':description}
});
var grid=Ext.getCmp('maingrid');
grid.store.reload();
grid.show();
frm.hide();
});
});
//** MyViewport.js in Test1 Controller **//
var unit_bt =Ext.getCmp('btnUnit');
unit_bt.on('click', function(){
var unit_el =Ext.getCmp('tabcon');
var tab = unit_el.getItem('tab_unit');
if(tab)
{
tab.show();
}else{
unit_el.add({
title : 'Unit of Measurement',
html : 'I am new unit',
activeTab: 0,
closable : true ,
id: 'tab_unit',
autoLoad:{url:'/units',scripts:true}
//store.load({params:{start:0, limit:25}})
}).show();
}
});
//** Units/index.html **//
<!DOCTYPE html>
<!-- Auto Generated with Ext Designer -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>unit.xds</title>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.3.1/resources/css/ext-all.css"/>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/ext-all-debug.js"></script>
<script type="text/javascript" src="MyUnit.ui.js"></script>
<script type="text/javascript" src="MyUnit.js"></script>
<script type="text/javascript" src="MyUnitStore.js"></script>
<script type="text/javascript" src="xds_index.js"></script>
</head>
<body></body>
</html>
#All : Thanks for your effort. Well my friend found the solution.
The problem got solved just by adding the following line of code in units.js again :
var grid=Ext.getCmp('maingrid');
grid.store.reload();
i am using the following code to hide the Actions menu from Discussion Board list. The code is :
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('.ms-menutoolbar td:lt(4)').hide();
});
</script>
I found this from an article, but its not working. Can you please help me regarding hiding Actions menu from Discussion Board list.
Also tried this code with no luck:
<script>
function HideDiv(name) {
var div = document.getElementsByTagName('div');
for (var i = 0; i < div.length; i++) {
var str = div[i].id;
if (str.indexOf(name) >= 0) {
var viewInExplorer = div[i];
if (viewInExplorer != null) {
if (viewInExplorer.parentNode != null)
viewInExplorer.parentNode.removeChild(viewInExplorer);
}
}
}
}
HideDiv("ListActionsMenu");
</script>
You might want to think about using a Custom Action to hide the menu items:
See:
http://msdn.microsoft.com/en-us/library/ms414790.aspx
and
http://msdn.microsoft.com/en-us/library/ms465980.aspx
You can use the below script but i would suggest to use custom master page in which you just remove site action or apply a sharepoint security trim control so that it is visible to administrator only
<script type="text/javascript" > this.document.getElementById("siteactiontd").style.display = 'none'; </script>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$('.ms-menutoolbar td:eq(2)').hide();
$('.ms-menutoolbar td:eq(3)').hide();
});
</script>
Without using JavaScript you can do this less complicated. Just find element <td> with id="siteactiontd" in masterpage and set style style="visibility:hidden" (using SharePoint Designer) like so: