Related
I have an EJ2 grid that is grouped. Before the grid is rendered, the data from the business class is sorted by sequence number which is the requirement. When the grid renders the data, the grouping is changing the initial sort order to alphabetical. I have not been able to change the order back to by Sequence number. Any help would be greatly appreciated. Below is the grid definition.
var grid = new ej.grids.Grid({
dataSource: gridDS,
allowExcelExport: true,
allowPdfExport: true,
toolbar: ['ExcelExport', 'PdfExport', 'CsvExport', "Search"],
allowGrouping: true,
dataBound: bound,
allowSorting: true,
allowMultiSorting: true,
groupSettings: { captionTemplate: '#captiontemplate', showDropArea: false, columns: ['DistrictTypeName', 'DistrictName'] },
sortSettings: {
columns:
[{ field: 'DistrictTypeSequence', direction: 'Ascending' },
{ field: 'DistrictSequence', direction: 'Ascending' },
{ field: 'RaceSequence', direction: 'Ascending' }]
},
columns: [
{ field: "DistrictTypeId", visible: false },
{ field: "DistrictId", visible: false},
{ field: "RaceId", visible: false },
{ field: "DistrictTypeName", headerText: "District Type", width: 90},
{ field: "DistrictName", headerText: "District", width: 90},
{ field: "RaceName", headerText: "", width: 90 },
{ field: "DistrictTypeSequence", visible: false },
{ field: "DistrictSequence", visible: false },
{ field: "RaceSequence", visible: false },
{
headerText: "",
template: "#viewTemplate",
textAlign: "center",
width: 15
},
{
headerText: "",
template: "#editTemplate",
textAlign: "center",
width: 15
},
{
headerText: "",
template: "#deleteTemplate",
textAlign: "center",
width: 15
},
],
});
I want to change the title of the editable popup window based on whether it is being used to create or edit a grid item (I want the fields to be the same for both of them, though).
I have set the popup window's title in editable
editable: {
mode: "popup",
template: kendo.template($("#popupTemplate").html()),
window: {
title: "Add"
}
}
But I'm not sure how to differentiate between Edit and Add. The Edit button is in the columns:
command: [
{
name: "edit",
text: {
edit: "Edit",
update: "Save",
cancel: "Cancel"
}
}
]
and the Add button in the toolbar:
toolbar: [{name: 'create'}]
Notably, I've tried this to no avail:
toolbar: [
{
name: 'create',
click: function(){
alert("test");
}
},
]
I've also seen e.model.isNew() used under edit, but according to my compiler, this is not a function.
I've looked all over the internet and Telerik and found nothing. Am I missing something?
EDIT: Someone asked for the entirety of my grid code:
var grid = $('#grid').kendoGrid({
//dataSource: this.source,
dataSource: this.testData,
height: 550,
filterable: true,
sortable: true,
pageable: {
pageSize: 30,
buttonCount: 1
},
//toolbar: ["create", "destroy", "search"],
toolbar: [
{name: 'create'},
{name: 'destroy'},
{name: 'search'},
{template: "<input id='category' type='search' style='width: 250px; float: right;'/>"}
],
resizeable: true,
columns: [
{
field: 'Name',
title: 'Name',
filterable: true,
},
{
field: 'MCN',
title: 'P/N',
filterable: false,
},
{
field: 'ID',
title: 'ID',
filterable: true,
},
{
field: 'Type',
title: 'Type',
filterable: true,
},
{
field: 'Subtype',
title: 'Subtype',
filterable: true,
},
{
field: 'Value',
title: 'Value',
filterable: false,
},
{
field: 'Tolerance',
title: 'Tolerance',
filterable: true, //Number/letter combination causes problem?
},
{
command: [
{
name: "edit",
text: {
edit: "Edit",
update: "Save",
cancel: "Cancel"
}
},
{
name: "copy",
text: "Copy",
//click: function
}
],
title: " ", width: "250px"
},
],
editable: {
mode: "popup",
template: kendo.template($("#popupTemplate").html()),
// window: {
// title: "Add"
// }
},
selectable: "multiple, row", // Select multiples by drag or Shift-Click
edit: function(e){
var container = e.container;
var model = e.model;
//console.log(model.get("ID"));
// Changing the size of the container
$(e.container).parent().css({
//width: "1000px",
//height: "500px"
});
//May be able to simplify this with a for loop
// Changing Type input to a dropdown
var input = $('#dropType');
input.kendoDropDownList({
dataTextField: "Type",
dataValueField: "dropType",
dataSource: [{Type: 'One'}, {Type: 'Two'}, {Type: 'Three'}],
}).appendTo(container);
// Changing Subtype input into a dropdown
var input = $('#dropSubtype');
input.kendoDropDownList({
dataTextField: "Subtype",
dataValueField: "dropSubtype",
dataSource: [{Subtype: 'One'}, {Subtype: 'Two'}, {Subtype: 'Three'}],
}).appendTo(container);
}
});
To change the title you should use edit function of the grid like this:
$("#grid").kendoGrid({
dataSource: {...},
height: 550,
toolbar: ["create"],
columns: [
{
field: "",
title: '',
attributes: { style: "text-align:center;" },
headerAttributes: { style: "text-align: center;" }
},
{
command: [
{ name: "edit", text: 'Edit' },
],
title: 'tools',
width: "200px",
attributes: { style: "text-align:center;" },
headerAttributes: { style: "text-align: center;" }
}
],
editable: {
mode: "popup",
template: $("#template").html(),
},
edit: function(e) {
if (e.model.isNew()) {
e.container.kendoWindow("title", "Createee");
} else {
e.container.kendoWindow("title", "Updateee");
}
}
});
And for using the template, see this answer : Kendo UI Grid popup
Edit:
According to kendo : Kendo Forum , isNew
The isNew method returns true or false depending on the id value of that model.
If the id is still set to the default value then it will assume it is a New Model.
So I think your problem is because of your dataSource, and you should fill id before the fields property. like this :
dataSource: {
transport: {
read: {
url: ...
type: "POST", // The request type.
dataType: "json", // The data type of the returned result.
},
create: {...},
update: {...},
destroy: {...}
},
schema: {
model: {
id: "Id",
fields: {
Id: { editable: false },
BankName: { type: "string", validation: { required: true } },
....
}
}
},
pageSize: 20
},
And here are two Samples: ( Sample 1 , Sample 2 )
Lets say Grid has 10 rows and I want to make Cell (9th row of col2 field) editable. Could you please give me any solution for this?
Here is my Grid
var grid = new dojox.grid.EnhancedGrid({
store: store,
autoWidth: true,
structure: [
{ name: "Number", field: "col1", width: "84px", editable: false},
{ name: "Description", field: "col2", width: "84px", editable: false },
{ name: "Stock", field: "col3", width: "84px", editable: false }
]
}, "grid");
try using canEdit function as below. Below example shows how not to make first cell non-editable.
var grid = new dojox.grid.EnhancedGrid({
store: store,
autoWidth: true,
structure: [
{ name: "Number", field: "col1", width: "84px", editable: false},
{ name: "Description", field: "col2", width: "84px", editable: false },
{ name: "Stock", field: "col3", width: "84px", editable: false }
],
canEdit: function (inCell, inRowIndex) {
if (inRowIndex && inCell.index === 0) {
return false;
}
return this._canEdit;
}
}, "grid");
I have a Treepanel:
treepanel = Ext.define('filteredTree', {
extend: 'Ext.tree.Panel',
title: 'Filtered Tree',
store: store,
width: 784,
height: 550,
buttons: [
{
text: 'Select',
handler: function () {
var panel = this.up('treepanel');
//...selection of value
}
}
]
//...Here is search mechanism
});
and the window in which it's displayed. The window is resizable:
win = Ext.create('widget.window', {
title: 'Выбор значения из словаря',
header: {
titlePosition: 2,
titleAlign: 'center'
},
closable: true,
closeAction: 'hide',
maximizable: true,
width: 800,
minWidth: 350,
height: 600,
tools: [{ type: 'pin' }],
theme:"classic",
layout: {
type: 'border',
padding: 5
},
items: [
Ext.create('filteredTree')
]
});
I'd like to see if the window size changes the size of the panel also changes. How can I do that?
Change the layout of the window to fit.
Panel will occupy the complete space inside the window and resizes accordingly.You can remove height and width from the tree panel.
Ext.create('Ext.window.Window', {
title: 'Выбор значения из словаря',
header: {
titlePosition: 2,
titleAlign: 'center'
},
closable: true,
closeAction: 'hide',
maximizable: true,
width: 600,
minWidth: 350,
height: 400,
layout:'fit',
items: [
{xtype:'treepanel',
padding:5,
title: 'Filtered Tree',
buttons: [
{
text: 'Select',
handler: function () {
var panel = this.up('treepanel');
}
}
]}
]
}).show();
i want to Bind a kendogrid, with large datasource (json array), that includes the display of detail temeplates too in 3-4 tabs. But it doesn't display the grid. (for 1500 rows) Could there be anything dynamic to display page by page? No search criteria required for solution.
Please advise.
Thanks Yogesh
function bindgridsimple()
{
var element = $("#grid").kendoGrid({
dataSource: {
transport: {
read: url
},
pageSize: 25
},
columnMenu: true,
scrollable: true,
filterable: true,
resizable: true,
sortable: true,
detailTemplate: kendo.template($("#template").html()),
detailInit: detailInit,
dataBound: function () {
},
columns: [
{
field: "FirstName",
width: "8%",
title: "Candidate Name",
template: "<a href='Candidates/candidaterequirementmapping.aspx?CandId=#=CandidateId#'> <span>#=FirstName#</span> <span>#=LastName#</span></a>"
},
{
field: "Mobile",
width: "8%",
title: "Mobile"
},
{
field: "ResumeTitle",
width: "10%",
title: "Resume Title"
},
{
field: "CreatedByUser",
width: "10%",
title: "Created by"
},
{
field: "ExpectedSalary",
width: "15%",
title: "Expected Salary",
template: "<span># if(ExpectedSalary == null) { # 0.00 # } else { #<span>#=ExpectedSalary#</span># }#</span> / <span>#=ExpectedSalaryperiod#</span>"
}, {
field: "MarketingRate",
width: "10%",
title: "Mktg Rate",
template: "<span># if(MarketingRate == null) { # 0.00 # } else { #<span>#=MarketingRate#</span># }#</span> / <span>#=MarketingRateperiod#</span>"
},
{
field: "CreatedDate",
width: "15%",
title: "Resume Received Date",
template: '#if(Resume == null || Resume == "") { } else { # <span> #=parseFullDate(CreatedDate)# </span> # } #'
},
{
field: "ExistMappedCandidate",
width: "10%",
title: "Req. Provided"
},
{
field: "ExistMappedCandidate",
width: "10%",
title: "View",
template: "# if(ExistMappedCandidate==true){ #<a href='Candidates/candidaterequirementmapping.aspx?CandId=#=CandidateId#'>View Requirement</a> #} else {# <a href='Candidates/candidaterequirementmapping.aspx?CandId=#=CandidateId#' class='No-candidates' onclick='return false' title='No requirements are mapped with this candidate.'>View Requirement</a> #}#"
}
],
pageable: {
pageSizes: [25, 50, 75]
}
});
}
function detailInit(e) {
var sharableDataSource = new kendo.data.DataSource({ data: e.data.Experience });
var sharableDataSourceAttachment = new kendo.data.DataSource({ data: e.data.Attachments });
var detailRow = e.detailRow;
detailRow.find(".tabstrip").kendoTabStrip({
animation: {
open: { effects: "fadeIn" }
}
});
detailRow.find(".prevExperience").kendoGrid({
dataSource: { data: e.data.Experience,
pageSize: 10
},
columnMenu: true,
scrollable: true,
filterable: true,
resizable: false,
sortable: true,
pageable: {
pageSizes: [10, 20]
},
columns: [
{ field: "Company", title: "Company Name", width: "100px" },
{ field: "Designation", title: "Designation", width: "100px" },
{ field: "FromDate", title: "From", width: "100px", template: '#=parsemyDate(FromDate)#' },
{ field: "ToDate", title: "To", width: "100px", template: '#=parsemyDate(ToDate)#' },
{ field: "LastSalary", title: "Last CTC", width: "65px", template: '#=LastSalary# / Yr' }
]
});
detailRow.find(".attachments").kendoGrid({
//dataSource: sharableDataSourceAttachment,
dataSource: { data: e.data.Attachments,
pageSize: 10
},
columnMenu:true,
scrollable: false,
sortable: true,
filterable: true,
pageable: {
pageSizes: [10, 20]
},
columns: [
{ field: "AttachmentName", sortable: true, filterable: true, title: "File Icon", width: "100px", template: '#= AttachmentTitle #'
},
// { field: "AttachmentTitle", title: "Type", width: "100px" },
// { field: "AttachmentName", title: "Subject", width: "100px", template: 'Resume' },
{field: "CreatedbyUser", sortable: true, filterable: true, title: "Attached By", width: "100px" },
{ field: "Createddate", title: "Date", sortable: true, filterable: true, width: "65px", template: '#=parseFullDate(Createddate)#' }
]
});
}