JqGrid - Rendering Issue

JqGrid - Rendering Issue - javascript

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!

Related

Kendo grid loosing selected row

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

How to create a popup in js

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.

Kendo UI Grid : Drag and Drop Hierarchy not working

I want to drag and drop in different Grid with hierarchical data.
The Drag and drop is working fine but the row is not dropping in Detail item in destination grid.
I have created the sample here. here is the sample for the same..
The following code shows how i built this, but getting some issues in the same. Please help me out what mistake i am doing in this?
function convert(array) {
var map = {};
for (var i = 0; i < array.length; i++) {
var obj = array[i];
obj.items = [];
map[obj.DemographicId] = obj;
var parent = obj.ParentId || '-';
if (!map[parent]) {
map[parent] = {
items: []
};
}
map[parent].items.push(obj);
}
return map['-'].items;
}
var arr = [{"Level":1,"DemographicId":13,"ParentId":null,"Name":"Bewitched General","Description":0.335336528},{"Level":2,"DemographicId":349,"ParentId":13,"Name":"Unacceptable Experience","Description":0.335336528},{"Level":1,"DemographicId":14,"ParentId":null,"Name":"Trained Trust","Description":29.17427794},{"Level":2,"DemographicId":329,"ParentId":14,"Name":"Concerned Rest","Description":0.335336528},{"Level":2,"DemographicId":331,"ParentId":14,"Name":"Tough Sleep","Description":2.012019168},{"Level":3,"DemographicId":346,"ParentId":331,"Name":"Icy Coffee","Description":0.335336528},{"Level":3,"DemographicId":347,"ParentId":331,"Name":"Big Fix","Description":0.335336528},{"Level":3,"DemographicId":348,"ParentId":331,"Name":"Total Worry","Description":0.335336528},{"Level":3,"DemographicId":431,"ParentId":331,"Name":"Fast Discipline","Description":0.335336528},{"Level":3,"DemographicId":586,"ParentId":331,"Name":"Intrepid Sister","Description":0.335336528},{"Level":2,"DemographicId":376,"ParentId":14,"Name":"Hasty Ordinary","Description":0.335336528},{"Level":2,"DemographicId":428,"ParentId":14,"Name":"Unnatural Native","Description":1.006009584},{"Level":3,"DemographicId":442,"ParentId":428,"Name":"Tan Celebration","Description":0.335336528},{"Level":3,"DemographicId":492,"ParentId":428,"Name":"Wise Repair","Description":0.335336528},{"Level":2,"DemographicId":443,"ParentId":14,"Name":"Frightening Historian","Description":3.018028753},{"Level":3,"DemographicId":328,"ParentId":443,"Name":"Improbable Stage","Description":0.335336528},{"Level":3,"DemographicId":517,"ParentId":443,"Name":"Heavenly Debt","Description":0.335336528},{"Level":3,"DemographicId":526,"ParentId":443,"Name":"That Art","Description":2.012019168},{"Level":4,"DemographicId":524,"ParentId":526,"Name":"Vivacious Competition","Description":0.670673056},{"Level":5,"DemographicId":445,"ParentId":524,"Name":"Dependable Potato","Description":0.335336528},{"Level":4,"DemographicId":525,"ParentId":526,"Name":"Watchful Tough","Description":1.006009584},{"Level":5,"DemographicId":432,"ParentId":525,"Name":"Lovable Sing","Description":0.670673056},{"Level":6,"DemographicId":435,"ParentId":432,"Name":"Vengeful Cigarette","Description":0.335336528},{"Level":2,"DemographicId":522,"ParentId":14,"Name":"Insistent Offer","Description":0.335336528},{"Level":2,"DemographicId":590,"ParentId":14,"Name":"Oddball Airline","Description":0.335336528},{"Level":2,"DemographicId":591,"ParentId":14,"Name":"Back Outcome","Description":20.79086474},{"Level":3,"DemographicId":330,"ParentId":591,"Name":"Mushy Active","Description":0.335336528},{"Level":3,"DemographicId":427,"ParentId":591,"Name":"Immaterial Safety","Description":1.341346112},{"Level":4,"DemographicId":437,"ParentId":427,"Name":"Same Restaurant","Description":0.335336528},{"Level":4,"DemographicId":438,"ParentId":427,"Name":"Imaginary Brother","Description":0.335336528},{"Level":4,"DemographicId":613,"ParentId":427,"Name":"Bubbly Hole","Description":0.335336528},{"Level":3,"DemographicId":433,"ParentId":591,"Name":"Several Weird","Description":2.682692225},{"Level":4,"DemographicId":426,"ParentId":433,"Name":"Deadly Potato","Description":0.335336528},{"Level":4,"DemographicId":436,"ParentId":433,"Name":"Ornery Race","Description":0.335336528},{"Level":4,"DemographicId":440,"ParentId":433,"Name":"Trusting Native","Description":0.335336528},{"Level":4,"DemographicId":441,"ParentId":433,"Name":"Flowery Tower","Description":0.335336528},{"Level":4,"DemographicId":479,"ParentId":433,"Name":"Downright Fall","Description":0.335336528},{"Level":4,"DemographicId":480,"ParentId":433,"Name":"Unique Career","Description":0.335336528},{"Level":4,"DemographicId":614,"ParentId":433,"Name":"Unknown Thomas","Description":0.335336528},{"Level":3,"DemographicId":592,"ParentId":591,"Name":"Judicious Analyst","Description":0.335336528},{"Level":3,"DemographicId":593,"ParentId":591,"Name":"Hard Major","Description":0.335336528},{"Level":3,"DemographicId":595,"ParentId":591,"Name":"Naughty Temporary","Description":0.335336528},{"Level":3,"DemographicId":596,"ParentId":591,"Name":"Crisp Commission","Description":0.335336528},{"Level":3,"DemographicId":597,"ParentId":591,"Name":"Valid Funny","Description":0.335336528},{"Level":3,"DemographicId":598,"ParentId":591,"Name":"Luminous Log","Description":0.335336528},{"Level":3,"DemographicId":599,"ParentId":591,"Name":"Sour Introduction","Description":0.335336528},{"Level":3,"DemographicId":600,"ParentId":591,"Name":"Elegant Player","Description":0.335336528},{"Level":3,"DemographicId":601,"ParentId":591,"Name":"Wilted Scheme","Description":1.006009584},{"Level":4,"DemographicId":444,"ParentId":601,"Name":"That Research","Description":0.335336528},{"Level":4,"DemographicId":609,"ParentId":601,"Name":"Overcooked Message","Description":0.335336528},{"Level":3,"DemographicId":602,"ParentId":591,"Name":"Good-natured Responsibility","Description":3.688701809},{"Level":4,"DemographicId":478,"ParentId":602,"Name":"Cumbersome Battle","Description":0.335336528},{"Level":4,"DemographicId":515,"ParentId":602,"Name":"Unsightly Contest","Description":2.682692225},{"Level":5,"DemographicId":439,"ParentId":515,"Name":"Mushy Explanation","Description":0.335336528},{"Level":5,"DemographicId":508,"ParentId":515,"Name":"Obvious Pride","Description":0.670673056},{"Level":6,"DemographicId":509,"ParentId":508,"Name":"Negligible Ask","Description":0.335336528},{"Level":5,"DemographicId":514,"ParentId":515,"Name":"Concerned Classic","Description":1.341346112},{"Level":6,"DemographicId":510,"ParentId":514,"Name":"Greedy Double","Description":0.335336528},{"Level":6,"DemographicId":511,"ParentId":514,"Name":"Reflecting Poem","Description":0.335336528},{"Level":6,"DemographicId":512,"ParentId":514,"Name":"Every Finish","Description":0.335336528},{"Level":4,"DemographicId":610,"ParentId":602,"Name":"Zigzag Meet","Description":0.335336528},{"Level":3,"DemographicId":603,"ParentId":591,"Name":"Esteemed Satisfaction","Description":0.335336528},{"Level":3,"DemographicId":604,"ParentId":591,"Name":"Normal Trouble","Description":1.341346112},{"Level":4,"DemographicId":485,"ParentId":604,"Name":"Hot Fish","Description":0.335336528},{"Level":4,"DemographicId":611,"ParentId":604,"Name":"Eager Perception","Description":0.335336528},{"Level":4,"DemographicId":612,"ParentId":604,"Name":"Shocking Aside","Description":0.335336528},{"Level":3,"DemographicId":605,"ParentId":591,"Name":"Terrific King","Description":0.335336528},{"Level":3,"DemographicId":606,"ParentId":591,"Name":"Humiliating Suit","Description":0.335336528},{"Level":3,"DemographicId":607,"ParentId":591,"Name":"Serious Smile","Description":0.335336528},{"Level":3,"DemographicId":608,"ParentId":591,"Name":"Memorable Ship","Description":3.353365281},{"Level":4,"DemographicId":430,"ParentId":608,"Name":"Wan Science","Description":0.335336528},{"Level":4,"DemographicId":434,"ParentId":608,"Name":"Hard Rule","Description":0.335336528},{"Level":4,"DemographicId":473,"ParentId":608,"Name":"Marvelous Radio","Description":0.335336528},{"Level":4,"DemographicId":477,"ParentId":608,"Name":"Visible Personality","Description":0.335336528},{"Level":4,"DemographicId":481,"ParentId":608,"Name":"Scrawny Shine","Description":0.335336528},{"Level":4,"DemographicId":507,"ParentId":608,"Name":"Descriptive Pride","Description":0.335336528},{"Level":4,"DemographicId":516,"ParentId":608,"Name":"Pleased Private","Description":0.335336528},{"Level":4,"DemographicId":548,"ParentId":608,"Name":"Frizzy District","Description":0.335336528},{"Level":4,"DemographicId":615,"ParentId":608,"Name":"Juicy Organization","Description":0.335336528},{"Level":3,"DemographicId":616,"ParentId":591,"Name":"Sweaty Equal","Description":0.335336528},{"Level":3,"DemographicId":621,"ParentId":591,"Name":"Sweltering Cigarette","Description":0.335336528},{"Level":3,"DemographicId":623,"ParentId":591,"Name":"Buoyant Rule","Description":0.335336528},{"Level":3,"DemographicId":625,"ParentId":591,"Name":"Whimsical Remote","Description":0.335336528},{"Level":3,"DemographicId":633,"ParentId":591,"Name":"Notable Feed","Description":0.335336528},{"Level":3,"DemographicId":635,"ParentId":591,"Name":"Puzzled Pin","Description":1.006009584},{"Level":4,"DemographicId":594,"ParentId":635,"Name":"Plump Member","Description":0.335336528},{"Level":4,"DemographicId":636,"ParentId":635,"Name":"Colorless Service","Description":0.335336528},{"Level":2,"DemographicId":618,"ParentId":14,"Name":"Extroverted Excuse","Description":0.335336528},{"Level":2,"DemographicId":622,"ParentId":14,"Name":"Definite Sector","Description":0.335336528},{"Level":2,"DemographicId":631,"ParentId":14,"Name":"Dear Blue","Description":0.335336528},{"Level":1,"DemographicId":15,"ParentId":null,"Name":"Weird Rush","Description":3.688701809},{"Level":2,"DemographicId":461,"ParentId":15,"Name":"Vigilant Mine","Description":0.335336528},{"Level":2,"DemographicId":527,"ParentId":15,"Name":"Darling Cousin","Description":2.682692225},{"Level":3,"DemographicId":504,"ParentId":527,"Name":"Courteous Knife","Description":0.335336528},{"Level":3,"DemographicId":528,"ParentId":527,"Name":"Constant Window","Description":2.012019168},{"Level":4,"DemographicId":6,"ParentId":528,"Name":"Serene Personal","Description":0.335336528},{"Level":4,"DemographicId":518,"ParentId":528,"Name":"Cooperative Marketing","Description":0.335336528},{"Level":4,"DemographicId":530,"ParentId":528,"Name":"Likely Car","Description":0.335336528},{"Level":4,"DemographicId":531,"ParentId":528,"Name":"Worst Lip","Description":0.335336528},{"Level":4,"DemographicId":550,"ParentId":528,"Name":"Quintessential Evening","Description":0.335336528},{"Level":2,"DemographicId":529,"ParentId":15,"Name":"Knowing Debt","Description":0.335336528},{"Level":2,"DemographicId":587,"ParentId":15,"Name":"Harmless Weight","Description":0.335336528},{"Level":1,"DemographicId":16,"ParentId":null,"Name":"Tidy Mouse","Description":2.012019168},{"Level":2,"DemographicId":5,"ParentId":16,"Name":"Useless Chemistry","Description":0.335336528},{"Level":2,"DemographicId":254,"ParentId":16,"Name":"Several Expert","Description":0.335336528},{"Level":2,"DemographicId":486,"ParentId":16,"Name":"Young String","Description":0.335336528},{"Level":2,"DemographicId":519,"ParentId":16,"Name":"Ideal Army","Description":1.006009584},{"Level":3,"DemographicId":520,"ParentId":519,"Name":"Tart Text","Description":0.335336528},{"Level":3,"DemographicId":521,"ParentId":519,"Name":"Tiny Church","Description":0.335336528}]
var myData = convert(arr)
var dataSource1 = new kendo.data.DataSource({
data: myData
});
$(document).ready(function () {
var originalGrid = $("#originalGrid").kendoGrid({
dataSource: dataSource1,
sortable: false,
pageable: false,
detailInit: detailInit1,
dataBound: function () {
//this.expandRow(this.tbody.find("tr.k-master-row").last());
},
columns: [
{
field: "Name",
title: "Name",
width: "80px"
},
{
field: "Description",
title: "Amount",
width: "30px",
aggregates: ["sum"],
groupFooterTemplate: "Sum: #= sum # "
}
]
});
});
function detailInit1(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
data: e.data.items //data is the current position item, items is its child items
},
scrollable: false,
sortable: false,
pageable: false,
detailInit: detailInit1,
columns: [
{
field: "Name",
title: "Name",
width: "80px"
},
{
field: "Description",
title: "Amount",
width: "30px",
aggregates: ["sum"],
groupFooterTemplate: "Sum: #= sum # "
}
]
});
}
$(document).ready(function () {
var dataSource2 = new kendo.data.DataSource({
data: []
});
var grid2 = $("#grid2").kendoGrid({
dataSource: dataSource2,
width: 400,
sortable: false,
pageable: false,
detailInit: detailInit11,
schema: {
model: {
id: "DemographicId"
}
},
columns: [
{
field: "Name",
title: "Name",
width: "40px"
},
{
field: "Description",
title: "Amount",
width: "110px",
aggregates: ["sum"],
groupFooterTemplate: "Sum: #= sum # "
}
]
});
function detailInit11(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
data: e.data.items
},
scrollable: false,
sortable: false,
pageable: false,
detailInit: detailInit11,
columns: [
{
field: "Name",
title: "Name",
width: "110px"
},
{
field: "Description",
title: "Amount",
width: "110px",
aggregates: ["sum"],
groupFooterTemplate: "Sum: #= sum # "
}
]
});
}
$(originalGrid).kendoDraggable({
filter: "tr",
hint: function (e) {
var item = $('<div class="k-grid k-widget" style="background-color: DarkOrange; color: black;"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
return item;
},
group: "gridGroup1",
});
var currentDataItem = null;
function getItemByUid(uid, currentUid, data) {
for (let index = 0; index < data.length; index++) {
const element = data[index];
if (element.uid == currentUid) {
currentDataItem = element;
return false;
} else {
if (element.items) {
getItemByUid(element.uid, currentUid, element.items);
}
}
}
}
grid2.kendoDropTarget({
drop: function (e) {
var uid = e.draggable.currentTarget.data("uid");
var dataItem = getItemByUid(uid, uid, dataSource1.data());
dataSource2.add(currentDataItem);
},
group: "gridGroup1",
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
</head>
<body>
<div>
<div style="width:50%;float:left" class="dragGrid">
<div id="originalGrid"></div>
</div>
<div style="width:50%;float:right" >
<div id="grid2"></div>
</div>
</div>
</body>
</html>

You need to handle the drop target for the detail grids as well. Use the - almost - same code for kendoDropTarget to your detail grid:
gridDetail.kendoDropTarget({
drop: function (e) {
var uid = e.draggable.currentTarget.data("uid");
var dataItem = getItemByUid(uid, uid, dataSource1.data());
$(e.dropTarget).data("kendoGrid").dataSource.add(currentDataItem);
},
group: "gridGroup1",
});
Demo

jqgrid compatible with jquery.mobile-1.0rc2

Today I am here with a small question. I know this is not much hard but I can't finding it any where!
So could anyone please let me know that which version of jqGrid is best suitable with jquery.mobile-1.0rc2?
It would be great if you please add a download link for the jqGrid which compatible with jquery.mobile-1.0rc2.
Thanks for your help :)

Best is to use free jqgrid latest version.
You can download it from
http://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js
Here is sample code from How to make jquery autocomplete to work in latest free jqgrid which uses jqm autocomplete in jqgrid
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" href="http://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css" type="text/css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js"></script>
<script>
$(document).bind('mobileinit', function () {
$.mobile.changePage.defaults.changeHash = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<script src="http://rawgit.com/commadelimited/autoComplete.js/master/jqm.autoComplete-1.5.2.js"></script>
<script src="http://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
<script>
$(document).ready(function () {
var mydata = [
{ id: 0, Name: "Indiana", Category: "IN" },
{ id: 1, Name: "California", Category: "CA" },
{ id: 2, Name: "Pennsylvania", Category: "PA" },
{ id: 3, Name: "Texas", Category: "TX" }
];
var lastSel;
var grid = $("#list");
grid.jqGrid({
data: mydata,
datatype: 'local',
colModel: [
{
name: 'Name', editable: true, width: 100,
edittype: 'custom',
editoptions: {
custom_element: function (value, options) {
var elemStr = '<div>', newel, width;
if (options.id === options.name) {
// form edit
elemStr += '<input class="FormElement" size="' +
options.size + '"' + ' id="' + options.id + '"';
}
else { // inline edit
width = getColumnByName(grid, options.name).width - 2;
elemStr += '<input class="FormElement" ' +
' style="width:' + width + 'px" ' + ' id="' + options.id + '_x"';
}
elemStr += ' value="' + value + '"/>';
elemStr += '<ul id="Xsuggestions" data-role="listview" data-inset="true"></ul></div>';
newel = $(elemStr)[0];
setTimeout(function () {
$('#Xsuggestions').listview().listview('refresh');
input_autocomplete(newel, options.id + '_x');
}, 100);
return newel;
},
custom_value: function (elem) {
return elem.find("input").val();
}
}
},
{ name: 'Category', index: 'Category', width: 50, editable: true }
],
sortname: 'Name',
ignoreCase: true,
gridview: true,
viewrecords: true,
rownumbers: true,
height: "100%",
sortorder: "desc",
pager: '#pager',
editurl: 'clientArray',
ondblClickRow: function (id, ri, ci) {
grid.jqGrid('editRow', id, true, null, null, 'clientArray', {});
},
onSelectRow: function (id) {
if (id && id !== lastSel) {
if (typeof lastSel !== "undefined") {
grid.jqGrid('restoreRow', lastSel);
}
lastSel = id;
}
}
});
});
var getColumnByName = function (grid, columnName) {
var cm = grid.jqGrid('getGridParam', 'colModel'), i = 0, l = cm.length;
for (; i < l; ++i) {
if (cm[i].name === columnName) {
return cm[i];
}
}
return null;
};
function input_autocomplete(newel, id) {
var input = $("input", newel);
//if (input.length === 0) {
// return;
//}
input[0].ischanged = false;
input.autocomplete({
target: $('#Xsuggestions'),
source: autocompleteData,
callback: function (e) {
var $a = $(e.currentTarget);
$('#' + id).val($a.data('autocomplete').label);
$('#' + id).autocomplete('clear');
input[0].ischanged = true;
},
link: '#',
//link: 'target.html?term=',
minLength: 1
});
}
</script>
</head>
<body>
<div data-role="page" id="mainPage">
<table>
<tr>
<td>
<input type="text" id="searchField">
<ul id="suggestions" data-role="listview" data-inset="true"></ul>
</td>
</tr>
</table>
<table id="list"><tbody><tr><td /></tr></tbody></table>
<div id="pager"></div>
</div>
<script>
var autocompleteData = $.parseJSON('[{"value":"AL","label":"Alabama"},{"value":"AK","label":"Alaska"},{"value":"CA","label":"California"},{"value":"CO","label":"Colorado"},{"value":"CT","label":"Connecticut"},{"value":"NC","label":"North Carolina"},{"value":"ND","label":"North Dakota"},{"value":"NI","label":"Northern Marianas Islands"},{"value":"OH","label":"Ohio"},{"value":"OK","label":"Oklahoma"},{"value":"OR","label":"Oregon"},{"value":"PA","label":"Pennsylvania"},{"value":"PR","label":"Puerto Rico"},{"value":"RI","label":"Rhode Island"},{"value":"WV","label":"West Virginia"},{"value":"WI","label":"Wisconsin"},{"value":"WY","label":"Wyoming"}]');
$("#mainPage").bind("pageshow", function (e) {
$("#searchField").autocomplete({
target: $('#suggestions'),
source: autocompleteData,
callback: function (e) {
var $a = $(e.currentTarget);
$('#searchField').val($a.data('autocomplete').label);
$("#searchField").autocomplete('clear');
},
link: 'target.html?term=',
minLength: 1
});
});
</script>
</body>
</html>

Uncaught TypeError : cannot read property 'replace' of undefined In Grid

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))
)

Develop Reference

JavaScript is the programming language of the Web.

JqGrid - Rendering Issue - javascript

Related

Kendo grid loosing selected row

How to create a popup in js

Kendo UI Grid : Drag and Drop Hierarchy not working

jqgrid compatible with jquery.mobile-1.0rc2

Uncaught TypeError : cannot read property 'replace' of undefined In Grid

Categories

Resources