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
Related
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.
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 have this set of records object-array like for example..
[{firstname:'John',lastname:'Smith'},{firstname:'Jimmy',lastname:'Morre'}]
What I want to do is to enable Saving feature of Handsontable. My problem is I can't update it where column name is "firstname" or "lastname" .. or at least row id (where can I put rowID by the way?) because the getData() function returns only values of the cell not the with the properties of the original data-set such as like 'firstname ' and 'lastname'.
Anyone from here who are more familiar with Handsontable? thank you..
I am not sure to understand what you want.
But in this JSFiddle you can see how to get the property of your data ;)
var datas = hot.getData()
$.each(datas, function(rowIndex, row) {
console.log('The row id is ' + rowIndex);
$.each(row, function(colIndex, value) {
console.log('The column id is ' + colIndex + ' and the property is ' + Object.keys(hot.getSchema())[colIndex]);
console.log(value);
});
console.log("----------------------------");
});
I hope it helps you.
I have a DataGridViewControl with sortable columns. After editing data for one record in a row of this control, the list of records is refreshed and the DataGridViewControl gets updated:
m_Helper.UpdateRecord( some variables );
dgvMyData.DataSource = ReloadData();
Before I do that, I save SortOrder and the column which was used for sorting:
SortOrder sortOrder = dgvMyData.SortOrder;
DataGridViewColumn sortedColumn = dgvMyData.SortedColumn;
Now after reloading data I'd like to have the same sorting on the column selected beforehand, but I always end up with the error message
Column provided does not belong to this DataGridView control
The corresponding code looks like this:
ListSortDirection listSortDirection;
if ( sortOrder == SortOrder.Ascending )
{
listSortDirection = ListSortDirection.Ascending;
}
else
{
listSortDirection = ListSortDirection.Descending;
}
dgvMyData.Sort( sortedColumn, listSortDirection );
This always causes an ArgumentException with the error message shown above - I assume this happens because reloading the data for the DataGridView also causes the DataGridViewColumn to be a different one even though its called the same and contains the same type of data. How can I implement a solution?
As assumed in my question, using the instance of sortedColumn directly doesn't work as it no longer part of the grid. I instead use the column's name like this:
if ( !string.IsNullOrWhiteSpace( sortedColumn.Name ) &&
dgvMyData.Columns[ sortedColumn.Name ] != null )
{
dgvMyData.Sort(
dgvMyData.Columns[ sortedColumn.Name ],
listSortDirection );
}
I have been trying for a long time to get this to work..
Basically I am assigning columns and templates dynamically to the kendo grid. Each column can be of any type. If the type is 'address' type, then I am assigning a html template to that column to split the address string and display in a nice way.
I am doing this by creating a map of possible column types and their corresponding templates. The problem is with 'address' map.
uiTemplateMap["date"] = "#= kendo.toString(kendo.parseDate(" + fieldName + "), 'MM/dd/yyyy') #";
uiTemplateMap["address"] = eval("kendo.template($('\\#address-template').html())");
The 'address-template' is defined as
<script id="address-template" type="text/x-kendo-template">
# var addr = ${addresses} ; #
# var splitaddr = addr.split(','); #
# for (int i=0; i < splitaddr.length(); i++) { #
<i> #= splitaddr[i] # </i>
# } #
</script>
I get a invalid template exception. I have two questions.
how can I assign a column value to a javascript variable? The ${addresses} assignment does not seem to work.
I dont want to hard-code the 'addresses' column in the template. Can I pass the column name or value to the template like $('#address-template').html(columnName) ??
Any help will be highly appreciated, thanks
You can access the column value in data[columnName] where columnName is the field's name (a string), or, because the template function is using a with block, simply in columnName, so you could define a template generator like this:
function createAddressTemplateFor(columnName) {
return "# var address = data['" + columnName + "']; #" + // or: var address = columnName;
"# var splitaddr = address.split(','); #" +
"# for (var i = 0; i < splitaddr.length; i++) { #" +
"<i> #= splitaddr[i] # </i><br />" +
"# } #";
}
(demo)
If you want to use external templates, you'll probably have to hardcode the names (since the property name of the current column is not passed to the template), unless you want to modify the Kendo UI source code.