We Keep Coding

datatable adding a default query "_" for ajax request in server side processing

let draw; //Draw Variable For datatable
const policytable = $("#policyTable").DataTable({ //Initialising PolicyList Table
processing: true,
serverSide: true,
pagingType: "simple_numbers",
rowId: "_id",
ajax: {
url: `SomeURL`,
type: "GET",
datatype: "json",
data: function(d) {
draw = d.draw;
let requestBody = { from: d.start, size: d.length, activeStatus: true, sortBy: d.columns[d.order[0].column].name, orderBy: d.order[0].dir };
if (d.search.value) {
requestBody.keyword = d.search.value;
};
console.log("REQUEST BODY", requestBody);
return (requestBody);
},
crossDomain: true,
xhrFields: {
withCredentials: true
},
},
order: [1, "asc"],
columnDefs: [{
targets: 0,
orderable: false,
searchable: false,
width: "3%",
className: "select-checkbox",
checkboxes: {
selectRow: true
}
}],
select: {
style: "multi",
selector: "td:first-child"
},
columns: [{
defaultContent: "",
},
{
title: "Name",
name: "name",
data: "name"
},
});
Now The problem is that _ query that is being added for whatever reason as can be seen in image.While console for requestBody also does not show that particular parameter.I have also added an image with the console since I can't create a code snippet.I have gone through datatable official docs as well yet I cant find any explanation.I want to know what that "_" is and how can I avoid sending in as request query.

kendo ui Grid virtual scrolling - where is the scroll?

When using virtual scrolling kendo-ui grid there is no visible scroll.
I'm using virtual scrolling in manner to show some records from DataBase but I don't see any scroll in my grid and it displays just six first rows.
I can't understand where is my problem.
This is my code:
$("#cargoGrid").kendoGrid({
dataSource: {
serverPaging: true,
serverSorting: true,
pageSize: 20,
transport: {
read: {
url: "/frmPermission/api/readAllCargo",
type: "POST",
contentType: "application/json",
dataType: "json",
},
parameterMap: function (options) {
return JSON.stringify(options);
}
},
schema: {
data: "data",
total: "total",
model: {
fields: {
cargoId: {
type: "number"
},
title: {
type: "string"
},
}
}
},
},
scrollable: {
virtual: true
},
pageable: {
numeric: false,
previousNext: false,
messages: {
display: "تعداد {2} رکورد نمایش داده شده است",
empty: "اطلاعاتی برای نمایش وجود ندارد"
}
},
columns: [
{field: "cargoId", title: "Id", hidden: true},
{field: "title", title: "نوع بار"},
{
filed: "",
title: "انتخاب",
template: "<button class='select k-button' onclick=\"clickSelectCargo( #=cargoId# , '#=title#' )\">انتخاب</button>",
width: "200px"
}
],
selectable: "single",
// sortable: true
});
I found when I use "sortable: true," and I clicked on header column it worked but before click dosen't display Virtual scrolling

scrollable: {
endless: true
},

Selected kendo Dropdownlist value getting reset to previous selected value while performing batch operation in kendo ui grid

I have a kendo ui grid and I am doing batch operation on it. In one of the columns I populating data in kendo dropdownlist. While editing when I change value of that dropdown, it is getting changed at the moment but when I click outside of the row, old value comes back. How to keep teh selected value in dropdown?
here is my code:
var rateScheduleItemGridDatasource = new kendo.data.DataSource({
transport: {
read: {
type: 'get',
url: config.apiServer + "api/RateSchedule/GetAllRateScheduleItems?rateScheduleId=" + selectedRateScheduleId,
dataType: "json"
},
destroy: {
type: 'delete',
url: function (options) {
$.ajax({
url: config.apiServer + "api/RateSchedule/DeleteRateScheduleItem?rateScheduleItemId=" + options.RateScheduleItemId,
type: 'delete',
data: ko.toJSON(options),
contentType: "application/json",
success: function (data) {
popupNotification.show(updateSuccessMessage, "success");
rateScheduleItemGridDatasource.read();
},
error: function (jqXHR, textStatus, errorThrown) {
popupNotification.show(updateFailureMessage, "error");
}
});
},
dataType: "json",
contentType: "application/json"
}
},
pageSize: 10,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
serverGrouping: true,
serverAggregates: true,
batch: true,
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "RateScheduleItemId",
fields: {
RateScheduleItemId: { type: "number", editable: false, nullable: false },
RateScheduleId: { type: "number", editable: false, nullable: false, validation: { required: true } },
MathmetricalSymbolCode: { type: "number", nullable: true, editable: true, validation: { required: false } },
MathmetricalSymbolCodeValue: { type: "string", nullable: true, editable: true, validation: { required: false } },
MeasureTypeCode: { type: "number", nullable: true, editable: true, validation: { required: false } },
MeasureTypeCodeValue: { type: "string", nullable: true, editable: true, validation: { required: false } },
MultiplierRate: { type: "number", nullable: true, editable: true, validation: { required: false } },
RangeLowerNumber: { type: "number", nullable: true, editable: true, validation: { required: false } },
RangeUpperNumber: { type: "number", nullable: true, editable: true, validation: { required: false } },
RateTier: { type: "string", nullable: true, editable: false, validation: { required: false } }
}
}
}
});
$("#rateScheduleItemGrid")
.kendoGrid({
columns: [
{ "command": [{ name: "destroy", text: "&nbsp" }], "width": "60px" },
{ "title": "Rate Tier", "width": "100px", "field": "RateTier" },
{ "title": "Operand", "width": "100px", "field": "MathmetricalSymbolCode", "editor": rateScheduleItemOperandDropDownEditor, "template": "#= (MathmetricalSymbolCodeValue == null ) ? ' ' : MathmetricalSymbolCodeValue#" },
{ "title": "Range Type", "width": "100px", "field": "MeasureTypeCode", "editor": rateScheduleItemRangeTypeDropDownEditor, "template": "#= (MeasureTypeCodeValue == null) ? ' ' : MeasureTypeCodeValue#" },
{ "title": "Range (From)", "width": "100px", "field": "RangeLowerNumber" },
{ "title": "Range (to)", "width": "100px", "field": "RangeUpperNumber" },
{ "title": "Rate (Multiplier)", "width": "100px", "field": "MultiplierRate" }
],
toolbar: kendo.template($("#rateScheduleGridItemTemplate").html()),
resizable: true,
editable: true,
groupable: false,
filterable: true,
pageable: {
pageSize: 10,
pageSizes: [10, 50, 100, 150, 200, 250]
},
sortable: true,
height: 200,
dataSource: rateScheduleItemGridDatasource,
cancel: function (e) {
dirty = false;
},
save: function (e) {
dirty = false;
}
});
function rateScheduleItemOperandDropDownEditor(container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "ReferenceValue",
dataValueField: "ReferenceValueId",
dataSource: rateScheduleItemOperandReferenceData,
optionLabel: "Select Operand"
});
}
function rateScheduleItemRangeTypeDropDownEditor(container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "ReferenceValue",
dataValueField: "ReferenceValueId",
dataSource: rateScheduleItemRangeItemReferenceData,
optionLabel: "Select Range Type"
});
}

You are binding your columns to MathmetricalSymbolCode and MeasureTypeCode but you have based the templates on MathmetricalSymbolCodeValue and MeasureTypeCodeValue...BUT...you have nothing that actually sets the value of MathmetricalSymbolCodeValue and MeasureTypeCodeValue so they forever remain null.
When you make your selection in your dropdownlist, you are selecting the value for the "Code" fields not the "CodeValue" fields...the grid and dropdownlist have no idea that those are key-value pairs.
Here's an example with your setup(tweaked so I can run it without access to your data) where I have the Operand column working:
http://dojo.telerik.com/#Stephen/OCEpa
There are 2 important points:
using valuePrimitive: true on the DropDownList config, which is kind of required if the value is nullable(http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#configuration-valuePrimitive)
After selecting the value in the dropdownlist(which returns the ID) you need to map that ID to the text you want to display in the cell somehow. The Kendo Grid provides the values for this purpose(http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.values)
Another possible solution is instead of binding to the MathmetricalSymbolCode number field, bind the column to a complex object consisting of both the Code and the CodeValue fields with an appropriate column template...but that's more complicated(especially hooking up the dropdownlist) and I only do it when I have to.

Check only specific rows of kendo grid

I'm using a kendo grid on a edit modal. When the modal pops up i need to check the specific rows. this my kendo grid.
function LoadControllerGrid(list) {
var ListofrowIds = list
$("#controllerGrid1").kendoGrid({
dataSource: {
type: "json",
// contentType: "application/json; charset=utf-8",
transport: {
read: {
url: "#Html.Raw(Url.Action("GetControllerList", "Account"))",
type: "POST",
dataType: "json"
},
},
schema: {
model: {
id: "UserId",
fields: {
'Id': { type: "string" },
'Name': { type: "string" },
'Description': { type: "string" },
'URL': { type: "string" },
},
},
data: 'data',
total: 'TotalCount'
},
complete: function (jqXHR, textStatus) {
// HidePageLoader();
},
pageSize: 5,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
columnMenu: true
},
height: 300,
groupable: false,
sortable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: 5000
},
columns: [{ template: '<input type="checkbox" class="checkbox" />', width: "35px" },
{ field: "Description", title: "Actions" }, ]
});
}
I pass the ids of specific rows that need to be checked to the function. kendo grid above display the all the rows.how can i check the check boxes of those particular rows.

How to use date type field in kendo ui Javascript in MVC

I am create one sample application and use kendo-ui inline editing grid.
Problem is: not come date field value in action controller.
View page Code is:
<script type="text/javascript">
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("CriticalDateList", "Home"))",
type: "POST",
dataType: "json"
},
create: {
url: "#Html.Raw(Url.Action("InsertCriticalDate", "Home"))",
type: 'POST',
dataType: "json"
},
},
change: function (e) {
if (e.action == "itemchange") {
e.items[0].dirtyFields = e.items[0].dirtyFields || {};
e.items[0].dirtyFields[e.field] = true;
}
},
batch: true,
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id:"Id",
fields: {
Id: { editable: false},
Date: { editable: true, type: "date" },
}
}
},
error: function (e) {
//display_kendoui_grid_error(e);
this.cancelChanges();
},
pageSize:5,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: true,
height: 500,
toolbar: ["create"],
columns: [
{field: "Date", title: "Date", format: "{0:dd-MMM-yyyy hh:mm:ss tt}", parseFormats: ["yyyy-MM-dd'T'HH:mm:ss.zz"], width: "130px"},
{ command: ["edit", "destroy"], title: "Action", width: "250px" }],
editable: "inline"
});
Action Code is:
public ActionResult InsertCriticalDate(CriticalDateModels model)
{
return null;
}
output is.
And in my action i am getting different date.