I am using the following Infragistics component for viewing hierarchical data. http://www.igniteui.com/tree/drag-and-drop-single-tree
I have initialized the tree view like below to see all the nodes of the tree expanded initially. Can someone please suggest me if I am missing any option to display all nodes collapsed initially?
$("#tree").igTree({
checkboxMode: "off",
singleBranchExpand: true,
nodeClick: function (evt, ui) {
if (ui.node.data.Folder == "") {
var agreements = [];
var entry = [];
entry.push(ui.node.data.AgreementNbr);
entry.push(ui.node.data.ExternalDescription);
entry.push(ui.node.data.Description);
entry.push(ui.node.data.EffDate);
entry.push(ui.node.data.ExpDate);
entry.push(ui.node.data.ReleaseStatus);
agreements.push(entry);
$('#example').DataTable({
responsive: true,
columns: [
{ title: "Agreement Number" },
{ title: "External Description" },
{ title: "Description" },
{ title: "Effective Date." },
{ title: "Expiry Date" },
{ title: "Release Status" }
],
data: agreements,
destroy: true,
processing: true,
});
}
else {
var output = ui.node.data.Folder.map(function (obj) {
var a = [obj.AgreementNbr, obj.ExternalDescription, obj.Description, obj.EffDate, obj.ExpDate, obj.ReleaseStatus];
return Object.keys(a).map(function (key) {
return a[key];
});
});
console.log(output);
$('#example').DataTable({
responsive: true,
columns: [
{ title: "Agreement Number" },
{ title: "External Description"},
{ title: "Description"},
{ title: "Effective Date"},
{ title: "Expiry Date"},
{ title: "Release Status"}
],
data : output,
destroy: true
});
}
},
dataSource: files,
dataSourceType: "json",
initialExpandDepth: 0,
pathSeparator: ".",
bindings: {
textKey: "Text",
valueKey: "Value",
imageUrlKey: "ImageUrl",
childDataProperty: "Folder",
Description: "Description"
},
// Enable Drag-and-drop feature
dragAndDrop: false
});
Use the initialExpandDepth option
initialExpandDepth : -1
You have that option set to 0.
If you set the initialExpandDepth to -1, all nodes should display collapsed initially.
You can see infragistics.com for more information.
Related
i'm using datatable library and trying to get the entire row as object where checkbox "editado" is checked
I'm using the folowing code:
var a = $('#ContratoAlertaTabela').DataTable().rows(function (idx,
data, node) {
return $(node).find('.editado:input[type="checkbox"]').prop('checked');
}).data().toArray();
But it gives as object like:
0:
dataAssinatura: "2022-05-20T00:00:00"
dataTermino: "2022-05-13T00:00:00"
descricao: "Descrição 2021"
diasRestantes: -18
exercicio: 2021
fornecedor: "fornecedor 2"
id: 6
numero: "23452345"
tipo: "C"
visto: true
But i'm looking for this
0:
dataAssinatura: "2022-05-20T00:00:00"
dataTermino: "2022-05-13T00:00:00"
descricao: "Descrição 2021"
diasRestantes: -18
exercicio: 2021
fornecedor: "fornecedor 2"
id: 6
numero: "23452345"
tipo: "C"
visto: true
editado: true
And this is my datatable
var l = abp.localization.getResource('Contabilidade');
var dataTable = $('#ContratoAlertaTabela').DataTable(
abp.libs.datatables.normalizeConfiguration({
serverSide: true,
paging: true,
'order': [[2, 'asc']],
//order: false, //[[0, "asc"]],
searching: true,
scrollX: true,
ajax: abp.libs.datatables.createAjax(gcaspp.contabilidade.contratoAlerta.contratoAlerta.getListAlerta,
() => {
var visto = $("#ExibirVisto").is(":checked") ? "" : "true";
return { visto: visto };
}),
dom: '<"toolbar">',
columnDefs: [
{
title: 'Visto',
data: "visto",
orderable: false,
render: function (data) {
if (data) {
return '<input type="checkbox" name="cbox1" value="" checked>';
} else {
return '<input type="checkbox" name="cbox1" value="" >';
}
}
},
{
title: 'Editado',
render: function (data) {
return '<input type="checkbox" class="editado" name="teste" value="" >';
}
},
{
title: "visto",
data: "visto"
},
{
title: "id",
data: "id"
},
{
title: 'Tipo',
data: "tipo"
},
{
title: 'Numero',
data: "numero"
},
{
title: 'Exercicio',
data: "exercicio"
},
{
title: 'Descricao',
data: "descricao"
},
{
title: 'Fornecedor',
data: "fornecedor"
},
{
title: 'DataAssinatura',
data: "dataAssinatura"
},
{
title: 'DataTermino',
data: "dataTermino"
},
{
title: 'DiasRestantes',
data: "diasRestantes"
}
]
})
);
Any ideia about what i can do?
I’m working with datatables and trying to figure out what I’m doing wrong. I am trying to display the total number of rows when the table hits the draw event on the table. Right now with the code, I’m showing below I am not getting any console errors. The element where the number is supposed to be updated is correct. I am just not getting it to render with the correct count.
("use strict");
const renderStatusCell = (data, type, full, meta) => {
const status = {
0: { title: "Inactive" },
1: { title: "Active" }
};
if (typeof status[data] === "undefined") {
return data;
}
return status[data].title;
};
var table = $('[data-table="users.index"]');
// begin first table
table.DataTable({
// Order settings
order: [[1, "desc"]],
ajax: "/titles",
columns: [
{ data: "id", title: "User ID" },
{ data: "name", title: "Name" },
{ data: "slug", title: "Slug" },
{ data: "introduced_at", title: "Date Introduced" },
{ data: "is_active", title: "Status", render: renderStatusCell },
{
data: "action",
title: "Actions",
orderable: false,
responsivePriority: -1
}
]
});
var updateTotal = function() {
table.on("draw", function() {
$("#kt_subheader_total").html(table.fnSettings().fnRecordsTotal());
});
};
I expected when the table was rendered to update the dom with the correct number of rows however the div does not get updated.
I don't understand your problem, but I think you need something like that.
table
.row($(this).parents('tr'))
.remove()
.draw();
or
table.ajax.reload();
I believe you need to wait until the HTML loads before running all your javascript code. Also, if you are storing the total, you not make it a function but rather just store the value.
'use strict';
// this will make sure all the HTML loads before the JavaScript runs.
$(function() {
var table = $('[data-table="users.index"]');
var updateTotal = null; // store in a variable
const renderStatusCell = (data, type, full, meta) => {
const status = {
0: { title: "Inactive" },
1: { title: "Active" }
};
if (typeof status[data] === "undefined")
return data;
return status[data].title;
};
// begin first table
table.DataTable({
// Order settings
order: [[1, "desc"]],
ajax: "/titles",
columns: [
{ data: "id", title: "User ID" },
{ data: "name", title: "Name" },
{ data: "slug", title: "Slug" },
{ data: "introduced_at", title: "Date Introduced" },
{ data: "is_active", title: "Status", render: renderStatusCell },
{
data: "action",
title: "Actions",
orderable: false,
responsivePriority: -1
}
]
});
table.on("draw", function() {
updateTotal = table.fnSettings().fnRecordsTotal();
$("#kt_subheader_total").html(table.fnSettings().fnRecordsTotal());
});
});
I have created a jquery grid and loaded the json data into it.. And i have some radiobuttons on pop up.. based on that selection the json value is changed. For the first time , the json is loaded into gqgrid. but when i select other radio button the json value is changed but that new json is not loaded into jqgrid. The old json is showing.
I have tried ,
obj.datatype = "local";
obj.viewrecords = true;
obj.rowNum = 20;
obj.pager = "#jqGridPager";
obj.data = jsonValue;
obj.localReader = {repeatitems: true};
obj.rowList = [20,30,50];
obj.loadonce = true;
obj.colModel = [
{ "label": 'Id', "name": 'studentId', "width": "150" , "key" : true},
{ "label": 'No', "name": 'studentNo', "width": "150"},
{ "label": 'Name', "name": 'studentName', "width": "150"},
{ "label": 'Phone', "name": 'studentPhone', "width": "150"},
{ "label":'Email', "name": 'primaryContactEmail', "width": "150" },
{ "label":'Address', "name": 'studentAddress', "width": "150" }
];
obj.multiselect = true;
obj.navOptions = { reloadGridOptions: { fromServer: true } };
//console.log(obj)
$("#grid_json").jqGrid(obj).jqGrid('filterToolbar').navGrid('#jqGridPager',
{ edit: false, add: false, del: false, search: true, refresh: true, view: true, position: "left", cloneToTop: true },
{
editCaption: "The Edit Dialog",
recreateForm: true,
checkOnUpdate : true,
checkOnSubmit : true,
closeAfterEdit: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Add Dialog
{
closeAfterAdd: true,
recreateForm: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Delete Dailog
{
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
{
multipleSearch: true
}
)
// add first custom button
/* $('#grid_json').navButtonAdd('#jqGridPager',
{
buttonicon: "ui-icon-mail-closed",
title: "Send Mail",
caption: "Send Mail",
position: "last",
// onClickButton: customButtonClicked
}); */
/// add second custom button
$('#grid_json').navButtonAdd('#jqGridPager',
{
buttonicon: "ui-icon-pencil",
title: "Edit",
caption: "Edit",
position: "last",
//onClickButton: customButtonClicked
});
Try this first clear the grid data then reset the data property of the grid options to your new json data.
var grid = $("#grid_json");
grid.jqGrid('clearGridData').jqGrid('setGridParam', {
data: new_data
}).trigger('reloadGrid', [{ page: 1 }]);
My problem is: when I change db.Contacts.Where( x => x.Id > 100).Select(...), The KendoUI Grid cannot show the data. However, when x=>x.Id < 100, it can show the data.
If I delete the Where(...), it also can not show the data.
What is the wrong? Thank you very much.
Here is my code.
public class HelloOneController : Controller
{
......
public JsonResult Contacts_Read()
{
var query = db.Contacts.Where(x => x.Id < 100 )
.Select(x => new
{
Id = x.Id,
Email = x.Email,
FirstName = x.FirstName,
LastName = x.LastName
}).ToList();
}
return Json(query, JsonRequestBehavior.AllowGet);
}
......
}
$("#grid").kendoGrid({
dataSource: {
transport: {
read: "/HelloOne/Contacts_Read",
dataType: "json"
},
schema: {
model:{
fields: {
Id: { type: "number" },
Email: { type: "string" },
FirstName: { type: "string" },
LastName: { type: "string" }
}
}
},
pageSize: 20
},
height: 500,
groupable: false,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{ title: "Id", field: "Id", width: 50 },
{ title: "Email", field: "Email" },
{ title: "First Name", field: "FirstName" },
{ title: "Last Name", field: "LastName" }
]
});
In my project had a kendo grid with filtering, filtering is working fine,but data is not clearing dynamically while filter is cleared. filter data is cleared by button click how to clear without "clear" button click.My grid code is
var grid = $("#grid").kendoGrid({
dataSource: {
type : "odata",
transport : {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema : {
model: {
fields: {
OrderID : { type: "number" },
Freight : { type: "number" },
ShipName : { type: "string" },
OrderDate: { type: "date" },
ShipCity : { type: "string" }
}
}
},
pageSize : 10
},
filterable: true,
sortable : true,
pageable : true,
columns : [
{
field : "OrderID",
filterable: false
},
"Freight",
{
field : "OrderDate",
title : "Order Date",
width : 100,
format: "{0:MM/dd/yyyy}"
},
{
field: "ShipName",
title: "Ship Name",
width: 200
},
{
field: "ShipCity",
title: "Ship City"
}
]
}).data("kendoGrid");
The only thing I can think of is to use the parameterMap function (when type is 'read') to get rid of the filters that you do not need and always send only the last item of filters array.