Questions on Kendo UI for jQuery Forum

2 answers

1.1K+ views

I'm working on a fairly large application and am running into a serious problem with DatePicker and time zones. When data is saved to the server a full datetime string is sent like so: ExpirationDate: "2014-10-17T04:00:00.000Z". This gets materialized on my WebApi service in UTC format.

This cases many problems.
1. If I am storing the results in the database as a Date field (without the time) any comparison to the existing value fails. "2014-10-17" == "2014-10-17T04:00:00.000Z" always fails. This means I have to convert to local time on the server and drop the time.
2. If I am storing the results as a datetime2 field in the database then again, I have to jump through the same conversion to drop the time.

All I am interested in is the date.

Having a full timestamp for DateTimePicker makes sense, yes. But for DatePicker it seems odd that I should have to convert the values to a flat date when that's what I'm expecting to begin with. Or at least not be able to configure the DatePicker to work only with date formats. I have a lot of view model classes to deal with and no time at the moment to create properties that 'wrap' this behavior.

DatePicker

answered on 02 Oct 2014

2 answers

754 views

[Solved] Button and menu in grid cell?

I am trying to create a button in a grid cell that will copy the contents of the cell to the clipboard, and another button that will trigger a menu with other actions that can be performed on the value of the cell and/or row. I've tried doing this with Bootstrap using a split button, where the left-most button copies the contents to the user's clipboard, and the smaller right button just has a caret icon and triggers a menu. Unfortunately because the split button requires a btn-group, which is absolutely positioned, the menu is hidden when it is triggered. I was wondering how hard this would be to accomplish using kendo's button and menu controls? Currently I'm doing this by putting a javascript method in the template for the column, passing in the value, and returning the html of the button group. Does anyone know of a similar example or demo using all kendo controls that I could look at?

I've attached a screenshot to illustrate what I'm trying to do.

Thanks!
Eddie

Grid

answered on 02 Oct 2014

3 answers

182 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

480 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

108 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

256 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

258 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

6.0K+ 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

406 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