I am trying to pass the column value. But it is not working and always saying "TrackingID" is undefined. I have spent lot of time in trying diff formats, but i feel i am missing something small. When i try to print the value of TrackingID in the column, it works fine. But when i try to pass this value into the function, it gives me the error saying "TrackingID is undefined"..
The below column is part of the child grid, which is present inside the kendo template like as follow:-
<script id="tplHistory" type="text/kendo-tmpl">
#(Html.Kendo().Grid<TrackingViewModel>()
.Name("HistoryGrid_#=PartnerGroupID#")
.Columns(columns =>
{
columns.Bound(v => v.PriceHigh).Title("Monthly High").Format("{0:c}").Width("12%");
columns.Bound(v => v.DateUpdated).Title("Edited Date").Format("{0:MM/dd/yyyy}").Width("10%");
columns.Bound(v => v.UpdatedBy).Title("Edited By").Width("10%");
columns.Bound(v => v.OperationName).Title("Status").Width("10%");
columns.Bound(v => v.TrackingID).HeaderTemplate(" ").ClientTemplate("#= revertTemplate(TrackingID) #");
})
Please help.
columns.Bound(v => v.TrackingID).HeaderTemplate(" ").ClientTemplate("#= revertTemplate(TrackingID)#");
function revertTemplate(tid) {
console.log(tid);
var markup = kendo.format("<i title='Revert the record' class='fa fa-floppy-o fontIcon' onclick=revertData({0})></i>", tid);
return markup;
}
function revertData(trackingid) {
alert(trackingid);
}
Try this:
columns.Bound(v => v.TrackingID).HeaderTemplate(" ").ClientTemplate("<a onclick=\"revertTemplate('#=TrackingID#')\">#=TrackingID#</a>");
Try to update your method as shown below (pass data and use data.PropertyName instead of just using PropertyName):
columns.Bound(v => v.TrackingID)
.HeaderTemplate(" ")
.ClientTemplate("#= revertTemplate(data)#");
function revertTemplate(data) {
console.log(data.TrackingID);
var markup = kendo.format("<i title='Revert the record' class='fa fa-floppy-o fontIcon' onclick=revertData({0})></i>", tid);
return markup;
}
function revertData(data) {
alert(data.TrackingID);
}
For more information have a look at How Do I Have Conditional Logic in a Column Client Template?
Hope this helps...
Finally i found the solution:-
columns.Bound(v => v.TrackingID).HeaderTemplate(" ")
.ClientTemplate("<i title='Revert the record' class='fa fa-floppy-o fontIcon' onclick='revertData(\\#:TrackingID\\#);'></i>");
Related
I need to display two different values in the grid based on the Model Object property.I am able to do it using Template but not client template.
How to do it?
I have used the below code but i am getting error that IsContractORPO is undefined.
#{
Model.IsContractORPO = "P";
}
<div>
#{Html.Telerik().Grid(Model.TestList)
.Name("testGrid")
.Columns(columns =>
{
columns.Bound(col => col.FTE);
columns
.Template(#<text>#if (Model.IsContractORPO == "C")
{<div>#item.FTE</div>}
else if (Model.IsContractORPO == "P")
{<div>-</div>}</text>).Title("FTETestColumn")
.ClientTemplate("<# if (model.IsContractORPO == 'C') { #> <div><#=FTE#></div><# } else if(model.IsContractORPO == 'P'){ #><div>-</div><# } #>");
columns.Bound(col => col.BalanceAmount);
columns.Bound(col => col.BalanceUnits);
})
.ClientEvents(events => events.OnDataBinding("onDataBinding"))
.Render();
}
</div>
After sometime of analysis, i came to know that we can use a model property in the client template by making it as a script variable.
The following code solved the Issue.
<script type="text/javascript">
var isContractORPO = '#Model.IsContractORPO';
</script>
And the client template would be like
ClientTemplate("<# if (isContractORPO == 'C') { #> <div><#=FTE#></div><# } else if(isContractORPO == 'P'){ #><div>-</div><# } #>");
In my view, the drop down list is displayed properly when I do this -
#Html.DropDownListFor(m => m.SelectedEstimateState, Model.EstimateStateList.ToSelectList(c => c.Value, c => c.Text), new { });
But not when I do this -
#{
Html.DropDownListFor(m => m.SelectedEstimateState, Model.EstimateStateList.ToSelectList(c => c.Value, c => c.Text), new { });
}
What is the difference between the two?
this is the code block expression , which is used to evaluate the expression. but it does not write out. for more info check the razor syntax Razor syntax and web-programming-using-the-razor-syntax
#{
Html.DropDownListFor(m => m.SelectedEstimateState, Model.EstimateStateList.ToSelectList(c => c.Value, c => c.Text), new { });
}
Where below will write out the content (basically it's same as the response.write() with encoded )
#Html.DropDownListFor(m => m.SelectedEstimateState, Model.EstimateStateList.ToSelectList(c => c.Value, c => c.Text), new { });
I am working on asp.net mvc. I am trying to display list of messages in a Kendo mvc ui grid.
I have written the code like,
Html.Kendo().Grid((List<messages>)ViewBag.Messages))
.Name("grdIndox")
.Sortable(m => m.Enabled(true).SortMode(GridSortMode.MultipleColumn))
.HtmlAttributes(new { style = "" })
.Columns(
col =>
{
col.Bound(o => o.RecNo).HtmlAttributes(new { style = "display:none" }).Title("").HeaderHtmlAttributes(new { style = "display:none" });
col.Bound(o => o.NoteDate).Title("Date").Format("{0:MMM d, yyyy}");
col.Bound(o => o.PatName).Title("Patient");
col.Bound(o => o.NoteType).Title("Type");
col.Bound(o => o.Subject);
}
)
.Pageable()
.Selectable(sel => sel.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
.DataSource(
ds => ds.Ajax().ServerOperation(false).Model(m => m.Id(modelid => modelid.RecNo))
.PageSize(10)
//.Read(read => read.Action("Messages_Read", "Msg"))
)
.Events(ev => ev.Change("onSelectingGirdRow"))
)
and i have the field in the table like IsRead-boolean type. so if the message is unread message then i need to format that record with bold font. I have used clientTemplates but with that i am able to format only particular cells i want format entire row. Please guide me.
as Sanja suggested you can use the dataBound event but it will be better to cycle through the tr elements (the rows). Also I assume that you will need the related dataItem to check if the property that indicates if the message is read.
e.g.
dataBound: function ()
{
var grid = this;
grid.tbody.find('>tr').each(function(){
var dataItem = grid.dataItem(this);
if(!dataItem.IsMessageRead)
{
$(this).addClass('someBoldClass');
}
})
}
You can use dataBound event to change your rows.
dataBound: function ()
{
$('td').each(function(){
if(some condition...)
{
$(this).addClass('someBoldClass')}
}
})
}
There is another way to do that.It's called RowAction.
.RowAction(row =>
{
if (condition)
{
row.HtmlAttributes["class"] = "someBoldClass";
}
})
Please note that the RowAction is available only for rows that are rendered on server side. So in your case, you can use RowAction as an alternative to DataBound.
I have a custom editor template for a vehicle part that is used in a telerik grid for insertion in mvc3 razor. The editor template includes a datetime field. On insertion of a new vehicle part the datetime field is incorrect and the format is changed.
For example, if I insert "06/10/2011" which is day 6 , month 10 and year 2011 , in the controller, the dateTime field in the model is "10/06/2011" which is day 10 month 6 and year 211. I am using telerik's date picker
Basically the day and month are becoming switched after submitting to the controller
I have other instances in my code where I am passing a datetime field without an issue, so I believe the problem is the fact that I'm using a custom editor template ...
Here is the code for the grid:
#(Html.Telerik().Grid<VehiclePartsViewModel>()
.Name("VehiclePartsViewModel")
.ToolBar(commands =>
{ commands.Insert();
})
.DataKeys(keys => keys.Add(c => c.Id))
.ClientEvents(events => events.OnRowDataBound("onRowDataBound"))
.DataBinding(dataBinding => dataBinding
.Ajax()
.Insert(MVC.Vehicles.CustomCoverage._InsertPart().GetRouteValueDictionary())
.Select(MVC.Vehicles.CustomCoverage._SelectPart().GetRouteValueDictionary())
.Update(MVC.Vehicles.CustomCoverage._SavePart().GetRouteValueDictionary())
.Delete(MVC.Vehicles.CustomCoverage._DeletePart().GetRouteValueDictionary())
)
.Columns(columns =>
{
omitted..
})
.Footer(false)
.Editable(editing => editing.Mode(GridEditMode.PopUp))
The simplified editor template is :
<div>
#Html.LabelFor(v => v.ItemId, new { #class = "uc-caption"})
#Html.EditorFor(v => v.ItemId)
</div><br />
<div>
#Html.LabelFor(v => v.InstallDate, new { #class = "uc-caption"})
#Html.EditorFor(v => v.InstallDate, new { Modifiable = true })
</div>
I am also using an editor template for dateTime, but I do not believe the issue is here:
#(
Html.Telerik().DatePicker()
.Name(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))
.HtmlAttributes(new { id = ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty) + "_wrapper" })
.ShowButton(true)
.Value(Model.HasValue ? Model.Value : new DateTime())
.ClientEvents(events => events.OnChange("onChangeDatePicker"))
.InputHtmlAttributes(new { style = "width:100%"})
.Enable(ViewData["Modifiable"] != null ? (bool)ViewData["Modifiable"] : true)
)
Thanks
Ok so I was finally able to resolve this with telerik .. there seems to be a problem with setting globalization to true .. You have to add a line before it .. This is what my _layout.cshtml looks like now ..
#(Html.Telerik().ScriptRegistrar()
.OnDocumentReady(#<text></text>) //Telerik: This is required because there is still no Telerik components on the page and jQuery(document).ready will not be rendered and the globalization will not work
.Globalization(true)
You probably have problems with globalization/localization of your app.
Different cultures are mixed up.
I had the same problem when posting float values, and solved it by adding this method to Global.asax.cs:
protected void Application_AcquireRequestState(object sender, EventArgs e)
{
System.Threading.Thread.CurrentThread.CurrentUICulture = new CultureInfo("en");
System.Threading.Thread.CurrentThread.CurrentCulture = new CultureInfo("en");
}
Hi i am new in asp.net mvc and telerik controls. How can i get o.Id value when i click on row?
<%= Html.Telerik().Grid(Model)
.Name("RolesGrid")
.DataKeys(keys => keys.Add(o => o.Id))
.Selectable()
.Columns(columns =>
{
columns.Bound(o => o.Name);
columns.Bound(o => o.Description);
})
.Pageable()
.ClientEvents(events => events
.OnRowSelect("onRowSelect"))
%>
in js code:
function onRowSelect(e) {
var ordersGrid = $('#RolesGrid').data('tGrid');
var row = e.row;
var dataItem = ordersGrid.dataItem(row);
alert(dataItem);
}
But dataItem is null and there is no id value in generated html file. Thanks and sorry for my bad english
So after all i have the best way to get id is:
bind onRowSelect function to your grid
write next code in onRowSelect
var dataItem = jQuery('#MyGridId').data('tGrid').dataItem(e.row);
alert(dataItem['Id']);
dataItem is a map witch have all properties of grid model so you get all you want
Thats all, thanks
From telerik grid demo.
You have to put the Id in the telerik grid as a hidden column.
// ...
.DataKeys(keys => keys.Add(o => o.Id))
.Selectable()
.Columns(columns =>
{
columns.Bound(o => o.Id).Hidden();
columns.Bound(o => o.Name);
columns.Bound(o => o.Description);
})
// ...
.ClientEvents(events => events.OnRowSelect("onRowSelect"))
It will render a
<td style="display: none; ...">...</td>
And then you get it like this:
function onRowSelect(e) {
var id = e.row.cells[0].innerHTML;
// ...
}
Notes:
I know, it's ugly.
I don't know why the telerik forces you to call the .DataKeys(...) method if there's no documented way to get the value for the key defined.
If you use grouping or some other feature it gets trickier, as the hidden column position varies depending on the grouping arrangement.
I found a slightly more elegant way to do this that borrows off of mmutilva's answer.
Start by putting in the hidden column and the change event in the same way:
.DataKeys(keys => keys.Add(o => o.Id))
.Selectable()
.Columns(columns =>
{
columns.Bound(o => o.Id).Hidden();
columns.Bound(o => o.Name);
columns.Bound(o => o.Description);
})
.ClientEvents(events => events.OnRowSelect("onRowSelect"))
But then in the javascript function, there is a better way to actually select the object and then the hidden row:
function onRowSelect(e) {
var grid = e.sender;
var currentitem = grid.dataItem(this.select());
var Id = currentitem.Id;
//then do whatever with the ID variable
}
Source
Change the function onRowSelect to this:
function onRowSelect(sender, args){...}
The sender will be the grid, and from the args you can determine which item was selected.
Look to the Telerik help site for detailed info on how to get the data using the Client Side API:
http://www.telerik.com/help