I am trying to use the new Kendo UI grid from asp.net mvc 3.
I am having a table the table is generated automatically from a controller in asp.net mvc 3.
And display it with Kendo.ui grid.
However, I am having the html code inside of the cells instead of the html controls
Example:
it display in the cell: <input checked="checked" class="check-box" disabled="disabled" type="checkb.. instead of an input, the code in the View is #html.input
or Edit | Details | <a href="/Adm instead of a link ( code in the View is #Html.actionLink)
How can I make it encode html code ?
This is my script:
$(document).ready(function() {
$("#calendrierMatch").kendoGrid({
});
});
Thanks
The KendoUI Grid automatically encodes the content of the grid, that's why you get the text <input type= ... instead of the actual input controll.
You can disable the encoding for a given column with using the encoded options (see documentation):
encoded: Boolean(default: true) Specified whether the column content
is escaped. Disable encoding if the data contains HTML markup.
So you need something like:
$(document).ready(function(){
$("#grid").kendoGrid({
//...
columns: [
{
field: "Column containing HTML",
encoded: false
}
]
});
});
in model binding kendo grid Razor Html Page use this code
#Html.Kendo().Grid(Model).Name("GridName").Columns(col =>{
col.Bound(m => m.ID);
col.Bound(m => m.Name);
col.Template(#<text>
#Html.Raw(HttpUtility.HtmlDecode( item.Text))
</text>);
})
You need to add the template feature of kendo grid.
In the below code i have created a text box inside the cell of kendo grid.
{
field: "Total",
title: "Total",
width: "40px",
template: "<input type='text' class=\"quantity_total\" id='txtTotal_${ItemId}'
name='txtTotal_${ItemId}' maxlength='8' onkeypress = 'return
fnCheckNumeric_total(event,this.id)' />"
},
Related
Is there any way I can set a kendo ui dropdowns data source to a property of an object? Example.
If I have following object
Person:{
FirstName: 'Nilesh',
Gender: 'Male',
GenderList:['Male','Female']
}
If I have a form in which I show a text box for the first name and a dropdownlist for the gender, I want to bind the kendo ui dropdownlist to the GenderList Property of the object.
I want to do this in angularjs
Is this even possible? If yes how can we get this to work?
I used following html to render the kendodropdown list.
<input kendo-drop-down-list k-data-source="Person['GenderList']" />
but this does not work.
Any help appreciated.
I have tested your code and this works for me:
In your controller:
$scope.Person = {
FirstName: 'Nilesh',
Gender: 'Male',
GenderList: ['Male', 'Female']
}
In your html:
<input kendo-drop-down-list k-data-source="Person['GenderList']" />
The only difference is var Person is declarate into $scope. This is necessary for angular data-binding.
I have an MVC3 C# .Net Web App. We are using the ckEditor library to enhance the TextAreas in our app. When using a standard TextArea, the Validation operates correctly. However, in the enhanced TextAreas (implementing the ckEditor), when submitting the page, the Validation fires an error. "Description is Required" even when though there is data present in the TextArea. Upon a second click of the Submit, the form submits fine.
Domain class property:
[Display(Name = "Description")]
[Required(ErrorMessage = "Description is required.")]
public virtual string Description { get; set; }
HTML:
<td style="border: 0;text-align:left " >
#Html.TextAreaFor(model => model.Description,
new
{
rows = 5,
cols = 100,
#class = "celltext2 save-alert"
})
#Html.ValidationMessageFor(model => model.Description)
</td>
I think that applying the ckEditor attributes is messing it up somehow. Ideas?`
Let me clarify more. We have a .js file that queries the controls and then does ckEditor initialzation. when I remove the $(this).ckeditor({}) it works fine.
JS File:
$('textarea').each(function () {
$(this).ckeditor({});
});
Something like this might work:
$('textarea').each(function () {
var textarea = $(this);
$(this).ckeditor({}).on('blur', function() {
textarea.html( $(this).html() );
});
});
EDIT(I've never used the jQuery adapter, after a small lesson I found this to work, the above the blur never fires and $(this).html() is not defined):
$('textarea').each(function () {
var textarea = $(this);
textarea.ckeditor(function () {
textarea.ckeditorGet().on('blur', function () {
textarea.html( this.getData() );
});
});
});
I think it's a little simpler than that. CKE creates an iframe that it is used instead of the actual textarea and you do correctly need to update the contents of the textarea with the data inside CKEditor before submitting. I would suggest, however, that you do this on submit instead of on blur. I would recommend setting an id to the relevant DOM elements but you get the idea.
// Replace textarea(s)
$('textarea').each(function () {
$(this).ckeditor({});
});
// Bind on submit event to update the text
$('form').submit(function() {
// Upate textarea value with the ckeditor data
$('textarea').val(CKEDITOR.instances.ValueCKE.getData());
});
I'm using a WebGrid to create a paged/sortable list in MVC3. I've created an AJAX enabled Delete button which makes the delete call via AJAX, after which I'd like it to remove the row from the table.
The way I'd like to achieve this is by having an id or data-id attribute on the <tr> in the table so that I can easily manipulate it using jQuery. However I can't work out how to add attributes to rows when using a WebGrid.
I know that attributes can easily set at the grid level like so:
#grid.GetHtml(htmlAttributes: new { id = "gridMapping", style = "width:100%;" },
However I don't know how to achieve the same at the row/column level.
#grid.GetHtml(
columns: grid.Columns(
grid.Column(format: (item) => Html.CheckBox("SelectedInvoice",new { value=item.transactionId})),
//// rest of your columns here
)
)
so one way would be putting an HTML helper method in place that can handle your htmlAttributes.
Other way - using combination of format: and Html.Raw
And the last, but may be the easiest: javascript (jQuery)
so you can try something like :
$('#grid tr').each(function(){
$(this).attr('yourhtmlattribute','value');
});
and in similar way for TDs.
Here is how I achieved this
In your webgrid set up add this to one of the colums.
grid.Column("UserName", "User Name", format: #<text><span data-id='#item.Id'>#item.UserName</span></text>, canSort: true),
No when the HTML grid is rendered you will get this.
<tr jQuery45435434="3"> <span data-userid="1">Fred Smith</span></tr>
<tr jQuery45435434="4"> <span data-userid="2">Sally Smith</span></tr>
<tr jQuery45435434="5"> <span data-userid="3">Joe Smith</span></tr>
I have the caption parameter set in the jqGrid definition. I want to know if there's a way to set it dynamically depending on the class attribute of the table element to which the jqGrid plugin is attached.
HTML 1
<table id="myjqgrid" class="view"></table>
<div id="Pager"></div>
HTML 2
<table id="myjqgrid" class="edit"></table>
<div id="Pager"></div>
JQGrid Definition
$("#myjqgrid").jqGrid({
caption: "" // this is what I want to set dynamically
})
You can use setCaption method to set new caption on the grid:
var $grid = $('#myjqgrid');
$grid.jqGrid('setCaption', 'newCaption');
If you need to set the caption depend on the class of the <table> element the code can be like the following
if ($grid.hasClass('edit')) {
$grid.jqGrid('setCaption', 'Edit Caption');
} else if ($grid.hasClass('vew')) {
$grid.jqGrid('setCaption', 'View Caption');
} else {
$grid.jqGrid('setCaption', 'Default Caption');
}
The only thing which you can't do with respect of setCaption method is to remove (to hide) the caption: the results which you have if you created grid without caption parameter (or with caption: ""). To remove (to hide) the caption you can do
$(">div.ui-jqgrid-titlebar", $grid.closest('div.ui-jqgrid-view')).hide();
or
$($grid[0].grid.cDiv).hide();
(see the answer for details).
I have an MVC 3 view for rendering reports from SQL Server Reporting Services. There's a form at the top where I capture parameters for the report and on submission, my controller action is dutifully called and my report is rendered into a < div >.
I'm now adding an Export to Excel function. I want the same parameters from the form, but this time, I want a full Postback, not an Ajax call to the controller, so that the user is offered the opportunity to download the report. Otherwise, my report gets rendered as binary content on the existing view.
I'm thinking that I want to be able to switch the behaviour of my form between Ajax and normal Postback, depending on which 'submit' button I click.
Any ideas?
#using (Html.BeginForm("Export", "Report"))
{
... some form fields
#Html.ActionLink("Render report", "Render", "Report", null, new { id = "generateReport" })
<input type="submit" value="Export to Excel">
}
<div id="report"></div>
and then AJAXify the Render report link in a separate js file:
$(function() {
$('#generateReport').click(function() {
var form = $(this).closest('form');
$.post(this.href, form.serialize(), function(result) {
$('#report').html(result);
});
return false;
});
});
and in your ReportController you would have both Export and Render actions.