I am using WebGrid helper to make grid sortable in my MVC application.
#{
var grid = new WebGrid(Model, canSort:true );
#grid.GetHtml( columns:grid.Columns(
grid.Column( "Username", "Full Name", canSort:true ),
grid.Column("Profile","Profile", canSort:false)
));
}
Sortable column will override(display blue link) default style of header how can I maintain that?
In last column I have image action which will open popup using javascript dialog
<img title="View Detail" style="cursor: pointer" onclick="openPopup('#item.EncryUserId')"
src="#Url.Content("~/Content/Images/view-fullscreen.png")" />
How can I add this additional column using WebGrid?
Thanks.
Finally I got answer as per below
grid.Column(header: "Details",
format: #<text><img src="#Url.Content("~/Content/Images/view-fullscreen.png")"
style="cursor: pointer" onclick="openPopup('#item.EncryUserId')"
alt="View Detail" title="View Detail"/></text>)
and inside header there is anchor tag so i have added headerStyle: "tdheader"
and add new style .tdheader a{ color: white};
grid.Column(format:
#<img title="View Detail" style="cursor: pointer" onclick="openPopup('#item.EncryUserId')" src="#Url.Content("~/Content/Images/view-fullscreen.png")" />
)
Related
Please suggest me regarding one issue. I am using MVC3 Razor webgrid I need 2 input submit/button [Edit/Delete] in each row. Should be button not link. Code is something like this.
#grid.GetHtml(columns:
grid.Columns(
grid.Column("ID", "id"),
grid.Column("Value", "Value"),
grid.Column(format: #<input type="button" value="Edit"/>),
grid.Column(format: #<input type="button" value="Delete"/>))
)
I have to do on server no javascript function.
Thanks a lot
You can use ACTION LINK here,
#grid.GetHtml(columns:
grid.Columns(
grid.Column("ID", "id"),
grid.Column("Value", "Value"),
grid.Column(format: #Html.ActionLink("Edit", "EditAction", new { id = item.id}),
grid.Column(format: #Html.ActionLink("Delete", "DeleteAction", new { id = item.id})
)
you can then define a nice css for it to make it look like a button,
refer
http://www.dofactory.com/topic/1015/html-actionlink-and-class-attribute.aspx
After trying options I accomplish this using a hidden field. On click button populate hidden field with javascript and submit form using javascript.
grid.Column(format: #<form method="get"action="/Controller/Action/#item.id">
<input id="Submit" type="submit" value="Edit" />
</form>)
How can I specify the font for an html webgrid in asp.net-mvc3?
#{
var grid = new WebGrid(...);
}
<div id="grid">
#grid.GetHtml(
tableStyle: "webgrid",
headerStyle: "head",
...)
Where are these styles being created?
<div id="grid">
#grid.GetHtml(
tableStyle: "webgrid", <- I can't find these styles anywhere in my mvc3 project?
headerStyle: "head",
try this: in your css
(or div#grid p i dont know what tag will be appear for grid rows when grid is rendered, you can use for example firebug and see what tag will be there )
div#grid span
{
font-size: 10px;
}
and if you cant find webgrid class try to write it by yourself.
<div class="orderby_name">
#Html.ActionLink(" ", "DisplayCategory", "Categories", new { articleSortBy = "Name", articleSortType = "asc" }, null)
</div>
i am lookin in razor if exist ImageLink. Now i have #Html.ActionLink and becouse i do not have any text name i can not click on it. I want to have image as link.
How can i make image as link in razor?
The built-in helper cannot do that.
You need to create an ordinary <a href="#Url.Action(...)"> tag.
Hope this code is helpful
#using (Html.BeginForm())
{
<a href='#Url.Action("Index")'>
<img src='#Url.Content("../../Content/Images/head.jpg")' alt="Home Page">
</a> }
Actually it looks like there is a way.. if you add a CSS rule to the htmlAttributes, as is shown in the top answer of this post:
Html.ActionLink as a button or an image, not a link
In asp.net mvc 3 the code you have works with the single space for the link text, just add a class name that points to an image (the class name below points to a font awesome image):
#Html.ActionLink(" ", "ActionName", "ControllerName",
new {UniqueId = item.UniqueId},
new { #class = "fa fa-download", #title = "Download the document" })
And add some css to prevent the image from having an underline:
a.fa
{
text-decoration:none;
}
According the the jqGrid documentation, I should be able to place the pager above or below the jqGrid by moving the pager div. Unfortunately, the pager always renders below the grid.
<div id="pager"></div>
<table id="list">
<tr>
<td />
</tr>
</table>
The jqGrid configuration (related to the pager) looks like:
pager: '#pager',
pginput: false,
pgbuttons: false,
Any suggestions?
You should use toppager:true jqGrid option instead. You don't need define <div id="pager"></div> and use pager: '#pager' parameter. The id of the pager from the top of jqGrid will be "list_toppager" (id of the table element appended with "_toppager").
If you want to add navigator you can use
$("#list").jqGrid('navGrid','#list_toppager');
If you use define <div id="pager"></div> and use pager: '#pager' parameter you will have two pager: one with id="list_toppager" on top of the grid and anothe with id="pager" on the bottom. If you want use both top and bottom pager you can use
$("#list").jqGrid('navGrid','#pager',{cloneToTop:true});
and then move or remove (see another answer for more details and the demo example). You can also very easy move buttons from one toolbar to the other using jQuery.insertAfter function (see here).
use a $ append. the html above table is like this
<div id="export"></div>
add the id and use a promise().done(): "exportButton"
$(grid).jqGrid('navButtonAdd', self.options.pagerSelector, { id: "exportButton", caption: "Export to CSV", buttonicon: "ui-icon-newwin", onClickButton: function() { self._exportToCSV(self, grid); }, position: "last", title: "Export to CSV", cursor: "pointer" })
.promise().done(function() {
//reposition export button
$("#export").append($("#exportButton"));
$("#exportButton").addClass("pull-right").show();
});
can we use google AJAX Language API with EXTjs?????
i have tried example for translitration i have one html file
and typemarathi.js
google.load("elements", "1", { packages: "transliteration" });
function onLoad() {
var options = {
sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage: [google.elements.transliteration.LanguageCode.MARATHI],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
var control = new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the editable DIV with id
// 'transliterateDiv'.
control.makeTransliteratable([myname]);
}
google.setOnLoadCallback(onLoad);
it works fine.
but if i write the textfield in extjs
Ext.onReady(function(){
var form1=new Ext.FormPanel({
renderTo:document.body,
frame:true,
title:'My First Form',
widyh:250,
items:[{ xtype:'textfield', fieldLabel:'First name', name:'firstname'}]
});
});
and try to pass firstname (name attribute to control.makeTransliteratable([firstname])) then it does not work... it says invalid id error
but if i pass->(html textfiled name to it) control.makeTransliteratable([myname]) it works fine
(i want to type and display multiple nonEnglish languages data
programatically frontend i used EXTjs is there any another way to do so if yes the suggest me. pls..
Yes you can.
Besides someone should clean his code, thats hurrible.
Yes, you can. But you should know that ExtJs automatically generates identifiers for html elements:
html:
<div class="x-form-item x-form-label-left x-box-item" id="ext-gen27" style="left: 0px; top: 0px;">
<label style="width: 55px;" class="x-form-item-label" id="ext-gen28">Send To:</label>
<div style="padding-left: 60px; width: 668px;" class="x-form-element" id="ext-gen26">
<div class="x-form-field-wrap x-form-field-trigger-wrap x-trigger-wrap-focus" id="ext-gen24" style="width: 668px;">
<input type="text" name="to" id="ext-comp-1002" autocomplete="off" size="24" class=" x-form-text x-form-field x-form-focus" style="width: 651px;">
</div>
</div>
</div>
js:
....
items: [{
xtype: 'combo',
store: ['test#example.com', 'someone-else#example.com' ],
plugins: [ Ext.ux.FieldReplicator, Ext.ux.FieldLabeler ],
fieldLabel: 'Send To',
name: 'to'
}]
As I understand you need to translate the label. In order to do this you should get the id of the label. To do this you can use TextField's label property (myField.label.id). If you want to translate a lot of elements then probably it'll be better for you to use something like this:
var control = new google.elements.transliteration.TransliterationControl(options);
var labelIds = [];
Ext.each(Ext.select('label'), function(item){
labelIds.push(item.id);
});
control.makeTransliteratable(labelIds);
But be aware that you should call this only after rendering all elements. Also you can write a some plugin that will inject this functionality into 'render' method. Writing a plugin is a better but a bit more harder way.