I have a kendo grid containing following columns.
1.Name
2.Age
3.Gender{checkbox(male, female)}
I need to hide a column in specific row. In my problem, want to hide Gender cell which contain checkbox if Age value equal to 18 or 19 or 20.
As #Carsten said, you can't hide a cell, but only hide it's content. You can use a template for that:
template: "# if (data.Age < 18 || data.Age > 20) { #<input type='checkbox' name='Gender'># } #"
Dojo
In your case, using Asp.Net MVC you should use ClientTemplate. Something like this(can't test it):
columns.Bound(p => p.Gender).ClientTemplate("# if (data.Age < 18 || data.Age > 20) { #<input type='checkbox' name='Gender'># } #")
Source 1, source 2, source 3
You can't hide the cell but you can hide the content depending of the other columns. See https://docs.telerik.com/aspnet-mvc/helpers/grid/faq#how-to-apply-conditional-logic-to-client-column-templates on how to apply conditional logic to columns.
Related
Basically I have 4 rows
4 rows
and I want to .log() only one of them which contains a label that has a text 'Car1.2'
code
html
row code
Do you mean something like this, if you want to just print the text Car1.2
cy.contains('#label', 'Car1.2').then(($ele) => {
cy.log($ele.text())
})
If you to print the whole row where Car1.2 is printed, you first have to reach the parent element of the row and then using within scope the next commands within that specific row only and then print the row texts, something like this:
cy.contains('#label', 'Car1.2')
.parent()
.parent()
.parent()
.parent()
.within(() => {
cy.get('#label').each(($ele) => {
cy.log($ele.text())
})
})
To make sure all your commands automatically traverse shadow dom's, go to cypress.json(if cypress version < 10) or cypress.config.js(if cypress version >= 10) and write:
includeShadowDom: true
There's another way to use .contains(), you can specify the row class as the first parameter and it will return the row having the label text "Carl1.2" somewhere inside it.
Combining two selectors used here get('#chunker').find('.row') allows you to do this
cy.contains('#chunker .row', 'Carl1.2`) // simple to obtain the row
.then($row => {
cy.log($row)
})
Add includeShadowDom:true option to find the the label
cy.contains('#chunker .row', 'Carl1.2`, {includeShadowDom:true})
.then($row => {
cy.log($row)
})
You can move to the parent row by specifying .parents('.row')
See parents() command
Please note that .parents() travels multiple levels up the DOM tree as opposed to the .parent () command which travels a single level up the DOM tree.
Like this
it('finds labels', {includeShadowDom:true}, () => {
cy.contains('#chunker #label', 'Car1.2')
.parents('.row')
.then($row => {
cy.log($row.text())
})
})
I am looking to format the "amount" with maximum 13 decimal precision to populate a grid cell which i'm doing in the following way.
text box is
$(gridId + "#Units")
.parent()
.append("<input type='text' id='UnitsA' onkeyup
='checkdigit(this,\"Units\",8,13)' value='" + txval + "'></input>");
my .cshtml file has :
columns.Bound(p => p.Units)
.Width("20%")
.Title("Units")
.ClientTemplate("#: formatAmountTo13Dec(Units, '') #")
.HtmlAttributes(new { #class = "grid-number" })
;
the function formatAmountTo13Dec has the following.
function formatAmountTo13Dec(data, defaultValue)
{
return data != null ? kendo.format("{0:c13}", parseFloat(data)) : defaultValue;
}
When i enter -999.9999999999999 in the cell ( 999 followed by 13 decimals) it is formatted by calling the above function.
kendo.format("{0:c13}", parseFloat("-999.9999999999999"))
However this rounds up the amount and populates the cell with
(1,000.0000000000000), but the expected amount is (999.9999999999999)
To Avoid rounding up, instead of kendo.format, i tried kendo.toString() ,
But the result to this is -999.999999999999, without the brackets for negative number which is required for the amount field in the grid i have.
Can someone please help me out on how to achieve the expected with no rounding and with brackets for negative numbers.
I'm unable to successfully reference a child grid's column data when creating a ClientTemplate for a column in the child's grid.
This works just fine and shows true/false correctly:
columns.Bound(m => m.Completed).Title("Completed").Width(100);
This does not work:
columns.Bound(m => m.Completed).Title("Completed").Width(100).ClientTemplate(
#"# if (Completed == true) { #" +
"<img src='" + Url.Content("~/Images/") + "checked.png' alt='quest icon' />" +
"# } else { #" +
"#: Completed #" +
"# } #"
);
The value, Completed, is always null therefore the else block is always hit and my Completed column just shows null for each row's value.
If I reference a parent grid column within else block I get the correct values so it seems as I'm missing something on how to reference the child columns.
Any direction would be appreciated.
Of course I found the answers about 20 minutes after I posted. You must escape the hash symbols in a nested grid. Credit here:
http://www.telerik.com/forums/conditional-client-template-in-razor-hierarchical-grid
I'm trying to scrape some content off of a website and I am having trouble selecting the correct elements.
I'm using Nokogiri, and, as I know CSS best, I am trying to use it to select the data I want.
There is a big table with rows I do not want, but these can change; They are not always row 4, 5, 6, 10, 14 for example.
The only way I can tell if it's a row I want is if the row has TD tags in it.
What is the right CSS selector to do this?
# Search for nodes by css
doc.css('#mainContent p table tr').each do |td|
throw td
end
EDIT:
I'm trying to scrape boxrec.com/schedule.php. I want the rows for each match, but, it's a very large table with numerous rows which aren't the match. The first couple rows of each date section aren't needed, including every other line which has "bout subject to change....", and also spacing rows between days.
SOLUTION:
doc.xpath("//table[#align='center'][not(#id) and not(#class)]/tr").each do |trow|
#Try get the date
if trow.css('.show_left b').length == 1
match_date = trow.css('.show_left b').first.content
end
if trow.css('td a').length == 2 and trow.css('* > td').length > 10
first_boxer_td = trow.css('td:nth-child(5)').first
second_boxer_td = trow.css('td:nth-child(5)').first
match = {
:round => trow.css('td:nth-child(3)').first.content.to_i,
:weight => trow.css('td:nth-child(4)').first.content.to_s,
:first_boxer_name => first_boxer_td.css('a').first.content.to_s,
:first_boxer_link => first_boxer_td.css('a').first.attribute('href').to_s,
:second_boxer_name => second_boxer_td.css('a').first.content.to_s,
:second_boxer_link => second_boxer_td.css('a').first.attribute('href').to_s,
:date => Time.parse(match_date)
}
#:Weight => trow.css('td:nth-child(4)').to_s
#:BoxerA => trow.css('td:nth-child(5)').to_s
#:BoxerB => trow.css('td:nth-child(9)').to_s
myscrape.push(match)
end
end
You won't be able to tell how many td elements a tr contains, but you can tell if it is empty or not:
doc.css('#mainContent p table tr:not(:empty)').each do |td|
throw td
end
You can do something like this:
tr rows with a 4th td
doc.xpath('//tr/td[4]/..')
another way with css:
doc.css('tr').select{|tr| tr.css('td').length >= 4}
I have a grid that implements grouping but would like to expand on the details that display in the groupText: area. Ideally I would be able to take data about that grouping and display in that group row with the group name ({0} default value).
In other words what I am trying to achieve is a way to display not only the group name but also some other data items contained in the JSON feed to the grid.
My searching seems to be coming up short on anyone being able to achieve this but I'm hoping someone can shed some light on expanding this setting and providing access to formating this area.
I find your question interesting, but the implementation is not simple. In the answer I showed before how one could use custom formatter in summary rows of the grouping.
In the demo you can see how to implement custom formatting of the grouping text. The demo display the following:
The implementation consist just from the implementation of the custom formatter which can be used for both purpose: formatting of the content of the corresponding column and formatting of the grouping text in case of grouping by the column. The code is a little tricky, but I hope that all will be able follow it. The code use the differences of the input parameters to define whether the formatter will be called to format the column content or to format the grouping text.
One part of the code which get the texts like "(test4,test7)" is not so effective in case of the usage of large number of rows, but it works.
Below is the code of formatter of the "Date" column which would by typically used with the predefined formatter: 'date'. I called in the part of the code the original Date-formatter, but used for the the grouping text more sophisticated code:
formatter: function (cellval, opts, rowObject, action) {
var fullOpts = $.extend({}, $.jgrid.formatter.date, opts),
formattedDate = $.fmatter.util.DateFormat('Y-m-d', cellval, 'd-M-Y', fullOpts),
groupIdPrefix = opts.gid + "ghead_",
groupIdPrefixLength = groupIdPrefix.length,
month = Number(cellval.split('-')[1]), // input format 'Y-m-d'
names = [], data, i, l, item;
// test wether opts.rowId start with opts.gid + "ghead_" and integer
// and rowObject is the array and action is undefined.
if (opts.rowId.substr(0, groupIdPrefixLength) === groupIdPrefix && typeof action === "undefined") {
// custom formating of the group header
// we just simulate some login by testing of the month > 9
// the next code fragment is not effective, but it can be used
// in case of not so large number of groups and the local data
data = $(this).jqGrid("getGridParam", "data");
for (i = 0, l = data.length; i < l; i++) {
item = data[i];
if (item.invdate === cellval) {
names.push(item.name);
}
}
return (month > 9 ? ('<span class="ui-icon ui-icon-alert" style="float: left;"></span>' +
'<span style="color:tomato; margin-left: 5px;">') : "<span>") +
formattedDate + ' (' + names.join() + ')</span>'
}
return formattedDate;
}
UPDATED: The fixed version of the demo is here. It uses $.fn.fmatter instead of currently removed from jqGrid method $.fmatter.util.DateFormat.