I have a table that has the following data in a grid:
ID Course
2 Math
5 English
7 Science
9 History
12 Gym
What I like is for the value of ID and Course to be hyperlinks so they are clickable. When the user clicks on a given ID, I like to have an alert for that shows the given ID. When the user clicks on the Course, I like to have an alert
that shows both the ID and Course.
I am not sure how to do this. I understand there is a
showlink
but not sure how to tie it everything together.
Looking at a stackoverflow question, I can do the following:
var grid = jQuery('#list');
var sel_id = grid.jqGrid('getGridParam', 'selrow');
var myCellData = grid.jqGrid('getCell', sel_id, 'MyColName');
where MyColName would be the name of the column but not sure how to tie it altogether.
You can solve the problem in many ways. The formatter "showlink" is oriented to create the standard HTML link <a> instead of usage JavaScript click event handler. You can do use formatter "showlink" (see my very old answer) to call your custom JavaScript code, but there are better ways for implementation. For example you can use custom formatter or to use formatter: "dynamicLink" which you can find here and which I described here.
The best and the most easy way which I would suggest you now is the usage of pseudo links. See the answer or another one for details.
Related
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:
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.
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.
I am wanting to customise the edit form in jqGrid so that instead of using the table structured layout provided I would like to use my own custom css structured layout for the form elements. How should I go about modifying the edit form to allow me to use my own custom look?
You can definitely achieve this by jquery ui dialog. However I can not put full code for you but helps you in the steps you have to do.
1 design your custom form whatever CSS and style you want to apply.
Suppose this is youe custome form
<div id="dialog-div">
<input type="text">
</div>
2 on jquery dialog open the dialog on your jqgrid editbutton click
$("#edit").click(function(){
var rowdata = $("#coolGrid").jqGrid('getGridParam','selrow');
if(rowdata){
$("#dialog-div").dialog('open');
var data = $("#coolGrid").jqGrid('getRowData',rowdata);
alert(data);
}
});
by default it will close as-
$("#dialog-div").dialog({
autoOpen: false,
});
Now as you get data in variable you can put in your edit form and of jquery dialog button save it according to your logic.
Hope this helps you.
I would recommend you first of all to read (or at least look thorough) the code of form editing module which implement the part which you want to replace. You will see that it consist from more as 2000 lines of code. If you write "I would like to ..." you should understand the amount of work for implementing what you ask. If you are able to understand the code and if you are able to write your modification of the code even using libraries like jQuery UI then you can decide whether it's worth to invest your time to do the work. The main advantage of using existing solutions is saving of the time. What you get in the way is not perfect, but using existing products you could create your own solutions quickly and with acceptable quality. The way to study existing products which you can use for free seems me more effective as large investments in reinventing the wheel.
http://guriddo.net/?kbe_knowledgebase=using-templates-in-form-editing
Using templates in form editing
As of version 4.8 we support templates in the form editing. This allow to customize the edit form in a way the developer want. To use a template it is needed to set the parameter template in the edit add/or add options of navigator. This can be done in navigator or in the editing method editGridRow :
$("#grid").jqGrid("navGrid",
{add:true, edit:true,...},
{template: "template string for edit",...}
{template: "template string for add",...},
...
);
and in editGridRow method:
$("#grid").jqGrid("editGridRow",
rowid,
{template: "template string",...}
);
To place the CustomerID field in the template the following code string should be inserted in the template string
{CustomerID}
With other words this is the name from colModel put in { }
The usual problem with table layouts is when you have columns with different widths, especially with those very wide.
I solved my problem adding the attr colspan to wide columns in the beforeShowForm event.
for example
"beforeShowForm":function() {
$('#tr_fieldnameasinColModel > td.DataTD').attr('colspan',5);
}
It's not fancy but it worked for me. Perhaps there is a more elegant way to do the same.
I could arrange the fields in several columns without having to make the form extrawide.
When user click on edit button the page navigate to another page, based on Id get the details of a row and you can display the values..
Previous answer of Creating a link in JQGrid solves your problem.
I inherited a web app that uses Dojo 1.5 and the template toolkit. I am enjoying learning dojo but it's at a slow pace.
Initially when bringing up our web form, we'll have a list of files on the right side of the page like so....
AAA_text
BBB_text_1
BBB_text_2
CCC_text
....
....
On the left side we have a search box that asks for the subset of file to use. Normally we would just type in "AAA" and then the div on the right side would find those files that match and display them after you press the "Search" key below the box.
What we are looking to do is to eliminate the "Search box" and have the list of files matching "AAA" to come up in the right side div as "AAA" is being typed, (or "BBB" or "CCC", etc).
I suppose in a nutshell it's the equivalent having the "Search" button pressed after every key is typed in the Search box.
Does this sound like a realistic goal or even possible? The code itself uses a ton of Template Tookit so I'm not looking to do any major rewrite.
If I am not making myself clear, let me know. I can elaborate for clarity. Many many thanks! Janie
EDIT: OK, I have solved a good deal of my problem so far and as it turns out, as so many of these things have a propensity to do, that what I am really needing is to get clear on how to make autocomplete work. Which is to say that I have a data source for my text box but not really sure how to tie it to the text box. I have a dojo.xhrPost routine that can handle grabbing the values.
It looks like this....
dijit.byId('files_matching').getValue(),
Googling dojo autocomplete examples gives me a zillion links and none of which are proving helpful. So I suppose my questions have transitioned to....
1. Can you even use autocomplete on a mere text box (I've seen links that say that you can only use it on combo boxes)
2. Is there a link out there somewhere that describes/shows in detail how to tie a dojo text box to a data source using dojo.xhrPost.
I am so close to solving this and I still seem to have a gaping chasm in front of me.
It's difficult to say for sure without seeing your code but if you don't have one already, I would recommend to create an ItemFileReadStore or something similar to start with. That way you can query that store locally on the client without having server requests after every key stroke.
It could look something like this:
var file_store = new dojo.data.ItemFileReadStore({ data: {
items: [{ name:"AAA_text" },
{ name:"AAA_text_1" },
{ name:"BBB_text_2" }]
}});
When you have that in place you can call a function from your text input's onChange event:
<input type="text" onchange="query_store(this.value);" />
And then you handle to actual query from the function called from the onchange event:
var query_store = function(search_for) {
var my_query = { name: search_for+"*" }; // * for wildcard match
completed = function(items, result){
for(var i = 0; i < items.length; i++){
var value = file_store.getValue(items[i], "name");
alert(value); // Instead of alert, you can save the values to your div.
}
};
file_store.fetch({ query: my_query, onComplete: completed });
}
A lot of good information about this can be found here
Hope this is at least a little helpful.