Questions on Kendo UI for jQuery Forum

4 answers

300 views

Why only one event could be showed on the MonthView

Hello,
I know some people have asked this. Please see this below:

http://www.telerik.com/forums/show-all-events-for-day-in-month-view
http://www.telerik.com/forums/how-can-i-specify-the-height-of-a-row-in-the-monthview-

I think they and I are talking about the same thing. We need to show all events in the day cell of the month view.
I don't want to extend the MonthView as it can lead to unexpected behavior and is out of scope of support service.

You said in the thread:

http://www.telerik.com/forums/show-all-events-for-day-in-month-view

that:
1) As the "dayView" renders all available events in given cell (next to each other) by default it's not clear for us what is the exact behavior that you are trying to achieve - could you please clarify?

So let me clarify it clearly.
Because in many time, we need to create more than one task started in the same day(for example, we said event A and event B), both the event lasted for 3 days. It's a wonderfull function that we could drag the event on the MonthView to change the start date, or the end date, so we could make a task which lasted for more than one day quickly.

Now you limited only one event showed in the same day cell of the MonthView, more events will be hided and just show a "more button". But when we click the "more button", we will enter into the DayView. So we COULD NOT change the second event's start date or end date just by drag on the MonthView.

That's reason 1 why need to show all events in the save day cell of the MonthView.

Reason 2, is when we have more than one employees, for example, you are a manager, you have 3 employees, just like your online demo.
You need to see the team's whole tasks arrangement in the month, not each person at each time, just see all their tasks, so you could know which day is free and which day is in a heave workload. The working scenario is see workload in a Month Calendar, not see a detail job in a DayView. So we want to show all events in the save day cell of the MonthView.

yours,
Ivan

Scheduler

answered on 18 Mar 2016

4 answers

657 views

Column Resize - Min Width on Resize

I am trying to prevent a user from resizing a column too small:

In the demo, if you sort, then resize the sorted column, you can't see the sort arrow or the title

http://demos.kendoui.com/web/grid/column-resizing.html

Is there a way to dynamically set the columnWidth?

I have tried to connect to the columnResize event and check if the newWidth is less than x then set it to y.
However, the setting of the $el.column.width does not actually redraw it.

Any suggestions? Maybe I need to do a refresh after I reset it? I'd prefer them to not be able to drag past a minimum.

I also tried setting min-width on all sorts of css:
.k-grid-header, .k-header, .k-header > a

-me-

Grid

answered on 18 Mar 2016

4 answers

2.1K+ views

Grid columns expand even when column widths are set

Hi

Is there a way to specify the width of each column and not have it auto expand to match the grid width?

I've included a sample file.

In the first grid, all columns have a specific width set, however, the combined width is less than the grid width.

This causes the column widths not being adhered to and expand to meet the grid width.

Should the column width remain the fixed regardless?

The second grid has the “Title” column without a width set. This makes all the other columns adhere to their widths.

Since I don’t have a column without a width, this is notfeasible.

For the third grid, I put a dummy column as the last one, so it behaves the same way as the second grid.

There’s an issue that exists with this method. When there’sno data, resizing any columns will cause the last column to “disappear”.

However, by hovering the mouse near where it was supposed to exist, the mouse cursor changes to the column resize cursor, indicating that it is still actually there.

The fourth grid is the same as the third grid only it has data.

Resizing any of the columns creates a horizontal scroll bar. The “dummy” column keeps its width and does not resize with the other grids.

This is not desired behavior as the “dummy” column shrink to match. Even setting the column width to be 100% and null didn’t work.

<!DOCTYPE html>

<html>

<head>

<title>Basic usage</title>

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

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

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

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

</head>

<body>

<div id="example" class="k-content">

<div id="grid" style="height: 200px"></div>

<br>

<div id="grid2" style="height: 200px"></div>

<br>

<div id="grid3" style="height: 200px"></div>

<br>

<div id="grid4" style="height: 200px"></div>

<script>

$(document).ready(function() {

$("#grid").kendoGrid({

dataSource: {

data: createRandomData(50),

pageSize: 10

},

groupable: true,

sortable: true,

pageable: {

refresh: true,

pageSizes: true

},

width: "100%",

resizable: true,

columns: [ {

field: "FirstName",

width: 90,

title: "First Name"

} , {

field: "LastName",

width: 90,

title: "Last Name"

} , {

width: 100,

field: "City"

} , {

width: 100,

field: "Title"

} , {

width: 100,

field: "BirthDate",

title: "Birth Date",

template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'

} , {

width: 50,

field: "Age"

}

]

});

$("#grid2").kendoGrid({

dataSource: {

data: createRandomData(50),

pageSize: 10

},

groupable: true,

sortable: true,

pageable: {

refresh: true,

pageSizes: true

},

resizable: true,

width: "100%",

columns: [ {

field: "FirstName",

width: 90,

title: "First Name"

} , {

field: "LastName",

width: 90,

title: "Last Name"

} , {

width: 100,

field: "City"

} , {

field: "Title"

} , {

width: 100,

field: "BirthDate",

title: "Birth Date",

template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'

} , {

width: 50,

field: "Age"

}

]

});

$("#grid3").kendoGrid({

dataSource: {

data: [],

pageSize: 10

},

groupable: true,

sortable: true,

pageable: {

refresh: true,

pageSizes: true

},

resizable: true,

width: "100%",

columns: [ {

field: "FirstName",

width: 90,

title: "First Name"

} , {

field: "LastName",

width: 90,

title: "Last Name"

} , {

width: 100,

field: "City"

} , {

width: 100,

field: "Title"

} , {

width: 100,

field: "BirthDate",

title: "Birth Date",

template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'

} , {

width: 50,

field: "Age"

}

, {

title: "Dummy"

}

]

});

$("#grid4").kendoGrid({

dataSource: {

data: createRandomData(50),

pageSize: 10

},

groupable: true,

sortable: true,

pageable: {

refresh: true,

pageSizes: true

},

resizable: true,

width: "100%",

columns: [ {

field: "FirstName",

width: 90,

title: "First Name"

} , {

field: "LastName",

width: 90,

title: "Last Name"

} , {

width: 100,

field: "City"

} , {

width: 100,

field: "Title"

} , {

width: 100,

field: "BirthDate",

title: "Birth Date",

template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'

} , {

width: 50,

field: "Age"

}

, {

title: "Dummy"

}

]

});

var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"],

lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"],

cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"],

titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer",

"Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"],

birthDates = [new Date("1948/12/08"), new Date("1952/02/19"), new Date("1963/08/30"), new Date("1937/09/19"), new Date("1955/03/04"), new Date("1963/07/02"), new Date("1960/05/29"), new Date("1958/01/09"), new Date("1966/01/27"), new Date("1966/03/27")];

function createRandomData(count) {

var data = [],

now = new Date();

for (var i = 0; i < count; i++) {

var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],

lastName = lastNames[Math.floor(Math.random() * lastNames.length)],

city = cities[Math.floor(Math.random() * cities.length)],

title = titles[Math.floor(Math.random() * titles.length)],

birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],

age = now.getFullYear() - birthDate.getFullYear();

data.push({

Id: i + 1,

FirstName: firstName,

LastName: lastName,

City: city,

Title: title,

BirthDate: birthDate,

Age: age

});

}

return data;

}

function generatePeople(itemCount, callback) {

var data = [],

delay = 25,

interval = 500,

starttime;

var now = new Date();

setTimeout(function() {

starttime = +new Date();

do {

var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],

lastName = lastNames[Math.floor(Math.random() * lastNames.length)],

city = cities[Math.floor(Math.random() * cities.length)],

title = titles[Math.floor(Math.random() * titles.length)],

birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],

age = now.getFullYear() - birthDate.getFullYear();

data.push({

Id: data.length + 1,

FirstName: firstName,

LastName: lastName,

City: city,

Title: title,

BirthDate: birthDate,

Age: age

});

} while(data.length < itemCount && +new Date() - starttime < interval);

if (data.length < itemCount) {

setTimeout(arguments.callee, delay);

} else {

callback(data);

}

}, delay);

}

</script>

</div>

</body>

</html>

Grid

answered on 18 Mar 2016

1 answer

118 views

filter doesn't work in kendo demos

I was playing with the spreadsheet filter and I find that it doesn't work in the examples given in the demos . https://demos.telerik.com/kendo-ui/spreadsheet/server-side-import-export ( units in stock column / unit price/ Discontinued ) column . Please advice.

Spreadsheet

answered on 18 Mar 2016

1 answer

133 views

Will DateTime pikers be improved?

I'm in the process of converting my application from a server heavy rendering to Kendo UI browser based application.

So far Kendo UI is provinding us a wide range of good controls for this. But client are not happy with the time selection.

Our previous component provider had a more polished Datetime picker.

With complete keypress management in the input text area.

-click or side arrow on keyboard where selecting date or time part in the text area, then arrow up and down where increasing or decreasing selected area.

-letters where not allowed and format was enforced.

Before starting to write all these validation I'm just asking if there is any plan to improve that aspect of the control any time soon.

Cause It really feel like the calendar button and hours selection where done and polished then the text area was left unfinished.

DatePicker

answered on 18 Mar 2016

1 answer

190 views

Kendo Grid Pop-up Validation

Hello,

I've been running into a problem when trying to validate the pop-ups from a grid edit.

When I have everything set up as in the code below, errors from the controller are returned as a string on a new page, rather than to the ValidationSummary or ValidationMessage Tags.

Here is the PartialView used as a template for the Pop-up editor

@model CopyOrder

<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

<div class="EditorContainer">

<div id="OrderEditorSubHeader">Order <b>Information</b></div>

@using (Html.BeginForm("OrderCopy", "OrderManagement")){

<div class="form-group">

@Html.Label("Copy Order ID")

@(Html.Kendo().ComboBoxFor(m=>m.CopyOrderID)

//.Name("CopyOrderID")

.Filter("contains")

.Placeholder("Please Select")

.DataSource(dataSource => dataSource.Read(read => read.Url("/OrderManagement/OrderID_Select")))

.DataTextField("Text")

.DataValueField("Value")

.Suggest(true)

.HtmlAttributes(new { @class = "form-control" }))

@Html.ValidationMessageFor(m => m.CopyOrderID)

</div>

<div class="form-group">

@Html.Label("Copy To Customer")

@(Html.Kendo().ComboBoxFor(m=>m.CopyCustomerID)

//.Name("CopyCustomerID")

.Filter("contains")

.Placeholder("Please Select")

.DataSource(dataSource =>

dataSource.Read(read =>

{

read.Action("AvailableCustomers_Select", "OrderManagement")

.Data("filterAvailableCustomers");

})

.ServerFiltering(true)

)

.DataTextField("Text")

.DataValueField("Value")

.Suggest(true)

.Enable(false)

.AutoBind(false)

.ValuePrimitive(true)

.CascadeFrom("CopyOrderID")

.HtmlAttributes(new { @class = "form-control" }))

@Html.ValidationMessageFor(m => m.CopyCustomerID)

</div>

<input id="submitbtn" type="submit" value="Save" />

@Html.ValidationSummary(false)

}

Here is the Controller code

[HttpPost]

public ActionResult OrderCopy([DataSourceRequest] DataSourceRequest request, Ops.Models.CopyOrder Copy)

{

var db = new Ops.Models.Ops_Entities();

if (ModelState.IsValid)

{

try

{

//A bunch of Linq Queries here

//One of them causes a NullReference Exception

db.OrderGroups.Add(newGroup);

db.SaveChanges();

return RedirectToAction("Orders");

}

catch (NullReferenceException)

{

//Code reaches this point when I trigger the error in question

//Problem is that when it is returned, a new page is opened just displaying the error message as a string

ModelState.AddModelError(String.Empty, "Invalid Selection");

var failmodel2 = (new List<Ops.Models.CopyOrder> { Copy }).ToList().ToDataSourceResult(request, ModelState);

return Json(failmodel2, JsonRequestBehavior.AllowGet);

}

var failmodel = new List<Ops.Models.CopyOrder>();

return Json(failmodel.ToDataSourceResult(request, ModelState));

}

and my kendo grid

@(Html.Kendo().Grid<Ops.Models.vw_Orders>()

.Name("Orders")

.EnableCustomBinding(true)

.Columns(columns =>

{

columns.Bound(p => p.SchoolYear)

.Title("Year");

columns.Bound(p => p.Company)

.Title("School Name")

.ClientTemplate("<span><a href='/CustomerManagement/SchoolInfo?CustomerID=#=CustomerID#'>#=Company#</a></span>");

columns.Bound(p => p.MasterOrderID)

.Title("Order ID");

columns.Bound(p => p.GroupName);

columns.Bound(p => p.Type);

columns.Bound(p => p.Program);

columns.Bound(p => p.Status)

.ClientTemplate("<span>#=Status#</span>");

columns.Bound(p => p.AddUser);

columns.Bound(p => p.SalesTerritory)

.Title("Territory");

})

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("OrderGroupEdit"))

.ToolBar(toolBar =>

{

toolBar.Create().Text("Add Order");

toolBar.Custom().Text("Copy Order").HtmlAttributes(new { id = "openCopyWindow" });

toolBar.Custom().Text("Add Service Item").HtmlAttributes(new { id = "openServiceItemWindow" });

toolBar.Custom().Text("Get Job Master").HtmlAttributes(new { id = "openJobMastWindow" });

})

.Pageable(o =>

{

o.PageSizes(new[] { 11, 20, 50, 100, 1000 });

o.ButtonCount(4);

})

.Sortable()

.Filterable(f =>

f.Operators(o =>

o.ForString(d => d

.Clear()

.Contains("Contains")

.IsEqualTo("Equal To")

)

.Events(e => e.DataBound("onDataBound"))

.ClientDetailTemplateId("OrderDetails")

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => model.Id(m => m.MasterOrderID))

.PageSize(100)

.Read(read => read.Action("OrderSearch", "OrderManagement"))

.Create(create => create.Action("OrderCreate", "OrderManagement"))

.ServerOperation(true)

)


@(Html.Kendo().Window()
    .Name("window")
    .Title("Copy Order")
    .Content("")
    .LoadContentFrom("CopyOrder", "OrderManagement")
    .Draggable()
    .Visible(false)
    .Width(800)
    //.Events(e => e.Close("ManualWindow_close"))
)

and the js opening the window

$(document).ready(function () {

$("#openCopyWindow").click(function (e) {

e.preventDefault();

var window = $("#window").data("kendoWindow");

window.center().open();

});

})

Grid

answered on 18 Mar 2016

5 answers

351 views

Date Picker value not encoding timezone

We have a problem with the kendo ui date picker. We have a server which returns dates in ISO8601 format, encoded with timezone information. (it's rare that there are any UTC dates in our database) We've gotten the date picker to display those ISO8601 dates in a sane, human-readable format, but what we haven't managed is how to encode timezone information with the date value sent back to the server upon saving.

Here is a jsfiddle which hopefully makes it a little easier to follow along with what the problem is: https://jsfiddle.net/stdph60n/

To see the problem we're having, (1) Fill in the datepicker (e.g. 03/07/2016)

(2) Open your developer tools on the jsfiddle tab and click on the "Network" tab (or you can skip steps 2, 3, and 4 and just look at the value of dateString below the datepicker)

(3) Hit the "Click me!" button

(4) Look at the dateString value under "Request Payload" It says "3/7/2016". When this gets sent to the server, the server reads it as "2016-03-07T00:00:00+00:00". For my particular time zone, the server should be reading the value as "2016-03-07T00:00:00-05:00"

Is there a way to send the time zone information encoded within the date information so the server can know which time zone the date is in?

DatePicker

answered on 18 Mar 2016

1 answer

537 views

Maximum call stack size exceeded error with angularjs and mvc

Hello,

I use last version of kendoui and i have problem with TreeList component (asp-net.mvc on server and angularjs on client)

javascript

$scope.treelistOptions = {

dataSource: {

transport: {

read: {

type:'GET',

url: 'category-tree',

}

},

schema: {

model: {

Id: "categoryId",

ParentId:"parentCategoryId",

fields: {

categoryId: { field: "categoryId", type: "number", nullable: false },

parentCategoryId: { field: "parentCategoryId", nullable: true },

name: { field: "name" },}

}

},

columns: [

{ field: "Name" },

],

};

TreeList

answered on 18 Mar 2016

4 answers

405 views

Unable to clear values programmatically when using virtualization

I am trying to clear values in a MultiSelect widget that utilizes virtualization. If I filter to an item that is outside of the initial data load and attempt to clear the value via javascript I get the error "Uncaught TypeError: Cannot read property 'item' of undefined" after the MultiSelect refreshes. If I open the MultiSelect after selecting the value, the valueMapper function fires and the error does not occur when I clear the items. I am able to reproduce this error using a modified version of the virtualization demo. It seems like the difference between the two is that the paging variables are not reset when the window is closed. This sounds similar to a previous thread that related to the filter not being reset on close.

Here are the steps to reproduce:

Filter the multi select to a value that is outside of the initial load.
Select the value.
Close the multi select list.
Click the Clear Orders button.

If I could manually fire the valueMapper function for the MultiSelect then I could create a workaround. Any suggestions on a workaround would be appreciated. My experience overall with the way virtualization is handled in this control suite has not been very good. It would be helpful to have more of the virtualization areas exposed similar to what is available in the dataSource object.

MultiSelect

answered on 18 Mar 2016

4 answers

573 views

Why is the enter key adding <P> tags

Why on earth would the editor add <p> tags every time the user hits the enter key. Seems insane to me. The user has to now know about the shift key trick. Is there a setting I'm missing that allows the Kendo editor to work more like the RadEditor I'm using to write this post? I think the RadEditor is made by you guys also... am I correct? Why wouldn't it work similarly?

Editor

answered on 18 Mar 2016