I am testing example at this url : http://trirand.com/blog/jqgrid/jqgrid.html . Right now Detail Grid is loading with default id at the page load.
Requested functionality:
I want Detail button in each row when clicked should load the Detail Grid. Anyone please tell me how. I am also struggling with that.
You can use custom formatter or instert the <botton type='button' ....> (or <input type='button' ...>) with respect of 'setRowData' inside of loadComplete or gridComplete event handler. You can find an example if you look at jqGrid demo and choose "Row Editing" / "Custom Edit". The binding of onClick event you can do either as in "Row Editing" / "Custom Edit" example or in unobtrusive way (see an example from here not exactly for the same problem, but I hope you will understand what I mean) using jQuery.click or jQuery.bind. By the way instead of the button you can consider to use link (<a> or showLink).
Inside of "click" handle you can force loading of the detail grid exactly like you do this typically inside of onSelectRow.
UPDATED: Look here to see how one can place static texts as links in the jqGrid:
It could be needed to fill empty string '' in the "Details" column in the JSON respond from the server. In some cases depends from the data format and the jsonReader used it could be not required.
In case of master/detail scenario you can display (set url or postData and trigger gridReload) detail grid on the place where "clicked the row ..." texts are displayed in the demo example.
Related
I am using Kendo UI Grid master detail template like in this docs http://demos.telerik.com/kendo-ui/grid/angular , I am able to get the template by clicking in the hierarchy cell, I want to know if there is some easy way to expand the detail template by clicking anywhere on row.
Thanks!
To do that you can follow these steps:
Add k-on-change="handleChange(kendoEvent)" to trigger the function when we select any row,
dont forget to add k-rebind="gridOptions.selectable",
and i also prefer <div kendo-grid="grid"></div> so later on we can
select the grid instance
create $scope.handleChange = function(kendoEvent){....}to handle the event
and finally here is a kendo dojo example from yours that i've modified
EDIT:
As per your comment, you simply close all expanded row first then you can open the one which is selected. Add this $scope.grid.collapseRow($scope.grid.tbody.find("tr.k-master-row")); before $scope.grid.expandRow($scope.grid.tbody.find("tr.k-master-row.k-state-selected"));. Updated dojo
In our page, the grid will be inside an accordian. So i would like to eliminate the caption layer and implement the hiddengrid:true functionality on clicking on the accordian instead of clicking on the caption layer icon(in specific on opening of accordian). How can I achieve this? Any suggestions , thanks in advance.
The main intention is to have the functionality like in the documentation of hiddengrid option
If set to true the grid is initially is hidden. The data is not loaded (no request is sent) and only the caption layer is shown. When the show/hide button is clicked for the first time to show grid, the request is sent to the server
You can use jQuery.slideUp, jQuery.slideDown or jQuery.slideToggle to implement the behavior close to hiddengrid:true.
To implement this you can place grid inside of a div like below
<div id="overGrid">
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
</div>
and use
$("#overGrid").slideToggle("fast");
if you need to toggle the grid.
The demo demonstrate this.
UPDATED: Probably you have some remote datatype in the grid ("json" or "xml") and want don't load the grid contain at the beginning? In the case you need just use datatype: "local" initially and use setGridParam to change the datatype to "json" (or "xml") inside of "select" callback of tab. After changing the datatype you should call trigger("reloadGrd") to load the data (or to refresh the data) from the server.
I have created JQGrid.
I have put the Data in cell and one html Link in cells.
OnClick of that link I need to open JQGrid Specific popUp.Popup have one combobox .I'll select one option and click submit button and that data needs to be appear in clicked cell.
Thanks
The construction which you suggest seems me too complex. Probably you can consider to use more simple user interface?
Nevertheless you can just use setCell method to set new contain of the cell of the grid.
I have a grid control displaying data about a Company. I want one column to be "Employee". On click on the any cell of "Employee" column I want to pop up the one Form called "Employee Details" and would like to feel the data.
How can I do this?
As I understand the modal form on click of a jqgrid cell deals with data only related to that row. I want to show different data on the pop up form, i.e. other than the grid data.
Pl help.
Shivali
Probably you can use unobtrusive links in the column (see this and this answers). The advantage of this technique is that instead of typical links you can define any custom action on click on the link. The look of the link can be defined by CSS, but it seems to the that the link can show the user better as other HTML elements, that the user can click on it.
Alternative you can use a button in the column with respect of the custom formatter, but with the same technique as described before you can free define which action will be done on the click.
Inside of the click event with the parameter 'e' you have e.currentTarget as the DOM element of <a> for the link or <input> or <button> if you use buttons in the grid column. To find the row id you can use var row = $(e.currentTarget).closest("tr.jqgrow") or var row = $(e.target).closest("tr.jqgrow") to find the <tr> element. The row id will be row[0].id.
I try to implement the link from one grid to the modal dialog of another grid. I made an example
to illustrate this problem. If you choose in a context menu (right mouseclick) of each row of the picture grid, you will find some Actions. One of them is "Go to scan info". Here I would like to have a link to modal dialog of grid "Scans" and modal dialog should put the user depending whether the scan record for the selected picture allready exist or not, to the Add/Edit modal dialog.
Does anybody already implemented something like that?
Let us we have two grids on one page: one with id="grid" and another with id="scan". Exactly like you call jQuery('#grid').jqGrid('editGridRow',id) on double-click on the first grid you can call jQuery('#scan').jqGrid('editGridRow',id) in the context menu "Go to scan info". The only thing which you have to know is to know the ids on the second grid. Before calling of jQuery('#scan').jqGrid('editGridRow',id) you can impelemt any additional logic (like testing whether "the scan record for the selected picture allready exist or not").
If I understand, you need insert another jqgrid into modal dialog. Did you try to insert jqgrid function into open event of jquery dialog?
You have to call jqgrid function on demand, not in document.ready statement in this case.
Imo this could work (not tested yet):
$( ".selector" ).dialog({
open: function(event, ui) {
$("#grid").jqGrid({
... all of options...
});
}
});