Kendo grid loosing selected row - javascript

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

Related

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.

Why does KendoUI grid add a row to the beginning of the grid and not give the User a choice using rowindex?

Im using KendoUi grids everywhere now and need some help ..
When my Kendo grid first loads I want the user to have the rows and an empty row at the BOTTOM not the top to indicate that they can add data . I dont want to use the in built "Add Row Button".
I have the following
Try1
$(document).ready(function ()
{
var grid = $("#grid").data("kendoGrid");
grid.addRow();
$(".k-grid-edit-row").appendTo("#grid tbody");
}
This is supposed to move the row to the bottom of the grid , but it doesnt, it remans on top ?
Try 2
I also tried to do something like
var newRow = { field: "FirstName", Value: "" };
var grid = $("#grid").data("kendoGrid");
grid.dataSource.add(newRow);
This did not work either.
Try 3
But with this try , im not sure if there is a 'load' with the Kendoui Grid, i know there is a keydown , etc
grid.tbody.on('load', function (e)
{
if ($(e.target).closest('tr').is(':last-child'))
{
setTimeout(function ()
{
var totalrows = grid.dataSource.total();
var data = grid.dataSource.data();
var lastItem = data[data.length - 1];
if (typeof lastItem !== 'undefined')
{
if (lastItem.FirstName.trim() != "")
grid.addRow();
}
})
}
}
any help would be great.
The full implementation details is below:
First i add the datasource, this is a simple implementation.
var data = $scope.userdetails;
var dataSource = new kendo.data.DataSource({
transport: {
read: function (e) {
e.success(data);
},
update: function (e) {
e.success();
},
create: function (e) {
var item = e.data;
item.Id = data.length + 1;
e.success(item);
}
},
schema: {
model: {
id: "Id",
fields: {
FirstName: { type: "string" }
}
}
}
});
Then i define the grid
let grid = $("#grid").kendoGrid({
dataSource: dataSource,
scrollable: false,
navigatable: true,
editable: {
createAt: "bottom"
},
dataBound: function (e) {
e.sender.tbody.find(".k-grid-Delete").each(function (idx,
element) {
$(element).removeClass("k-button");
});
},
columns: [
{
field: "FirstName", title: "First Name"
},
{
command: [{ name: "Delete", text: "", click: $scope.delete,
className: "far fa-trash-alt fa-fw" }],
title: " ",
width: "100px",
attributes: { class: "k-grid-column-text-centre" }
}
]
}).data("kendoGrid");
I do the below process to add a blank row only when the user clicks tab on the last cell of the last row, but also want to add a blank when the page first loads with the grid.
grid.tbody.on('keydown', function (e) {
i`enter code here`f (e.keyCode == 9) {
if ($(e.target).closest('tr').is(':last-child')) {
setTimeout(function () {
var totalrows = grid.dataSource.total();
var data = grid.dataSource.data();
var lastItem = data[data.length - 1];
if (typeof lastItem !== 'undefined') {
if (lastItem.FirstName.trim() == "")
return;
}
grid.addRow();
})
}
}
});
This code still adds the row at the top of the grid not the bottom.
$(document).ready(function () {
var newRow = { field: "FirstName", Value: "" };
grid.dataSource.add(newRow);
grid.editRow($("#grid tr").last());
}
There is no other place that i add a row

You try #2 is the right way to go. It probably added a row at the bottom, right? So you just need to programatically edit it:
var newRow = { field: "FirstName", Value: "" };
var grid = $("#grid").data("kendoGrid");
grid.dataSource.add(newRow);
grid.editRow($("#grid tr").last());
Demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.513/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
let grid = $("#grid").kendoGrid({
toolbar: ["save"],
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
],
schema:{
model: {
id: "id",
fields: {
age: { type: "number"}
}
}
}
},
editable: true
}).data('kendoGrid');
grid.dataSource.add({});
grid.editRow($("#grid tr").last());
</script>
</body>
</html>
Dojo
If someone is using the built-in method, just use editable.createAt parameter.

How to load grid data with json data on ajax sucess

In my ajax sucess i am calling this funcction and there from response I am extracting the data which I need to load.
success: function(response){
StoreloadData(this,response);
},
In StoreloadData function i am trying to load data in my grid like this but not getting data.
StoreloadData(me,response){
var myGrid = Ext.getCmp('#myGrid');
var myGridStore = myGrid.getStore();
var gridData = response.myData.data;
var total = gridData[0].recordsCount;
myGridStore.load(gridData); // Not loading
myGridStore.loadData(gridData); // Not loading
myGrid.refresh(); // Error.
}
Here I have myJSon data in this line var gridData = response.myData.data; this is a simple json object like this.
[{dataIndex1: "Value1",dataIndex2: "Value2"},
{dataIndex1: "Value1",dataIndex2: "Value2"},
{dataIndex1: "Value1",dataIndex2: "Value2"}]
Can anyone please suggest me how to overcome from this.

I suggest you this solution. Just define the empty store with fields definitions, then load data using Ext.JSON.decode() and store.loadData().
Working example:
File grid_json_load.json:
{
"data": [
{
"dataIndex1": "Value1",
"dataIndex2": "Value2"
},
{
"dataIndex1": "Value1",
"dataIndex2": "Value2"
}
],
"success": true
}
File grid_json_load.html:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.define('Test.TestWindow', {
extend: 'Ext.window.Window',
closeAction: 'destroy',
border: false,
width: 560,
height: 500,
modal: true,
closable: true,
resizable: false,
layout: 'fit',
initComponent: function() {
var me = this;
me.callParent(arguments);
me.store = Ext.create('Ext.data.ArrayStore', {
data: [],
fields: [
{name: "dataIndex1", type: "string"},
{name: "dataIndex2", type: "string"}
]
});
me.grid = Ext.create('Ext.grid.Panel', {
autoScroll: true,
stripeRows: true,
width: 420,
height: 200,
store: me.store,
columnLines: false,
columns : [
{header : 'Data Index 1', width: 100, dataIndex : 'dataIndex1'},
{header : 'Data Index 2', width: 100, dataIndex : 'dataIndex2'}
]
});
me.add(me.grid);
}
});
Ext.onReady(function(){
var win = Ext.create('Test.TestWindow', {
});
Ext.Ajax.request({
url: 'grid_json_load.json',
method: 'POST',
timeout: 1200000,
params: {
},
success: function (response, opts) {
var win = new Test.TestWindow({
});
var r = Ext.JSON.decode(response.responseText);
if (r.success == true) {
win.show();
win.store.loadData(r.data);
} else {
Ext.Msg.alert('Attention', 'Error');
};
}
});
});
</script>
<title>Test</title>
</head>
<body>
</body>
</html>
Notes:
Tested with ExtJS 4.2 and ExtJS 6.6.

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 - Rendering Issue

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!

Categories

Resources