How to retrieve all rows from a grid along with it's content using cypress - grid

cy.get('.grid-content-container').find('.grid-row').its('length').should('be.visible')
is giving the correct length but not sure how to get the records from 'grid-content' in each row?
this is the html:
dom

You can use cy.each for looping through the items.
cy.get('.grid-content-container').find('.grid-row').each(gridRow => {
cy.wrap(gridRow).find('.grid-content').each((gridContent) => {
// do something with gridContent
})
})

Related

Meteor subscribe multiple publication in single line

My question is simple. I am subscribe multiple publication in onCreated. How can I make in single line?
Template.Name.onCreated(() => {
Template.instance().subscribe('countries');
Template.instance().subscribe('pincode');
});
Something like
Template.Name.onCreated(() => {
Template.instance().subscribe(['countries','pincode']);
});
Maybe you wanna create a combined publication
Meteor.publish('combined', functinon() {
return [
Countries.find(),
Pincodes.find()
];
})
and then subscribe to that
Template.Name.onCreated(() => {
Meteor.subscribe('combined');
});
You could do this:
['countries','pincode'].forEach(x => {Template.instance().subscribe(x);});
Though I agree with #durrrr, there is not going to be any performance benefit. I'd leave it as two separate lines myself.

Reordering Telerik Column after Grouping

I am using a Telerik Grid to display data to the client. I have to show priority values first and then display non priority values. When the user group base on priority, the priority values should group first follow by the non priority group. I have a default descending grouping. When the user first access the page, it works fine. However, if the user remove the default grouping and try to group that column again, the non priority values are shown in the first group following by the priority which is the opposite of what I want.
In addition, I tried to do it on the client side using jquery, but the grid variable is always return null.
$(function () {
var grid = $('#Shipping').data('tGrid);
alert(grid) // always return null.
});
Here is the client side code that I am using for that column.
#(Html.Telerik().Grid(Model)
.Name("Shipping")
.DataKeys(Keys =>
{
Keys.Add(c => c.ShippingID);
})
.DataBinding(databinding => databinding.Server())
.Columns(columns =>
{
columns.Bound(p => p.Priority)
.Title("Priority")
.HtmlAttributes(new { style = "text-align:left" })
.Width(50)
.Filterable(false)
.Sortable(true)
.Groupable(true) // I can't tell it group and sort it descending.
.GroupHeaderTemplate(#<text>
.Groupable(grouping => grouping.Groups(gr =>
{
//Here I can tell it that I want to sort it descending
gr.Add("Priority", typeof(Boolean), System.ComponentModel.ListSortDirection.Descending);
}))
Please help me or give me a hint on how to fix this issue?
Adding a client side event fixed the issue, it was the reason why the grid was always showing null value in the JQuery function. The Grouping is still an issue; however, the client agree that they could click on the sort button, and it will sort them properly.

How to queryBy/filterBy on all page of Grid Store data?

I have a grid panel containing store displayed on many pages (using PagingToolbar).
On the tbar, I put the button to have a query for all data in store according record.get("criterion"). I've tried using queryBy, but it's returning none. So, I use filterBy in button handler, as coded below:
new Ext.Button(
{
text: 'Query',
icon: 'img/icon_search.gif',
scope: this,
handler:function(){
my_store.filterBy(
function(record, id) {
return record.get('field_name') == 'The Content of Field Name';
});
}
}
),
Unfortunately, the query (filter) above only search on current page of grid. How to get all filtered (queried) data from other pages that doesn't displayed?
Look at using remoteFilter on your store, or using the GridFilter plugin.
store.filterBy(function(record)
{
return lines.indexOf(record.get("line_code")code)>0?true:false;
},store.getAllRange()

Telerik Grid ServerTemplate problem

I'm trying to set up a Master/Detail grid using the Grid control from Telerik's Extensions for ASP.NET MVC. My problem is setting up the server template.
The demo I'm following is the first one on this page, except I'm using Razor View Engine.
I have the grid displaying fine. The problem is that I cannot write any sort of a server template that doesn't throw a compiler error - aside from leaving it blank!
#(Html.Telerik().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(o => o.Date).Format("{0:MM/dd/yyyy}").Width(100);
columns.Bound(o => o.Title).Template(#<text> #item.Title</text>).Sortable(false);
columns.Bound(o => o.Publication).Width(120).Sortable(false);
})
.DetailView(detailView => detailView.Template(e =>
{
//Anything other than this comment will throw a compiler error
}))
.RowAction(row =>
{
// Expand initially the detail view of the first row
if (row.Index == 0)
{
row.DetailRow.Expanded = true;
}
})
.Sortable()
.Scrollable(scrolling => scrolling.Height(494)).Footer(false)
.ClientEvents(events => events.OnRowDataBound("onRowDataBound"))
)
See that comment "anything other than this comment..."? When I replace that with something like #<text> hello</text>, I get a compilation error:
CS1002: ; expected
That doesn't seem to make sense, but I humour myself and put a semicolon in like such #<text> hello</text>;. That gives me this error:
CS0201: Only assignment, call, increment, decrement, and new object expressions can be used as a statement
When I replace that with a portion of the template I really want, namely #<text><b>Slug</b>: #item.Slug</text>, I get the same errors; CS1002 with no semicolon, and CS0201 with a semicolon.
What am I missing here?
There are two ways you can approach this. If you just want to display some simple text and not really integrate any other components it would be the easiest to modify the code you have above to just do this:
.DetailView(detailView => detailView.Template(#<text>test</text>))
As you can see I removed the whole e => { ... } part and just put in #<text></text>.
However, if you want to look into getting more components in your detail view I think it would be better to look at the demo found here. Although the description mentions some WebForms code you don't need to worry, the rest is all in Razor :) It also explains things you have to keep in mind. One of the most important ones is that any components within the DetailTemplate will have to use { ... } as opposed to ( ... ) this is because you want to specifically call .Render(); (using the ( ... ) implicitly calls .Render but at the wrong point for these scenarios) at the end of those components' declaration to make sure they are all rendered correctly.

How to add a row hyperlink for an extJS Grid?

Can someone please throw some light on how to go about rendering an hyperlink in the cells of a particular column in ExtJS?
I have tried binding the column to a render function in my JS, from which I send back the html:
SELECT
However, with this, the problem is that, once I hit the controller through the link, the navigation is successful, but subsequent navigations to the data-grid show up only empty records.
The records get fetched from the DB successfully through the Spring MVC controller, I have checked.
Please note that this happens only once I use the row hyperlink in the extJS grid to navigate away from the grid. If I come to the grid, and navigate elsewhere and again come back to the grid, the data is displayed fine.
The problem only occurs in case of navigating away from the grid, using the hyperlink rendered in one/any of the cells.
Thanks for your help!
This is for ExtJS 4 and 5.
Use a renderer to make the contents look like a link:
renderer: function (value) {
return ''+value+'';
}
Then use the undocumented, dynamically generated View event cellclick to process the click:
viewConfig: {
listeners: {
cellclick: function (view, cell, cellIndex, record, row, rowIndex, e) {
var linkClicked = (e.target.tagName == 'A');
var clickedDataIndex =
view.panel.headerCt.getHeaderAtIndex(cellIndex).dataIndex;
if (linkClicked && clickedDataIndex == '...') {
alert(record.get('id'));
}
}
}
}
Try something like this:
Ext.define('Names', {
extend: 'Ext.data.Model',
fields: [
{ type: 'string', name: 'Id' },
{ type: 'string', name: 'Link' },
{ type: 'string', name: 'Name' }
]
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{
text: 'Id',
dataIndex: 'Id'
},
{
text: 'Name',
dataIndex: 'Name',
renderer: function (val, meta, record) {
return '' + val + '';
}
}
...
...
...
However my thanks to - ExtJS Data Grid Column renderer to have multiple values
Instead of using an anchor tag, I would probably use plain cell content styled to look like an anchor (using basic CSS) and handle the cellclick event of the GridPanel to handle the action. This avoids dealing with the anchor's default click behavior reloading the page (which is what I'm assuming is happening).
I created a renderer so it looked like you were clicking on it.
aRenderer: function (val, metaData, record, rowIndex, colIndex, store){
// Using CellClick to invoke
return "<a>View</a>";
},
But I used a cell event to manage the click.
cellclick: {
fn: function (o, idx, column, e) {
if (column == 1) // Doesn't prevent the user from moving the column
{
var store = o.getStore();
var record = store.getAt(idx);
// Do work
}
}
}
For these purposes I use CellActions or RowActions plugin depending on what I actually need and handle cell click through it.
If you want something that looks like an anchor, use <span> instead and do what #bmoeskau suggested.
You can use 'renderer' function to include any HTML you want into cell.
Thanks guys for your response.
AFter debugging the extJS-all.js script, I found the issue to be on the server side.
In my Spring MVC controller, I was setting the model to the session, which in the use-case I mentioned earlier, used to reset the "totalProperty" of Ext.data.XmlStore to 0, and hence subsequent hits to the grid, used to display empty records.
This is because, ext-JS grid, checks the "totalProperty" value, before it even iterates through the records from the dataStore. In my case, the dataStore had data, but the size was reset to null, and hence the issue showed up.
Thanks to all again for your inputs!

Resources