Questions on Kendo UI for jQuery Forum

3 answers

1.5K+ views

Kendo Grid filter with autocomplete textbox with text and value in ASP.Net MVC

I'm trying to create a grid filter for my kendo grid, the column shows an ID value and I want the filter to search based on the text.
For example: Column has employee ID and I want to search the grid with employee name but employee name is not a column. (This is as per the requirement)
I've managed to make the autocomplete work and load the employee names but how to I get the employee ID and filter the grid?

@(Html.Kendo().Grid<abcModel>()

.Name("abc")

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => model.Id(i => i.id))

.Read(read => read.Action("Load", "abccontroller"))

.PageSize(100)

)

.Filterable(filter => filter.Enabled(true))

.Pageable(pager => pager.Enabled(true))

.Resizable(resize => resize.Columns(true))

.Columns(columns =>

{

columns.Bound(m => m.employeeID).Title("Employee Name").Filterable(f => f.UI("empFilter").Extra(false));

})

)

<script type="text/javascript">

function empFilter(element) {

element.kendoAutoComplete({

dataTextField: "Name",

dataValueField: "employeeID",

minLength: 3,

filter: "contains",

dataSource: {

serverFiltering: true,

serverSorting: true,

transport: {

read: "@Url.Action("Fetch", "abccontroller")",

type: "GET",

dataType: "json",

parameterMap: function (data, action) {

if (action === "read") {

return {

text: data.filter.filters[0].value

};

}

});

}

</script>

Grid

answered on 01 Mar 2018

3 answers

983 views

Pass additional parameters to Read ajax datasource

I would like to pass additional parameters from the page to the scheduler read via javascript. I have done this in the past with the kendo grid and this thread implies that the scheduler should work the same way https://www.telerik.com/forums/pass-additional-parameters-to-read-ajax-datasource-method---mvc but it isn't working for me.

I get the following error:

Compiler Error Message: CS1061: 'SchedulerAjaxDataSourceBuilder<CalendarItemGridItem>' does not contain a definition for 'Data' and no extension method 'Data' accepting a first argument of type 'SchedulerAjaxDataSourceBuilder<CalendarItemGridItem>' could be found (are you missing a using directive or an assembly reference?)

Source Error:
Line 42: m.RecurrenceId(f => f.RecurrenceId);

Line 43: })

Line 44: .Read("Schedule_Read", "Calendar").Data("getSchedulerData")

Line 45: .Create("Schedule_Create", "Calendar")

Line 46: .Destroy("Schedule_Destroy", "Calendar")

Scheduler

answered on 01 Mar 2018

3 answers

402 views

Server-side edit form generation and validation

Hi,

I'm currently trying to make the grid work with edit/create forms loaded from the server.
I have searched the documentation, and the forums but haven't been able to find the right way to do that.
I want to build and validate my forms server-side (using Symfony).
For now I only tried with the "editable" option set to "popup".

Here's what I'm trying to achieve :

When clicking on the edit button, make an AJAX request on a URL I have added to the grid configuration. The request will contain the ID (the value of the field name specified in dataSource.schema.id) of the row I'm editing. It would also be nice to be able to add some kind of loader class on the button and disable it while we wait for the response.
On the server, generate a form (pre-populated after fetching the object using its ID) and return the HTML in a JSON object.
In the "ajax.success" function, open the popup and fill it with the HTML we just got back from the server.
Change some values, submit the form to the server and validate the data on the server then do the same things we did at step 2 except this time the JSON object will also contain extra success/error messages.

Would there also be a way to do the same thing with the "editable" option set to "inline"?

Best regards.

Grid

answered on 01 Mar 2018

3 answers

184 views

Set height in % cause an issue

Hello! I've noticed that with last kendo release (2018.1.221.545) if I set the dialog height in % (not in pixels) the dialog window is displayed bad, here the dojo:

https://dojo.telerik.com/AFidU/2

I don't know if this behaviour is wanted, but all my dialogs in my application uses % for height, so cause me quite big issues.

Greetings and good work!

Dialog

answered on 28 Feb 2018

5 answers

215 views

MVC Kendo Treemap Tooltip

Hello,

does anybody know how to create a tooltip on hover for a Kendo treemap? Something like this but for ASP.NET MVC:

http://docs.telerik.com/kendo-ui/controls/charts/treemap/how-to/show-treemap-tooltip

I already tried this, but when i move the mouse over the fields nothing appears..

$("#treemap").kendoTooltip({

filter: ".k-leaf,.k-treemap-title",

position: "top",

content: function (e) {

var treemap = $("#treemap").data("kendoTreeMap");

var item = treemap.dataItem(e.target.closest(".k-treemap-tile"));

return item.name + ": " + item.value;

}

});

When i use the jquery function i can write the right values of each Treemap fiel in the javascript console.

$("#treeMap").on("mouseenter", ".k-leaf", function () {

var item = $("#treeMap").data("kendoTreeMap").dataItem($(this).closest(".k-treemap-tile"));

var text = "Name: " + item.Name + " Value: " + item.Value;

console.log(text);

Thanks,

Stefan

Charts

answered on 28 Feb 2018

1 answer

3.3K+ views

Drop Down Editor

Hi There,

I'm trying to get the ProductName from 'edit' from on click event and I want to take that pass it as a parameter to my controller, however,

it looks like the drop-down editor function is being executed first before the 'edit' click event. So if you try and run the code below, it will not pick up any value when edit command is clicked. Basically, I want to do a query using the ProductName before populating my drop-down list.

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css"/>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
</head>
<body>

<script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
<div id="example">
<div id="grid"></div>

<script>
var cat = '';
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
pageSize: 20,
data: products,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} },
UnitPrice: { type: "number", validation: { required: true, min: 1} }
}
}
}
});

$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{ field:"ProductName",title:"Product Name" },
{ field: "Category", title: "Category", width: "180px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
{ field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "130px" },
{ command: "edit", title: " ", width: "150px" }],
editable: "inline",
edit: function(e) {
var model = e.model; //reference to the model that is about the be edited
cat = model.ProductName;
alert(cat);
cat = model.ProductName;
var container = e.container; //reference to the editor container

var categoryDropDownList = container.find("[data-role=dropdownlist]").data("kendoDropDownList"); //find widget element and then get the widget instance
// if DropDownListwidget is found
if (categoryDropDownList) {
//use DropDownList API based on the model values to accomplish your bussiness requirement.
//link: http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist
console.log("DropDownList", categoryDropDownList);
}

var priceNumericTextBox = container.find("[data-role=numerictextbox]").data("kendoNumericTextBox"); //find widget element and then the widget instance
if (priceNumericTextBox) {
//use NumericTextBox API
//link: http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox
console.log("NumericTextBox", priceNumericTextBox);
}
}
});
});

function categoryDropDownEditor(container, options) {
alert(cat);
$('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"

//url: "@Html.Raw(Url.Action("MyAction", "MyController", new {Id = Model, Cat = Cat }))",

}
}
});
}

</script>
</div>
</body>
</html>

DropDownList

answered on 28 Feb 2018

1 answer

409 views

Custom Filtering in MVC Grid

Hi,

I am having a requirement to add multiple filters in a column of grid i.e. By default we can add 2 filters but what I want is to increase it to 6 or more.

And also I want to know is there any limit for it i.e. we can add only n number of filters in a columns of grid.

If so, then what is the max limit for adding multiple filters for a single column using Kendo UI and also how to achieve this.

Requirement :-

What I actually want is a option to add multiple filters for a specific columns. When ever user clicks on the filter funnel he will be given with one or 2 filter criteria that he can choose and with a button or option to add more filters to the same column if he wants.

Please refer the below attached Image for more clarification.And let me know how I can achieve it using Kendo UI.

If this is not possible then any option that fulfils this requirement to add multiple filters will work for us.

Grid

answered on 27 Feb 2018

7 answers

4.2K+ views

Template error on undefined item.

I am having an issue with the template system

my datasource is volatile by design to allow for maximum flexibility. Everything works great except I have one problem. If an item is undefined it ceases to render any other items if a template is applied. I will use a grid object to explain.

$("#grid").kendoGrid({

dataSource: dataSource,

groupable: true,

sortable: true,

pageable: {

pageSizes: true

},

columns: [{

field: "FirstName",

title: "First Name"

}

,

{

field: "LastName",

title: "Last Name"

}

,

{

field: "City"

}

,

{

field: "Title"

}

,

{

field: "BirthDate",

title: "Birth Date",

template: '#: FormatDate(BirthDate,"dd MMMM yyyy") #'

}

,

{

field: "Age"

}

]

});

Incoming Data

[

{"FirstName":"John","LastName":"Smith","City":"Smalltown","Title":"AR","BirthDate":"1984-07-16T05:00:00Z","Age":28},

{"FirstName":"John","LastName":"Smith","City":"Smalltown","Title":"AR","BirthDate":"1984-07-16T05:00:00Z"},

{"FirstName":"John","LastName":"Smith","City":"Smalltown","Title":"AR"}

]

If the template is not set it works as expected non existing members are not shown and everything is hunky dory. But with the template an error gets thrown when it can find BirthDate and stops rendering the grid.

ReferenceError: BirthDate is not defined

kendo.all.js Line 281 : return new Function(argumentName, functionBody);

I've tried doing an if statement in the template to return null if the object is undefined but that didn't seem to make a difference.

Any thoughts on possible workarounds?

Templates

answered on 27 Feb 2018

1 answer

518 views

Grid rows vanish when exporting to PDF

I have a dynamically generated table that gets converted into a Kendo Grid. Whenever I try to export to a PDF the export works great but the grid rows disappear when it's done. Interestingly, if i remove the paperSize, the lines stay there but the template is lost. Here is my code:

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" />

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.blueopal.min.css" />

<script src="https://kendo.cdn.telerik.com/2017.1.118/js/jquery.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2018.1.221/js/pako_deflate.min.js"></script>

<%

var names = new List<string> {"Bubba", "Jane"};

%>

<table id="grid">

<thead>

<colgroup>

<col style="width:320px"/>

<col />

</colgroup>

<tr>

<th data-title="Name"></th>

<th data-title="Name 2"></th>

</tr>

</thead>

<tbody>

<%

foreach (var item in names)

{%>

<tr>

<td><%= item %></td>

</tr>

<%}

%>

</tbody>

</table>

<script type="x/kendo-template" id="page-template">

<div class="page-template">

<div class="header">

Details

</div>

<div class="footer">

Page #: pageNum # of #: totalPages #

</div>

</script>

<script>

$(document).ready(function () {

$("#grid").kendoGrid({

toolbar: ["pdf"],

pdf: {

allPages: true,

avoidLinks: true,

paperSize: "A4",

margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" },

landscape: true,

repeatHeaders: true,

template: $("#page-template").html(),

scale: 0.5

},

height: "auto",

sortable: true

});

</script>

Grid

answered on 27 Feb 2018

1 answer

237 views

Resizing Scrollable Menu

Does anyone know how to make the scrollable menu option work based on the size of the screen? I can get it to work if I explicitly set a width on my menu but I want the menu width to be based on the screen size. So if a user is viewing the menu full screen it wouldn't scroll because everything fits but if they shrink the window (or view it on a smaller screen) then it would scroll.

Menu

answered on 27 Feb 2018