I'm getting a problem with my Tree Grid, I can just expand the first level, its children come with a icon that does not allow to expand anymore, what am i doing wrong?
View
Grid Load Complete, I thing the error is here...
loadComplete: function () {
$(this).find("tr.jqgrow").each(function (tr) {
var idLinha = $(this).attr('id');
var level = this.cells[4].childNodes[0].data;
$(this).find("div.treeclick").bind("click", function (e) {
var classes = $(this).attr('class');
if (classes.indexOf('-minus') != -1) {
if (!$(this).hasClass('expanded')) {
$(this).addClass('expanded');
$.ajax({
type: 'post',
url: '#Url.Action("AddFilhos")',
data: { p_PaiID: idLinha, p_Level: level },
dataType: "json",
success: function (result) {
for(var c_Area = 0; c_Area < result.rows.length; c_Area++)
{
$('#listaRelatorioFormulario').addChildNode(result.rows[c_Area].id, result.rows[c_Area].parent, result.rows[c_Area]);
}
}
});
}
}
else if (classes.indexOf('-plus') != -1) {
}
});
});
},
To expand the nodes during loading of the TreeGrid you need just include expanded: true. See the answer for example for more information.
Be careful about another bug described in the answer (the workaround is described in the answer too).
UPDATED: You should read additionally the answer which could be probably also interesting for you.
Related
I am trying to populate slick grid it is showing the values while debugging but not showing in the web page.
I have added all the required references. Here is the js function.
function LoadMonthStatus(dropdownYear, buttonId) {
try {
$(".screen").css({ opacity: 0.5 });
$(".slick-cell").css({ opacity: 0.5 });
dirtyFlag = false;
var drpYear = document.getElementById(dropdownYear);
year = drpYear.options[drpYear.selectedIndex].value;
data = [];
var dropdownoptions = ""; // "hard,soft,closed";
var columns = {};
var options = {
editable: true,
enableCellNavigation: true,
asyncEditorLoading: false,
autoEdit: true,
autoHeight: true
};
columns = [
{ id: "month", name: "Month", field: "Month", width: 250 },
{ id: "status", name: "Close Status", field: "Status", options: columnOptions, editor: Slick.Editors.Select, width: 150 }
];
$.ajax({
type: "GET",
url: "http://localhost:51072/PULSE.Service/api/MonthCloseStatus/LoadMonths",
data: { year: $("#drpYear").val() },
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
data = msg;
monthStatusGrid = new Slick.Grid("#slkgrdMonths", data, columns, options);
//grid.setSelectionModel(new Slick.CellSelectionModel());
monthStatusGrid.onCellChange.subscribe(function (e, args) {
var cell = monthStatusGrid.getCellNode(args.row, args.cell);
cell.className += cell.className ? ' slick-cell-modified' : 'slick-cell-modified';
dirtyFlag = true;
});
if (msg == null || msg == "")
document.getElementById(buttonId).disabled = true;
else
document.getElementById(buttonId).disabled = false;
//Enable the button
$(".screen").css({ opacity: 1 });
$(".slick-cell").css({ opacity: 1 });
},
error: function (xhr, textStatus, errorThrown) {
try {
var err = JSON.parse(xhr.responseText);
jAlert(err.Message, 'PULSE');
}
catch (e) {
jAlert(clientErrMessage, 'PULSE');
}
$(".screen").css({ opacity: 1 });
$(".slick-cell").css({ opacity: 1 });
}
});
}
catch (e) {
jAlert(clientErrMessage, 'PULSE');
}
}
Slick grid should be populated with months like Jan, Feb, March and its status respectively in 2 columns.
There are too many variables to give an answer. However I would recommend that you create the grid on page load and just populate it with data on ajax load, rather than creating the grid possibly each time.
In my experience, data not being visible is often CSS related.
Have a look at the samples in the SlickGrid repo, they are pretty comprehensive. Make sure you are using https://github.com/6pac/SlickGrid rather than the old MLeibman repo.
If you want assistance, the best idea is to create a stand alone test page that works with local files (apart from the ajax call) in the example folder of the slickgrid repo.
If you can share that, we can easily reproduce the behaviour. As a bonus, about 90% of the time you'll work out the problem while you are creating the example page.
Check to see
-if the property of data after ajax call is matching with the property provided in columns Field and vice versa.
- if the container u are passing is correct.
d3js (both v4 and also v3) charts in Drupal 7 with having click event attached to one of the svg text element using .attr("class", "ajax_button") and attaching Drupal behavior for that element. Problem is that click event is lost once tree gets collapsed and not get reattached on expand.
link : d3js + Drupal behavior
following is code for click element
(function($) {
Drupal.behaviors.listload = {
attach: function(context, settings) {
if (context == document) {
$('.ajax_button', context).once(function() {
$(this).click(function(e) {
e.preventDefault();
// https://stackoverflow.com/a/1369080
// to prevent collapsible function which is attached to parent element
e.stopPropagation();
var the_id = $(this).attr('href'); // contextual filter(nid) to views
noSlashes = the_id.replace(/\//g, '');
$.ajax({
url: Drupal.settings.basePath + 'views/ajax',
type: 'post',
data: {
view_name: 'candidate_list_er', //view name
view_display_id: 'candidate_list_block', //your display id
view_args: noSlashes, // your views arguments, //view contexuall filter
},
dataType: 'json',
success: function(response) {
//console.log(response);
if (response[1] !== undefined) {
//console.log(response[1].data); // do something with the view
var viewHtml = response[1].data;
$('#ajax-target .content').html(viewHtml);
//Drupal.attachBehaviors(); //check if you need this.
}
},
error: function(data) {
alert('An error occured!');
}
});
}); //click ends
}); //once ends
}
},
detach: function(context, settings, trigger) { //this function is option
$('.ajax_button').unbind(); //or do whatever you want;
}
};
})(jQuery);
I've this code, i'd like to replace the 'ul.hello-list' content with the answer datas. I'm trying
$.ajax({
type: "POST",
url: "home/hello.php",
data: {
"action": "hello_action"
},
success: function(datas) {
if (datas) {
$("ul.hello-list").fadeOut();
// It doesn't work
datas.fadeIn();
}
}
});
Thxs
So from your comment, I believe you can do:
success: function(datas) {
if (datas) {
var $newContent = $(datas).hide();
var $oldList = $("ul.hello-list");
var $container = $oldList.parent(); // Replace this with whatever your container is
$oldList.fadeOut();
$newContent.appendTo($container).fadeIn();
}
}
The issue is that datas is not inherently a jQuery object, so you cannot call jQuery functions on it. Furthermore, it needs to be attached to the DOM before it can be faded in.
I have a computed observable that makes AJAX calls based on other data (in a computed observable). The resulting data is used to populate part of the UI. Sometimes that part of the UI is hidden and I'd like to avoid the AJAX calls when it's hidden. Right now I have the following, but it updates whenever isVisible becomes true:
this.loadData = ko.computed(function() {
if (this.isVisible()) {
this.isProcessing(true);
var self = this;
$.when.apply($, ko.utils.arrayMap(this.parent.data.filteredSelectedDatasetLinks(), function(datasetLink) {
return $.ajax({
url: datasetLink.getDownloadUrl('.json'),
success: function(data) {
//... do stuff with the data
}
});
}))
.done(function() {
self.isProcessing(false);
});
}
}, this);
So obviously I need to split this up somehow, but I haven't figured out how to do it. To reiterate, when isVisible is false, no updates should happen. When isVisible is true, updates happen whenever filteredSelectedDatasetLinks changes. When isVisible becomes true, updates happen if filteredSelectedDatasetLinks changed while it was false.
Presumably you want to call your ajax when the filteredSelectedDatasetLinks is changed (and only if visible?). I think the best way to do this is to make that dependency explicit using the subscribe function... (I have simplified slightly and fixed issue with your final 'this')
this.filteredSelectedDatasetLinks.subscribe(function() {
if (this.isVisible()) {
this.isProcessing(true);
var self = this;
$.when.apply($, ko.utils.arrayMap(this.filteredSelectedDatasetLinks(), function(datasetLink) {
return $.ajax({
url: datasetLink.getDownloadUrl('.json'),
success: function(data) {
//... do stuff with the data
}
});
}))
.done(function() {
self.isProcessing(false);
});
}
}, this);
The issue with your original attempt is that ko.computed runs the function once and automatically works out which observables it needs to subcribe to. In your case this included the isVisible observable (which is not what you wanted). But making it explicit with the subscribe call directly you no longer have to worry about isVisible firing the callback.
Here is what I ended up using based on RP Niemeyer's comments.
this.trackData = ko.computed(function() {
this.parent.data.filteredSelectedDatasetLinks(); // for notification
this.isDataDirty(true);
}, this);
this.loadData = ko.computed(function() {
if (this.isVisible() && this.isDataDirty()) {
this.isDataDirty(false);
this.isProcessing(true);
var self = this;
$.when.apply($, ko.utils.arrayMap(this.parent.data.filteredSelectedDatasetLinks.peek(), function(datasetLink) {
return $.ajax({
url: datasetLink.getDownloadUrl('.json'),
success: function(data) {
//... do stuff with the data
}
});
}))
.done(function() {
self.isProcessing(false);
});
}
}, this);
I've pretty much stared myself blind on this issue: I'm using KendoUI's dataSource and some filters to do a sort of ajax-search: http://www.high-quality.nl/kandidaten/vacatures/. What happens is that my functions aren't being executed in proper order. My dataSource and an kendoObservable look like this:
var jobTemplate = kendo.template($('#job-stub').html());
var jobCount = new kendo.data.ObservableObject({
count: 20
});
jobCount.bind('change', function(){
if(this.count == 0){
$('#result-wrapper').prepend('<h2>Er zijn geen vacatures gevonden.</h2>');
} else if(this.count == 1){
$('#result-wrapper').prepend('<h2>Er is <span class="blue">'+this.count+'</span> vacature gevonden.</h2>');
} else {
$('#result-wrapper').prepend('<h2>Er zijn <span class="blue">'+this.count+'</span> vacatures gevonden.</h2>');
}
});
var jobData = new kendo.data.DataSource({
transport: {
read: {
url: '/jobs/json/search',
dataType: 'json',
data: {
job_matching_function: function(){
return $('#job_matching_function').val();
},
job_matching_type: function(){
return $('#job_matching_type').val();
},
job_matching_hours: function(){
return $('#job_matching_hours').val();
},
job_matching_education: function(){
return $('#job_matching_education').val();
}
}
}
},
schema: {
data: 'results'
},
change: function(){
$('#result-wrapper').html(kendo.render(jobTemplate, this.view()));
jobCount.set('count', this.view().length);
}
});
and when one of the filters get clicked I run jobData.read();. Every now and then the result-count won't get appear. Does anyone have any idea why?
Thanks,
Steven
Steven, I never tried having 4 anonymous methods in the read, not sure how it behaves - try to have one read call with one return. Then you can use complete event as its shown in this post.