jqgrid add link to column headers - jqgrid

I'm using jqgrid to create a grid. I have looked but can't seem to find a solution. I'm trying to add links to the column headers.
Any help appreciated.
Thanks

Use jQuery to bind your click event:
jQuery(document).ready(function() {
$("#jqgh_colName").click(function() {
alert('jqgh_colName clicked');
});
});

jqGrid creates the column header names using names in the colName list. So you can try putting the markup directly in this list during grid initialization:
colNames:['Test', 'Column 2', ... ],
I have not tested this, so YMMV. Also keep in mind there may be usability issues - a user is probably going to expect that clicking on a header would sort the column.

Here you can find the exact options.
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:predefined_formatter

Related

Select2 with ajax option

I have been using selec2 version 4 with ajax option.
And I want to set a selected value, as recommended in the guideline, by adding new Option element.
A problem I have is that I do not know when to add the new option because the event select2-loaded does not seem to exist in the latest version of select 2.
Can you please let me know in what way I can know the moment when data has finished loading from the server and has finished setting up, so I can add a new option to it?
Thank you.
The Option element you mention is created by calling the Option() constructor which then constructs a HTMLOptionElement. So basically you are just adding to your DOM and don't need to do it in any select2 event. Instead just do it on document load.
Here's a very basic example of what it could look like:
$(function () {
$('#element-to-select').select2();
var option = new Option('text', 'value', true, true);
$('#element-to-select').append(option).trigger('change');
}
Note that we are calling .trigger('change') to report the change to select2 as documented here.

add dropdown in kendo listview with add new record event and dont show at edit time

I am new in kendoUI and I'm trying to learn more and more. I am to try kendo List-view, and I want to add New Record with One Drop-down list. When is edit time I dont want to show Drop-down, just show normal label.
Any idea how can I do this?
Please check this link and give best solution.
This is list view live demo. Thanks.
You could have one template for editing and one for adding :JSFiddle solution , sorry for the css and you need to tweak the flag reset.
edit: function (e) {
if (isEdit) {
listView.editTemplate = kendo.template($("#editTemplate").html())
} else {
listView.editTemplate = kendo.template($("#addTemplate").html())
}
}

jqGrid: Create a custom edit form

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.

Is there a fix or work around for jqGrid executing script tags when performing a save of an inline-edit

I have found a comment by zbacsi on jqgrids site under inline editing.
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#how_is_the_data_organized
"zbacsi, 2010/08/02 20:23
There is an escaping bug with special characters. Try insert alert('hello') into a field. It should be displayed as common text, but its executed..."
I was able to reproduce this issue, on my own grid setup, using the below versions of jqGrid and jQuery.
jqGrid version - > 4.4.4, jQuery version - > 1.7.1.
This can also be reproduced on the inline editing demo pages for jqGrid, located at:
http://www.trirand.com/blog/jqgrid/jqgrid.html
Once there navigate to:
Functionality -> Formatter Actions and begin editing a row.
Inside of the column labeled 'Notes' insert the value: <script>alert('hi')</script>
Hit enter or click the 'Save' icon.
The alert('hi') gets executed rather than 'Notes' containing <script>alert('hi')</script>
Any additional information would be much appreciated, thank you.
It's not a bug. You can fix the problem by usage option
autoencode: true
which I personally strictly recommend you to use the option in all grids.
jqGrid have many options. I personally find default values of some options (see values in "Default" column on the page documentation) not optimal. One from such options is autoencode which default value is false. It means that all data used to fill the grid cells will be interpreted as HTML code fragments. Scripts are the only problem which one have, but inserting the text like a>b, </tr> or <-- could really break the page.
jqGrid allow to overwrite the default by extending $.jgrid.defaults. So I include on every HTML page JS file with my own default preferences. In the file there are lines like
$.extend($.jgrid.defaults, {
autoencode: true,
gridview: true,
height: "auto"
datatype: "json",
loadui: 'block',
...
});

How to hide the radgrid filter header while still allowing filtering?

I have a radgrid which allows filtering, but the filter strings come from external text boxes (so I can use autocomplete on them).
Is there a way to hide the radgrid's built in filter fields while still allowing filtering on the radgrid?
I just threw this on the page and it works.
<script type="text/javascript">
function pageLoad(sender, args) {
$find('<%=RadGrid1.ClientID %>').get_masterTableView().hideFilterItem();
}
</script>
Thanks to Vlad at http://www.telerik.com/community/forums/aspnet-ajax/grid/radgrid-hide-show-filter.aspx
I am not 100% sure if this is still a valid , but I had a similar issue, only thing is I did not want to show it at all. I turns out that adding
IsFilterItemExpanded="false" in your MasterTableView also "hides" it:
i.e.

Resources