I need to disable resizing for only one column only in a kendo grid.
I have seen the columnresize event, but I do not understand how to use it in my grid example below.
I noted that there is a similar question
My grid-
#(Html.Kendo().Grid<CCCAdmin.ViewModels.AdminReportViewModel>().Name("AdminReportGrid")
.HtmlAttributes(new {#class = "table table-bordered"})
.Columns(columns =>
{
columns.Bound(l => l.Id).Width("11%").Title("Id");
columns.Bound(l => l.CustomerName).Width("30%");
}).Resizable(r => r.Columns(true))
.Excel(excel => excel
.FileName("Admin Report Export.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("Excel_Export_Save", "AdminReport")))
.DataSource(dataSource => dataSource
.Ajax().Read(read => read.Action("AdminReport_Read", "AdminReport"))
.Destroy(update => update.Action("AdminReportDestroy", "AdminReport"))
.Sort(sort => sort.Add("CallCounting").Descending())
.PageSize(20)
.Model(model =>
{
model.Id(a => a.Id);
})
)
.Events(events =>
{
events.DataBound("dataBound");
events.ExcelExport("onExcelExport");
}
)
.ClientDetailTemplateId("CustomerInvoices")
.Sortable()
.Filterable()
)
There is no out of box feature in Kendo ASP.NET MVC but you can accomplish the task with Javascript. In following example, column Id will not be resized.
var grid = $("#GridName").data("kendoGrid");
grid.resizable.bind("start", function (e) {
if ($(e.currentTarget).data("th").data("field") == "Id") {
e.preventDefault();
setTimeout(function () {
grid.wrapper.removeClass("k-grid-column-resizing");
$(document.body).add(".k-grid th").css("cursor", "");
});
}
});
Demo
$(function(){
$("#grid").kendoGrid({
dataSource: {
data: [
{Id: "1", FirstName: "Amar",LastName: "X"},
{Id: "2", FirstName: "Akbar",LastName: "Y"},
{Id: "3", FirstName: "Anthony",LastName: "Z"}
]
},
resizable: true
});
var grid = $("#grid").data("kendoGrid");
grid.resizable.bind("start", function(e) {
if ($(e.currentTarget).data("th").data("field") == "Id") {
e.preventDefault();
setTimeout(function(){
grid.wrapper.removeClass("k-grid-column-resizing");
$(document.body).add(".k-grid th").css("cursor", "");
});
}
});
});
<head>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/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.2.516/js/kendo.all.min.js"></script>
</head>
<body>
<p>The <strong>Id</strong> column cannot be resized:</p>
<div id="grid"></div>
</body>
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>
I have implemented kendo grid in my project. I want to show "No Records Available" message to grid if data is not present. I set noRecords to true for my grid and it is working as expected. Now I have so many grids in my project so I want to globally set this setting for all the grids.
Is there a way to achieve so?
Here is my sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/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.117/js/kendo.all.min.js"></script>
</head>
<body>
First Grid:
<div id="grid"></div>
Second Grid:
<div id="grid1"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
pageable: true,
noRecords: {
template: "No data available"
},
dataSource: {
page: 1,
pageSize: 10
}
});
$("#grid1").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
pageable: true,
dataSource: {
page: 1,
pageSize: 10
}
});
</script>
</body>
</html>
You can find a working dojo here.
Hi you can extend the grid like this. You can put this in a separate js file and include it before you use a grid.
(function ($, kendo) {
var _init = kendo.ui.Grid.fn.init;
var extendedGrid = kendo.ui.Grid.extend({
init: function (element, options) {
var getTemplate = function (textP, iconP) {
var icon = iconP || 'icon';
var text = textP || 'No data available';
var tpl = `<div class="no-records-table"><div class="no-records-table-cell"><div class="grid-no-records-icon ${icon}"></div><div>${text}</div></div></div>`;
return tpl;
}
options = $.extend({
noRecords: {
template: getTemplate(options.noRecordsText, options.noRecordsIcon)
}
}, options);
//call the base constructor.
_init.call(this, element, options);
}
});
kendo.ui.plugin(extendedGrid);
}(window.kendo.jQuery, window.kendo));
You can check the the dojo here
I'm new to kendo and I would like to know whether is there a way to program my kendo grid like the image below.
I had saw some sample online where they use kendo-grid grouping but it doesn't generate the layout I needed
Output
Yes, it is possible by using a column template with a script expression that will transform the array of child items into an HTML list:
http://dojo.telerik.com/AqezO
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Grid</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.silver.min.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
var sampleData = [
{ id: 1, name: "name", items: ["foo", "bar"] }
];
$(function () {
var dataSource = new kendo.data.DataSource({
data: sampleData,
schema: {
model: {
id: "id",
fields: {
id: { type: "number" },
name: { },
items: { }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
columns: [
{ field: "id" },
{ field: "name" },
{ field: "items", template: "#= showItems(items) #" }
]
});
});
function showItems(arr) {
return "<ul><li>" + arr.join("</li><li>") + "</li></ul>";
}
</script>
</body>
</html>
I have following Kendo.mvc grid
#Html.HiddenFor(model => model.BarCode)
<div style="padding-left:10%;padding-top:2%">
#(Html.Kendo().Grid(Model.BarCodes)
.Name("grid")
.Columns(columns =>
{
columns.Bound(e => e.DocumentSetName)
.Width(100)
.Title("Reference No");
columns.Bound(e => e.ScannedDate)
.Title("Scanning Date")
.Width(100);
})
.Sortable()
.Pageable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(3)
//.Read(read => read.Action("SearchUnregisteredIncomings", "Correspondence").Data("getSearchCriteria"))
)
.ClientDetailTemplateId("template")
)
and this is the ajax call I have made
$.getJSON('#Url.Action("Search")', {ReferenceNumber:'123'
}, function (data, status) {
var grid = $("#grid").data("kendoGrid");
grid.dataSource.data(data);
grid.refresh();
$("#loading").stop().fadeOut('fast');
});
The grid variable is undefined.
The following is the names and sequence of .js files and scripts that are loaded in _Layout.cshtml file.
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/kendo/jquery.min.js"></script>
<script src="/Scripts/spin.js"></script>
<script src="/Scripts/kendo/kendo.all.min.js"></script>
<script src="/Scripts/bootstrap-multiselect.js"></script>
<script src="/Scripts/kendo/kendo.aspnetmvc.min.js"></script>
<script src="/Scripts/chosen.jquery.min.js"></script>
And the below scripts loaded after #RenderBody() section but before </body> tag
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery-1.8.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/spcontext.js"></script>
<script src="/Content/vendors/jquery-1.9.1.js"></script>
<script src="/Content/vendors/modernizr-2.6.2-respond-1.1.0.min.js">/script>
<script src="/Content/vendors/jquery.uniform.min.js"></script>
<script src="/Content/vendors/chosen.jquery.min.js"></script>
<script src="/Content/vendors/bootstrap-datepicker.js"></script>
<script src="/Content/vendors/wysiwyg/wysihtml5-0.3.0.js"></script>
<script src="/Content/vendors/wysiwyg/bootstrap-wysihtml5.js"></script>
<script src="/Content/vendors/wizard/jquery.bootstrap.wizard.min.js"></script>
<script src="/Content/assets/treeview.js"></script>
<script src="/Content/assets/form-validation.js"></script>
<script>
$(function () {
$(".datepicker").datepicker();
$(".uniform_on").uniform();
$(".chzn-select").chosen();
$('.textarea').wysihtml5();
});
(function (window, undefined) {
var $ = window.jQuery;
var document = window.document;
$(document).ready(function () {
//some code here
});
})(window);
I think the problem is due to the sequence of .js files but can not figure it out.
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.