Questions on Kendo UI for jQuery Forum

4 answers

811 views

Maybe this has been asked but I'm having trouble finding it. I already have a filter and I don't need a comma delimited filter. I want to search multiple "Strings" under the same filter. If the filter is say "DOGS", then I want to search multiple "types" of dogs under that filter, comma d,e,l,i,m,i,t,e,d.

Filter: [dogs]

Search String: "pugs, dachsunds, chahuahua, beagle"

Row Return:

1.) pugs

2.) dachsunds

3.) custom row (message:'no chahuahuas found')
4.) beagle

I can do the query on each value of the split(",") just fine but I need to return a row for each. So I need to search on one string, then search on another without clearing the previous row. This would produce the desired effect.

Thanks for any help. Below is some more context:

CURRENT SEARCH FUNCTION:

// Get Selected FilterType

function getSelectedFilters(){
return angular.element('.selected-filter').find(".selected").attr("filter-value");
}

//Search based on dynamic filter - onkeyup
angular.element('#SearchBox').keyup(function (e){
let searchString = e.target.value;
let filterType = getSelectedFilters();
angular.element('#Grid').data('kendoGrid').dataSource.query({
page:1, pageSize:20,
filter:{
logic:"or",
filters:[
{field:filterType, operator:"contains",value:searchString}
]
}
});

------------------------------------

where i need to be:

....each( stringArr, function( i, val ) {

angular.element('#Grid').data('kendoGrid').dataSource.query({
page:1, pageSize:20, filter:{
logic:"or",
filters:[
{field:filterType, operator:"contains",value:val[i]} ...

... (return row on first [i], then an additional row on [i++], etc ) ...

Grid

answered on 15 Mar 2016

5 answers

360 views

Kendo 2016.1.226 with Angular 1.5

I'm trying to update our Angular version from 1.3.18 to 1.5. In general my application seems fine, but I'm getting an error;

Cannot read property 'off'

In Kendo.all.js it looks like it's around line 29527, in;

destroy: function () {
var that = this;
Select.fn.destroy.call(that);
that.wrapper.off(ns);
that.element.off(ns);
that._inputWrapper.off(ns);
that._arrow.off();
that._arrow = null;
that.optionLabel.off();
},

General Discussions

answered on 15 Mar 2016

2 answers

883 views

Filtering from controller

I have a situation where I want to allow a grid to be "pre-filtered" based on an optional value passed into the query string. I found an example, but it is only partially working. The code that applies the filter is below. It works in that the grid only shows the appropriate records. However, it works different than a user applied filter. The filter icon in the column header is not highlighted. And when I click the filter icon, neither the filter operator or filter text appears in filter popup. Is there a way to make it work like a user applied filter so the user can change or clear it?

var f = new Kendo.Mvc.FilterDescriptor("OfficeDesc", Kendo.Mvc.FilterOperator.IsEqualTo, pOfficeDesc);

request.Filters.Add(f);

Thanks,

Ray

Grid

answered on 15 Mar 2016

4 answers

363 views

Can't get custom shapes in diagram visualTemplate: "e.drawingContainer is not a function"

I'm trying to get a very simple diagram, with a custom visual for items. I have followed the examples and came up with this snippet: http://dojo.telerik.com/EYaCe/8

The diagram shows nothing, and looking at the console I see an error "e.drawingContainer is not a function" at kendo.min.ui.js.

Is this a bug, or am I doing something wrong? Replacing "Shape" with "Rectangle" or "Circle" works, but doesn't allow me to set a custom SVG path, obviously.

I also attach the code here, for reference:

<div id="diagram"></div>

<script>

$("#diagram").kendoDiagram({

dataSource: [

{id: 1, name: "Item 1"},

{id: 2, name: "Item 2"}

],

shapeDefaults: {

visual: visualTemplate

}

});

function visualTemplate(options) {

return new kendo.dataviz.diagram.Shape({

path: "M 70 0 L 140 30 L 70 60 L 0 30 z",

width: 140,

height: 60,

fill: "red",

stroke: {

width: 1,

color: "black"

}

});

}

</script>

Diagram

answered on 15 Mar 2016

2 answers

126 views

[Solved] Get datasource iterration object

Hi,

I'm using databinding on a line chart. I want to display multiple serie so i write this code :

this.ChartBuilder = htmlHelper.Kendo().Chart<SerieValueViewModel>()

.Name(Guid.NewGuid().ToString())

.Title(this.Name)

.DataSource(dataSource =>

{

dataSource.Read(read => read

.Action(this.DataSourceViewModel.View,this.DataSourceViewModel.Action))

.Group(group => group.Add(m => m.Symbol))

.Sort(s => s.Add(m => m.Date).Ascending());

})

.Series(series =>

{

series.Line(v => v.Value, v => v.Date)

.Name("#= group.value #")

.Aggregate(this.CategoryAxisViewModel.Aggregation)

.Stack(false)

.Markers(m => m.Visible(true).Size(3));

});

}

Now, i want to display a color to my serie. But this color depend of my serie and i only have a list of value that i've grouped.

I tried to use a new object named SerieViewModel which contains List of SerieValueViewModel and a color and do something like this...

this.ChartBuilder = htmlHelper.Kendo().Chart<SerieViewModel>()

.Name(Guid.NewGuid().ToString())

.Title(this.Name)

.DataSource(dataSource =>

{

dataSource.Read(read => read

.Action(this.DataSourceViewModel.View,this.DataSourceViewModel.Action));

})

.Series(series =>

{

// I want to do something like this ...

// Get my serieViewModel which is iterate

var mySerie = iterateObject;

foreach(var valueViewModel in mySerie.ValueViewModelCollection)

{

series.Line(valueViewModel => valueViewModel.Value, valueViewModel => valueViewModel.Date)

.Name(mySerie.Name)

.Aggregate(this.CategoryAxisViewModel.Aggregation)

.Stack(false)

.Markers(m => m.Visible(true).Size(3))

.Color(mySerie.Color);

}

});

}

This is exactly what i need but i can't get my serieViewModel which is actually iterate, so i can't bind my values and use my color.

I want to use this reflection to put a "serieType" in my serieViewModel object too and construct charts with different series type like a chart with a line and an area.

There is a way to get my object which is iterate or get some of his properties ?

Thanks

Charts

answered on 15 Mar 2016

1 answer

609 views

PDF Drawing requires Dejavu font

I'm exporting HTML to PDF using the kendo.drawing.drawDOM function. It works well except it seems to require the DejaVu font, which I'm not using (I'm using my own fonts).

This leads to 404's in my production environment, where we do not have (or want) these fonts (css/fonts/DejaVu/DejaVuSerif.ttf). The export fails there.

Is there any way using the API to remove this dependency? I've been playing with the kendo.pdf.defineFont method, but I'm not sure if it can be uses to replace or remove Dejavu!

Drawing API

answered on 15 Mar 2016

3 answers

328 views

Validators and Bootstrap Integration

Hi there,

We are currently using Kendo controls with Bootstrap 3 vertical form layout. After following the integration guide, this is in general working very well.

However, we would like to take advantage of the bootstrap feedback and validation states and making them work with Kendo Validators. There is no mention of any integration regarding this in your documentation or from the demo page.

Is this possible? There doesn't seem to be many options for extending or changing validation behaviour from reading the Kendo Validator API documentation.

Thanks,

Paul

Validation

answered on 15 Mar 2016

1 answer

279 views

Remove not working in Async uploads

Hi, using an example from a different forum thread, I was able to use the async upload with a controller that saves the documents like so:

declaration:

$("#files").kendoUpload({
async: {
saveUrl: "api/document",
removeUrl: "api/destroyDocument",
autoUpload: true
}

})

Upload (in vb):

Public Async Function UploadDocument() As Task

Dim root As String = HttpContext.Current.Server.MapPath("~/App_Data")
Dim provider = New MultipartFormDataStreamProvider(root)

Try

Await Request.Content.ReadAsMultipartAsync(provider)

For Each file As System.Net.Http.MultipartFileData In provider.FileData
Dim fileInfo As FileInfo = New FileInfo(file.LocalFileName)
If System.IO.File.Exists(file.LocalFileName) Then
FileIO.FileSystem.RenameFile(file.LocalFileName, Replace(file.Headers.ContentDisposition.FileName, """", ""))
End If
Next

Catch ex As Exception

End Try

End Function

Which works fine. However, while I've declared the Remove function (based on the sample service example for the upload), it doesn't have any information in the files() even though the remove button properly hits the function:

Public Function RemoveDocument(ByVal fileNames As String()) As ActionResult

There's nothing in the fileNames variable and seemingly nothing in the Request.Content. How can I get the list of files I'm trying to delete?

Upload

answered on 15 Mar 2016

3 answers

363 views

[Solved] Adding multiple events in one go

I have a use case where I need to create multiple separate events when the user clicks 'save' to add a new event in the editor. My server-side is returning an array of events, but the scheduler only adds the first one. Is there a way I can get it to add all of them?

My current work-around is to call dataSource.read() when I detect that multiple events have been returned, but there is a noticeable delay between the first event and the result of dataSource.read() being displayed in the scheduler.

Cheers, Paul.

Scheduler

answered on 15 Mar 2016

1 answer

979 views

Grid SetOptions not working

I have the following grid configuration:

vm.gridData = new kendo.data.DataSource({

transport: {

read: function (o) {

$http.get(constants.getServiceUrl() + 'api/deficiencies')

.success(function (response) {

vm.activeCount = 0;

vm.completedCount = 0;

for (var i = 0; i < response.length; i++) {

response[i].active ? vm.activeCount += 1 : vm.completedCount += 1;

}

o.success(response);

})

.error(function (response) {

o.error(response);

showToast("Error getting deficiency list.");

});

}

},

pageSize: 15,

schema: {

model: {

fields: {

deficiencyNumber: { type: "string" },

location: { type: "string" },

deficiencyTypeDescription: { type: "string" },

description: { type: "string" },

dateIssued: { type: "date" },

dateCompleted: { type: "date" },

statusDescription: { type: "string" },

notes: { type: "string" },

municipality: { type: "string" },

owner: { type: "string" },

projectNumber: { type: "string" },

projectName: { type: "string" },

projectType: { type: "string" },

}

},

});

vm.gridOptions = {

columns: [

{ title: "Deficiency #", field: "deficiencyNumber", width: 200, filterable: { cell: { operator: "contains" } } },

{ title: "Location", field: "location", width: 200, filterable: { cell: { operator: "contains" } } },

{ title: "Deficiency Type", field: "deficiencyTypeDescription", width: 200, filterable: { multi: true } },

{ title: "Description", field: "description", width: 200, filterable: { cell: { operator: "contains" } } },

{ title: "Issued", field: "dateIssued", type: "date", format: "{0:dd-MMM-yyyy}" },

{ title: "Completed", field: "dateCompleted", type: "date", width: 200, filterable: { cell: { enabled: true } }, template: "#= (dateCompleted == null) ? ' ' : kendo.toString(dateCompleted, 'dd-MMM-yyyy') #" },

{ title: "Status", field: "statusDescription", width: 200, filterable: { multi: true } },

{ title: "Notes", field: "notes", filterable: { cell: { operator: "contains" } } },

{ title: "Municipality", field: "municipality", width: 200, filterable: { cell: { operator: "contains" } }, hidden: true },

{ title: "Owner", field: "owner", filterable: { multi: true }, hidden: true },

{ title: "Project", field: "projectNumber", width: 170, filterable: { cell: { operator: "contains" } }, hidden: true },

{ title: "Project Name", field: "projectName", filterable: { cell: { operator: "contains" } }, hidden: true },

{ title: "Project Type", field: "projectType", filterable: { multi: true }, hidden: true },

],

dataSource: vm.gridData,

dataBound: function (e) {

resizeGrid();

var grid = $("#deficiencyGrid").data("kendoGrid");

bestFitAllColumns(grid);

},

sortable: { mode: "multiple" },

pageable: {

pageSizes: [5, 10, 15, 25, 50]

},

groupable: true,

filterable: true,

columnMenu: true,

reorderable: true,

resizable: true,

navigatable: true,

selectable: "row",

height: "98%",

};

I am saving the grids state like so:

var grid = $("#deficiencyGrid").data("kendoGrid");

vm.grid.state = kendo.stringify(grid.getOptions());

This is sent to the api and then the user can click on a menu item to restore the state which runs:

var grid = $("#deficiencyGrid").data("kendoGrid");

grid.setOptions(JSON.parse(vm.gridViews[i].state));

The state string looks like so:

"{"prefix":"","name":"Grid","columns":[{"encoded":true,"title":"Deficiency #","field":"deficiencyNumber","width":122,"filterable":{"cell":{"operator":"contains"}},"template":"#: data.deficiencyNumber#","headerAttributes":{"id":"6e897ee7-a9ce-4882-b98c-ae84f7c71aaf"}},{"encoded":true,"title":"Location","field":"location","width":293,"filterable":{"cell":{"operator":"contains"}},"template":"#: data.location#","headerAttributes":{"id":"0358a298-c265-4193-bbe0-2dd0fdd7c0e4"}},{"encoded":true,"title":"Deficiency Type","field":"deficiencyTypeDescription","width":148,"filterable":{"multi":true},"template":"#: data.deficiencyTypeDescription#","headerAttributes":{"id":"b4ed7b70-03fa-403e-b24f-bdc3477f285e"}},{"encoded":true,"title":"Description","field":"description","width":390,"filterable":{"cell":{"operator":"contains"}},"template":"#: data.description#","headerAttributes":{"id":"92359d3b-0dc8-435d-b010-0909f3e5e91e"}},{"encoded":true,"title":"Issued","field":"dateIssued","type":"date","format":"{0:dd-MMM-yyyy}","headerAttributes":{"id":"3a082046-bf1b-4d0a-b971-b098a9141c84"},"width":101},{"encoded":true,"title":"Completed","field":"dateCompleted","type":"date","width":115,"filterable":{"cell":{"enabled":true}},"template":"#= (dateCompleted == null) ? ' ' : kendo.toString(dateCompleted, 'dd-MMM-yyyy') #","headerAttributes":{"id":"5744d970-93e3-4cd8-b956-61792a1f2a21"}},{"encoded":true,"title":"Status","field":"statusDescription","width":90,"filterable":{"multi":true},"template":"#: data.statusDescription#","headerAttributes":{"id":"d52ad07c-4c26-412c-a2bd-561c638aac80"}},{"encoded":true,"title":"Notes","field":"notes","filterable":{"cell":{"operator":"contains"}},"template":"#: data.notes#","headerAttributes":{"id":"baeb7e50-ccea-456e-a798-3ae89c677d4e"},"width":1550},{"encoded":true,"hidden":true,"title":"Municipality","field":"municipality","width":200,"filterable":{"cell":{"operator":"contains"}},"template":"#: data.municipality#","attributes":{"style":"display:none"},"footerAttributes":{"style":"display:none"},"headerAttributes":{"id":"deeacd36-e4d4-4ee5-8894-cdefa0fbe9bc","style":"display:none"}},{"encoded":true,"hidden":true,"title":"Owner","field":"owner","filterable":{"multi":true},"template":"#: data.owner#","attributes":{"style":"display:none"},"footerAttributes":{"style":"display:none"},"headerAttributes":{"id":"15b348a0-797d-481c-bafd-9b885194a0dd","style":"display:none"}},{"encoded":true,"hidden":true,"title":"Project","field":"projectNumber","width":170,"filterable":{"cell":{"operator":"contains"}},"template":"#: data.projectNumber#","attributes":{"style":"display:none"},"footerAttributes":{"style":"display:none"},"headerAttributes":{"id":"c19dd18f-5a50-4b60-b3fb-c1c2cf11dc28","style":"display:none"}},{"encoded":true,"hidden":true,"title":"Project Name","field":"projectName","filterable":{"cell":{"operator":"contains"}},"template":"#: data.projectName#","attributes":{"style":"display:none"},"footerAttributes":{"style":"display:none"},"headerAttributes":{"id":"b29717a2-1ea4-4c4f-b553-556791441708","style":"display:none"}},{"encoded":true,"hidden":true,"title":"Project Type","field":"projectType","filterable":{"multi":true},"template":"#: data.projectType#","attributes":{"style":"display:none"},"footerAttributes":{"style":"display:none"},"headerAttributes":{"id":"b478a1e6-5b29-4959-b638-6bdc74d5ffdf","style":"display:none"}}],"toolbar":null,"autoBind":true,"filterable":true,"scrollable":true,"sortable":{"mode":"multiple"},"selectable":"row","allowCopy":false,"navigatable":true,"pageable":{"pageSizes":[5,10,15,25,50]},"editable":false,"groupable":true,"rowTemplate":"","altRowTemplate":"","noRecords":false,"dataSource":{"data":null,"schema":{"model":{"fields":{"deficiencyNumber":{"type":"string"},"location":{"type":"string"},"deficiencyTypeDescription":{"type":"string"},"description":{"type":"string"},"dateIssued":{"type":"date"},"dateCompleted":{"type":"date"},"statusDescription":{"type":"string"},"notes":{"type":"string"},"municipality":{"type":"string"},"owner":{"type":"string"},"projectNumber":{"type":"string"},"projectName":{"type":"string"},"projectType":{"type":"string"}}}},"offlineStorage":null,"serverSorting":false,"serverPaging":false,"serverFiltering":false,"serverGrouping":false,"serverAggregates":false,"batch":false,"transport":{"dataSource":null},"select":null,"table":null,"page":1,"filter":{"filters":[{"value":"Out to Field","operator":"eq","field":"statusDescription"}],"logic":"or"},"pageSize":15,"group":[]},"height":"98%","resizable":true,"reorderable":true,"columnMenu":true,"detailTemplate":null,"columnResizeHandleWidth":3,"mobile":"","messages":{"editable":{"cancelDelete":"Cancel","confirmation":"Are you sure you want to delete this record?","confirmDelete":"Delete"},"commands":{"create":"Add new record","cancel":"Cancel changes","save":"Save changes","destroy":"Delete","edit":"Edit","update":"Update","canceledit":"Cancel","excel":"Export to Excel","pdf":"Export to PDF"},"noRecords":"No records available."},"excel":{"proxyURL":"","allPages":true,"filterable":true,"fileName":"Deficiencies.xlsx"},"pdf":{"fileName":"Deficiencies.pdf","proxyURL":"","paperSize":"auto","allPages":true,"landscape":true,"margin":{"left":".5in","right":".5in","top":".5in","bottom":".5in"},"title":null,"author":"PowerVu","subject":null,"keywords":null,"creator":"PowerVu","date":null}}"

In there is a filter. The grid doesnt change. I have tried with changing column order, which columns are visible but the grid never changes.

Grid

answered on 15 Mar 2016