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.
Related
The model has variables from SUM_01 to SUM_31.
I did not want the code to be long, so I tried to write with the FOR statement as follows. But I get an error saying that I gave STRING instead of model type.
for (int i = 1; i < 32; i++)
{
string col = "o => o.SUM_0" + i;
string title = i + "DAY";
columns.Bound(col)
.Title(title)
.Width(85)
.HeaderHtmlAttributes(new { style = "text-align:center;vertical-align:middle;" })
.HtmlAttributes(new { style = "text-align:center;" });
}
Is there a way? oh, the grid using ZbdModels
#( Html.Kendo().Grid<TEST.Models.ZbdModels>()
You cannot specify the column definition like this: col = "o => o.SUM_0" + i. First of all, Kendo cannot interpret it. Also, you would end up with column names like SUM_023. Something like col = "SUM_" + i.ToString().PadLeft(2, '0') should work.
a FOR loop will be display by the following method.
<p id ="demo"></p>
<script>
var cars = ["Civics" , "Corola" , "Ford" , "Mercedeez" , "Pejaro"];
var i;
var text = "";
for (i = 0; i<5; i++) {
text += cars[i];
}
document.getElementById('demo').innerHTML = text;
</script>
I want to ask that why the variable "text" is necessary to use. why we can not simply write like this cars[i];
You need the text variable to store value in it for each iteration.
You can also achieve same result by:
<p id ="demo"></p>
<script>
var cars = ["Civics" , "Corola" , "Ford" , "Mercedeez" , "Pejaro"];
document.getElementById('demo').innerHTML = cars.join ('');
</script>
cars[i] in every iteration of the loop reads different values of the array cars one by one. As per the question, the output needs to be a concatenation of the Strings represented by each cars[i]. This concatenated string needs to be stored somewhere.This is why an extra variable text is needed which keeps on getting longer and longer.
text = "" //i=0
text = "Civics" //i=1 After 1st loop
text = "CivicsCorola" //i=2 After 2nd loop
text = "CivicsCorolaFord" //i=3 After 3rd loop
...
IList<Item> items = new List<Item>();
items.Add(new Item
{
tag = "{" + Ann + "}",
value = "Anny"
});
items.Add(new Item
{
tag = "{" + John + "}",
value = "Johnny"
});
How can I use Linq to select tag with {John} and replace value with "Jane"?
LINQ is, as the name suggests, more of a query tools. So you can get specific item(s) that you want to modify from a collection using LINQ, but the modification itself is out-of-scope for LINQ.
Assuming that there is always maximum one match to your criteria, you can do as follows :
var john = items.FirstOrDefault(o => o.tag == "{John}");
if(john != null)
{
john.value = "Jane";
}
Otherwise, you can use LINQ Where(o => o.tag == "{John}") to get the target items for modification. But then you'll need to iterate through the result to actually update the value of each matched item.
items.Where(o => o.tag == "{"+John+"}").ToList().ForEach(item =>{
item.value = "Jane";
});
Here is working fiddle
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.
I tried to access the rowObject in custom formatter function by column name but it didn't give any values. I have tried this with both JSON and XML data type .
Is there any way to get the column number by column name in jqgrid.
function Draw_Link ( cellvalue , options , rowObject )
{
return "<a href='someurl.php?col_name="+rowobject.col_name+"'>"+cellvalue+"</a>";
}
The column index for the column is the same as the index of the column in the colModel array before the jqGrid initialization (it is the same as in the input parameter colModel). If you use rownumbers:true, multiselect:true or subGrid:true additional columns will be addid to the grid as the first rows, so the column index which one has in the colModel array as the jqGrid parameter can be other as one have after the grid initialization. You can use for example this simple function to get the index
var getColumnSrcIndexByName = function(grid,columnName) {
var cm = grid.jqGrid('getGridParam','colModel'),
i=0, index=0, l=cm.length, cmName;
while (i<l) {
cmName = cm[i].name;
i++;
if (cmName===columnName) {
return index;
} else if (cmName!=='rn' && cmName!=='cb' && cmName!=='subgrid') {
index++;
}
}
return -1;
};
var index = getColumnSrcIndexByName($("#list"),'MyColumn');
UPDATED: Free jqGrid fork simplifies getting column index from column name because it holds internally the parameter iColByName, which is the map by the column name. One can just get iColByName via
var iColByName = $("#list").jqGrid("getGridParam", "iColByName");
and iColByName["MyColumn"] will be the required column index (iCol). I remind that one can use getGridParam without any parameter to get the reference to all parameters of jqGrid:
var p = $("#list").jqGrid("getGridParam");
The value
var iCol = p.iColByName["MyColumn"];
will be the column index and p.colModel[iCol].name will be "MyColumn".