Yii booster: how to render a cgridview inside a relation table row? - yii

I'm using boostrap library on Yii via yii-booster
I've created a relation table view
The related view is a TbGriView itself
Vhen in a row i click on the link on the 'related' column, the row expands itself, and render a TbGridview inside it.
The problem is that the internal gridview cannot be sorte, paged or filtered, because each action on it causes that the entire container grid will empty
Note
- external grid as a id of 'extenalgrid'
- each internal grid has as id like 'internalgrid-$rowId' , so every internal grid as differnt id on div, table and table row elements.
- the action called from "render related tabel" link is using renderPartial without the postProcess option. If i use potProcess, the row will be empty
So is it not possible to rendere a full working gridview/tbgridview into a related table ?

Use different css classes for the filters, buttons and headers for the different tables. From the jquery.yiigridview.js file events are bound to selectors as $('#table-id .selector-class') so elements in your internal gridView still trigger the events bound to the external gridView. You also have to specify a different url for the internal gridView by setting it's ajaxUrl.

Related

Vue.js $set on array element does not trigger notification

I have a Vue instance whose data contains an array of objects. I display this data in a table without issue.
Upon clicking the table rows, I set a "selected" property on the corresponding data object using:
key.$set('testing', testing);
Upon setting this value, I add a custom css class the the table row, without issue.
However, if I do a simple output of the entire array of objects at the bottom of the page (such as below), it doesn't get updated to reflect the new "testing" attribute I have added.
{{ gridData | json }}
I was able to reproduce my question using some modified vue.js example code in this JSFiddle:
https://jsfiddle.net/wdmatl/531axrtt/
Notice when you click on rows of data, you either see "testing" or "not testing". But this new object data isn't reflected in the json at the bottom of the page. Why not?

How can I have multiple instances of same dojo form element with same id in a page?

I have a page say profile.htm with dojo declarative form with id="myForm". I have another page say dashboard.htm having border layout with 3 content pane. I want to show the profile.htm in all these three contentPanes. But when I try this then it gives registration error because there will be three forms with same Id.
Is there any solution for this so that I can have same page (with same id) in many contentPanes?
You simply can't, it's because of the HTML spec:
The id global attribute defines a unique identifier (ID) which must be unique in the whole document.
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
The same goes for dijit's, if there are many dijit's with the ID myDijit what would registry.byId('myDijit') return? Dijit has it's own method of assigning unique ID's just as long as you don't assign one.

What jquery tables support table cell tooltips?

i need to display tooltips for my table cells. Are there any plugins for that purposes?
Thanks in advance!
You should be able to use any table and tooltip plugins you want - you just need to trigger the tooltips correctly depending on how you are initializing and updating the table.
For example, if you use jQuery DataTables (which I assume you are looking at given the tag you gave your question) with the jQuery UI tooltip widget you could simply initialize the tooltips once you've initialized the table. If you have the tooltip data already in the table, it could be as simple as:
$('#mytable').dataTable().tooltip();
If you have a more complex table that gets updated (such as using deferred rendering for a giant dataset), then you'd probably need to tie into the row creation callback to get the tooltips on any new rows by doing something like this in the init options:
"fnCreatedRow": function (nRow, aData, iDataIndex) {
$('.tooltip', nRow).tooltip()
}

MVC Complex ViewModel

I need to build a sample MVC UI app using Kendo UI.
I have 2 multiselect widgets for airline names and airport names respectively and below I have a grid with airline airport data.
Now when I select airlines or airports in the multiselect, upon clicking a Fetch button, the grid should refresh.
I created a ViewModel named AirlineAirportViewModel for containing List<Airlines>, List<Airports> and List<AirlineAirports>.
I instantiate the List<AirlineAirports> in the Get action method of the controller and fill the other two lists getting distinct airline and airport values from the List<AirlineAirports>.
While posting on filter button click, I am able to get action parameters as 2 List<string> types which contain only the selected multiselect items
Instead of that, I want this action parameter of type AirlineAirportViewModel so that in future, I will be able to add more filter widgets and the number of parameters stay one only.
Now, am I approaching this in the right way ? If I need the ViewModel as action parameter, where should I store the selected items from the multiselects ?

ExtJS grid 'reset'

I'm on ExtJS 4 and using an MVC approach. I've created a simple grid view class, and have added a componentquery type 'ref' to that view in my controller. Within the initial grid view itself I set several columns to be hidden and some to be visible by default. The rendering of the grid with those settings is all working fine.
Then I have a button that, when clicked and based on some other conditions, will make some of the initially hidden grid columns visible. This works as well.
But what I need is a way to later 'reset' the grid to its initial view (with the correct columns hidden/visible, as they were initially).
I've tried various permutations of the following with no effect:
var theGrid = this.getTheGrid();
theGrid.reconfigure(store, theGrid.initialConfig.columns);
theGrid.getView().refresh();
I suppose I could loop through every column and reset its 'hidden' state, but would think there's a way to just 'reset' back to what's set in the class? Advice?
SOLUTION UPDATE
Appreciate the pointer from tuespetre. For anyone coming along in the future looking for specifics, here is what was needed (at least for my implementation):
Within the view, moved the column defs into a variable
Within the view, columns ref within the class becomes:
columns: myColumns,
Within the view, the following function created within the class:
resetGrid: function(){
this.reconfigure(null, myColumns);
},
Within the controller:
var theGrid = this.getTheGrid();
theGrid.resetGrid();
You will just need to create a function on your view class to encapsulate that functionality.