I am having a check box column to my kendo grid like this.
columns.Template(#<text></text>).ClientTemplate("<input type='checkbox' class='chkbx' />").Width("5%").Title("<input id='chkAll' class='checkAllCls' type='checkbox'/>");
The grid populates properly and when I check the check box, there is an error as shown below.
VM1173:62 Uncaught TypeError: Cannot set properties of undefined (setting 'd0b3c3ae-082b-468d-94ce-ae000093cfb8')
at init._persistSelectedRows (<anonymous>:62:19817)
at init.select (<anonymous>:62:18472)
at HTMLTableRowElement.<anonymous> (<anonymous>:39:26)
at HTMLTableRowElement.dispatch (<anonymous>:5237:27)
at HTMLTableRowElement.elemData.handle (<anonymous>:5044:28)
Have you tried columns.Select()?
The following link allows you to bind your model to the selected checkbox on load.
Alternatively bind your checkbox to a column in your model using template notation
This is the default template I use, you can customize it to your liking.
columns.Bound(p => p.BoolProperty).Title("Is Checked?").Width(30).ClientTemplate("<input type='checkbox' disabled='disabled' #=BoolProperty? checked='checked' : '' # />");
It works with inline and in-cell edit.
And using this code snippet, works with header templates to check all checkboxes
Related
I am using following code to display data from server in a Kendo Grid.
Working fine.
I want to put two hyperlinks in last cell of each row, but can do with only one.
I want EDIT and DELETE link in same cell.
How can I achieve this?
CODE
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(u => u.USERNAME);
columns.Bound(u => u.PASSWORD);
columns.Bound(u => u.ROLE);
columns.Bound(u => u.STATUS);
columns.Template(c => Html.ActionLink("Edit", "Edit", new { id = c.ID }));
}
)
.Pageable()
)
There are a couple of ways to do this.
First you could use the inbuilt edit/delete options from within the grid config
like so:
columns.Command(command =>
{
command.Edit();
command.Destroy();
});
Then just wire up the edit config and destroy delete commands appropriately.
Alternatively you can template these out using one of two methods:
First inline template:
columns.Bound(c => c.ID).ClientTemplate("<a href='Edit/#=data.ID#'>Edit Link #=data.ID#</a>
<a href='Delete/#=data.ID#'>Delete Link #=data.ID#</a>")
So this is just bound to a column and the template is added as per your requirements using standard html and javascript if required. This is fine for simple things but can get very clunky fast if you have more complex templates which then leads to the second method creating a template and calling that like this:
columns.Bound(c => c.ID).ClientTemplate("#=getButtonTemplate(data,'buttonsTemplate')#")
then create your template like so:
<script id="buttonsTemplate" type="text/x-kendo-template">
<div class='btn-group'>
<a class="btn btn-primary" href='#Url.Action("{edit action}", "controller")/#=ID#'>Edit Link #=ID#</a>
<a class="btn btn-danger" href='#Url.Action("{delete action}", "controller")/#=ID#'>Delete Link #=ID#</a>
<div>
</script>
then the getButtonTemplate function:
function getButtonTemplate(data, templateName) {
var templateObj = $("#" + templateName).html();
var template = kendo.template(templateObj);
return template(data);
}
So let me explain what is going on here with this second method.
Instead of templating the html in the column we extract it out into two components for want of a better word.
We use the getButtonTemplate function to pass 2 params in the data item and the template's id. This function simply loads the passed data object into the template and the kendo magic renders the html and injects the values in as required. Check the kendo demo site for more info on this subject.
The template element can be a mix of html and javascript so if you needed to apply some logic in the template this can be done in here. Again refer to the kendo site for more info on this subject.
I personally prefer the second method of doing this client templating as it is easier to manage and make changes without rogue hash's or brackets breaking code.
If you need any more info let me know and I will update the answer for you.
I tried to create a custom data annotation validation attribute (NameValidationAttribute) in MVC 5 project using VS2013. I was able to successfully add the client side validation and the error message for custom validation is getting displayed as soon as the focus leaves the textbox. However, the standard attributes like [Required] and [Range] validators are now not showing proper error messages, says 'Warning: No message defined for 'field' ' (See below screenshot).
Question:
- Why the standard validation error messages are showing as "Warning: No message defined for UnitsInStock"? What am I missing?
Below is my custom client validation script:
I included following scripts in EditProducts page.
Please note that the error messages for UnitPrice, UnitsInStock and ReorderLevel fields are defined with Range validation attribute (see below).
FYI, I tried to change the order of the scripts in ProductEdit page but still its showing the same message.
Please advise!
I ran into this issue. I had created an MVC attribute called PasswordAttribute, with a client side validator called 'password'.
$.validator.addMethod('password', function (value, element, params) {
...[validation logic]
});
$.validator.unobtrusive.adapters.addBool('password');
As soon as I added this logic to the solution I got the error you saw on my Password and ConfirmPassword fields. Note that this occurred before the attribute was even used. Simply renaming the client side validator to 'passwordcheck' fixed the issue. I initially thought that the name 'password' possibly clashed with one of the pre-defined validators (cf. jQuery Validation Documentation) but this doesn't appear to be the case. I suspect now that it is a clash with the name or value for some input field attribute. Anyway, the solution was simply to rename the validator.
jQuery unobtrusive need data-msg for default validate message.
This is how to apply dynamic error message from your model to Html
$.validator.unobtrusive.adapters.add("requireif", function (options) {
$('#' + options.element.id).attr("data-msg", options.message);
// Add rule ...
});
You can change default warning message.
$.validator.addMethod("requireif", function (value, element, pair) {
// validate logic
return true/false;
}, "YOUR DEFAULT MESSAGE HERE");
Or
#Html.TextBoxFor(m => m.Property1, new { Class = "form-control", data_msg = "YOUR DEFAULT MESSAGE HERE" })
Or if you can put it directly to your Html like this.
<input class="form-control" data-msg="YOUR DEFAULT MESSAGE HERE"/>
I am using a template to display some button. I have written the following code :
template: kendo.template($("#edit-template").html())
And in the edit template I have written :
<script id="edit-template" type="text/x-kendo-template">
<a class="k-grid-edit" style="visibility:hidden;" id="edit">Edit</a>
</script>
Initially it will be hidden mode. On databound function, I will show or hide the button. If the permission is shown then I write
$(".k-grid-edit").show();
Whenever I am updating the grid then the edit button is disappearing again. This is because the button is in hidden state initially. After updating also I need to display that in visible mode. How can i do that.
Regards
What about transforming your template into:
<script id="edit-template" type="text/x-kendo-template">
# if (isVisible) { #
<a class="k-grid-edit">Edit</a>
# } else {#
<a class="k-grid-edit" style="display:none">Edit</a>
# } #
</script>
and then have a variable:
var isVisible = false;
Then toggling it to visible is:
isVisible = true;
$(".k-grid-edit").show();
while hiding it is:
isVisible = false;
$(".k-grid-edit").hide();
Basically the variable isVisible stores the state and the template checks it using JavaScript.
NOTE The template might be more compact but I think this is more readable.
One more question (styling) I removed the id from the anchor a in your template since id must be unique and you were setting the same id for all kendoGrid rows.
I want to insert a message which says Type here for example in a textbox in MVC3.
How do I do it?
Can it be done in the Model class on the field declaration?
Please suggest any way of doing?
You could use the HTML5 placeholder. Works in chrome and firefox. U can use modernizr to make it work in IE and other older browsers.
How to set up modernizr for placeholder
#Html.TextBoxFor(model => model.Name,new { placeholder = "Fill in your name" })
#Html.TextBox("Place textbox name here", "Place default value here")
#Html.TextBoxFor(Model field declaration here, new { Value = "Place default value here" }
If you want to use input mask then you may take look here jquery input mask
Settings table contains always one row with lot of long-caption columns.
Opening this in jqGrid grid looks ugly.
How to force jqGrid to render its edit form instead of grid ?
In edit form data can changed and saved, grid is not nessecary.
Grid caption bar is not used (caption is empty string) and top level toolbar is used.
Row is loaded from server using json call.
I tried to use Oleg answer from How to open Edit like form using custom data in jqGrid?
grid.jqGrid({
gridstate: 'hidden',
loadComplete: function() {
$("#edit_grid_top").click();
$("#lui_"+$('#grid').id).hide();
}
...
Edit form opens, but grid is still visible. How to render edit form without grid ?
This is maybe too late, but nevertheless:
You have to hide your grid programatically. My solution was (for a grid with lots of columns):
<div id="detailslistWrapper">
<table id="detailslist">
<tr> <td/> </tr>
</table>
<div id="detailspager"></div>
</div>
and after that:
$(function()
{
$("#detailslistWrapper").hide();
});
I got it to work as: $("#gview_"+gridid).hide()