unfortunately I can't find any help concerning to my specific problem.
I try to simplify it:
My grid consists of a shown column (A) and a hidden column (B) and other shown columns as well (C,D). With a custom button I can switch between these two columns, so that A is hidden and B is shown and vice versa.
My aim is as follows:
If the width of (shown) A has been changed, the width of (hidden) B should also be changed.
My current way to realize this this:
resizeStop: function () {
var $self = $(this);
shrinkToFit = $self.jqGrid("getGridParam", "shrinkToFit");
$self.jqGrid("setGridWidth", this.grid.newWidth, shrinkToFit);
var a = $self.jqGrid("getGridParam","colModel");
$self.jqGrid("setColWidth", "customers.name_short",a[2].width);
},
I works, but I have to wait for a wile and in addition to that I get the following log: "too much recursion". It seems that the function setColWidth is called more than 300 times.
I analyzed the code of setColWidth but I could not find any hint where it would call itself.
Can anybody help me?
Thanks in advance!
I suppose that you use my method setColWidth from here and the answer. It's wrong to use it inside of resizeStop callback.
You wrote: "With a custom button I can switch between these two columns, so that A is hidden and B is shown and vice versa." It seems to me that you need place one call of setColWidth method directly after you makes the column A or the column B visible (in the click event handle of your custom button). It should solve the problem.
UPDATED: The following demo http://jsfiddle.net/OlegKi/m7f9ghwq/18/ demonstrates the approach.
Related
It seems that the selection events are not being passed through custom cell renderers. My goal is I want to change the background color of every cell in my grid (based on the values), and also be able to handle selection events. I've modified the example in the docs here:
https://www.telerik.com/kendo-react-ui/components/grid/selection/
To include a background color on the Units on Order column. You'll notice that that column does not participate in selections. I created a stackblitz example here:
https://stackblitz.com/edit/react-o4ycqi?file=app/main.jsx
All I changed was I added a cellWithBackground function and assigned it to the column UnitsInStock. Here is that function
const cellWithBackGround = props => {
const examplePrice = true;
const style = {
backgroundColor: "rgb(243, 23, 0, 0.32)"
};
const field = props.field || '';
return <td style={style}>
{props.dataItem[field]}
</td>;
};
I did find an example that was close but it I couldn't get it to work with functional components. It just worked with classes which I don't use. So, please provide examples or references on that support Functional Components.
H Peter,
Thank you for sharing the code. By completely replacing the entire cell's infrastructure, it will no longer respond to anything from the Grid.
Specifically, I'm referring to this line in the function. It only returns a <td> with the field's name, it abandons the rest of the properties of the element.
//cell returned form the function
return <td style={style}>
{props.dataItem[field]}
</td>;
At that point, it's basically a dead cell. It will not respond to events, data actions, etc because it is missing all the parts that the Grid requires to interact with it.
Further Guidance
As I mentioned in my Twitter reply, you can get guidance for the Kendo Engineers to help you from here.
I think there's a better way to handle this by using styling instead of manually handling the DOM elements directly. At the very least, you need to return the complete infrastructure of the cell and they can assist with that.
I apologize if my question was already answered but I didn’t find any relevant answer.
I would like to dynamically edit cell value therefore I used:
var setButton = document.getElementById('setButton');
setButton.addEventListener('click', function(event) {
hot.getActiveEditor().beginEditing();
hot.render();
})
it edits cell but I don’t see original value, only empty.
Example:
https://jsfiddle.net/janzitniak/qdg420v8/6/
Note: Please select to any cell and then click to Set value to selected cell button.
Thank you for any help.
Solution
Long story short: Call enableFullEditMode() before you call beginEditing().
Not sure about the render() call though - I think that call can be removed.
JSFiddle
Storytime
I was looking for a solution to a similar problem, and had to look into the code to figure it out. In hindsight this was straightforward.
First there is some code which will reset the content of textareas to an empty string, to work with IME (or at least the comment says so)
And then there is code which will only set the original value into the cell, when the full editor mode is enabled.
i want to display the data into DataGrid manually in VB6, source of data is not from database or other source. I have created the column, like this:
For i = 2 To 4
DataGrid1.Columns.Add i
Next i
DataGrid1.Columns(0).Caption = "No"
DataGrid1.Columns(1).Caption = "Subdataset"
DataGrid1.Columns(2).Caption = "Dimension"
DataGrid1.Columns(3).Caption = "Check"
DataGrid1.Columns(3).Caption = "Detail"
but i can't add row and add value into it, i have tried like this:
Me.DataGrid1.AllowUserToAddRows = True
DataGrid1.Row = DataGrid1.Row + 1
then i got error
Please tell me if anybody can help me, thank you
Not only is DataGrid designed to be a bound control, it doesn't support unbound use. Says so right in the doc. So, the short answer is that you can't do what you are trying to do, because it's designed to display values from a database.
Instead, you'll want to use the MSFlexGrid control (Not the MSHFlexGrid control, although some of the doc confuses them), which you can read about here. Suppose you play around with that (the AddItem method is the fundamental piece you need to work with) and post back with specifics if you have problems.
Once you have added the table (DataGrid) right click select edit then you can insert columns:
I have a very big handsontable. I have dropdown columns defined, but, the values for the sources are retrieved with AJAX.
How can I set the "source" property of a "column" of type "dropdown" dynamically?
Regards!
You can, and should, use:
hotInstance.updateSettings({
columns: getNewColumns()
})
Where getNewColumns() would return an array of columns with the data and new source (or make the AJAX call from in here). That should do it!
Thank you for the answer ZekeDroid.
I was able to solve my issue.
First lets talk about a problem in the angular directive:
I am using the handsontable's angular directive. Two things happen: 1. If I associated the datarows attribute to a nested variale in the model, for example $scope.hot.data, then when I change the value of the model ( $scope.hot.data ) the grid ui is not refreshed. I am pretty sure this is an issue with the directive. Now: 2. Assume I use $scope.data and I update its value (this is the model right), then the grid ui is not refreshed either. I have to do something like hotInstance.updateSettings({data: newData}) as well.
I have to do both things; that is, update the model and call the update settings method. This is the only way I could get it work properly.
Note: if I do $scope.$apply() instead the updateSettings, I get an error in the console.
I am using LimeSurvey and I want to include a question where the respondent can include up to 30 names as answer. However, I don't want to initially present the respondent with 30 boxes as it is overwhelming and requires a ton of scrolling to proceed if you only have a few names to enter. Is is possible to code the question so that a new box appears only after the previous box has been filled? Thanks.
Here is another approach that uses buttons to add/remove the array rows - http://manual.limesurvey.org/Workarounds:_Manipulating_a_survey_at_runtime_using_Javascript#Variable_Length_Array_.28Multi_Flexible_Text.29_question
Cheers
EDIT: This answer was written because I could not find the answer presented by tpartner beforehand. The main difference is that mine is based on filling out the previous row and tpartner's on buttons to add or remove rows.
The following code should work for all single-choice arrays (e.g. 5-point scale array) and is adaptable to other types if you know some Javascript/jQuery. I want to do more like that - just not today. So feel free to ask for implementations for other question types.
The code can be added in the beginning of the template.js file using the template editor. The variables "quest" and "first" have to be adapted based on your survey.
//Function to only display a new row if there is an answer in the previous row
//NOTICE: Rows which are reset to "No answer" will not be hidden
//NOTICE: This scipt was written based on LimeSurvey 2.00+ build 131107
//NOTICE: It only works for single-choice arrays (e.g. 5-point scale array) or multiple short texts
//BEGIN
$(document).ready( function() {
//SGQ code of the question to apply this to
var quest = "12345X1234X12345";
//A(nswer) code of the first row
var first = "1";
//hide all rows except the first
$("tr[id^='javatbd" + quest + "']").css("display","none");
$("tr[id='javatbd" + quest + first + "']").css("display","table-row");
//display rows if previous is answered
$("[name^='" + quest + "']").change(function() {
if(this.value.trim().length >= 1)
$("tr[id='javatbd" + this.name + "']").next().css("display","table-row");
});
});
//END
Best regards
Which question type are you planning to use? Your best bet, according to me, should be to use Multiple Short text type question and create 30 text boxes. You can then use javascript to hide these text boxes and show them as soon as the previous text box gets some value as input.
cheers!
With version 2.x (not sure which version starts allowing this, I am running 2.7 and it works there), this functionality is inbuilt via the relevance equation and doesn't require coding. Just enter !is_empty(questioncode_Code) in the relevance equation for the text box you want to let appear. Code is the code of the field one above which triggers the appearance.