I´ve seen other posts regarding to checkboxes on the grid, but i didn´t find anything related to my problem, so, i have some fields on my grid that i want to use as checkboxes, and i have declared them like this:
fields:
{
cloud: {type: "boolean"},
columns:
[
{ field:"cloud",title:"Cloud",width:"1.5%",template:"<input type='checkbox' name='cloud' data-bind='#= cloud#' checked='#= cloud #' disabled='disabled'></input>",headerAttributes:{style:"font-size: 11px;text-align:center;"},attributes:{style:"text-align:center;"}},
I´m getting data from my server so my goal is for the checkbox to be dynamic. When i´m inserting, everything works as expected, if i check the checkbox, in my server appears 1 (TRUE) and 0(FALSE).
My first problem is, ALL of my other fields appear check too which is wrong.
My second problem is, when i want to edit, ALL the checkboxes disapear, not the box itself but the check part.
My third problem is, if i simply want to cancel, it throws me an error saying:"Uncaught SyntaxError: Unexpected number"
Does anyone experience the same type of problems? any help would be most appreciated.
Regards.
Related
I need to fix a complaint accessibility issue, that is missing form label, but as we use kendo, I was wondering if anybody knows if is possible to do it by kendo configuration.
The component in question is a combobox.
I did a deep search and couldn't find anything.
What I did to fix the accessibility error in the accessibility report was use some jquery to include two properties: title and aria-label.
$({selector}).kendoComboBox({ placeholder: "Search ...",
...
var combobox = $("#header-search .k-input").eq(0);
combobox.attr("title", "Search ...");
combobox.attr("aria-label", "Search ...");
I've been used this tool to identify the problem: wave-evaluation-tool
I'm trying to implement a web app, with a Basic and an Advanced Search, and I'm using datatable 1.10 and jquery 2.2 to display the results of the searches. I'm having issues with the destroy method and I hope that some of you it is going to be able to help me find a solution, thanks in advance to all for your help
Let me explain a little bit my project, code logic, objective and issue:
I have one single table with 5 columns as you can see on my jsfiddle. I also have a global variable "table" to handle the datatable (DT) once it is created. I declared a function "loadSearchData" to load the parameters for the Ajax call on another global variable. On the click event of my two Search buttons I check if the DT already exists then I destroy it, and then I call the function "initializeDataTable". My idea was to destroy the existing DT and create a new one each time the Search buttons are clicked. However it is not working, and the behavior is "weird":
First time I enter the search criteria and click search, works perfectly fine If I modifiy the search criteria and click search again, then I get a Webpage error
"Line: 1 Error: Unable to get property 'style' of undefined or null reference"
Then, if don't debug and click the search button again, then it works perfectly fine again!
The code:
//BASIC SEARCH
$('#btnBasicSearch').on('click', function () {
$("#partialSearch").removeAttr("hidden");
loadSearchData('basicSearch');
if ($.fn.DataTable.isDataTable('#tbDocumentsList')) {
table.destroy();
}
initializeDataTable(searchParameters);
});
//ADVANCED SEARCH
$("#btnSearch").on('click', function () {
$("#partialSearch").removeAttr("hidden");
loadSearchData('advancedSearch');
jQuery.ajaxSettings.traditional = true;
if ($.fn.DataTable.isDataTable('#tbDocumentsList')) {
table.destroy();
}
initializeDataTable(searchParameters);
});
I'm sure there is a better way to do this, this is my first time using datatables and probably I'm missing something, anyone have any idea?
You can see the complete jsfiddle here
https://jsfiddle.net/dalps/gxgLdo03/
I also asked on the datatable forum:
http://datatables.net/forums/discussion/33563/datatable-destroy-function-not-working-as-expected#latest
thanks in advance
dalps
Well, I got my answer on the datatable forum: my html table have 5 columns and on the "columndefs" property I have the following:
"targets": 5,
"data": "active",
"visible": false
since the column indexing begin with zero, I was referencing a column that doesn't exist, solution, add a new column to the table
Please see jsfiddle for example, blank out First Name field to have validation tooltip show. In a normal form the validation tooltip positions correctly to the right of each element. But in the popup editor for the grid it still trying to position the tooltip below the element as if it where editing inline. I have tried <span class="k-invalid-msg" data-for="FirstName"></span>but it doesn't change anything. Is there a setting I am missing to get this working in popupeditor? I guess I could manually modify the .k-tooltip but I am hoping for something more built in that handles the positioning correctly, because I am not very good at css.
As you've discovered, the error template for the grid is different to that provided by the kendo validator when applied to standard inputs.
Unfortunately, the validator that is created internally by the grid does not pass along any errorTemplate that you might define in the options object and by the time the "edit" event fires, the validator has already been created and the error template compiled, hence why setting the errorTemplate in the manner you describe does not work. Really, I think the Kendo grid should respect any user defined errorTemplate option but until it does we have to hack a little bit.
The key is to define a custom template and to apply it in the edit event, but instead of using the options object, set the private instance directly. Not ideal, but it works:
edit: function (e) {
e.sender.editable.validatable._errorTemplate =
kendo.template($('#tooltip-template').html());
}
See this updated fiddle for an example of what I think you might be looking to achieve.
http://jsfiddle.net/nukefusion/eQ2j7/10/
(I would post this as a comment but not enough reputation yet...)
I'm successfully using nukefusion's solution. I, too, fought with the syntax error from jQuery for a long time and discovered through debugging that how you define the template is important. In particular, it appears that the template has to be written on a single line without any formatting, as in:
<script id="tooltip-template" type="text/x-kendo-template"><span class="k-widget k-tooltip k-tooltip-validation"><span class="k-icon k-warning"></span>#=message#</span></script>
If you try to make it "pretty" and format the html in the template, you get the syntax error. I don't know where the real bug is, as this sort of thing shouldn't cause an error. But it does and I stopped worrying about it once I got it to work correctly.
I have a wizard style page that I want to validate a page at a time. So before the user can move off the (partial) page I submit the inputs from the div for validation. Client side validation works OK but on some pages there are one or more fields I need to validate on the server. Yes I know about remote validation.
I can get the server side validation done without a problem. The issue I have is how do I display the errors on the correct fields? I can locate the fields in the div and find the span where the error message is suppose to go. But I just can't get the message to display.
I must be missing something when updating the field span. I would have thouht that there is a jQuery routine to add error information to a field. I need something similar to the controllers AddModuleError. So when I get return from my $.Post I can set error text on the appropriate fields.
Any suggestions?
A potential solution to your problem might be in this article "Client side validation after Ajax Partial View result in ASP.NET MVC 3"
Basically, once you get your html from the post you can invoke validation using jQuery.validator.unobtrusive.parse()
As per the example in the article;
$.post("YourAction", { data: <your form data> },
function(htmlContent){
$('#container').html(htmlContent);
jQuery.validator.unobtrusive.parse('#content')
}
Worth looking into
If you are using the included RemoteAttribute, or the version I linked to in my answer to your other remote validation question, then you should not have to worry about displaying the error, as both work with the ValidationMessage helpers to automatically display errors.
Have you added Html.ValidationMessage(...) or Html.ValidationMessageFor(...) for each field to be validated?
I have the following partial view which renders a drop down list:
#model MartinDog.Core.Models.Section
#{
#Html.DropDownListFor(x=>x.Name
, new SelectList(Model.Dock.DockTemplate.Columns,
"Id", "FriendlyName",
Model.DockTemplateColumn.Id.ToString())
, new { #id = "ddlb_dockTemplateColumns" +
Model.Id.ToString()})
}
I render it on my page like so:
#{Html.RenderPartial("_Admin_Page_DockTemplateColumnDropDown", Model);}
The partial view is rendered once for every Section object. A Section object one I've created and is editable in a jquery dialog box (change the name, display order, dock template column, etc.)
On the test page I am using, this Section dialog box is rendered four times (as there are four of them in my parent object).
The problem:
*The SelectedValue in the SelectList for the drop down never gets set* - that is to say, the correct item in the drop down list is never selected when the dialog is displayed and I can't quite work out why.
I thought it might be because the drop down is rendered four times, so I tried rendering it for just one of the 'Sections' but still the same problem.
Anyone know what I can do?
***edit
Not sure if I'm doing it in a sucky way. I had thought of building the dialog just once with jquery and json but I'd prefer to do it this way as it just feels cleaner.
I do this:
In controller action (Edit for example):
ViewData["ProvinceID"] = new SelectList(dc.Provinces.OrderBy(p => p.NameAr), "ID", "NameAr", factory.ProvinceID);
and Markup:
<%: Html.DropDownList("ProvinceID") %>
See? so it is a list of factories and it has a Province field and what I want you to notice is the 4th parameter in the SelectList constructor, I passed factory.ProvinceID so the DropDownList knows which option to be set on. Otherwise the DropDownList will show the default value (the first one).
P.S: It is your job to change to Razor syntax; I don't use it.
Hope that helps.
Doh... fixed - totally my own fault.
I had set up my html.dropdownlistfor like so
#Html.DropDownListFor(x=>x.Name,
When it should've been like so:
#Html.DropDownListFor(x=>x.DockTemplateColumn.Id,
Setting the first argument to x=>x.DockTemplateColumn.Id (which uniquely identifies the items in my list) instead of x.Name fixed the issue straight away.
Just thought I'd post it here in case someone else makes the same mistake I did.
edit
Found the answer here:
C# mvc 3 using selectlist with selected value in view