I need a help , I am new to jQuery and java script .
My TG.js like
var initializeTemplateGrid = function () {
var templateGrid = $("#templateGrid");
templateGrid.kendoGrid({
dataSource: {
transport: {
read: {
url: "",
dataType: "json",
type: "GET"
},
parameterMap: function (data, type) {
if (type == "read") {
return {
limit: data.pageSize,
offset: data.page-1,
sort: data.sort[0].field + ":" + data.sort[0].dir
}
}
}
},
schema: {
data: "Records",
total: "TotalRecordCount"
},
serverPaging: true,
pageSize: 25,
serverSorting: true,
sort: { field: "TemplateName", dir: "asc" }
},
sortable: {
allowUnsort: false
},
pageable: true,
pageable: {
pageSizes: [10, 25, 50]
},
noRecords: {
template: "No Templates Available"
},
columns: [
{
field: "TemplateName",
title: "Template Name"
},
{
template: "<div >#if(data.SiteCount > 0){#<a Id='tt' href=''>#:SiteCount# Sites</a>#} else{#N/A#}#</div>",
field: "SiteCount",
title: "Name TEMP"
}
]
});
};
Currently for TemplateName if sitecount >0 then by href ='' I am moving to main page.
Now I want to create a popup when I click that link with data.SiteCount value.
How can I do it ??
I was tried below
$(function () {
$("#dialog1").dialog({
autoOpen: false
});
$("#opener").click(function () {
$("#dialog1").dialog('open');
});
});
but I am getting a error dialog key word not supported with my project .
You did not mention what other library you have referenced in your project. Add the followings in the layout page:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
Then white a reusable function like this in the layout or your js file:
function showDialogUI(msg, closedTrigger) {
$('#dialogModal span#dialogModalMessage').text(msg);
$("#dialogModal").dialog({
modal: true,
buttons: {
Ok: function () {
$(this).dialog("close");
}
},
close: function () {
if ((closedTrigger === null) || (closedTrigger === undefined)) {
}
else {
closedTrigger();
}
}
});
}
Then from any page call the function like this:
showDialogUI('There is a test message.', null);
In the place of null you can pass a function reference which will be called when the Dialogue box is closed.
Related
I'm using Kendo UI for my grid everything works find with that. I can select one or many rows using scroll and shift. The problem is that if I select row 3 and then some event refresh the grid and after that I want to select row 4 too Kendo is selecting all the above rows, in this case from row 1-4.
So my question is how can I solve this issue?
Desired result in the demo: Select Germany, refresh grid, then select until Belgium. The demo is going to select from row 1 to Belgium.
Here is a demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>
<button id="refresh">Refresh</button>
<div id="grid"></div>
<script>
$(function () {
var selectedOrders = [];
var idField = "OrderID";
$('#refresh').click(() => {
$("#grid").getKendoGrid().dataSource.read();
})
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema: {
model: {
id: "OrderID",
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 400,
selectable: "multiple",
pageable: {
buttonCount: 5
},
sortable: true,
filterable: true,
navigatable: true,
columns: [
{
field: "ShipCountry",
title: "Ship Country",
width: 300
},
{
field: "Freight",
width: 300
},
{
field: "OrderDate",
title: "Order Date",
format: "{0:dd/MM/yyyy}"
}
],
change: function (e, args) {
var grid = e.sender;
var items = grid.items();
items.each(function (idx, row) {
var idValue = grid.dataItem(row).get(idField);
if (row.className.indexOf("k-state-selected") >= 0) {
selectedOrders[idValue] = true;
} else if (selectedOrders[idValue]) {
delete selectedOrders[idValue];
}
});
},
dataBound: function (e) {
var grid = e.sender;
var items = grid.items();
var itemsToSelect = [];
items.each(function (idx, row) {
var dataItem = grid.dataItem(row);
if (selectedOrders[dataItem[idField]]) {
itemsToSelect.push(row);
}
});
e.sender.select(itemsToSelect);
}
});
});
</script>
</body>
</html>
This problem is so similar to the problem I had which I wrote about here, Kendo Grid Persist Row Example. In the example I wrote, I used persistSelection which is recommended.
This behaviour is happening because after the refresh event the grid no longer knows which row was focused previously. So on dataBound, we need to set that focus back. Here's a snippet that might help you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>
<button id="refresh">Refresh</button>
<div id="grid"></div>
<script>
$(function() {
var selectedOrders = [];
var idField = "OrderID";
$('#refresh').click(() => {
$("#grid").getKendoGrid().dataSource.read();
});
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema: {
model: {
id: "OrderID",
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 400,
selectable: "multiple",
pageable: {
buttonCount: 5
},
sortable: true,
filterable: true,
navigatable: true,
columns: [
{
field: "ShipCountry",
title: "Ship Country",
width: 300
},
{
field: "Freight",
width: 300
},
{
field: "OrderDate",
title: "Order Date",
format: "{0:dd/MM/yyyy}"
}
],
change: function (e, args) {
var grid = e.sender;
var items = grid.items();
items.each(function (idx, row) {
var idValue = grid.dataItem(row).get(idField);
if (row.className.indexOf("k-state-selected") >= 0) {
selectedOrders[idValue] = true;
} else if (selectedOrders[idValue]) {
delete selectedOrders[idValue];
}
});
},
dataBound: function (e) {
var grid = e.sender;
var items = grid.items();
var itemsToSelect = [];
items.each(function (idx, row) {
var dataItem = grid.dataItem(row);
if (selectedOrders[dataItem[idField]]) {
itemsToSelect.push(row);
}
});
if (itemsToSelect.length > 0) {
var lastRow = itemsToSelect[itemsToSelect.length - 1];
grid.selectable._lastActive = lastRow;
grid.current($(lastRow).find("td:first"));
}
e.sender.select(itemsToSelect);
}
});
});
</script>
</body>
</html>
you can get and persist selected row on a specific page after edit or paging in change and databound events like this:
Grid_OnRowSelect = function (e) {
this.currentPageNum = grid.dataSource.page();
//Save index of selected row
this.selectedIndex = grid.select().index();
}
.Events(e => e.DataBound(
#<text>
function(e)
{
//جهت نمایش صحیح پیجینگ
var grid = $("#Grid").data("kendoGrid");
grid.pager.resize();
//در صورت تغییر صفحه، سطر را انتخاب نکند
if(this.currentPageNum == grid.dataSource.page())
{
//انتخاب مجدد سطر انتخاب شده قبل از ویرایش
var row = grid.table.find("tr:eq(" + this.selectedIndex + ")");
grid.select(row);
}
}
</text>)
)
in your case you can set rows in a list and use in databound
Hello I am using jqgrid and other function call using ajax when I use these two scripts then one script is working and one is not working.
and show this error in the browser console.
Screen shot
I try a lot of to remove this error but still, I am not able to remove to this error. kindly any expert tells me what is the problem and how can I resolved this error.
<script type="text/javascript" src="~/bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="~/assets/jqgrid/js/jquery.jqgrid.min.js"></script>
<link href="~/assets/jqgrid/jquery-ui-1.12.1.custom/jquery-ui.min.css" rel="stylesheet" />
<script type="text/javascript" src="~/assets/jqgrid/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/css/ui.jqgrid.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/jquery.jqgrid.min.js"></script>
<script type="text/javascript">
$.noConflict();
var rowsToColor = [];
jQuery(document).ready(function ($) {
var $grid = $("#jqGrid");
$grid.jqGrid({
url: '#Url.Action("Ownsership")',
datatype: 'json',
postData: { Membership_ID: function () { return $("#mID").val(); } },
jsonReader: {},
colModel: [
{ name: 'FileID', index: 'FileID', label: 'FILE ID', width: 3 },
{ name: 'UnitNo', index: 'UnitNo', label: 'UNIT NO', width: 7 },
{ name: 'TransDate', index: 'TransDate', label: 'TRANS DATE', width: 8 },
{ name: 'Category', index: 'Category', label: 'FILE CATEGORY', width: 10 },
{ name: 'Project', index: 'Project', label: 'PROJECT', width: 20 }
],
additionalProperties: [],
loadonce: true,
navOptions: {
reloadGridOptions: { fromServer: true }
},
formEditing: {
closeOnEscape: true,
closeAfterEdit: true,
savekey: [true, 13],
reloadGridOptions: {
fromServer: true
}
},
viewrecords: true,
height: 'auto',
autowidth: true,
rowNum: 100,
rowList: [10, 20, 30, 50, 100, 500],
rownumbers: true,
sortname: "Name",
sortorder: "desc"
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
TotalFilesM();
$("#Projectlist").change(function () {
TotalFilesM();
});
});
function TotalFilesM() {
$.ajax({
type: 'GET',
url: '#Url.Action("mTotalFilesMember")',
dataType: 'json',
data: { PhaseID: $("#Projectlist").val() },
success: function (mTotalMemberFiles) {
$('#TotalFilesMember').html(mTotalMemberFiles);
},
error: function (ex) {
var r = jQuery.parseJSON(response.responseText);
alert("Message: " + r.Message);
}
});
return false;
}
</script>
You're using $.noConflict(), which removes the definition of $. After that, you need to use jQuery() instead of $().
You can still use $ inside jQuery(document).ready(function($) { ... }). But your second <script> tag doesn't do it this way, it tries to use $(document).ready() at top-level.
In you console it is showing that
~/bower_components/jquery/dist
in the above path you don't have jquery.min.js check the path where you saved your jquery
and if you ever got the error of $ is not a function using jquery
try to add the online link of Jquery if online link of Jquery works then (70%) times it is the issue of your Jquery path
I am trying to hide one column from excelExport. I have tried some traditional ways shown on google like e.sender.hideColumn(13) or e.sender.hideColumn("bID") or grid.hideColumn(13). but none of this working for me. I have also done exportPDF which is working perfectly.
here is JS code I am attaching, to show what I am doing.
$("#ALReport").kendoGrid({
toolbar: ["excel", "pdf"],
excel: {
allPages: true,
fileName: "ALReport" + todayDateFormatted() + ".xlsx",
proxyURL: "/content",
filterable: true
},
excelExport: function (e) {
e.sender.hideColumn(12);
var grid = $("#ALReport").data("kendoGrid");
grid.hideColumn("Bid");
},
pdf: {
allPages: true,
filterable: true,
fileName: "ALReport" + todayDateFormatted() + ".pdf",
proxyURL: "/content",
margin: {
left: 10,
right: "10pt",
top: "10mm",
bottom: "1in"
}
},
pdfExport: function (e) {
var grid = $("#ALReport").data("kendoGrid");
grid.hideColumn("Bid");
$(".k-grid-toolbar").hide();
e.promise
.done(function () {
grid.showColumn("Bid");
$(".k-grid-toolbar").show();
});
},
dataSource: {
serverSorting: true,
serverPaging: true,
transport: {
read: getActionURL() + "ALReport....
},
.....
This is my js code. Can anyone guide where i am making mistake?
Your export to excel has no effect because event is fired after all data have been collected. For your example try following approach:
var exportFlag = false;
$("#grid").kendoGrid({
toolbar: ["excel", "pdf"],
excel: {
allPages: true,
fileName: "ALReport" + todayDateFormatted() + ".xlsx",
proxyURL: "/content",
filterable: true
},
excelExport: function (e) {
if (!exportFlag) {
e.sender.hideColumn("Bid");
e.preventDefault();
exportFlag = true;
setTimeout(function () {
e.sender.saveAsExcel();
});
} else {
e.sender.showColumn("Bid");
exportFlag = false;
}
}
For this example event is prevented and fired one more time excluding hidden column.
I'm new in using Kendo Grid and Kendo UI . My question is how can i resolve this Error
Uncaught TypeError: Cannot read property 'replace' of undefined
This is my Code on my KendoGrid
$("#Grid").kendoGrid({
scrollable: false,
sortable: true,
pageable: {
refresh: true,
pageSizes: true
},
dataSource: {
transport: {
read: {
url: '/Info/InfoList?search=' + search,
dataType: "json",
type: "POST"
}
},
pageSize: 10
},
rowTemplate: kendo.template($("#rowTemplate").html().replace('k-alt', '')),
altRowTemplate: kendo.template($("#rowTemplate").html())
});
Line that Causes the Error
rowTemplate: kendo.template($("#rowTemplate").html().replace('k-alt', '')),
HTML of rowTemplate
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr class='k-alt'>
<td>
${ FirstName } ${ LastName }
</td>
</tr>
</script>
I think jQuery cannot find the element.
First of all find the element
var rowTemplate= document.getElementsByName("rowTemplate");
or
var rowTemplate = document.getElementById("rowTemplate");
or
var rowTemplate = $('#rowTemplate');
Then try your code again
rowTemplate.html().replace(....)
It could be because of the property pageable -> pageSizes: true.
Remove this and check again.
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<script>
function onDataBound(e) {
var grid = $("#grid").data("kendoGrid");
$(grid.tbody).find('tr').removeClass('k-alt');
}
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 430,
filterable: true,
dataBound: onDataBound,
sortable: true,
pageable: true,
columns: [{
field: "OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
width: 120,
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name",
width: 260
}, {
field: "ShipCity",
title: "Ship City",
width: 150
}
]
});
});
</script>
</head>
<body>
<div id="grid">
</div>
</body>
</html>
I have implemented same thing with different way.
In my case, I was using a View that I´ve converted to partial view and I forgot to remove the template from "#section scripts". Removing the section block, solved my problem. This is because the sections aren´t rendered in partial views.
It is important to define an id in the model
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Model(model => model.Id(p => p.id))
)
I'm using JqGrid in my ASP.NET MVC application using VS2010.My Grid does not seem to render properly on my view and does not allow me to access other controls(including entire page) on the view. See the screen blow:
Grid With Rows in it:
Grid Without Any Row:
But once I modify and submit data back to controller inline editing enter page becomes accessible.
My Script:
var last_selected_row;
$(function () {
var outerwidth = $('#studentList').width() - 10; ////Keep Grid 10 pixel smaller than its parent container
$('#studentGrid').jqGrid({
// Ajax related configurations
//url to send request to
url: "/Registration/LoadStudents",
datatype: "json",
mtype: "POST",
// Specify the column names
colNames: ["StudentID", "StudentName", "Status", "Grades", "StartDate", "EndDate", "EarnedDate", "DroppedDate"],
// Configure the columns
colModel: [
{ name: "StudentID", index: "StudentID", width: 0, align: "left", key: true },
{ name: "StudentName", index: "StudentName", editrules: { required: true, integer: false }, width: 100, title: "Name", align: "left", editable: true, stype: 'text', sortable: true },
{ name: "Status", index: "Status", width: 70, align: "left", editable: true, edittype: "checkbox", editoptions: { value: "true:false"} },
{ name: "Grades", index: "Grades", width: 80, align: "left", editable: true, edittype: "select", editoptions:
{
dataUrl: "/Registration/GetAllGrades",
buildSelect: function (data) {
//var d = $.parseJSON(data);
var jqGridAssemblyTypes = $.parseJSON(data);
var s = '<select>';
if (jqGridAssemblyTypes && jqGridAssemblyTypes.length) {
for (var i = 0, l = jqGridAssemblyTypes.length; i < l; i++) {
var ri = jqGridAssemblyTypes[i];
s += '<option value="' + ri.Value + '">' + ri.Text + '</option>';
}
}
return s + "</select>";
},
dataInit: function (elem) {
var v = $(elem).val();
////Set other column value here
},
dataEvents: [{
type: 'change',
fn: function (e) {
var assemblyType = $(e.target).val();
//var rowId = getRowId($(this));
}
}]
}
},
{ name: "StartDate", editable: true, editrules: { edithidden: false }, editoptions: { dataInit: function (element) { SetFieldReadOnly(element); } }
, index: "StartDate", width: 100, align: "left", formatter: 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' }
},
{ name: "EndDate", editable: true, editrules: { edithidden: false }, editoptions:
{ dataInit: function (element) {
$(element).attr("readonly", "readonly");
}
}, index: "EndDate", title: "Ended", width: 100, align: "left", formatter: 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' }
},
{ name: "EarnedDate", editable: true, editrules: { edithidden: false }, editoptions:
{ dataInit: function (element) {
$(element).attr("readonly", "readonly");
}
}, index: "EarnedDate", title: "Earned", width: 100, align: "left", formatter: 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' }
},
{ name: "DroppedDate", editable: true, editrules: { edithidden: false }, editoptions:
{ dataInit: function (element) {
$(element).attr("readonly", "readonly");
}
}, index: "DroppedDate", title: "Dropped", width: 100, align: "left", formatter: 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' }
}],
// Grid total width and height
//width: 300,
//height: 200,
//autowidth: true,
height: '100%',
altRows: true,
shrinkToFit: false,
//forceFit: true,
gridview: true,
//width: 600,
// Paging
toppager: false,
pager: $("#studentGridPager"),
rowNum: 5,
rowList: [5, 10, 20],
viewrecords: true,
// Default sorting
sortname: "StudentID",
sortorder: "asc",
ajaxRowOptions: { contentType: "application/json", dataType: "json" },
serializeRowData: function (data) {
return JSON.stringify({ registrationModel: data });
},
ondblClickRow: function (StudentId) { StudentDoubleClicked(StudentId); },
// Grid caption
editurl: "/Registration/EditStudents",
jsonReader: { repeatitems: false },
caption: "Students"
}).setGridWidth(outerwidth);
function bindAllGrades() {
var dataString = '';
var grades = new Array();
$.getJSON("/Registration/GetAllGrades", null, function (data) {
if (data != null) {
$.each(data, function (i, item) {
grades.push("{\"Text\":\"" + item.Text + "\",\"Value\":\"" + item.Value + "\"}");
dataString += "{\"Text\":\"" + item.Text + "\",\"Value\":\"" + item.Value + "\"},";
});
dataString = dataString.slice(0, -1);
}
});
var jstrin = JSON.stringify(grades);
return grades;
}
function StudentDoubleClicked(StudentId) {
var $myGrid = $("#studentGrid");
if (StudentId && StudentId != last_selected_row) {
$myGrid.jqGrid('restoreRow', last_selected_row);
$myGrid.jqGrid('saveRow', StudentId, {
successfunc: function (response) {
alert('Row is Saved !!!');
return true;
}
}, '/Registration/EditStudents',
{
extraparam: {
StudentID: function () {
var sel_id = $myGrid.jqGrid('getGridParam', 'selrow');
var value = $myGrid.jqGrid('getCell', sel_id, 'StudentID');
return stId;
},
StudentName: getSavedMathValue(StudentId),
Status: function () {
var sel_id = $myGrid.jqGrid('getGridParam', 'selrow');
var value = $myGrid.jqGrid('getCell', sel_id, 'Status');
return value;
}
}
}, function () { alert('This is After save.') }, function () { alert('Error while saving data.') }, reload);
$myGrid.jqGrid('editRow', StudentId, true);
last_selected_row = StudentId;
}
}
function getSavedMathValue(stId) {
var mval = $('#' + stId + "_StudentName");
return mval.val();
}
function SetFieldReadOnly(Ele) {
$(Ele).attr("readonly", "readonly");
}
})
function reload(rowid, result) {
alert("This is Reload " + Result);
$("#studentGrid").trigger("reloadGrid");
}
My View:
<%# Page Language="C#" Inherits="System.Web.Mvc.ViewPage<SISShsmMvc.Models.RegistrationModel>" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.jqGrid.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.jqGrid.locale-en.js"></script>
<%: Scripts.Render("~/bundles/autocomplete")%>
<script type="text/javascript" src="../../Scripts/Registration.js"></script>
</head>
<body>
<div>
<fieldset>
<legend>Search Student By</legend>
<div id="studentSearch">
<span>Name:</span><br />
<%= Html.TextBoxFor(m => m.StudentName, new { ID = "StudentName" })%><br />
<span>Grade:</span><br />
<%= Html.DropDownListFor(m => m.SelectedGrade, Model.AvailableGrades) %><br />
</div>
</fieldset>
<div id="studentList">
<table id="studentGrid">
</table>
<div id="studentGridPager" />
</div>
</div>
</body>
</html>
My Controller:
public ActionResult Index()
{
PopulateUserContextViewBags();
List<string> grades = new List<string>();
grades.Add("Grades 11 and 12");
grades.Add("Grades 12");
grades.Add("Grades 11");
grades.Add("Grades 10");
grades.Add("All Grades");
// TODO:
Models.RegistrationModel model = new Models.RegistrationModel()
{
AvailableGrades = new SelectList(grades, "Grades 11 and 12")
};
return View(model);
}
public ActionResult LoadStudents()
{
var objmodel = Models.RegistrationRepository.GetStudents();
return Json(objmodel, JsonRequestBehavior.AllowGet);
//return Json(null, JsonRequestBehavior.AllowGet);
}
public JsonResult EditStudents(Models.RegistrationModel registrationModel)
{
// registrationModel.StudentID = id;
return Json(null, JsonRequestBehavior.AllowGet);
}
I'm using JqGrid 4.5.1. I've tested this code in IE9 and Firefox 22.0. Any help ??
I solved it by adding ui.jqgrid.css to my view:
This is how my view looks now:
" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.jqGrid.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.jqGrid.locale-en.js"></script>
<!-- Newly added .css solved the problem -->
<link rel="Stylesheet" type="text/css" href="../../Content/ui.jqgrid.css" />
<%: Scripts.Render("~/bundles/autocomplete")%>
<script type="text/javascript" src="../../Scripts/Registration.js"></script>
</head>
<body>
<div>
<fieldset>
<legend>Search Student By</legend>
<div id="studentSearch">
<span>Name:</span><br />
<%= Html.TextBoxFor(m => m.StudentName, new { ID = "StudentName" })%><br />
<span>Grade:</span><br />
<%= Html.DropDownListFor(m => m.SelectedGrade, Model.AvailableGrades) %><br />
</div>
</fieldset>
<div id="studentList">
<table id="studentGrid">
</table>
<div id="studentGridPager" />
</div>
</div>
</body>
</html>
Hope this will help someone in future!