The React Bootstrap Table documents provide an example of how to select a row.
However, I do not see any mention of how to wrap a row in an anchor tag (or a click handler), so that when a user clicks on a table row, they are then redirected to a new url.
How do I do this? Thanks!
Additionally, I see that in an onRowSelect, you could do a window.location = ______.
However, the mode: radio/checkbox is required, and that means the table will have that additional column with a radio/checkbox. Which, for this use case (just redirecting on click) feels superfluous.
Woohoo! Got it! You can add the attribute hideSelectColumn: true and you will be able to register the click callback, and won't have that extra column of radio elements!
var selectRowProp = {
mode: "radio",
hideSelectColumn: true,
clickToSelect: true,
bgColor: "rgb(238, 193, 213)",
onSelect: onRowSelect
};
Related
I am trying to create a grid that allows user to add, edit and delete the record. I have done working for populating grid now I am going to display dialog for add record. But, I don't why it doesn't work. Dialog does not getting displayed.
This is the snapshot of my grid.
and this is my js function
InfoDesk.GridManager.postsGrid = function (gridName, pagerName) {
//Create the grid
$(gridName).jqGrid({
//server url and other ajax stuff
url: '/Admin/Posts',
datatype: 'json',
mtype: 'GET',
height: 'auto',
//Columns
colNames: colNames,
colModel: columns,
//pagination options
toppager: true,
pager: pagerName,
rowNum: 10,
rowList: [10, 20, 30],
//row number columns
rownumbers: true,
rownumWidth: 40,
//default sorting
sortname: 'PostedOn',
sortorder: 'desc',
//display the no. of records message
viewrecords: true,
jsonReader: { repeatitems: false },
afterInsertRow: function (rowid, rowdata, rowelem) {
var tags = rowdata["Tags"];
var tagStr = "";
$.each(tags, function (i, t) {
if (tagStr) tagStr += ", "
tagStr += t.Name;
});
$(gridName).setRowData(rowid, { "Tags": tagStr });
}
});
$(gridName).navGrid(pagerName,
{
cloneToTop: true,
search: false,
add:true
}, editOptions, addOptions, deleteOptions);
};
When I click on add button. Nothing is happening. This is my first project with jqGrid. So, I am completely blank about it.
EDITED:
I have found a fiddle example and modified for navigation bar. It is working fine but, still I could not recognize the issue where i am doing mistake in my code.
fiddle
It seems to me that your main goal to understand how you can correctly use navGrid with top and bottom pagers. So I'll explain exactly how all works.
It's not clear whether you need to add the navigator icons on the top pager or on the both top and bottom pager. It's unclear whether you use the bottom pager at all.
jqGrid have two main option which specify the page: pager and toppager options. To use pager option you need create <div> which have id attribute, place the div on the page somewhere and to use the id selector or the id name as the value of pager option. For example you can place <div id="mypager"></div> and to use pager: "#mypager" as jqGrid option. If you would use the value of pager option in another supported form: pager: "mypager" or pager: $("#mypager") then jqGrid will normalize the option to id selector. If you would use var thePager = $(gridName).jqGrid("getGridParam", "pager"); to get the value of "pager" option directly after the grid is created you will get thePager === "#mypager" independent from the way in which you used input pager parameter.
The option toppager works a little in another way. You should use toppager: true to create the top pager. In the case jqGrid create the corresponding <div> itself. The id of the div will be constructed from the id of the grid and the string _toppager. So in case of having gridName equal to #mygrid you would have the top pager with id="mygrid_toppager". If you would get the value of toppager option after the grid is created
var theTopPager = $(gridName).jqGrid("getGridParam", "pager");
you will get back the id selector of the top pager instead of true: theTopPager will be equal to "#mygrid_toppager" (gridName + "_toppager").
The value of the first parameter of navGrid should be the id selector of the pager on which you want to place the navigator buttons. So it should be $(gridName).navGrid(gridName + "_toppager", ...); to add the buttons on the top pager and $(gridName).navGrid(pagerName, ...); if you want to add buttons on the bottom pager. The usage $("#grid").navGrid('setGridParam', ... like you do in jsfiddle demo is wrong because 'setGridParam' is not the id selector of any pager.
In case if you have two pagers (at the bottom and at the top of the grid) you can use pager selector as the first parameter of navGrid and to use additional option cloneToTop: true. By the way the method navButtonAdd which can be used to add custom button don't have any cloneToTop: true option and you would have to specify the id selector of the pager directly.
So if you need create the grid with one top pager only you can remove unneeded jqGrid option pager: pagerName and to use the following code to create the navigator bar with Add, Edit, Delete and Refresh buttons:
$(gridName).navGrid($(gridName).getGridParam("toppager"), { search: false });
If you would like to create grid on both top and bottom pager then you have to use both options of jqGrid toppager: true and pager: pagerName and can use either
$(gridName).navGrid($(gridName).getGridParam("pager"), { search: false });
$(gridName).navGrid($(gridName).getGridParam("toppager"), { search: false });
or the short form
$(gridName).navGrid($(gridName).getGridParam("pager"),
{ search: false, cloneToTop: true });
By the way I use $(gridName).getGridParam("pager") instead of pagerName as the parameter of navGrid because I'm not sure whether you use id name (like "mypager") or id selector (like "#mypager") as the parameter of InfoDesk.GridManager.postsGrid. The method navGrid accept only the id selector.
If you would need to specify additional parameters of form editing methods used during Add, Edit or Delete operation you should specify additional optional parameters editOptions, addOptions, deleteOptions, searchOptions, viewOptions (see the documentation). You should of cause define the objects editOptions, addOptions, deleteOptions, searchOptions, viewOptions before the usage. The current code which you posted don't contains the definition of the option.
UPDATED: By the way I implemented some new features in the fork of jqGrid which I publish on GitHub here. 1) One can now use pager: true option like toppager: true. 2) one can use navGrid without the pager (like $(gridName).navGrid({search: false});). In the case jqGrid will add the buttons on all pagers which jqGrid have. 3) I added new option navGrid: iconsOverText:true which allows another look of navigator buttons with texts (see the demo). 4) the navigator buttons will be wrapped on the next row of pager automatically if too many icons is added and the grid have not so large width. You can see more demos of the features at the bottom of readme on the page.
i am adding textfields dynamically as
var input = $('<input class="EditorFields" id="textfield"/>');
$(input).igEditor({
width: 140,
required:true
});
this is working fine.
But when i am trying to add listItems property then its not working.
$(input).igEditor({
width: 140,
required:true,
listItems : ["red","blue","yellow"]
});
i do not want to change the base element to select.
Please help.
First things first - the Ignite UI jQuery API docs state that the button option defaults to none - if you want to have a drop-down add this:
button : "dropdown",
Why this still won't work? Dynamically adding dynamic controls is tricky sometimes if you don't know them in great detail. Same for jQuery, it's a common thing people miss - jQuery creates items in a document fragment so you need to be careful how you append them to the DOM.
When you provide an INPUT element and request a complex editor, the control's additional items (buttons, drop-down, validation messages, etc.) are built around that input and the whole thing wrapped in a container SPAN. Because you refer to the input and it works the first time I assume you attach it directly. Basically when you create a complex editor and only afterwards attach to eh DOM using the same input reference you are leaving all the extra markup stuck in the document fragment.
I can think of about 3 ways to get this to work, you pick what suits best yopur needs:
1) Append item first so the Editor can properly initialize in the DOM afterwards:
var input = $('<input class="EditorFields" id="textfield"/>').appendTo("body");
2) Povide the container, instead the input if possible:
var input1 = $('<span class="EditorFields" id="textfield1"/>');
3) Select the parent when you know you have one and append it instead:
$(input2).igEditor({
width: 140,
required: true,
listItems: ["red2", "blue2", "yellow2"],
button: "dropdown"
}).parent().appendTo("body");
Here's a JSFiddle with all of those: http://jsfiddle.net/damyanpetev/ZRqb2/
I'm very new to sproutcore. Although I know about the SC.InlineEditable mixin and isEditable field, the problem is when I click on the button to make a labelView editable. The label remains the same and I have to double-click on the label to type in text.
What I want is when I click on the edit button , the label should turn into a text field and should become the first responder, i.e the cursor should blink on the textfied.
I couldn't find any decent documentation(sproutcore didn't help much) or tutorial to do this. Links to such references would also be very helpful.
According to the showcase, you should be able to accomplish this as follows:
SC.LabelView.extend({
classNames: ['my-label-view'],
isEditable: true,
layout: { width: 300, height: 16, centerX: 0, centerY: 0 },
value: 'Double-click this label to edit inline.'
})
If this doesn't work, can you tell us what version of SC you are using, and what browser/version? It could be a potential bug.
To me it feels like enabling the labels is a different state in your application. In this case you would best tie the action of the button to the statechart.
So, you first create a controller with an isEditing property, which is false (by default).
myApp.myController = SC.Controller.create({
isEditing: false;
});
Now you create a function in the current state, which is called by the action on the button. This will result in going to an EDITING state, which sets the isEditing property to true in the enterState and to false in the exitState.
I don't know by heart how you can bind the editing state of the label view to this isEditing property, but assuming this is possible, you can in this way control the editing state of all the fields at the same time, and you will know for sure that all the fields will also be returned to normal when the editing is done.
jqGrid colModel contains read-only multi line column defined using properties below.
Content line lenghts are greater than column width, text is to long so that tooltio does not show its whole content. It is not possible to see whole content.
I'm looking for a way allow user to see whole column content.
For example, if edit form button is pressed, this column content should de displayeid in edit form as readonly textarea.
However, readonly columns does not appear in edit form.
How to allow user to see whole column content ?
colModel: [{
"name":"LoggedLongText",
"editable":false,"width":539,
"classes":"jqgrid-readonlycolumn","fixed":true,
"hidden":false,"searchoptions":{"sopt":["cn","eq","ne","lt","le","gt","ge","bw","ew","nc"]}}
}]
Is the setting
editable: true, editoptions: { readonly: "readonly" }
probably what you need?
UPDATED: Free jqGrid supports more values for editable property starting with version 4.8. The wiki article described that editable can be function and it supports additionally three string values in case of using form editing: "hidden", "disabled" and "readonly".
To show readonly fields you might try using the "disabled:disabled" inside editoptions.
Yet another option is to use a custom element type that returns a span as below:
colModel: [
...
{name:'price', ..., editable:true, edittype:'custom', editoptions:{custom_element: myelem, custom_value:myvalue} },
...
]
..
function myelem (value, options) {
var el = document.createElement("span");
$(el).val(value); // be sure to escape special characters as necessary.
return el;
}
function myvalue(elem, operation, value) {
// just reutrun null or empty string.
return "";
}
I prefer this over using "readonly:readonly", because the readonly option wraps an input control around the cell value, the input control still receives focus, which I think is misleading to the user. Using "disabled:disabled" keeps the input element from receiving better, which is slightly better, in terms of usability.
Using a span is much better. Interestingly, jqGrid sends even "unsuccessful" form controls to the server.
Hope this helps.
-- jqr
To show readonly fields on EditForm, you must try using the {readonly: true} property inside editoptions for a jqGrid column and will work.
I want to remove the paging buttons on the grid, but I want to keep the add, edit, refresh, etc buttons on the bottom left. I don't want the pager there because I will be displaying all records in this particular grid implementation.
I want to keep what is in GREEN but remove what is in RED:
Currently, my solution is to empty out the center of the grid's navigation
$('#pager_center').empty();
But this means that the pager renders to the page, and then gets emptied, I'm wondering if I can just prevent it from even being rendered in the first place.
You can use my following JqGrid option to disable RED zone from JqGrid. It should be the best way to solve this question because you don't need to hack JqGrid rendering via CSS style sheet that be caused of problem if JqGrid change pattern for generating pager or you change pager id.
$('#grid').jqGrid
({
rowList: [], // disable page size dropdown
pgbuttons: false, // disable page control like next, back button
pgtext: null, // disable pager text like 'Page 0 of 10'
viewrecords: false // disable current view record text like 'View 1-10 of 100'
});
You could apply a CSS style to hide it...?
#pager1_center {
visibility: hidden;
}
There are also options like pgbuttons and recordtext that settings in the init might cause that part not to render any HTML.
jQuery("#grid_id").jqGrid({pgbuttons:false, recordtext: ''});
Using this will remove the paging/view records area with buttons and everything.
jQuery("#WebsitesGrid").jqGrid({
...
pginput: false,
pgbuttons: false,
viewrecords: false,
....
Or if you would like to have more space in the footer of your jqGrid, you can simply hide desired part of
navigation.
gridComplete: function()
{
$( '#' + gridId + 'Pager_center' ).hide();
$( '#' + gridId + 'Pager_left' ).hide();
},
where gridId is id of your jqGrid.
$('#grid').jqGrid({pgbuttons:false, recordtext:'', pgtext:'')}
If you're looking for a solution to avoid Pager in jqGrid then just add following code in loadcomplete callback or as a statement after your jqgrid call, with or without #Soul_Master's solution,
$("#divPager").css({ "height": "0px", "border": "0px" });
It worked for me.
even you can set align property of pager details like no of records dropdown, pager text, record text. to acheive this need to change pagerpos and recordpos to right or left or center as we required. Details has to be updated in jquery.jqGrid.min.js or just do search for these keywords in your js files and do the update.