This one gives me a syntax error at #question
What is wrong here?
#{
string question = "Really delete?";
<link href="~/Content/sweetalert/sweetalert.css" rel="stylesheet" />
<script src="~/Content/sweetalert/sweetalert.min.js"></script>
<script>
$(function () {
$(".delete").on("click", function (e) {
swal({
text: #question,
title: "Delete Confirm",
//some other stuff...
}
You have to use question this way:
title: "#question"
Code:
#{
string question = "Really delete?";
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<link href="~/Content/sweetalert.css" rel="stylesheet" />
<script src="~/Content/sweetalert.min.js"></script>
<script>
$(function() {
$(".delete").on("click", function(e) {
swal({
title: "#question",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
});
});
});
</script>
}
The text: #question, should be wrapped in '' like so
text: '#question'
Related
I have a grid that has a grid in the detailInit and when I add a new row to the grid in the detailInit the detailInit collapses.
How can I stop it from collapsing when a new record is added? I have tried using e.preventDefault() on the button click event of adding a new row but that didn't work out.
You cannot prevent it from collapsing because every time you change something to the data it automatically rebinds and redraw the table.
What you can do however is to capture the rebinding, find the opened details and after the binding finish reopen them:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/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.3.1017/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
let data = [{id: 1, FirstName: "Nancy", LastName: "Davolio", orders: [{title: 1}, {title: 2}]}];
$(document).ready(function () {
let expanded = [];
var element = $("#grid").kendoGrid({
dataSource: data,
toolbar: [{name: "create"}],
height: 600,
detailInit: detailInit,
editable: true,
columns: [
{
field: "id",
title: "id",
},
{
field: "FirstName",
title: "First Name",
width: "110px"
},
{
field: "LastName",
title: "Last Name",
width: "110px"
},
{command: ["destroy"]},
],
dataBinding: function (e) {
expanded = $.map(this.tbody.children(":has(> .k-hierarchy-cell .k-i-collapse)"), function (row) {
return $(row).data("uid");
});
},
dataBound: function (e) {
this.expandRow(this.tbody.children().filter(function (idx, row) {
return $.inArray($(row).data("uid"), expanded) >= 0;
}));
},
});
});
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
transport: {
read: function (options) {
options.success(e.data.orders);
},
}
},
});
}
</script>
</div>
</body>
</html>
My _Layout.cshtml like this
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - E-Reader Statistics</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#* #Scripts.Render("~/bundles/jquery")*#
<link href="~/jqGrid/css/ui.jqgrid.css" rel="stylesheet" />
<script src="~/jqGrid/js/i18n/grid.locale-en.js"></script>
<script src="~/jqGrid/js/jquery-1.9.0.min.js"></script>
<script src="~/jqGrid/js/jquery.jqGrid.min.js"></script>
<script src="~/jqGrid/js/jquery.jqGrid.src.js"></script>
</head>
in Index.chtml
#model List<LSStatisticalReport.ViewModels.GSViewModel>
#{
ViewBag.Title = "Index";
}
#*<h2>General Statistics</h2>*#
<script type="text/javascript">
// var jq = $.noConflict();
$(document).ready(function () {
var genStatGrid = $('#list');
genStatGrid.jqGrid({
caption: "General Statistics",
url: '/Statistics/GetRecords/',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'POST',
colNames: ['Student', 'Teacher', 'Date'],
colModel: [
{ name: 'studentDesignation' },
{ name: 'teacherDesignation' },
{ name: 'dateLength' },
],
rowNum: 5
});
});
</script>
But when I am running the project I am getting an error in console:
"Uncaught TypeError: Object [object Object] has no method 'jqGrid' "
This type of error says this : please Define jqgrid library before related init scripts. I have seen this error before, although you have defined related library in head tag. So I solved this problem by removing its library from head tag and placing it at the view before the script and works properly.
I think this occurs because of partial load of page. so use this at the index view:
#model List<LSStatisticalReport.ViewModels.GSViewModel>
#{
ViewBag.Title = "Index";
}
#*<h2>General Statistics</h2>*#
//added
<script src="~/jqGrid/js/jquery.jqGrid.min.js"></script>
<script src="~/jqGrid/js/jquery.jqGrid.src.js"></script>
//end added
<script type="text/javascript">
// var jq = $.noConflict();
$(document).ready(function () {
var genStatGrid = $('#list');
genStatGrid.jqGrid({
caption: "General Statistics",
url: '/Statistics/GetRecords/',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'POST',
colNames: ['Student', 'Teacher', 'Date'],
colModel: [
{ name: 'studentDesignation' },
{ name: 'teacherDesignation' },
{ name: 'dateLength' },
],
rowNum: 5
});
});
</script>
hey hi everyone i am try to insert new record using kendo grid.
it's work fine.
but i want to set hide and show.
when its new then hide second column.
only on this row not other all.
here is my code:-
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<script>
$(document).ready(function () {
var users = [{ UserId: 1, UserName: "Robin", IsAdmin: true }
, { UserId: 2, UserName: "Hood", IsAdmin: false }];
var t = $("#grid").kendoGrid({
dataSource: { data: users, pageSize: 10 }// binding data
,pageable: true
, selectable: "multiple row"
, toolbar: ["create"]
, columns: [
{ field: "UserId" }
, { field: "UserName"},
{ command: "destroy", title: " ", width: "100px" }
],
editable: true,
edit: function(e)
{
if(e.model.isNew())
{
$("td:nth-child(2)").css("display","none");
}
}
});
});
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<input type="button" value="Iterate" onclick="iterate()"/>
<div id="grid"></div>
</body>
</html>
please help if is possible when insert new record hide there second td.
thanks.
Try this,
Below code set in document.ready
$(".k-button,.k-button-icontext,.k-grid-add").click(function(){
var activityGrid = $("#grid").data("kendoGrid");
activityGrid.hideColumn(1);
});
Updated Code:
var cnt = 1;
$(".k-button,.k-button-icontext,.k-grid-add").click(function () {
cnt = 0;
});
var hideFieldName = "UserName";
$(".k-textbox").live("focusin", function (e) {
if (cnt == 0) {
if ($(this).attr("name") == hideFieldName) {
if ($(this).closest('tr').index() == cnt) {
$(this).attr("readonly", "readonly");
}
}
}
});
So, below code worked as per your requirement. But in this case textbox was generated but user can't enter any value.
Let me know if any issue....
I'm trying to edit a record in jqgrid ( trying to make a call to the server) using the navigator . However, when I click on the submit I'm getting error Status: 'Not Found'. Error code: 404
Here is the code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:url value="/main/csList" var="csListUrl"/>
<c:url value="/main/editVevaIndividual" var="editUrl"/>
<c:url value="/main/hostListByApp" var="hostListUrl"/>
<c:url value="/users/create" var="addUrl"/>
<c:url value="/users/update" var="editUrl"/>
<c:url value="/users/delete" var="deleteUrl"/>
<html>
<head>
<title>Individual Records </title>
<!--
<script src="/sam/resources/jqueryMenu/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/sam/resources/jqueryMenu/createMenu.js" type="text/javascript"></script>
<link rel="stylesheet" href="/sam/resources/jqueryMenu/menu.css"/>
-->
<script type='text/javascript' src='<c:url value="/resources/jqueryMenu/jquery-1.3.2.min.js"/>'></script>
<script src= '<c:url value="/resources/jqueryMenu/createMenu.js"/>'></script>
<link rel="stylesheet" href= '<c:url value="/resources/jqueryMenu/menu.css"/>'/>
<script>
$(document).ready(function(){
createMenu($("#content"));
});
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href='<c:url value="/resources/ui.jqgrid.css"/>' />
<script type="text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src= '<c:url value="/resources/grid.locale-en.js"/>'></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src='<c:url value="/resources/jquery.jqGrid.src.js"/>'></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
var mydata = [
],
grid = $("#list");
grid.jqGrid({
url:'${csListUrl}',
datatype: 'json',
ignoreCase: true,
mtype: 'GET',
colNames:['INDIVIDUAL ID','LAST NAME','FIRST NAME','VENDOR ID','INACTIVE REASON CODE','INACTIVE DATE'],
colModel:[
{name:'individualId',index:'individualId', width:50 },
{name:'lastName',index:'lastName', width:50,editable:true, editrules:{required:true}, editoptions:{size:10} },
{name:'firstName',index:'firstName', width:50,editable:true, editrules:{required:true}, editoptions:{size:10} },
{name:'vendorID',index:'vendorID', width:30,} ,
{name:'inactiveReasonCode',index:'inactiveReasonCode', width:30} ,
{name:'inactiveDate',index:'inactiveDate', width:30}
],
postData: {},
rowNum:10,
rowList:[10,20,40,60],
height: 'auto',
autowidth: true,
rownumbers: true,
pager: '#pager',
sortname: 'individualId',
viewrecords: true,
sortorder: "asc",
editurl:'${editUrl}',
caption:" individual Records",
emptyrecords: "Empty records",
loadonce: true,
loadComplete: function() {},
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
cell: "cell",
id: "individualId"
}
});
$("#search").click(function() {
var searchFiler = $("#filter").val(), f;
if (searchFiler.length === 0) {
grid[0].p.search = false;
$.extend(grid[0].p.postData,{filters:""});
}
f = {groupOp:"OR",rules:[]};
f.rules.push({field:"lastName",op:"cn",data:searchFiler});
f.rules.push({field:"firstName",op:"cn",data:searchFiler});
grid[0].p.search = true;
$.extend(grid[0].p.postData,{filters:JSON.stringify(f)});
grid.trigger("reloadGrid",[{page:1,current:true}]);
});
grid.jqGrid('navGrid','#pager',
{edit:true, add:false, del:false,refresh:true,view:true},
{}, {}, {},
{ // search
sopt:['cn', 'eq', 'ne', 'lt', 'gt', 'bw', 'ew'],
closeOnEscape: true,
multipleSearch: true,
closeAfterSearch: true
},
{ // vew options
beforeShowForm: function(form) {
$("tr#trv_id",form[0]).show();
},
afterclickPgButtons: function(whichbutton, form, rowid) {
$("tr#trv_id",form[0]).show();
}
});
});
//]]>
</script>
</head>
<body>
<div style="position:relative; z-index:3;" id="content"></div>
<br></br>
<fieldset >
<input type="text" id="filter"/>
<button type="button" id="search">Search</button>
</fieldset>
<div style="position:relative; z-index:1;">
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
</div>
</body>
</html>
I'm trying out very simple search popup on the JqGrid. Please see the code below. There are few issues:
The popup comes up with AND/OR and [+] controls at the very top. See screenshot below: (from FF 4)
You can click on [-] button to remove the very first (and only) filter row. It shouldn't be allowed. First filter row should never be allowed to be removed.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>JQGRID Test</title>
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/redmond/jquery-ui-1.8.1.custom.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css"/>
<script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.js"></script>
<script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery-ui-1.8.1.custom.min.js"></script>
<script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
$(function() {
createGrid();
});
function createGrid() {
$("#jqgrid-table").jqGrid({
colNames:['First Name', 'Last Name', 'Age', 'IQ', 'Type'],
colModel:[
{name:'firstName',index:'firstName', width:100},
{name:'lastName',index:'lastName', width:100},
{name:'age', index:'age', width:50},
{name:'iq', index:'iq', width:50, stype:'select', searchoptions: {dataUrl:'/api/domains/putcalldomain'}},
{name:'type', index:'type', width: 56}
],
width: 800,
datatype:'local',
pager: '#pager2',
viewrecords: true,
caption:"JSON Example"
});
var searchOptions = {
caption: 'Filter...',
multipleSearch:true,
closeAfterSearch:true,
closeAfterReset:true,
Find: 'Filter'
};
jQuery("#jqgrid-table").jqGrid('navGrid',
'#pager2',
{search:true, edit:false, add:false, del:false, refresh:false},
null, null, null, searchOptions
);
var data = getData();
for(var i =0; i < data.length; i++) {
var r = data[i];
jQuery("#jqgrid-table").addRowData(r.id, r);
}
}
function getData() {
return [
{id:1, firstName: 'John', lastName: 'XXX', age:'30', iq:'200', type: 'Nice'},
{id:2, firstName: 'Ashley', lastName:'YYY', age:'31', iq:'210', type:'Nicer'},
{id:3, firstName:'Smith', lastName:'ZZZ', age:'23', iq:'90', type:'Nicest'}
];
}
</script>
</head>
<body>
<div id='jqgrid-div'>
<table id='jqgrid-table'></table>
<div id="pager2"></div>
</div>
</body>
</html>
I suggest to overwrite the internal reDraw method used by filtering (see my another answer for more description). To do this you should include in the searchOptions which you use the beforeShowSearch event handler with the following implementation:
beforeShowSearch: function($form) {
var searchDialog = $form[0],
oldrReDraw = searchDialog.reDraw, // save the original reDraw method
doWhatWeNeed = function() {
$('input.delete-rule:first',searchDialog).unbind('click');
// set fucus in the last input field
setTimeout(function() {
// set fucus in the last input field
$('input[type="text"]:last',searchDialog).focus();
}, 50);
}
searchDialog.reDraw = function() {
oldrReDraw.call(searchDialog); // call the original reDraw method
doWhatWeNeed();
}
doWhatWeNeed();
}
You can see the corresponding demo here.