i am trying to get a column with an html.actionlink into a jqgrid? any ideas ?
any other grid suggestions welcome too. ta
don't need to use telerik for column with an html.actionlink. We can use this in jqGrid itself
. Below are the code.
{ name: 'Restart',
formatter: function (cellvalue, options, rowObject) {
var x = '#Html.ActionLink( "Restart", "Restart","Dashboard",new { requestId ="myId" }, new {#style="color:Blue;font-weight:bold;", onclick = "return confirm('Are you sure to Restart?');" })';
return x.replace("myId",rowObject[8]);
}, align: 'left', width: 100
}
or
{ name: 'Restart',
formatter: function (cellvalue, options, rowObject) {
return '#Html.ActionLink( "Restart", "Restart","Dashboard",new { requestId ="yourId" }, new {#style="color:Blue;font-weight:bold;", onclick = "return confirm('Are you sure to Restart?');" })';
}, align: 'left', width: 100
}
Its working fine for me
You can try telerik extensions for asp.net mvc. i used it personally and found it really good.
here is link to demo page. its open source
Related
I want to display a image in the column of jqgrid for all data I get from '/Index/CaseBatchDetailList'. i have my jquery like,
$(function () {
var outerwidth = $('#TableCaseDtlsView').width();
$("#CaseBatchDetailList").jqGrid({
url: '/Index/CaseBatchDetailList',
datatype: 'json',
mtype: "GET",
colNames: ["Serial Number", "Denomination", "Note Image", "Back Image"],
colModel: [
{ name: "serialno", sortable: true, width: "120px", align: "center" },
{ name: "denomination", sortable: true, width: "120px", align: "left" },
{
name: "frontimageurl", sortable: false, width: "290px", align: "center", fixed: true,
formatter: function () {
return "<img src = /F:/MCP_Images/635101007551068098_324.jpg>";
}
},
{
name: "backimageurl", sortable: false, width: "290px", align: "center", fixed: true,
formatter: function () {
return "<img src = /F:/MCP_Images/635101007551068098_324.jpg>";
}
}
],
...
});
i just tried with the example for img src. I need to display the different images in different columns. As iam the beginner i dont know how to manipulate this.Kindly tell me how to achieve this.
As i saw your comment that you are having the image source in the list, then within your formatter you can do this:
formatter: function (cellvalue, options, rowobject) {
return "<img src='"+cellvalue+"'>";
}
I have an MVC Edit View that contains Contact Information that is of course editable. In that view I want to add a section containing a JQGrid allowing the user to CRUD notes for the Contact but my grid is not loading with data nor is the method on the controller being called. Can anyone give me any insite?
View Code
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-info">
Contact Note</h3>
</div>
<div class="panel-body">
<div class="scrollableContainer" style="margin-top: -10px;">
<table id="JQGrid1"></table>
<div id="JQGrid1_pager"></div>
</div>
</div>
</div>
<script>
$("#JQGrid1").jqGrid({
url: '#Url.Action("GetNotes", "Contact")',
mtype: "GET",
datatype: "json",
page: 1,
jsonReader: { id: document.getElementById('SelectedContact_ContactID').value },
prmNames: { id: document.getElementById('SelectedContact_ContactID').value },
colNames: ["Id", "ContactId", "Note", "Date Created", "Created By"],
colModel: [
{ key: true, width: 50, name: "ID", hidden: false },
{ width: 60, name: "ContactID", hidden: false },
{ width: 460, name: "Note", hidden: false },
{ width: 160, name: "DateCreated",
formatter: "date", formatoptions: { srcformat: "m/d/Y h:i:s A", newformat: "mm-dd-yyyy" }, hidden: false },
{ width: 160, name: "CreatedBy", hidden: false },
],
height: "auto",
caption: "Notes",
rowNum: 5,
pager: "#JQGrid1_pager",
});
</script>
Controller Code
[HttpGet]
public JsonResult GetNotes(int id)
{
var gridModel = new ContactNotesJQGridModel();
var resultset = _contactNoteRepository.GetNotes(id);
return gridModel.ContactNotesGrid.DataBind(resultset.AsQueryable());
}
GridModel Class
public class ContactNotesJQGridModel
{
public JQGrid ContactNotesGrid { get; set; }
public ContactNotesJQGridModel()
{
ContactNotesGrid = new JQGrid
{
Columns = new List<JQGridColumn>()
{
new JQGridColumn {DataField = "ID", PrimaryKey = true},
new JQGridColumn {DataField = "ContactId"},
new JQGridColumn {DataField = "Note"},
new JQGridColumn {DataField = "DateCreated"},
new JQGridColumn {DataField = "CreatedBy"},
}
};
}
Then in the Edit Call for the Contact in the Contact Controller I set model.ContactNotesGrid = new ContactNotesJQGridModel GetNotes(int id) is never executed eventhough it's specified in the jquery.
You should use postData to add custom parameter to the server response:
postData: { id: 11 }
or
postData: {
id: function () {
return document.getElementById('SelectedContact_ContactID').value;
}
}
You need additionally modify the code of the server to use something like
return Json(someObjectWithReturnedData, JsonRequestBehavior.AllowGet);
I recommend you to add loadError callback to the list of jqGrid option (see the answer) and add gridview: true and autoencode: true option to jqGrid.
P.S. About the errors like "unable to get value of the property integer", "unable to get value of the property decimalSeperator". You should verify that you included locale file like i18n/grid.locale-en.js before jquery.jqGrid.min.js (see the documentation).
Try this :
Check 1:
Move your Jquery script inside the document ready event:
$( document ).ready(function() {
console.log( "ready!" );
});
Check 2:
Check weather your server request having any problem or not:
protected void Application_Error(object sender, EventArgs e)
{
Exception exception = Server.GetLastError();
Response.Clear();
}
Add the above code in your Global.asax and make sure there is no exception during the call. (Put Break point and check)
Check 3:
Watch your browser console log (F12). If there is any exception log please provide that.
Check 4:
Make sure if the call is success the expected json format is valid or not. In most of the cases it will be the major cause.
The above's are just my guesses / this is what i do first, if i have a prob. :)
I'm trying to use Highcharts in my MVC web application. I have loaded all the prerequisites to make Highcharts working. But apparently, "highchart" is still not recognized by the page. I'm checking the rendered page by google developer tool and it says all the JQuery and Highchart javascript files are loaded properly. Any help?
This is my .cshtml code:
#using System.Web.Optimization
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/Scripts/Highcharts-4.0.1/js/highcharts.js")
#Scripts.Render("~/Scripts/Highcharts-4.0.1/js/modules/exporting.js")
<script type="text/javascript">
$(function() {
var chart;
debugger;
$(document).ready(function() {
debugger;
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
});
</script>
}
So this does the trick (which is kind of weird!) :
I need to change this line:
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
To this line:
chart = new Highcharts.Chart({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
renderTo: 'container'
},
This is the link which helped me through: http://developmentpassion.blogspot.com/2013/09/bar-charts-and-graphs-in-aspnet-mvc.html
I am constructing a jqgrid with the following code:
$(document).ready(function () {
$("#Data").jqGrid({
url: '/Home/LoadData',
loadonce:true,
datatype: "json",
mtype: "GET",
colNames:["ID"],
colModel: [
{ name: "Id",index:'ID',width:800, align: "center"}
],
pager: "#Pager",
rowNum: '10',
rowList: [10, 20, 30],
sortname: "ID",
sortorder: "asc",
height: "auto",
gridview:true,
sortname: "ID",
viewrecords: true,
caption: "My First Grid",
loadComplete: function (data) {
var $this = $(this),
datatype = $this.getGridParam('datatype');
if (datatype === "xml" || datatype === "json") {
setTimeout(function () {
$this.trigger("reloadGrid");
}, 100);
}
}
});
});
This is working absolutely fine. But, this is all happening in the client side. I am also using loadonce:true to the grid which means the grid loads all the data at once.
But, i am having approx 30,000 records.
loadonce=true
This is not an correct option. So, i need to implement server side sorting and server side paging.
I need to load records like page by page but sorting/Filtering should happen taking into consideration all the records.
Please help in this..if possible please provide code sample for C# code and Jquery script for paging and sorting..
I am using the jQuery validator to validate a jQuery multiselect dropdownlist but it does not validate, my functions are bellow:
These functions are created from my code behind and registered on the page with the ScriptManager.RegisterClientScriptBlock.
I put the following directly on the aspx page and it then validates the multiselect, but as soon as I do it from the code behind and register the script, all validators besides the multiselect works.
$.validator.addMethod('notNone', function(value, element) {
return (value != '-1');
}, 'Please select an option.');
var $callback = $("#callback");
$(document).ready(function () {
$("#<%=example.ClientID%>").multiselect(
{
show: "fade",
hide: "fade",
click: function (event, ui) {
$callback.text(ui.text + ' ' + (ui.checked ? 'checked' : 'unchecked'));
},
});
});
$("#form1").validate({
rules: {
<%=example.UniqueID %>: {
notNone: true,
},
<%=txtPassword.UniqueID %>: {
//minlength: 5,
//required: true
},
<%=TextIdea.UniqueID %>: {
//minlength: 5,
//required: true
},
<%=ddlTest.UniqueID %>: {
//notNone: true
},
redemption : {
redemption : false
},
redemption: {
redemptionEnd : false
},
},
ignore: ':hidden:not("#<%=example.ClientID %>")',
messages: {
<%=example.UniqueID %>:{
notNone: "Plaese select something",
},
<%=txtPassword.UniqueID %>:{
required: "Plaese enter your password",
minlength: "Password must be atleaet of 5 characters"
},
<%=TextIdea.UniqueID %>:{
required: "Plaese enter your Ideas",
minlength: "Password must be atleaet of 5 characters"
},
}
});
My markup:
<select id="example" name="example" runat="server">
</select>
Am I doing something wrong? Please help guys.
Thanks in advance.
Okay, after 2 days I finally figured out what was going on, turns out the controls that use the jQuery multiSelect, their UniqueID gets appended with _multiSelect and the ClientID gets appended with $multiSelect.
Added those strings when getting the Client/UniqueID and it works.