Questions on Kendo UI for jQuery Forum

3 answers

181 views

Short-circuit first data source read with local data?

I have a data source that is used to fetch remote data for a grid. In my specific situation, I already have the first page of data available on the client and would like to short-circuit the data source's first read attempt and supply my local data. All subsequent requests, due to paging, etc, should happen normally, pulling from the remote data endpoint. Is this possible?

The requestStart event looks like it might be the place to intercept the call, but I'm unsure of exactly how to do this.

Thanks

Data Source

answered on 02 Oct 2014

4 answers

1.3K+ views

Multiple grids from a single datasource

I have created a page with three read only grids on it. I would like to be able to populate the grids from a single datasource to reduce the number of server requests. The schemas for the grid are not the same.

I have tried creating the a single datasource and the allocating the data to the appropriate grid during the 'change' function of the datasource.

My preferred solution would be to to do it at the data schema level ...

{  

    datasetA : [],

datasetB: [],

success: true

}

Then divide up the data in the change event of the

datasource.change: function()

{

oDataA = new kendo.data.DataSource(this, {schema: {data: "datasetA"}});

$("#gridA").data("kendoGrid").setDataSource(oDataA);

oDataB = new kendo.data.DataSource(this, {schema: {data: "datasetB"}})

$("#gridA").data("kendoGrid").setDataSource(oDataB);

}

This doesn't work !
So I tried to move the data into a single data schema ...

{

data : [{

datasetA : [],

datasetB: []

}]

success: true

}

And extracted the data to set the grid data sources ...

datasource.change : function()

{

$("#gridA").data("kendoGrid").setDataSource(this.at(0).datasetA);

$("#gridB").data("kendoGrid").setDataSource(this.at(0).datasetB);

}

Which didn't work ... I have also look at using filters to achieve the desired result be have not been able to get that to work.

What would be the best way to populate several grids from a single datasource ?

Thank you for you help.

Grid

answered on 02 Oct 2014

1 answer

474 views

Multiselect. virtual scroll

Hi

Multi select works pretty well, but i did not find ability apply something like paging or virtual scroll to it.
What we need - is some kind of dropdown with ability filter and paging.
Example - we have 100 000 rows in db, user can search and results should be returned by pages - with ability to scroll and load next page.

Can you suggest how we can do it using telerik kendo ui library?

Thank you

MultiSelect

answered on 02 Oct 2014

1 answer

107 views

MVC Custom Editor Popup Static Date Formatting

Hi. I'm trying to add a Date as text to a custom editor popup in .NET MVC. It appears I cannot simply just do @Model.LastUpdatedDate to display the date. I do not want this in a DatePicker/Textbox. Searching the forums, I've encountered using ${LastUpdatedDate} and that displays the content; however I need to format the date as "7/9/2014 14:00" rather than what is displayed like "Wed Sep 10 14:22:55 EDT 2014." Any help would be greatly appreciated. Thanks so much.

Grid

answered on 02 Oct 2014

13 answers

251 views

Replacing data within PivotGrid

Hi all

I have to the following structure which I wanna use with Pivotgrid:

{
    "Name": Ackermann,
    "First Name": Rolf,
    "Statistic": [
        {
            "Year": 2004,
            "Product": "Book",
            "Quantity": 10
        }, {
            "Year": 2005,
            "Product": "Booklet",
            "Quantity": 35
        }, {
            "Year": 2005,
            "Product": "Book",
            "Quantity": 18
        }
    ]
}

Now I have a interacive page where the user can search another customer. After the search I want to display the customers data in the PivotGrid. But for every customer the user searches an additional PivotGrid is added (1st time: 1 grid, 2nd time: 2 grids, 3th time: 3 grid etc.).

How can I avoid this?

PivotGrid

answered on 02 Oct 2014

1 answer

250 views

[Solved] kendo.ui.progress removes child progress indicator

Hi,

I noticed that kendo.ui.progress method removes the loading indicator from all of it's descendant. I have 2 async processes which started (almost) at the same time. One indicator showed on a div, and an other indicator showed in a child div. The longer process indicator belongs to the child div's indicator. When the shorter process finished (which has the indicator on the parent div) both the indicators removed.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Kendo UI Snippet</title>

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.rtl.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.mobile.all.min.css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>

</head>

<body>

<div id="parentDiv" style="position:relative;width:400px;height:400px; background-color:red">

<div id="childDiv" style="position:relative;width:150px;height:150px; background-color:blue">

</div>

<script>

kendo.ui.progress($('#parentDiv'), true);

kendo.ui.progress($('#childDiv'), true);

setTimeout(function() { kendo.ui.progress($('#parentDiv'), false); }, 1500);

setTimeout(function() { kendo.ui.progress($('#childDiv'), false); }, 10000);

</script>

</body>

</html>

Is it by design behavior or is it a bug?

Regards
Laszlo Jakab

General Discussions

answered on 02 Oct 2014

1 answer

5.9K+ views

[Solved] ClientTemplate with Javascript function

I have a Kendo Grid with a column that displays a persons name. I want the person's name to be a link and when clicked calls some javascript passing the name as a parameter. However I receive an error when I attempt to call this function with a string parameter, numeric paramters are ok. The code is as follows:

<div id="grid">

@(Html.Kendo().Grid(Model.clients)

.Name("Search_grdResults")

.Columns(columns =>

{

columns.Bound(client => client.Hcn);

columns.Bound(client => client.Hcn).ClientTemplate("<a onclick=showTest('#=FullName#')>#=FullName#</a>");

})

.Pageable()

.Sortable()

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(5)

.Read(read => read.Action("GetClients", "ClientLookup"))

)

</div>

The javascript is a simple alert just for testing purposes for now:

function showTest(fullname) {

alert(fullname);

}

How can I correct to allow string parameters to be passed to the javascript function?

Grid

answered on 02 Oct 2014

1 answer

400 views

[Solved] Use DisplayFormatAttribute with NumericTextBox

I try to use the NumericTextBox in combination with data annotations in MVC 5.
Kendo UI v2014.2.716
Windows 7 64 bit
Internet Explorer 10.0.9200.17089
jQuery 1.9.0

I have a class with a DisplayFormat attribute on a property:

public class EnkelOppervlakteRow

{

public int FosfaattoestandId { get; set; }

public string Omschrijving { get; set; }

[DisplayFormat(DataFormatString="{0:n3}", ApplyFormatInEditMode=true)]

public decimal Oppervlakte { get; set; }

public int? Id { get; set; }

}

In the view, I generate a NumericTextBox for that property:

@(Html.Kendo().NumericTextBoxFor(mdl => mdl.Oppervlakte))

Whtat I would like, is that the NumericTextBox behaved as if I wrote this:

@(Html.Kendo().NumericTextBoxFor(mdl => mdl.Oppervlakte)

.Format("N3")

)

Writing .Format("N3") on every line where I use said property is undesirable. I would like to manage the formatting using (custom) data annotations.
If I use @Html.EditorFor, then the values in the generated textbox are formatted the way I like.

How can I achieve this with the Kendo NumericTextBox?

NumericTextBox

answered on 02 Oct 2014

3 answers

110 views

[Solved] Scatter graph selection alternative

I have a table of temperatures. Records in my table has datetime field, which is not filled with continuously data (every 10 minutes), but every 5 minutes if there is a change in temperature. So new record can appear after 1 hour.
I choose scatter graph for this task, but unfortunately I discovered that scatter does not support selection, which is critical for me.
I also notice a post on feedback page, but honestly the feature will never be implemented if you will wait for enough user response.

Don't know why scatter doesn't implement selection, but what can I do. Can I chose a different graph with data I have?

Charts