Questions on Kendo UI for jQuery Forum

0 answers

115 views

What would be the easiest way to make the start and end have separate pickers for their date and time parts? I tried doing it in a template, but they just interfere with each other, since they were bound to the same property, so I don't think that's going to work out. My appointment models are already large, so I didn't want to add yet another property, but if that's the only way...

Scheduler

asked on 06 Jul 2015

2 answers

549 views

[Solved] Responsive Label Rotation

I updated to the 2015.2.624 version of Kendo MVC yesterday and I noticed that in all of the demos the category axis labels will now automatically rotate to a 45 degree angle when the browser window reaches a small enough size. I updated all of my references in my project and did some testing and noticed that none of my chart labels rotate. Am I missing something? Below is my code and I've tried with and without the following scripts:

$(window).resize(resizeCharts);
function resizeCharts() {
$("#TopCampaignsChart").data("kendoChart").resize();
}

Alternative:

$(window).on("resize", function () {
kendo.resize($(".chart-wrapper"));
});

<div class="chart-wrapper">
@(Html.Kendo().Chart(Model)
.Name("TopCampaignsChart")
.Title("Stats for your most successful campaigns")
.Theme("Silver")
.ChartArea(area => area.Background("transparent"))
.Legend(legend => legend
.Position(ChartLegendPosition.Right)
)
.Series(series =>
{
series.Column(model => model.OpenRate).Name("Open Rate");
series.Column(model => model.UniqueOpenRate).Name("Unique Open Rate");
series.Column(model => model.ClickRate).Name("Click Rate");
series.Column(model => model.UniqueClickRate).Name("Unique Click Rate");
})
.CategoryAxis(axis => axis
.Categories(model => model.CampaignName)
.Labels(labels => labels.Visible(true))
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis.Numeric()
.Labels(labels => labels.Format("{0:N0}%"))
.Line(line => line.Visible(false))
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0:N0}%")
)
.Events(events => events.AxisLabelClick("CampaignClick").SeriesClick("CampaignClick"))
)
</div>

Charts

answered on 06 Jul 2015

1 answer

125 views

Views and templates in Kendo SPA

Hi,

When working with Kendo SPA, what are the reasons(if any) for views in app to always include HTML content for them as part of Kendo templates?

- Following sample below:

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

<span>Hello World!</span>

</script>

<script>

var index = new kendo.View('index');

</script>

Is there any implication (maybe at DOM level) making more suitable to always include HTML view content within <script>?

Since it is possible to define views in my Kendo SPA app without making use of Kendo templates as follows...:

<div id="index">

<span>Hello World!</span>

</div>

<script>

var index = new kendo.View("#index");

</script>

...I was basically wondering about advantages/disadvantages from using one approach or another.

Thanks,
Walid

General Discussions

answered on 06 Jul 2015

13 answers

2.6K+ views

Error Handling

Hello,
I want to know how to manage errors from web service.
I have a response like this (my implementation is json format):

<Products>
<OperationTag>
   <ErrorCode>000001</ErrorCode>
</OperationTag>
<ProductsBag>
   <Product>
    <ID>001</ID>
   </Product>
   <Product>
    <ID>002</ID>
   </Product>
</ProductsBag>
</Products>

So, if ErrorCode has a value it was an error and ProductsBag will be empty.

Regards.

Grid

answered on 06 Jul 2015

5 answers

464 views

[kendo-angular] Bound value is reset after fetching datasource

Hi,

the issue is that initial value set in the controller is reset to default one after fetching data items.

Example:
http://dojo.telerik.com/eMepO/10

Is that by design?

Best regards,
Piotr

DropDownList

answered on 06 Jul 2015

5 answers

220 views

BringIntoView on page load

Hello,

I'm calling bringIntoView() once my diagram has been initialized, in order to fit the diagram into the space available.

I'm doing that by subscribing to the requestEnd event of the datasource, as below:

var datasource = new kendo.data.DataSource({

transport: {

read: {

url: "MyDataUrl",

type: "POST",

dataType: "json",

}

},

requestEnd: function(e) {

setTimeout(function() { ZoomToFit(); },200);

},

});

function ZoomToFit() {

var diagram = $("#myDiagram").getKendoDiagram();

diagram.bringIntoView(diagram.shapes);

}

I found that calling ZoomToFit() directly from the event was too quick, and would attempt to perform the action before the diagram had been initially displayed, so I used a timeout.

The problem I have is that in some cases, even with the timeout, the ZoomToFit() method is called before the diagram is initially displayed.

I therefore need a method of performing that initial bringIntoView() as soon as the diagram has been displayed. Is there a better event I should be using?

Note that calling bringIntoView() straight after initializing the diagram is also too early, it would seem. And I can't just extend the timeout, as this will be perceived as a jump, for users whose diagram does display quickly.

Thanks,

George

Diagram

answered on 06 Jul 2015

8 answers

424 views

[Solved] Drag'n'Drop duplicating elements

Hi,

I have a kendo-panelBar with this:

<kendo:panelBar-items>

<span class="shapeItem" data-role="draggable"

id="atv"> <kendo:panelBar-item text="Atividade"

imageUrl="${ atv }" />

</span>

</kendo:panelBar-items>

and down there, more with this:

$("#shapesPanelBar .shapeItem").kendoDraggable({

hint : function() {

return createElement();

}

});

$("#diagram").kendoDropTarget({

drop : function(e) {

var item, pos, transformed;

if (e.draggable.hint) {

item = e.draggable.hint.data("shape");

pos = e.draggable.hintOffset;

pos = new Point(pos.left, pos.top);

var transformed = diagram.documentToModel(pos);

item.x = transformed.x;

item.y = transformed.y;

diagram.addShape(item);

}

});

function createElement() {
        var dataviz = kendo.dataviz;
        var g = new dataviz.diagram.Group();
 
        g.append(new dataviz.diagram.Image(
                        {
                            source : 'data:image/svg+xml;base64,[...]',
                            width : 90,
                            height : 120
                        }));
 
        return g;
    }

But when i drag nothing happens and this error occurs on console browser:

Uncaught TypeError: Cannot read property 'ownerDocument' of undefined jquery.min.js:5

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

So, how i make a panel bar with elements and drag they to KendoDiagram ?

Diagram

answered on 06 Jul 2015

3 answers

307 views

set sort in ASP.Net Controller so it shows in Grid UI

I would like to set a default sort in my grid read action on the controller and have it show the arrow in the grid UI. The sort appears to be applied correctly, but it doesn't show the column as sorted in the grid UI after the read.

Right now I not doing anything special with the grid Razor and if possible i would rather not attach any grid events, but I will do it if there is no other way.

Controller:

public async Task<ActionResult> Grid_Read([DataSourceRequest] DataSourceRequest request)

{

IQueryable<GridItem> list = null;

try

{

if (GridItemHelper.CanView(this) == false)

{

ModelState.AddModelError("read", "You cannot list GridItem");

}

else

{

list = _Db.GridItem.Select(s=>s); //this gets me the iqueryable

}

catch (Exception exc)

{

ModelState.AddModelError("read", "There was an error populating the GridItem Grid. MSG:" + exc.ToLogString(this));

}

//set the default filters

if(request.Filters == null || request.Filters.Count == 0) //it is best practice to use the kendo filters so it shows up correctly in the UI

{

}

//set the default sort

if(request.Sorts == null || request.Sorts.Count == 0)

{

request.Sorts = new List<SortDescriptor

>() { new SortDescriptor("Id", System.ComponentModel.ListSortDirection.Descending) }; //sort by Id if there is no sort specified

}

var rList = list == null ? new List<GridItem

>().ToDataSourceResult(request, ModelState) :      list.ToDataSourceResult(request, ModelState); //by calling ToDataSourceResult from the IQueryable it will not pull everything down before filtering

var jsonResult = Json(rList);

jsonResult.MaxJsonLength = int.MaxValue;

return jsonResult;

}

Grid

answered on 06 Jul 2015

2 answers

186 views

Show/hide label/<p> depending on upload state

Hello all

I have the following partial view that I use to display various uploads on a websites.

<div class="formEditorFor">

@{ Html.RenderPartial("_Upload", Model.Upload.Where(p => p.RelatedQuestion.Contains("Question1")), new ViewDataDictionary { { "RelatedQuestion", "Question1" }, { "SupplierId", Model.EmploymentFreedomDiscrimination.SupplierId } }); }

</div>

@model IEnumerable<Valpak.Websites.Sancroft.Ethical.Models.UploadInitialFile>

<div style="width:100%">

<div>

@(Html.Kendo().Upload()

.Name(ViewData["RelatedQuestion"].ToString())

.Async(a => a

.Save("SaveAndPersist", "Upload",

new { relatedQuestion = ViewData["RelatedQuestion"], supplierId = ViewData["SupplierId"], subSupplierId = ViewData["SubSupplierId"] })

.Remove("RemoveAndPersist", "Upload",

new { relatedQuestion = ViewData["RelatedQuestion"], supplierId = ViewData["SupplierId"], subSupplierId = ViewData["SubSupplierId"] })

.AutoUpload(true)

)

.Files(files =>

{

foreach (var f in Model)

{

files.Add().Name(f.Name).Extension(f.Extension).Size(f.Size);

}

})

)

</div>

@if (!Model.Any())

{

string name = ViewData["RelatedQuestion"] + "Required";

<p id=@name>Required</p>

}

</div>

As you can see, for each upload on the page, I wish to display a "Required" bit of text dependent upon whether a particular upload has a file etc. I do not wish to enforce any strong validation which I could do on the post of the form, I just want to bring to the users attention that they need to upload something here.

How would I go about showing and hiding this depending on whether the upload has any thing present?

Alternatively, are their any css selectors I can use to facilitate this task e.g. k-dropzone k-empty >>> an empty upload; k-dropzone k-hasdata >>> upload has received a file.

Again alternatively, is there a way to change the button text from "Select Files" when nothing is present, to "File already selected" when something has been uploaded?

Please note, I have multiple instances of the upload on the page which is where I have encountered a few problems!!!

Upload

answered on 06 Jul 2015

3 answers

166 views

PDF-Report with Chart

Hi!

We're currently evaluating KendoUI and trying to build a little example app which consists of a PDF-Report. Is it possible to extract a rendered chart and insert it into a multipage PDF-Report? My PDF renders fines but the chart is missing in the PDF-Output (see attached files)

App structure (It's basically a print preview with PDF-Export):

- One browser window with 1 Chart

- The User hits the report button (see report screenshot)

- A -new- window is opened and the Chart from the first window is inserted (via JQuery) into the DOM of the 2. window (which holds the report).

- A PDF is generated (see pdf screenshot).

Thanks in advanced.

Best regards,

Jens

Drawing API