I am using Kendo grid and want to validate one field's min value by another field from same record.
Meaning my data is like this :-
var courses = [{
CourseID : 1,
CourseName : "iPhone",
MinAge: 12,
MaxAge : 22,
MinAgeThreshold : 10,
MaxAgeThreshold : 30,
StartDate: "12/10/2014",
},
{
CourseID : 2,
CourseName : "Android",
MinAge: 12,
MaxAge : 22,
MinAgeThreshold : 10,
MaxAgeThreshold : 30,
StartDate: "12/10/2014",
}]
and I want to use MinAgeThreshold value in MinAge's validation min value, something like this:-
schema: {
model: {
id: "CourseID",
fields: {
CourseID: { editable: false, nullable: true },
StartDate: { editable: false, nullable: true },
CourseName: { editable: false, nullable: true },
MinAgeThreshold: { editable: false, nullable: true },
MinAge: { type: "number", validation: { required: true, min: MinAgeThreshold} },
MaxAge: { type: "number", validation: { required: true, min: 1} },
}
Is this possible somehow?
I tried to use in validation custom function like this
MinAge: {
type: "number",
validation: {
required: true,
minagevalidation: function (input) {
}
},
but I was not able to retrieve the values of MinAgeThreshold in minagevalidation function.
Any help would be greatly appreciated.
Regards
you can try something like given below to give the custom validation message and force the user to set value greater than the minimum value based on other input field in the same kendo grid.
MinAge: { type: "number",
validation: {
required: true,
MinAgevalidation: function (input) {
if(input.is("[name='MinAge']") &&(parseInt($("input[type='text'][name='MinAge']").val()) < parseInt($("input[type='text'][name='UnitPrice']").val()))){
input.attr("data-MinAgevalidation-msg", "MinAge should greater than MinAge threshold");
return false;
}
return true;
}
sample jsfiddle to set minimum value of one field based on other field's value .
I think I might have a solution for that kind of a problem. If you want to set the max of a field by the value of a different field you can add that to the grid edit method of your kendogrid.
var grid = $("#grid").kendoGrid({
edit: function(e){
if ( e.container.find("input[data-find='value:MinAge']).length != 0 ){
var numericTextBox = e.container.find("input[data-find='value:MinAge']).data("kendoNumericTextBox");
numericTextBox.min(e.model.MinAgeThreshold);
}
}
});
This will set the numerictTextBox of the MinAge input to min of the MinAgeThreshold that is in the dataItem of the row (model). That works with step, max, and so on as well. Edit is triggered when you enter the field. So if the initial value is 0 and your MinAgeThreshold is something else it will then switch to the MinAgeThreshold.
Related
Im sending my json data through controller like following:i have written the query here just to prevent making it complicated and messy :
My Controller Returning This:
public JsonResult powerConverter(string regionalManager)
foreach (DataRow dt in dt_power_conv.Rows)
{
_powerConv.turbineName.Add(dt["turbine_name"].ToString());
_powerConv.duration_hrs.Add(double.Parse(dt["duration_hrs"].ToString()));
_powerConv.abb_conv.Add(dt["abb_conv"].ToString());
_powerConv.eei_conv.Add(dt["eei_conv"].ToString());
_powerConv.leit_drive_conv.Add(dt["leit_drive_conv"].ToString());
}
return Json(_powerConv, JsonRequestBehavior.AllowGet);
}
in my view I get it with an Ajax call and simply bind my chart with it:
$.ajax({
dataType: "json",
type: "POST",
url: "#Url.Action("powerConverter","Ranking")",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ "regionalManager": tmpString }),
success: function (result) {
debugger;
$("#powerChart").kendoChart({
dataSource: {
data: result
},
chartArea: {
background: "#fcfcfc",
},
series: [{
axis: "l100km",
type: "column",
// name: "DURATION",
color: "#008080",
field: "duration_hrs",
categoryField: "turbineName"
},
],
categoryAxis: {
axisCrossingValue: [0, 20],
majorGridLines: {
visible: false
},
line: {
visible: true
},
labels: {
rotation: 340
},
},
tooltip: {
visible: true,
// majorUnit:10,
template: " #= value #"
},
});
}
});
I also posted the screen shot of my json,but still its not working,i set the categoryField and field with the exact name im getting from json but the chart shows nothing
It looks like the controller is returning two arrays, one for errorDuration and one for turbineName. Try changing the controller to return an array of objects.
You would want a review of returned json to show
[0] = { duration: 1, turbine: "a" }
[1] = { duration: 2, turbine: "b" }
[2] = { duration: 3, turbine: "c" }
In the chart the config settings for the series the field names have to match exactly the property names of the data elements, thus
field: "duration",
categoryField: "turbine",
Added
The controller code appears to be populating a list of a model class whose fields are also lists. Try updating it to return the Json for a list of objects
For quickness this example shows how using anonymous objects. Strongly typed objects are highly recommended for robustness and Visual Studio intellisense. The field names that you use in your kendo chart configuration will be "turbine_name" and "duration_hours"
// This technique copied from #Paul Rouleau answer to
// https://stackoverflow.com/questions/612689/a-generic-list-of-anonymous-class
// initialize an empty list that will contain objects having two fields
var dataForJson = new List<Tuple<string, double>>()
.Select(t => new {
turbine_name = t.Item1,
duration_hours = t.Item2 }
).ToList();
// go through data table and move data into the list
foreach (DataRow row in myDataTable.Rows)
{
dataForJson.Add (new {
turbine_name = (string)row["turbine_name"],
duration_hours = (double)row["duration_hours"]
});
}
return Json(dataForJson, JsonRequestBehavior.AllowGet);
Note, if you do further research you will find numerous other ways to convert a data table into a Json
I want to add a column which will contain summation of some columns.
Basically I want to convert following:
to the following:
But this has to be done dynamically i.e. I shall provide colModel id of th e columns I want the summation of.
P.S. Using 4.13.5 version of free-jqgrid.
The most easy way to implement your requirements would be the usage of jsonmap and sorttype defined as function, which returns the calculated value of the column. Additionally you would need to implement afterSetRow callback, which fixes the value after modification the row (after setRowData).
The corresponding implementation could be like in the demo. The demo defines the grid with total column, which displays the sum of amount and tax columns. The code of the demo looks as following:
var calculateTotal = function (item) {
return parseFloat(item.amount) + parseFloat(item.tax);
};
$("#list").jqGrid({
...
colModel: [
...
{ name: "amount", template: "number", ... },
{ name: "tax", template: "number", ... },
{ name: "total", width: 76, template: "number", editable: false,
jsonmap: function (item) {
return calculateTotal(item);
},
sorttype: function (cellValue, item) {
return calculateTotal(item);
}},
...
],
afterSetRow: function (options) {
var item = options.inputData;
if (item.total === undefined) {
// test is required to prevent recursion
$(this).jqGrid("setRowData", options.rowid, {
total: calculateTotal(item)
});
}
}
...
});
Used Kendo Version: 2015.2.624
I have implemented kendogrid server side paging with additional parameters. Below is how my controller looks like:
public ActionResult GetData([DataSourceRequest] DataSourceRequest request, DateTime startDate, DateTime endDate, int state = -1, string poolName = null, string submitter = null)
{
poolName = string.IsNullOrEmpty(poolName) ? null : poolName;
submitter = string.IsNullOrEmpty(submitter) ? null : submitter;
var summarylist = new List<Summary>();
var total = 0;
using (var db = new SummaryEntities())
{
var jobs = db.SummaryTable.Where(k => k.created >= startDate && k.created <= endDate)
.Where(k => state != -1 ? k.state == state : k.state > state)
.Where(k => poolName != null ? k.pool_name == poolName : k.pool_name != null)
.Where(k => submitter != null ? k.submitter == submitter : k.submitter != null);
jobs = jobs.OrderByDescending(job => job.id);
total = jobs.Count();
// Apply paging...
if (request.Page > 0)
{
jobs = jobs.Skip((request.Page - 1) * request.PageSize);
}
jobs = jobs.Take(request.PageSize);
foreach (var job in jobs)
{
summarylist.Add(new Summary(job));
}
}
var result = new DataSourceResult()
{
Data = summarylist,
Total = total
};
return Json(result, JsonRequestBehavior.AllowGet);
}
additional parameters are the current values which the user has set over the widget datepicker, input box etc.
Below is how my datasource looks like in grid:
<script type="text/javascript">
j$ = jQuery.noConflict();
j$(document).ready(function () {
j$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "/Home/GetData/",
dataType: "json",
data: {
startDate: j$("#startdate").val(),
endDate: j$("#enddate").val()
}
}
},
pageSize: 30,
serverPaging: true,
schema: {
data: 'Data',
total: 'Total'
}
},
height: j$(window).height() - 85,
groupable: true,
sortable: true,
filterable: false,
columnMenu: true,
pageable: true,
columns: [
{ field: "JobId", title: "Job Id", template: '#:JobId#', type: "number" },
{ field: "Name", title: "Job Name", hidden: true },
{ field: "PoolName", title: "Pool Name" },
{ title: "Date Time", columns: [{ field: "Start", title: "Start" },
{ field: "End", title: "End" }
],
headerAttributes: {
"class": "table-header-cell",
style: "text-align: center"
}
},
{ field: "State", title: "State" },
{
title: "Result", columns: [{ field: "ResultPassed", title: "P" },
{ field: "ResultFailed", title: "F" }
],
headerAttributes: {
"class": "table-header-cell",
style: "text-align: center"
}
},
{ field: "Submitter", title: "Submitter" }
]
});
});
</script>
It works pretty good until I observed this issue:
Change the filter values i.e submitter, date range etc and
controller gets all this information in additional parameters where
I am taking action accordingly and it works just fine.
Now suppose the result returned from step 1 has multiple pages and
when you click next page, or last page or any other page number, the
controller gets invoked which is expected but the additional
parameters being set in step 1 is not getting passed again instead
the default values are there which is ruining everything.
Correction:
Additional parameters are getting lost at client side only.
Now please tell me what am I missing here?
Expected Result: In step 2 additional parameters should not get lost and it should be same as step 1.
Any help is appreciated.
EDITED:
Complete controller and grid code.
Thanks,
Vineet
I got the solution from telerik support team:
Reply:
The described undesired behavior can be caused by the fact that the additional parameters:
data: {
startDate: j$("#startdate").val(),
endDate: j$("#enddate").val()
}
... are set to objects, instead of a functions. If they are set as functions, the values of the corresponding inputs will be evaluated every time read() is called, and the current values will be passed (like shown in the second example in the API reference):
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.read.data
I am using datatables with server side processing. It sends all parameters to the server for even a basic operation like column sorting. How to prevent it, any idea? Here is the ajax get parameters that are passed as query string.
columns[0][data] 0
columns[0][name]
columns[0][orderable] true
columns[0][search][regex] false
columns[0][search][value]
columns[0][searchable] true
columns[1][data] 1
columns[1][name]
columns[1][orderable] true
columns[1][search][regex] false
columns[1][search][value]
columns[1][searchable] true
columns[2][data] 2
columns[2][name]
columns[2][orderable] true
columns[2][search][regex] false
columns[2][search][value]
columns[2][searchable] true
draw 2
length 10
order[0][column] 1
order[0][dir] asc
search[regex] false
search[value]
start 0
Here is the datatable initialization javascript code,
$(selector).dataTable({
"processing": true,
"serverSide": true,
"ajax": url,
"autoWidth": false,
"aoColumnDefs":[
{
'aTargets': 0,
'bSortable': true
},
{
'aTargets': 1,
'bSortable': true,
'mRender': function (link) {
return '' + link + '';
}
},
{
'aTargets': 2,
'bSortable': true,
'mRender': function (link) {
return '' + link + '';
}
}
]
});
Like this?
$(selector).dataTable({
"processing": true,
"serverSide": true,
"ajax": url,
"autoWidth": false,
"aoColumnDefs":[{
'aTargets': 0,
'bSortable': true
}, {
'aTargets': 1,
'bSortable': true,
'mRender': function (link) {
return '' + link + '';
}
}, {
'aTargets': 2,
'bSortable': true,
'mRender': function (link) {
return '' + link + '';
}
}],
fnServerParams: function(query_strings) {
query_string.splice(0);
/*
query_strings is an Array of Objects like this
[{name: 'query_string1', value: 'query_string1_value'},
{name: 'query_string2', value: 'query_string2_value'},
{name: 'query_string3', value: 'query_string3_value'}]
As you can see, the 'name' and 'value' represents the query string's key/value pair.
If you want to add another one you need to add another object:
query_string.push({
name: 'page',
// To get the page number you are going to
value: $(selector).dataTable().api().page.info().page
});
*/
}
});
I can submit my form whether it is blank or partially filled in, this shouldn't happen since I'm using the jquery validator plug in. I have the plug in script in the right place and the validate method is properly attached to the right form selector. What else could be the problem?
$("form").submit(function(){
(".selector").validate({
rules: {
performance : {
required: true,
customvalidation: true
},
location : {
required: true,
customvalidation: true
},
date : {
required: true,
customvalidation: false
},
time : {
required: true,
customvalidation: true
},
guests : {
required: true,
customvalidation: true
},
price : {
required: true,
customvalidation: true
}
},
messages: {
performance : {
required: "enter a show name"
},
location : {
required: "enter a location"
},
date : {
required: "pick a date"
},
time : {
required: "give a time"
},
guests : {
required: "how many people do you need?"
},
price : {
required: "what is the cover price?"
}
},
submitHandler: function(form) {
console.log("now validated");
}
}); //closes validate
$.validator.addMethod("customvalidation",
function(value, element) {
return (/^[A-Za-z\d=#$%#_ \-]+$/.test(value));
},
"Sorry, no special characters allowed"
);
var date = $("#date").val();
var showName = $("#performance").val();
var venue = $("#location").val();
var time = $("#time").val();
var guests = $("#guests").val();
var price = $("#price").val();
//this is where I submit to my database//
});//closes submit
Modify your submit function to run event.preventDefault() if validation fails.
Normally you can use return false, but since you've added this event using a jQuery event, you have to use event.preventDefault() instead as discussed here at stackoverflow.