This is the code which I am using to bind Multiselect to listbox in javascript. I am not where I am missing, I am not receiving the typed text in ajax call to get values. The method gets called in the controller side and the string parameter which I have returns null.
Implemented based on URL: https://demos.telerik.com/kendo-ui/multiselect/addnewitem
$("#Tags").kendoMultiSelect({
placeholder: "Select your tags",
dataTextField: "Name",
dataValueField: "Id",
autoBind: false,
maxSelectedItems: 5,
minLength: 3,
delay: 2000,
//filter: "startswith",
dataSource: {
transport: {
read: {
url: "/Support/Ticket/GetTags",
dataType: "json"
}
},
serverFiltering:true
}
});
Controller
public JsonResult GetTags(string text)
{
List<Tag> tags = _tagRepository.GetAll(text).ToList();
return Json(tags);
}
As mentioned here https://www.telerik.com/forums/server-filtering-not-working-as-expected#KXcqO6xHoE6NxGuL0T2ZoQ, I think you need to add return data option
$(document).ready(function () {
$("#products").kendoMultiSelect({
placeholder: "Select products...",
dataTextField: "ProductName",
dataValueField: "ProductID",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: {
url: "http://demos.kendoui.com/service/Northwind.svc/Products",
data: function () {
return {
text: $("#products").data('kendoMultiSelect').input.val()
};
}
}
}
}
});
});
Related
I have kendo dropdownlist on page which is fetching results from database as below. I also have a grid at the same page at same time which needs kendo dropdownlist value i.e the value from years dropdownlist but I am unable to get it at the same time.This is how I am following. Where I am doing wrong.
<script type="text/javascript">
var GridUrl;
$("#Years").kendoDropDownList({
dataTextField: "Name",
dataValueField: "Id",
dataSource: {
transport: {
read: {
dataType: "json",
url: "../../Service/GetYears"
}
}
}
});
$(document).ready(function () {
BindGridData();
GridUrl = '#Url.Action("Read", "Home")';
});
function BindGridData()
{
GridDataSource = new kendo.data.DataSource({
type: "aspnetmvc-ajax",
serverFiltering: true,
serverPaging: true,
serverSorting: true,
pageSize: 10,
transport: {
read: {
url: GridUrl,
data: { year: $('#Years').val() }
}
},
schema: {
data: "Data", total: "Total"
}
});
}
Changing line to this
year: $('#Years').data("kendoDropDownList").value()
should do a trick. You need to get instance of kendoDropDownListwidget in order to get its value. You need to do so, because kendoDropDownListwidget value is not saved directly into html element
First of all, you need to move the initialisation of the kendoDropDownList inside the document ready function. If you don't you may end up refering to elements that are not loaded (yet).
The second change that should be done is how you get the value from the kendoDropDownList. Usually, you should refer to the widget instead of the DOM element: $('#Years').data("kendoDropDownList").value()
Finally, you didn't mention how and when your grid was binded but you may want to refresh the grid data if the user change the dropdown value. If it's the case, you may want to use change event of the dropdown to refresh the grid data.
$(document).ready(function () {
$("#Years").kendoDropDownList({
dataTextField: "Name",
dataValueField: "Id",
dataSource: {
transport: {
read: {
dataType: "json",
url: "../../Service/GetYears"
}
}
},
change: function(e) {
$("#YourGrid").data("kendoGrid").dataSource.read();
}
});
BindGridData();
GridUrl = '#Url.Action("Read", "Home")';
});
function BindGridData() {
GridDataSource = new kendo.data.DataSource({
type: "aspnetmvc-ajax",
serverFiltering: true,
serverPaging: true,
serverSorting: true,
pageSize: 10,
transport: {
read: {
url: GridUrl,
data: { year: $('#Years').data("kendoDropDownList").value() }
}
},
schema: {
data: "Data", total: "Total"
}
});
}
I am using Kendo Grid and filterable mode row. One of the columns is using a kendoDatePicker.
I filter on server and my problem is, when I pick a value on the datePicker, filtering works fine, but when it shows the data, the value doesn't stay in filter input, it disappears.
I am using to set the DatePicker:
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "/kukatko/search",
dataType: "json",
cache: false
},
parameterMap: function (data, type) {
if (type == "read") {
var paramMap = kendo.data.transports.odata.parameterMap(data.filter);
return paramMap;
}
}
},
serverFiltering: true,
pageSize: 10
},
filterable: {
mode: "row"
},
sortable: true,
pageable: true,
reorderable: true,
columns: [{...(some other columns)...
}, {
field: "datumZalozenia",
title: "Dátum založenia",
width: "150px",
parseFormats: ["d.M.yyyy"],
format: "d.M.yyyy",
template: "#=kendo.toString(new Date(datumZalozenia), 'd')#",
filterable: {
cell: {
showOperators: false,
operator: "contains",
format: "{0:d.M.yyyy}",
template: function (args) {
args.element.kendoDatePicker({
format: "d.M.yyyy"
});
}
}
}
Here is an image of how it looks (before, select value and after):
I selected 15.7.2015 so filtering on server runs without any problems.
I have a simple Kendo UI Grid. The gird is in batch mode and works fine. I am using Web API to bind the actual CRUD methods.
I have to show hide the Toolbar Buttons conditionally. How and Where (which event) can I create this kind of functionality
For example:
If(user.Role.Permission == "Edit"){
//Show Edit Button else hide
}
Here is the Actual Kendo UI Grid Code
var baseUrl = "/api/TicketType";
var datatype = "json";
var contentType = "application/json";
var datasource = new kendo.data.DataSource({
serverPaging: true,
pageSize: 10,
autoSync: false,
batch: true,
transport: {
read: {
url: baseUrl,
dataType: datatype,
contentType: contentType
},
create: {
url: baseUrl,
dataType: datatype,
contentType: contentType,
type: "POST"
},
update: {
url: baseUrl,
dataType: datatype,
contentType: contentType,
type: "PUT"
},
parameterMap: function (data, operation) {
if (operation !== "read" && data.models) {
return kendo.stringify(data.models);
}
else {
return {
take: data.take,
skip: data.skip,
pageSize: data.pageSize,
page: data.page
}
}
}
},
schema: {
data: "data.$values",
total: "recordCount",
model: {
id: "TypeID",
fields: {
TypeID: { editable: false, type: "number" },
TypeCode: { editable: true, nullable: false, validation: { required: true } },
Description: { editable: true, nullable: false, validation: { required: true } }
}
}
}
});
$("#Grid").kendoGrid({
dataSource: datasource,
toolbar: [
{name: "create", text: "Add New Record"},
{ name: "save", text: "Save Changes" },
{ name: "cancel", text: "Cancel Changes" },
],
columns:
[
{ field: "TypeID", width: 50, title: "ID"},
{ field: "TypeCode", width: 150, title: "Code"},
{ field: "TypeDescription", width: 200, title: "Description"}
]
})
datasource.read(); // This will bind to the grid.
});
Please try with the below code snippet.
$(document).ready(function () {
hidetoolbar();
});
function onDataBound(arg) {
hidetoolbar();
}
function onDataBinding(arg) {
hidetoolbar();
}
function hidetoolbar(){
If(user.Role.Permission != "Edit"){
$("#Grid .k-add").parent().hide();
$("#Grid .k-update").parent().hide();
$("#Grid .k-cancel").parent().hide();
//OR
$("#Grid .k-add").parent().remove();
$("#Grid .k-update").parent().remove();
$("#Grid .k-cancel").parent().remove();
}
}
$("#Grid").kendoGrid({
dataSource: datasource,
dataBound: onDataBound, // Added
dataBinding: onDataBinding, //Added
toolbar: [
{name: "create", text: "Add New Record"},
{ name: "save", text: "Save Changes" },
{ name: "cancel", text: "Cancel Changes" },
],
columns:
[
{ field: "TypeID", width: 50, title: "ID"},
{ field: "TypeCode", width: 150, title: "Code"},
{ field: "TypeDescription", width: 200, title: "Description"}
]
});
If you want to show or hide the toolbar button, you will need to implement the logic in the Databound event of the Grid.
Please see the below example:
JSBin Databound example
Note: Your question is a duplicate of Make Command Button invisible in Kendo Grid.
So im currently using 2 dropdownlists where the second should get items from the server according to the selected item from the first one, the problem is that this only works the first timei click on the child droplist, which means if i change the parent list item the child one will still show the previous items.
Here's some code:
kendofi=function (index){
//kendofi select boxes
$("#dynamicFormLinha"+index).kendoDropDownList({
name:"formularios",
optionLabel: "Formulario",
dataTextField: "name",
dataValueField: "id",
dataSource: {
type: "json",
serverFiltering: true,
transport: {
read: "${pageContext.request.contextPath}" + "/newlayout/mySearchesDynForms.do"
},
schema: {
model: {
fields: {
id: { type: "number" },
name: { type: "string" }
}
}
}
}
}).data("kendoDropDownList");
$("#campoFormLinha"+index).kendoDropDownList({
autoBind:false,
name:"campos",
optionLabel: "Campo",
dataTextField: "name",
dataValueField: "id",
dataSource: {
type: "json",
serverFiltering:true,
transport: {
read:{
url:"${pageContext.request.contextPath}" + "/newlayout/mySearchesFormFieds.do",
data:function(){
return {formId: $("#dynamicFormLinha"+index).val()
};
}
}
}
},
cascadeFrom: "dynamicFormLinha1",
schema: {
model: {
fields: {
id: { type: "number" },
name: { type: "string" }
}
}
}
}).data("kendoDropDownList");
And here's the java spring controller class methods for each dropdownlist:
#RequestMapping(method = RequestMethod.GET, value="/newlayout/mySearchesDynForms")
public #ResponseBody
DynamicFormTemplateDPO[] getForms(){
return dynamicFormService.getAllActiveFormTemplatesForPresentation();
}
#RequestMapping(method = RequestMethod.GET, value="/newlayout/mySearchesFormFieds")
public #ResponseBody
DynamicFieldTemplateDPO[] getFormFields(#RequestParam long formId){
return dynamicFormService.getFormFields(formId);
}
These all return json data, the parent child returns this:
[{"id":1,"name":"drcie"},{"id":2,"name":"edp"},{"id":3,"name":"pt"}]
And the id selected is then used as the formId parameter in the getFormFields method, which returns something like this:
[{"id":1,"name":"Nome","type":"STRING"},{"id":2,"name":"Morada","type":"STRING"},{"id":3,"name":"Contribuinte","type":"STRING"},{"id":4,"name":"Multibanco","type":"STRING"}]
The kendofi method here is because these widgets are inside a table and you can add new table rows while maintaining the widgets functionality.
I had the same problem. We managed to solve this by putting the parent and children dropdownlists in one function. See buildLookupDropDownList() function below. Looks like in our situation the children dropdownlists were being called before the parent. Best of luck
var categories
function buildLookupDropDownList() {
categories = $("#LOOKUP_OBJECT_ID").kendoDropDownList({
optionLabel: "#Resources.Global.Builder_Parameter_SelLookup",
dataTextField: "OBJECT_NAME",
dataValueField: "OBJECT_ID",
dataSource: lookupDS,
}).data("kendoDropDownList");
var products = $("#DISPLAY_FIELD").kendoDropDownList({
autoBind: false,
cascadeFrom: "LOOKUP_OBJECT_ID",
optionLabel: "#Resources.Global.Builder_Parameter_SelDisplay",
dataTextField: "DISPLAY_LABEL",
dataValueField: "FIELD_NAME",
dataSource: {
serverFiltering: true,
transport: {
read:
{
url: '#Url.Action("GetFields", "Object")',
type: "GET",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: function () {
var lookuplist = $("#LOOKUP_OBJECT_ID").data("kendoDropDownList");
return { OBJECT_ID: lookuplist.value() };
}
}
},
schema: {
data: function (data) { //specify the array that contains the data
return data.data || data;
}
}
}
}).data("kendoDropDownList");
var orders = $("#VALUE_FIELD").kendoDropDownList({
autoBind: false,
cascadeFrom: "DISPLAY_FIELD",
optionLabel: "#Resources.Global.Builder_Parameter_SelValue",
dataTextField: "DISPLAY_LABEL",
dataValueField: "FIELD_NAME",
dataSource: {
serverFiltering: true,
transport: {
read:
{
url: '#Url.Action("GetFields", "Object")',
type: "GET",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: function () {
var lookuplist = $("#LOOKUP_OBJECT_ID").data("kendoDropDownList");
return { OBJECT_ID: lookuplist.value() };
}
}
},
schema: {
data: function (data) { //specify the array that contains the data
return data.data || data;
}
}
}
}).data("kendoDropDownList");
}
I cannot get Kendo Grid to populate from server side data.
I have a grid builder function as as follows:
var build = function (carrier, date) {
var urlBase = 'my base url';
var datasource = new kendo.data.DataSource({
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
schema: {
model: {
id: 'Id',
fields: {
StatementDate: { type: "string", editable: false },
CobDate: { type: "string", editable: false },
//lots more fields
Status: { type: "string", editable: false },
Matched: { type: "boolean", editable: true }
}
}
},
transport: {
read: function (options) {
var address = urlBase + '/' + carrier + '/' + date;
$.ajax({
url: address,
type: "POST",
data: JSON.stringify(options.data),
contentType: "application/json",
success: function (result) {
options.success(result);
},
error: function (result) {
options.error(result);
}
});
},
//update function omitted
parameterMap: function (data, operation) {
if (operation == "read") {
return JSON.stringify(data)
}
},
change: function (e) {
var data = this.data();
console.log(data.length); // displays "77"
}
}
});
return datasource;
};
return {
build: build
}
Grid Definition
elem.kendoGrid({
columns: [
{ field: "StatementDate", title: "State Date", width: 125 },
{ field: "CobDate", title: "COB Date", width: 100 },
//lots more fields
{ command: ["edit"], title: " ", width: "85px"}],
resizable: true,
sortable: true,
editable: "inline",
columnMenu: true,
filterable: true,
reorderable: true,
pageable: true,
selectable: "multiple",
change: this.onSelectedRecordChanged,
toolbar: kendo.template($('#' + templateName).html()),
scrollable: {
virtual: true
},
height: 800
});
I trigger the update via a button click. When I look at the response I see the data. Looks good but the grid will not show the data. It has previously worked fine when data was completely client side.
If I break point on the AJAX call back. I see the correct results.
The grid is bound with data bind. The datasource is a property on a viewmodel.
<div id="grid" data-bind="source: dataSource"></div>
At the start of the app. I create view model
var viewModel= kendo.observable(new GridViewModel(...
and bind
kendo.bind($('#grid'), viewModel);
If I look at the datasource attached to the grid, I see data for the page as expected
This has previously worked fine when data was client side.
I have tried using read() on datasource, and refresh() method on grid. Neither seems to work.
Example response content from server
{"Data":[{"Id": //lots more fields, 20 records],"Total":90375,"AggregateResults":null,"Errors":null}
Any help very much appreciated.
I found the cause in datasource schema missing
{ data: 'Data', total: 'Total' }