how to increase the Infragistics igTreeGrid performance - performance

I am using the "Infragistics igTreeGrid" in my application to display the records.Every thing works fine when i provide less number of records to the grid, but my requirement is to display around 40,000 records at a time. so when i provide these many records to the grid ,it is taking around 2mins of time which is very high. So what should i do to improve the performance atleast to half of the current time. I have looked at the "Virtualization" and "load on demand" ,I didn't get exactly what they are. When i use virtualization grid is taking more time than without the virtualization and may i know how load on demand works and how can i provide only some part of the data to the grid using load on demand when there is a parent child relation between the nodes.Here is the code which i have used, can any one help me out of this issue.
$("#treegrid").igTreeGrid({
dataSource: totalObjects,
width: "100%",
//rowEditDialogHeight: "100px",
autoGenerateColumns: false,
enableDeleteRow: false,
primaryKey: "name",
foreignKey: "parent",
editMode: "cell",
initialExpandDepth: 1,
/* virtualization : true,
virtualizationMode : "continuous",
height : "400px",*/
columns: [
{headerText: "Product Hierarchy", key: "name", dataType: "string", readOnly: "true"},
{
headerText: "Associated Materials",
key: "associations",
width: "120px",
dataType: "string",
readOnly: "true"
},
{headerText: "Level", key: "key", width: "50px", dataType: "string", readOnly: "true"},
{headerText: "Description", key: "excel_desc", dataType: "string", editable: "true"},
{
headerText: "SAP Description", key: "sap_desc", dataType: "string", readOnly: "true"
//editorType: "text",
//editorOptions: {textMode: "multiline",maxLength: 100}
},
// { headerText: "", key: "source", dataType: "string", readOnly:"true",hidden: true },
],
childDataKey: "children",
initialExpandDepth: 0,
features: [
{
name: "Responsive"
},
{
name: "Resizing"
},
{
name: "Paging",
pageSize: 8,
mode: 'allLevels'
},
//filtering & sorting
{
name: "Filtering",
type: "local",
mode: "simple",
filterDialogContainment: "window",
columnSettings: [
{
columnKey: "name",
condition: "startsWith"
},
{
columnKey: "associations",
condition: "equals"
},
{
columnKey: "key",
condition: "equals"
},
{
columnKey: "sap_desc",
condition: "equals"
},
]
},
{
name: "Sorting",
type: "local"
},
]
});

As provided in the comments the rendering time for 35k rows with foreign key relationship is ~10 seconds.
To improve it further either provide the child objects as child objects in the data source, and not with a foreign key, which will reduce rendering time to ~2 seconds, or use load on demand, which will load children for each parent only upon expansion of the parent.
Load on demand sample.

Related

Disable drag and drop for only one row in Handsontable grid

I am new to Handsontable.
I am working on the drag and drop feature.
I am able to enable drag and drop by setting the 'manualRowMove' property to true.
However, I want to disable drag and drop on just the last row.
Question: Is there any way to achieve this?
I have checked their documentation and online forums but did not find an answer.
Handsontable code:
table = new Handsontable(container1, {
data: data,
defaultRowHeight: 20,
rowHeaders: true,
colHeaders: true,
manualRowMove: true,
licenseKey: LicenseKey,
colHeaders: ["Name", "Email", "Designation", "Id"],
columns: [
{ data: "Name", type: "text", readOnly: true },
{ data: "Email", type: "text", readOnly: false },
{ data: "Designation", type: "text", readOnly: false },
{ data: "Id", type: "text", readOnly: true }
]
});

shieldUI grid filter / sort persistence on grid refresh

Is it possible to persist grid sort/filter/selection on grid.refresh() in some smart optimized way? I need to refresh grid on window resize event to adjust to a new window size. I guess refresh internally destroys and recreates grid, not accounting for possible active sort/filter/selection. Because grid can contain a lot of data (virtual scrolling), I would like to a avoid unnecessary db querying, rendering and sorting. I guess I am looking for a refresh which will refresh on existing data.
Seams like they just implemented it - here is the example.
Maybe to be included in the next release.
Here is the code in the example that does this:
jQuery(function ($) {
$("#grid").shieldGrid({
dataSource: {
data: gridData,
schema: {
fields: {
id: { type: Number },
name: { type: String },
company: { type: String },
phone: { type: String },
age: { type: Number },
gender: { type: String }
}
},
filter: {
// create the initial filter in that form
and: [
{ path: "name", filter: "con", value: "John" }
]
}
},
filtering: {
enabled: true
},
paging: true,
columns: [
{ field: "id", width: "250px", title: "ID" },
{ field: "name", title: "Person Name", width: "250px" },
{ field: "company", title: "Company" },
{ field: "phone", title: "Phone", width: "250px" },
{ field: "age", title: "Age" }
]
});
});
I found the solution in refresh method it self. It accepts options objects where one can provide current data source options to persist. Example to persist sort and/or filter:
var options = {
dataSource: $("#grid").swidget().dataSource
}
$("#grid").swidget().refresh(options);
Please stand me correct if I am wrong here. For selections I guess one can retrieve selected indices and reselect after calling refresh.
EDIT: filter and sort are preserved, but filter row resets (loses all active input values). Could this be a bug? How to keep values in filter row?

Is there a way to add a placeholder to a text field in KendoUI Grid?

I tried the following to add the placeholder attribute to the input field using the following code,
dataSource: {
...
schema: {
data: "storeEmployeeData",
total: "storeEmployeeDataCount",
model: {
id: "ID",
fields: {
Id: { type: "number", editable: false, nullable: true },
FirstName: { type: "string", nullable: true, editable: true, validation: { required: false } },
MiddleName: { type: "string", nullable: true, editable: true, validation: { required: false } },
LastName: { type: "string", nullable: true, editable: true, validation: { required: false } },
**Email: { type: "string", nullable: true, editable: true, placeholder: "(optional)", validation: { email: true, required: false } }
}
}
},
...
}
Also tried the following,
columns: [
{ field: "FirstName", title: "First Name", type: "string", width: "150px" },
{ field: "MiddleName", title: "Middle Name", type: "string", width: "150px" },
{ field: "LastName", title: "Last Name", type: "string", width: "150px" },
{ field: "Email", title: "Email", type: "string", width: "250px", sortable: false, placeholder: "(optional)" },
{ command: ["edit", "destroy"], title: " ", width: "200px" }
],
None of them yielded the result I was looking for i.e., having placeholder attribute placeholder="(optional)" added to the input field.
This is part of HTML5, if this feature already exists in Kendo UI Grid is it also compatible with IE 7 and IE 8 ?
Am I missing something? Any help is appreciated!
There is no placeholder option in the Kendo UI Model documentation; therefore, it is not supported directly. Reference: http://docs.kendoui.com/api/framework/model#configuration-Example. Maybe you meant to use defaultValue?
Alternatively, you could use the attributes option for the Kendo UI Grid configuration. Reference: http://docs.kendoui.com/api/web/grid#configuration-columns.attributes.
The placeholder attribute is only supported in IE 10 and above.
Update: (due to comments)
To give you an example, in order to add the placeholder attribute to the input element, you could use the editor option on the column.
columns: [
{ field: "Email", title: "Email", width: 250, sortable: false,
editor: function (container, options) {
var input = $("<input/>");
input.attr("name", options.field);
input.attr("placeholder", "(optional)");
input.appendTo(container);
}
}
]
If your looking for a place holder for when there are no records then,
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
noRecords: true,
dataSource: []
});
</script>
or
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
pageable: true,
noRecords: {
template: "No data available on current page. Current page is: #=this.dataSource.page()#"
},
dataSource: {
data: [{name: "John", age: 29}],
page: 2,
pageSize: 10
}
});
</script>

Detecting server-side error when editing or creating Kendo Grid entries

I have an editable Kendo Grid to manage (create/modify) user accounts. Editing is done in a popup (versus inline or batch). I have client-side validation to help ensure that valid data is provided to the server, however I cannot figure out how to handle the response from the server in the event that the create/update fails server-side. I'm not talking 'failed' as in the request failed with a HTTP 404 or 500, for example; I'm talking failed as in the script on the server didn't like something about the data and refuses to oblige.
Can someone please show me how I can accomplish this? What I would like to be able to do is after the update is sent to the server, wait for the response. If the response says everything is OK, then great. If the response says something didn't go so well, I'd like to be able to (A) keep the popup editing window open and populated and (B) provide feedback to the user regarding the reason for the rejection. The data should not be committed to the grid unless the response says everything is OK. Likewise, the edit popup should remain open until the server says OK.
I'm flexible with how the server's response should be formatted, as long as I can accomplish what I want.
Before you direct me to the Kendo official API documentation, I am already well aware of it and refer to it daily. However, to say the least, it is incomplete and I cannot find anything relating to this topic. If you have found something in the documentation that you think could help me then by all means point me to the documentation =)
As requested, below is the code I have for creating the grid.
$("#kendo_user_grid").kendoGrid({
columns: [{
title: "Last name",
field: "lName"
},{
title: "First name",
field: "fName"
},{
title: "Business unit",
field: "businessUnit"
},{
title: "Username",
field: "loginId"
},{
title: "Email address",
field: "email"
},{
title: "Phone",
field: "phone"
},{
title: "Address",
field: "address"
},{
title: "City",
field: "city"
},{
title: "State",
field: "state"
},{
title: "Zip code",
field: "zipcode"
},{
title: "Country",
field: "country"
},{
title: "Time zone",
field: "timezone"
},{
title: "Privileges",
field: "privs"
},{
command: ["edit","destroy"],
title: " "
}],
scrollable: false,
dataSource: {
transport: {
read: {
url: "manageUsers.phtml",
data: { mode: "fetch" },
dataType: "json",
type: "POST"
},
update: {
url: "manageUsers.phtml",
data: { mode: "update" },
type: "POST"
},
destroy: {
url: "manageUsers.phtml",
data: { mode: "destroy" },
type: "POST"
},
create: {
url: "manageUsers.phtml",
data: { mode: "create" },
type: "POST"
},
batch: false
},
schema: {
data: "records",
total: "total",
model: {
id: "userId",
fields: {
userId: { editable: false, nullable: true },
lName: { type: "string", editable: true, validation: { required: true } },
fName: { type: "string", editable: true, validation: { required: true } },
businessUnit: { type: "string", editable: true, validation: { required: true } },
loginId: { type: "string", validation: { required: true } },
email: { type: "string", validation: { required: true } },
phone: { type: "string" },
address: { type: "string" },
city: { type: "string" },
state: { type: "string" },
zipcode: { type: "string" },
country: { type: "string" },
timezone: { type: "string" },
privs: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: false,
serverFiltering: false,
serverSorting: false
},
filterable: true,
sortable: true,
pageable: true,
editable: {
mode: "popup",
template: kendo.template($("#kendo_edit_user_template").html())
},
toolbar: ["create","save","cancel"]
});
There are two point to keep in mind:
Schema.errors The field from the server response which contains server-side errors.
error is an event that will be fired if there was an error.
Basically you need to:
add to your schema an errors definition that provides access to the status sent back from the server.
Implement error event handler that, for example, restore previous value.
If your server returns the error message in a field called myError then you would have something like:
schema: {
errors: "myError",
data: "records",
total: "total",
model: {
id: "userId",
fields: {
userId: { editable: false, nullable: true },
lName: { type: "string", editable: true, validation: { required: true } },
fName: { type: "string", editable: true, validation: { required: true } },
...
or:
schema: {
errors: function(response) {
if (response.myError && response.myError !== "OK") {
return response.myError;
}
return false;
},
data: "records",
total: "total",
model: {
id: "userId",
fields: {
userId: { editable: false, nullable: true },
lName: { type: "string", editable: true, validation: { required: true } },
fName: { type: "string", editable: true, validation: { required: true } },
...
and the event would be:
dataSource: {
error : function (e) {
if (e.errors !== false) {
alert("Error: " + e.errors);
// This will cancel any change done
this.cancelChanges();
}
},
transport: {
read: {
url: "manageUsers.phtml",
data: { mode: "fetch" },
dataType: "json",
type: "POST"
},
EDIT : If what you want is to keep the popup open you should do:
dataSource: {
error : function (e) {
if (e.errors !== false) {
alert("Error: " + e.errors);
// This will keep the popup open
grid.one("dataBinding", function (e) {
e.preventDefault(); // cancel grid rebind
});
}
},
transport: {
read: {
url: "manageUsers.phtml",
data: { mode: "fetch" },
dataType: "json",
type: "POST"
},
Where I bind to databinding event just once using jQuery.one

How to customize dhtmlxscheduler.js file for adding some fields in popup?

I have some requirement for dhtmlx scheduler, here I would like edit the event and add one text box and one button.Can you please suggest me how we can cusomize the .js(compressed) file.
Is there any separate .js files are availble for Development version.
If any please suggest me.
Thanks,
Rajasekhar
It is possible to configure the details of this form (or lightbox).
The documentation on how to do this is here
There is no need to edit the main dhtmlx source for this.
I found this solution:
Modify the file dhtmlxscheduler.js i mean section fields :
lightbox: {
sections: [
{ name: "description", height: 40, map_to: "text", type: "textarea", focus: true },
{ name: "Note", height: 40, map_to: "text", type: "textarea", focus: true },
{ name: "Status", height: 40, map_to: "text", type: "textarea", focus: true },
{ name: "Type", height: 40, map_to: "text", type: "textarea", focus: true },
{ name: "Sequence", height: 40, map_to: "text", type: "textarea", focus: true },
{name: "time", height: 72, type: "time", map_to: "auto"}
]
},
and
labels:{
dhx_cal_today_button:"Today",
day_tab:"Day",
week_tab:"Week",
month_tab:"Month",
new_event:"Nouvelle Tache",
icon_save:"Save",
icon_cancel:"Cancel",
icon_details:"Details",
icon_edit:"Edit",
icon_delete:"Delete",
confirm_closing:"",//Your changes will be lost, are your sure ?
confirm_deleting:"Event will be deleted permanently, are you sure?",
section_description: "Description",
section_Note: "Note",
section_Status: "Status",
section_Type: "Type",
section_Sequence: "Sequence",
section_time:"Periode",

Resources