Kendo grid table expand removes table data - javascript

We have a function that is being used to expand all rows in a kendo grid if they have a subgrid. Currently this is indicated by having an arrow. This arrow is used in the code to search for so it knows how to expand the grid.
(function () {
$(".k-grid-header .k-hierarchy-cell").html(
"<div>" +
"<span class=\"k-icon k-i-arrow-60-right grid-expand pointer link\" title=\"Expand all\"></span>" +
"</div>");
$(".grid-expand").click(expandGridDetails);
});
function expandGridDetails() {
var grid = $(".k-grid").data("kendoGrid");
grid.expandRow(grid.tbody.find(".k-master-row").has(".k-hierarchy-cell a.k-icon"));
}
For one of the grids this works perfectly, however for the second grid this function will not expand the rows and instead remove some of the data represented in the detailRow.
The problem seems to occur as soon as the grid.expand() method is executed. If I do anything else such as the grid.tbody.find-statement, the table will stay intact. Using grid.collapseRow() is causing the same thing to happen, not executing but instead removing some of the data. The master-rows stay completely intact throughout the process.
Does anyone have an idea about what might be the cause of this bug?

A senior programmer explained to me what I was doing wrong and I fixed it with his solution. With $(".grid-expand") the code was calling the first grid every single time, even after selecting a row in another grid. The solution is to save a global variable which keeps track of the grid that is currently being viewed. Backdraw is that this global variable would cause problems when the same page is opened multiple times by the same user, but I see no reason to prioritize a solution for this small issue.
Another solution is to use
function expendGridDetails(e) {
var grid = e.sender;
}
The downside to this is that the e variable won't automatically be send to each of the functions. I'm not sure yet as to what determines if they do or don't receive this variable, but it's saver than using a global variable which may not be set to the correct value. e.sender asks the grid that is calling the function for it's name. Or at least that's in wide terms what I understood from the explanation given to me.

Related

Slickgrid: value entered in a cell disappears after moving out of cell

In a Slickgrid cell, i click and enter a value. Once i move out of this cell using a mouse click the value entered disappears. But if i enter the value in the cell and tab out then the value stays in the cell. I would like to know if this should be manually handled.
OnClick event i am calling
grid.updateRow(grid.getDataItem(args.row));
grid.invalidate();
grid.render();
Thanks,
Asha
You're doing something wrong, updateRow() argument is a row index in the grid but you're passing an item object so that won't work, also if I remember correctly updateRow is only used for re-rendering or refreshing a specific row index, it's not for updating the data but more for rendering purposes (perhaps the naming is confusing).
I personally only use the SlickGrid DataView and the functions to call for updating items are different, you can see how to that in this other Stack Overflow answer Change slickgrid cell data after edit
If you're using the grid object, as it's written in the other SO answer I referenced earlier, then it would be
grid.invalidateRow(args.row);
data[args.row][grid.getColumns()[args.cell].field] = a.msg;
grid.render();
Personally I always use the SlickGrid DataView as it's much more user friendly and comes with a lot more benefit like data grouping and many other functionalities. Again take a look at the other SO answer that I wrote in previous paragraph, that is the correct way to do it

Google Script behaving differently when in spreadsheet open trigger or assigned to button

I have a spreadsheet that is intended to keep track of expenses. Since more often than not, what I want is to append new expenses at the end of the table, I have created a script (mostly by importing an example found here in Stack Overflow) that jumps to the first blank line based on column A as follows:
function jumpToBlankLine() {
var sheet = SpreadsheetApp.getActiveSheet();
var values = sheet.getRange("A:A").getValues();
var maxIndex = values.reduce(function(maxIndex, row, index) {
return row[0] === "" ? maxIndex : index;
}, 0);
sheet.setActiveRange(sheet.getRange(maxIndex + 2, 1));
}
If anyone have comments or suggestions about the function above, they will be welcome! But my question is regarding it's behavior.
Behavior 1:
I have set a trigger upon spreadsheet opening that works perfectly: after loading the spreadsheet it jumps to the first blank line in column A and if I start typing right after (the expense date in my case), the cell starts to get filled by what I'm typing.
Behavior 2:
But, when I assign this same function to a button (a drawing) and I click it, the spreadsheet goes to the right cell, but it ignores what I type right after. To have the cell filled by what I'm typing, I must click on it.
The behavior I want is like Behavior 1 above. I have also tried the function Sheet.activate() with no success.
Anybody have any ideas about why this is happening or a possible solution or workaround?
Thanks in advance!
It's happening because the drawing that you clicked on to run the script is actually the active object. You can confirm this by hitting return after you click on the drawing that runs the script.
Adding the below line of code to the onOpen function works as you expect but it still requires 2 clicks but less mouse travel than the drawing and doesn't require that you scroll to find it. (It creates a custom menu next to the help menu in sheets)
SpreadsheetApp.getUi().createMenu('Custom Function').addItem('Go to last row','onOpen').addToUi();

AmStockChart panel title identification

I would like to growl the title of the stockPanel being removed on clicking the allowTurnOff button
I am using the below Listener but it is not working. How does amStockChart register the panel which needs to be removed on clicking a certain panels allowturnOff button
addListener('panelRemoved' , 'function(event) {
growl(event.chart.panels.title);
}'),
Actually you may ignore the syntax around the quotes as I am using the charting library through R but the concept remains the same.
Let me elaborate the situation. I have multiple panels with allowTurnOff buttons. I want to trigger an action based on which panel the user decides to remove. Hence I am using the panelRemoved event where the program should message me which one of the panels (either in terms of Index or Panel Title) was removed by the user.
The below works:
addListener('panelRemoved' , 'function(event) {
alert(event.chart.panels.length);
}')
PS: Replacing growl() function by alert for convenience.
The above code correctly calls out the number of panels in my chart but what I want is the title of the panel that was removed. I can definitely provide the code in R which is similar but not exactly like JS.
I am assuming there will be a loop which will run through all the panels in event.chart.panels.length and check which one of the panels was removed and then throw out something like event.chart.panels[x].title I guess.
addListener(panelRemoved,function(event){
for ( var i = 0; i < event.chart.panels.length; i++ ) {
if event.chart.panels[i].removePanel.enabled==true {
alert(event.chart.panels[i].title);
} else {
return();
}
})
Please let me know if you would still need the R Code
# Sagar: Since my code is in R and not in JS, I am unable to share in Fiddle. But I can make a good attempt to explain the series of steps involved. As follows:I have an amStockChart with multi-panel.I have set the stockpanel property allowTurnOff = TRUE. Now you will find that a small remove panel button appears on the top right of each panel. Now if a user tries to remove a given panel using that small little button on top of each panel, the event=removePanel gets triggered. I will use the addListener to catch this event and execute some logic. In that logic, all I am trying to do is alert as follows "Panelx is successfully removed". So to do that, I need to know which panel did the actually close. I want help building that logic which will identify which panel the user closed within the addListener(event=removePanel) and then throw out the alert. Ideally I would like the logic to throw out the title of the panel which was removed by the user

AngularJS edit and save values inside ng-repeat

I'm working on my first angular app and i dont know the best way to handle this problem.
I have a long hierarchical json becouse the tables of the database are like a pyramid, looks similar to this:
I have the view represented pretty well using ng-repeat, I want to be able to edit the last rows of the last table which correspond with last level of JSON.
To do this I have implemented a edit modal that works fine, it saves and updates the database perfectly, the problem is that to see the updated value i have to refresh the page losing scroll position and collapsing accordions which is very bad.
Images of accordions:
When i click edit icon a promise stores in $scope.objEdit = {}; the object and launches the modal, which is linked to this object by ng-model.
So I think that the next step is that when modal is closed, i have to override the old object placed in the $scope variable that contains the entire json for the edited one, but im not sure how to do it.
I would appreciate your help to learn the standard way to do this, thx mates.
I Just solved it, I used a similar procedure to the oen that #AnikIslamAbhi sugested, in the fiddle that #Harshad shared in the comments is solved, but i have a much more dificult json to handle, i had to go with things like those to get the index of all levels of the json:
$scope.positionEvaluacion = $scope.dataEvaluacion.indexOf(args.levelOne);
$scope.positionAsignaturaevaluacion = $scope.dataEvaluacion[$scope.positionEvaluacion].asignaturaevaluacion.indexOf(args.levelTwo);
$scope.positionTarea = $scope.dataEvaluacion[$scope.positionEvaluacion].asignaturaevaluacion[$scope.positionAsignaturaevaluacion].tarea.indexOf(args.levelThree);
And after this override this object with the edited one:
$scope.dataEvaluacion[$scope.positionEvaluacion].asignaturaevaluacion[$scope.positionAsignaturaevaluacion].tarea[$scope.positionTarea] = $scope.objEdit;
You can try this procedure
Pass the selected object on edit click from UI to Controller.
Clone it and pass that object to modal.
OnModal close pass the modal object back to the UI.
Copy the values of modal object to the previous selected object
Like this
for(var i in modalObj){
selectedObj[i]=modalObj[i];
}

Highlighting bars as the mouse hovers on the table rows in Protovis

I am new at protovis and I am having a problem.
I have a html table which has the data and Bar Chart made in protovis using the table's data. Now what I want is to change the color of the individual bars as mouse is hovers on that particular row.
Can anyone help me how it can be done? Thanks in advance.
I've set up a working example here. You can't do what you're asking using just Protovis, because Protovis can't set event handlers on the HTML table. In order to achieve this, you generally need to:
Set up a variable to hold the state (in this case, which of the rows should be highlighted)
Set the visual parameter you want to change in your Protovis code (in this case, fillStyle) to a function that checks the state variable:
.fillStyle(function(d) { return hilighted == d.name ? "orange" : "blue" });
Set an event handler on the HTML table (I used jQuery, as your tag indicated you were using this too) that changes the state variable and re-renders the vis.
In jQuery:
$('#myTable tr').mouseover(function() {
// set the state variable
hilighted = $(this).data('name');
// re-render the vis
vis.render();
});
There are other ways to do this as well, but this is generally the easiest, and for interactions involving other parts of the page it's generally a good idea to hold the state in a separate variable outside your Protovis code.
I've not used Protovis before but the interaction documentation leads me you could do it by adding something like this to your object:
.event("mouseover", function() this.fillStyle("orange")) // override
.event("mouseout", function() this.fillStyle(undefined)) // restore

Categories