In my example, http://dojo.telerik.com/UVoSUl/11 I would like to open the first open row. In this example, Group B, Company 5.
I would like to expand Company 5 with expandRow().
Your help would be very happy.
In the case of the example, Company 5 is the first row with class of k-master-row that is visible. So you could use the jQuery :visible selector to get the row and then expand it:
this.expandRow($("tr.k-master-row:visible").eq(0));
Updated DOJO
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
I have a table with several columns. The first column contains unique data, the 5th contains three buttons (Edit, Assignments and Delete).
I would like to use an XPath expression to locate on the edit button for one of the rows by indentifying the row using the unique data from column one (think that made sense).
I have built some expressions which will allow me to locate on the first column and edit button independantly as follows:
//td[text()='Managers']
and
tr[2]//button[text()='Edit']
The closest I can get to doing what I want is:
//td[text()='Managers'] | //tr[2]//button[text()='Edit']
...However this will locate on the data/button in column 1 AND 5 at the same time, what I want is just for the button in column 5.
The reason I want to do it this way, is so later I can pass in 'Managers' as a varaible in order to select the row (as its unique and meaningful data), and then press the edit button in a different column on that row.
Hope this makes sense!
Thanks
The question isn't very clear as posted, especially because I can't see any relevant part of the HTML. But if I understand this correctly, you can try to select the row that has Manager in it then get corresponding Edit button like so :
//tr[.//td='Managers']//button[.='Edit']
So I have a treegrid, and I want users to be able to not only show and hide columns, I want them to be able to show and hide columns in bulk. Right now, I'm using mygrid.enableHeaderMenu() in order to allow the users to show and hide columns. However, I have about 50 columns, and need to give them the ability to show/hide columns in bulk.
For example, a sample of my columns would be:
foo
bar
baz
unrelated
I want users to be able to show/hide the foo, bar, and baz columns using one checkbox, as well as be able to show/hide each column separately.
The shortest way seems to add your own context menu to the header, and call a needed functionality in the item clicking.
In case of using the dhtmlxMenu you may use:
menu = new dhtmlXMenuObject();
menu.renderAsContextMenu();
mygrid.hdrBox.id = "gridHeader";
menu.addContextZone("gridHeader");
Here is the tutorial about the dhtmlxMenu component:
http://docs.dhtmlx.com/menu__index.html
I wound up modifying the enableHeaderMenu function and adding the grouping mechanism in there.
To clarify, I used the source code in dhtmlxgrid_hmenu and created my own functions based off of that code. The actual grouping is done in _createHContext. To have it so that the checkbox for the group enabled or disabled grouping for the entire group, I copied the code for applyHideFunction, named it something else, and had that code apply setColumnHidden to all of the checkboxes in that group.
Using extjs 4.1.1
I have a grid with lots of columns >20.
Initially, most of these columns are hidden.
If a user wants to unhide the column, they select the menu on any column, then select the "columns" choice, this expands another dropdown/dropout which shows all of the columns. Those with checkboxes next to them are shown.
My issue is this:
The columns in the dropdown are shown in the order in which they are defined/displayed in the grid. The order in which they are displayed in the grid has been chosen for a good reason( e.g. id as the first column). However, when a user wants to display one of the hidden columns, it is hard for them to find it in the list. This is because the list is sorted in the order the columns are defined. I want to sort the column dropdown/dropout list in alphabetical order, without effecting the order of the columns in the grid.
How can this done?
I think I found the solution to your question.
First of all I don't have the Ext JS 4.1.1. framework on my current PC. So I tried to figure out you problem reading the Ext JS 4.1.3. documentation available on Sencha's site. But I don't think that they have made drastical changes in this part of the framework between the two minor releases so my solution should work in your case too.
I have tried out my solution using JSFiddle. Unfortunately they did not have the 4.1.1. ext-all.css file, so I have linked manually the 4.0.2 file available at Sencha, so the menu is looking a bit missplaced.
The header menu and it's submenus are managed by the Ext.grid.header.Container class. The column submenu is constructed by the getColumnMenu method. The whole menu is purged and reconstructed on every drag and drop or other event which should affect the grid view. As a result it is enough to overwrite this method in order to solve the problem. Because the headercontainer class is too deep in the framework it is hard to extend it, so you have to make use of the Ext.base.override method.
The column submenu's menu items are created from the result of the
items = headerContainer.query('>gridcolumn[hideable]')
query. So you have to first sort alphabetically the result, before creating the menu items. I have added to the class the sortColumns method which does all the sorting stuff.
So here is what I did: link to my solution.
I hope that this is what you were looking for.
I haven't been able to find a solution for the particular problem I'm having with this project. I need to the following: dynamically add rows to a table that contain two select boxes AND use ajax to auto-populate the select options of the 2nd select box, based on the value of the first select box... in the respective table row (that was dynamically added on the fly by some js).
Still with me?
I can easily populate, dynamically, a select drop-down using ajax/javascript based on the value of the first drop-down, in the first row. I can even populate three or more select boxes in the same row, using ajax/js functions to load each additional select. Yet, this is not my goal.
Here's what I have... My form contains a simple table with 3 columns. First is a checkbox, the second is the "State" select box and the third column is the "City" select box. I have two buttons above the table that allow me to "Add Row" and "Delete Row". Mind you, the first row (which is programmed-in), works perfectly for loading the city names of a state using ajax.
Upon clicking the Add Row button, I'm able to create the second row dynamically, which contains the checkbox, state select and city select fields. The state select is populated based on the innerHTML content of the original column, but the city select is obviously null because it is expecting ajax to fill it. Note: the names and ID names of these fields are iterative... city_id, city_id_1, city_id_2, city_id_3 and so on... so I have that uniqueness to work with.
My problem lies in the fact that when I select a state from the 2nd or 3rd (and so on) rows, only the firstcity select changes. Why? Because the js/ajax processing function says to operate only on the element with name "city_id"!! Which is the name of the city select box in the first row.
I have not (yet) found a way to dynamically pass the name of the element I need updated to the onreadystate ajax function. When I've needed to populate two or three select boxes in a row (same row), I've had to have complementary ajax functions for each drop-down - which are static, mind you... but what if I create the element dynamically?? I can't pre-program that many functions into my page... or must I?
If you have any ideas on how to accomplish this I would be soo damn appreciative!!!
Thanks!
var i=1; // put here the number of the column being added now.
var x=document.getElementById("city_id_"+i);
// populate x