Questions on Kendo UI for jQuery Forum

1 answer

804 views

I have a vertical tabstrip on desktop where the tabs are on the left and the content to the right of the screen. On Mobile I would like to change this because it does not fit properly on the narrower screens. Ideally I would like the tabs to become a dropdown box but if another solution already exists that might be fine too. Does the Kendo UI left tabstrip support responsive design and if so, how do I use it?

TabStrip

answered on 13 Mar 2020

4 answers

223 views

OData filtering on Int64 property

When filtering an odata source on an Int64 property, a "L" needs to be appended to the value so that is properly cast to Int64 by WebApi.

Is there a filter configuration that would properly append the "L" to the end of the value in the querystring? I have tried manually appending the "L" to the filter value however this causes it to be passed as a string and that cast fails as well.

For now I can manually build my filter querystring for my prototype but that is not ideal going forward.

Please let me know if you have any questions or need sample code.

Data Source

answered on 13 Mar 2020

5 answers

1.3K+ views

setOptions() new Field

Hi,

I am saving the grid state in a database by calling grid.getOptions().
At opening the page, I am calling grid.setOptions(...) to restore the saved grid state. Its working well.

I added a new field to my grid, but it´s not visible, because in the stored grid state this field is not existing yet.

I can remove the array "columns" from the grid state JSON, but then the user settings of each column is deleted (for example the width of the columns).

What can I do to show the new field in my grid and not to delete the saved grid state?

Thanks,

Alex

Grid

answered on 13 Mar 2020

1 answer

280 views

Jquery KendoUI datepicker SqlDateTime overflow in the grid

I've added a kendo date picker as an editor in the grid and when I pick a date and click save changes, I get an sql error message: "SqlDateTime overflow.Must be between 1/1/1753 12:00:00 AM and 12/31/9999 11:59:59 PM". (Data type in sql is DateTime2). I think I parsed it in a right format (MM/dd/yyyy), but I'm not sure why its not working. When I manually type it as a string type (e.g. 3/7/2020), it works just fine.

1. Grid column part
columns: [{field: "EffectiveDate", title:"EffDate", template: "#= kendo.toString(kendo.parseDate(data.EffectiveDate, 'yyyy-MM-ddThh:mm:ss'), 'MM/dd/yyyy')#", width: 50, editor: CustomDatePicker}]

2. Editor part
function CustomDatePicker(container, options) { $('<input required name="' + options.field + '"/>').appendTo(container).kendoDatePicker({ format: "MM/dd/yyyy", max: new Date(), parseFormats: ["MM/dd/yyyy"]});}

3. Controller part -- when I'm debugging, the breakpoint hits here and give an sql overflow
public~

...

DateTime datevalue;

bool? isOk; isOk = DateTime.TryParse(HttpContext.Current.Request.Form["EffectiveDate"].ToString(), out datevalue);

DateTime effectiveDate = datevalue;

...

General Discussions

answered on 12 Mar 2020

6 answers

166 views

Suppressing Units

Hi

Is it possible to configure or programmatically remove the Units Column from the assignments editor, as our requirement doesn't generally want to model %tage allocation to each user (effectively each user would be 100%)

Thanks

Chris

Gantt

answered on 12 Mar 2020

4 answers

505 views

Cursor position

How come when you tab into a numeric input the cursor doesn't default to the end of the value in the box? Is there a way to get that behavior?

http://screencast.com/t/5GPbrxuM30

NumericTextBox

answered on 11 Mar 2020

6 answers

138 views

can't update Title!

Why doesn't this work?

$('#my-kendo-numerictextbox').attr('title', '100');

Currently the title/tooltip is displaying the value the is already visible in the textbox - seriously?

I want to be able to change the value dynamically to reflect the upper value allowed in the numeric textbox, in other words, some useful information.I'm a bit weird that way, wanting to show the users something that is actually useful...

thanks

NumericTextBox

answered on 11 Mar 2020

1 answer

201 views

Custom Template with Databound Resources

Hi guys

I've been having some problems with kendo scheduler passing the data from the create new meeting moal popup to the controller. I have an MVC solution where the user should select a location, my control will call off to the server to get a list of resources for that location. All working as expected except that my custom template for the modal popup won't pass the RoomID to the controller to create a new meeting room.

Here is some of my code.

Razor MVC

@(Html.Kendo().Scheduler<MeetingViewModel>()

.Name("scheduler")

.Date(startOfWeek)

.StartTime(startOfWeek.AddHours(8))

.EndTime(startOfWeek.AddHours(18))

.Height(670)

.AllDaySlot(false)

.Editable(e => e.TemplateId("customTemplate").Destroy(false).Create(true).Move(false).Resize(false).Update(false))

//.Editable(e => e.Destroy(false).Create(true).Move(false).Resize(false))

.Events(e =>

{

e.Save("scheduler_save");

})

.Views(views =>

{

views.DayView(x => x.DateHeaderTemplate("<span class='k-link k-nav-day'>#=kendo.toString(date, 'dd/MM')#</span>"));

views.WeekView(weekView => weekView.Selected(true).DateHeaderTemplate("<span class='k-link k-nav-day'>#=kendo.toString(date, 'dd/MM')#</span>"));

})

.Timezone("Etc/GMT")

.Resources(resource =>

{

resource.Add(m => m.RoomID)

.Title("Room")

.DataTextField("ResourceName")

.DataValueField("RoomID")

.DataColorField("ResourceColour")

.Multiple(false)

.DataSource(x => x.Read(s => s.Data("GetRoomFromDropdown").Action("Rooms_Get", "ExchangeCalendar", new { Area = string.Empty })));

})

.DataSource(d => d

.Events(x => x.RequestEnd("check_response"))

.Model(m =>

{

m.Id(f => f.MeetingID);

m.Field(f => f.Title).DefaultValue("No title");

m.RecurrenceId(f => f.RecurrenceID);

m.Field(f => f.Title).DefaultValue("No title");

})

.Read(x => x.Data("GetRoomFromDropdown").Action("Rooms_Read", "ExchangeCalendar", new { Area = string.Empty }))

.Create("Rooms_Create", "ExchangeCalendar", new { Area = string.Empty })

)

CustomTemplate

@*TEMPLATE FOR MODAL POPUP*@

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

<div class="k-edit-label">

<label for="title">Title</label>

</div>

<div class="k-edit-field" data-container-for="title">

<input type="text" class="k-input k-textbox" name="title" data-bind="value: title" />

</div>

<div class="k-edit-label">

<label for="start">Start</label>

</div>

<div class="k-edit-field" data-container-for="start">

<span style="display: none;" class="k-widget k-datetimepicker k-header">

<span class="k-picker-wrap k-state-default">

<input type="text" data-bind="value: start, invisible: isAllDay" data-role="datetimepicker" data-type="date" required="" name="start" data-timezone="Etc/UTC" style="width: 100%;" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is 6/10/2013 12:00:00 AM"><span class="k-select" unselectable="on"><span class="k-icon k-i-calendar" unselectable="on" role="button">select</span><span class="k-icon k-i-clock" unselectable="on" role="button">select</span></span>

</span>

</span><span style="" class="k-widget k-datepicker k-header"><span class="k-picker-wrap k-state-default"><input type="text" data-bind="value: start, visible: isAllDay" data-role="datepicker" data-type="date" required="" name="start" data-timezone="Etc/UTC" style="width: 100%;" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is Monday, June 10, 2013"><span class="k-select" unselectable="on" role="button"><span class="k-icon k-i-calendar" unselectable="on">select</span></span></span></span><span data-bind=" text: startTimezone"></span><span class="k-invalid-msg" data-for="start" style="display: none;"></span>

</div>

<div class="k-edit-label">

<label for="end">End</label>

</div>

<div class="k-edit-field" data-container-for="end">

<span style="display: none;" class="k-widget k-datetimepicker k-header">

<span class="k-picker-wrap k-state-default">

<input type="text" data-bind="value: end, invisible: isAllDay" data-role="datetimepicker" data-type="date" required="" name="end" data-timezone="Etc/UTC" style="width: 100%;" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is 6/10/2013 12:00:00 AM"><span class="k-select" unselectable="on"><span class="k-icon k-i-calendar" unselectable="on" role="button">select</span><span class="k-icon k-i-clock" unselectable="on" role="button">select</span></span>

</span>

</span><span style="" class="k-widget k-datepicker k-header"><span class="k-picker-wrap k-state-default"><input type="text" data-bind="value: end, visible: isAllDay" data-role="datepicker" data-type="date" required="" name="end" data-timezone="Etc/UTC" style="width: 100%;" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is Monday, June 10, 2013"><span class="k-select" unselectable="on" role="button"><span class="k-icon k-i-calendar" unselectable="on">select</span></span></span></span><span data-bind=" text: endTimezone"></span><span class="k-invalid-msg" data-for="end" style="display: none;"></span>

</div>

<div class="k-edit-label">

<label for="roomID">Room</label>

</div>

<div data-container-for="RoomID" class="k-edit-field" id="resourcesContainer"></div>

<script>

jQuery(function () {

var container = jQuery("\#resourcesContainer");

var resources = jQuery("\#scheduler").data("kendoScheduler").resources;

console.log(resources[0].dataSource._data);

jQuery(kendo.format('<select data-bind="value: {0}" name="{0}">', resources[0].field))

.appendTo(container)

.kendoDropDownList({

dataTextField: resources[0].dataTextField,

dataValueField: resources[0].dataValueField,

dataSource: resources[0].dataSource,

valuePrimitive: resources[0].valuePrimitive,

optionLabel: "N1one",

template: kendo.format('<span class="k-scheduler-mark" style="background-color:\#= data.{0}?{0}:"none" \#"></span>\#={1}\#', resources[0].dataColorField, resources[0].dataTextField)

});

})

<\/script>

</script>

The Title, StartDate, EndDate are all coming through as the correct values but the RoomID is coming through NULL.

When I create a simple select like is passes the value correctly

<select name="RoomID" data-bind="value:RoomID">

<option value="2">Yo</option>

<option value="4">Blah</option>

<option value="6">Blah</option>

</select>

Scheduler

answered on 11 Mar 2020

6 answers

1.7K+ views

Setting initial value of custom editor in Grid edit event not updating server data

Hi there,

I have a grid with several custom numeric text box fields set up for inline editing. I need to set the initial value of some of the fields based on the current data. From what I've seen, the edit event is the place to do this. I'm able to set the initial value of the fields fine but when I save the row the values aren't being sent to the server. This tells me that the model data isn't being updated when I change the values but I can't figure out how to make that happen. I tried adding .change() to the end of each e.container line as recommended by a forum post I found but that just threw errors and didn't help.

My grid definition is:

$("#HolesGrid").kendoGrid({

editable: "inline",

scrollable: false,

columns: [

{

command: ["edit", "delete"],

title: "Actions",

width: "90px"

},

{ title: "Number", field: "Number", type: "number", width: "80px", editor: numericNoDecimalEditor },

{ title: "Male Par", field: "MalePar", type: "number", editor: numericNoDecimalEditor },

{ title: "Female Par", field: "FemalePar", type: "number", editor: numericNoDecimalEditor },

{ title: "Male Rank", field: "MaleRank", type: "number", editor: numericNoDecimalEditor },

{ title: "Female Rank", field: "FemaleRank", type: "number", editor: numericNoDecimalEditor }

],

dataSource: {

schema: {

data: "Data",

total: "Count",

errors: "Error",

model: {

id: "id",

fields: {

id: { type: "number" },

CourseID: { type: "number", defaultValue: CourseID },

Number: { type: "number" },

MalePar: { type: "number", defaultValue: 5 },

FemalePar: { type: "number", defaultValue: 5 },

MaleRank: { type: "number" },

FemaleRank: { type: "number" }

}

},

transport: {

read: {

url: "/CourseEdit/GetHoles",

contentType: "application/json",

type: "POST",

data: { courseID: CourseID }

},

create: {

url: "/CourseEdit/CreateHole",

contentType: "application/json",

type: "POST"

},

update: {

url: "/CourseEdit/UpdateHole",

contentType: "application/json",

type: "POST"

},

destroy: {

url: "/CourseEdit/DeleteHole",

contentType: "application/json",

type: "POST"

},

parameterMap: function (data, operation)

{

return JSON.stringify(data);

}

},

requestEnd: function (e)

{

if (e.type == "create" || e.type == "destroy")

{

// Update the Yardage list

$("#YardagesGrid").data("kendoGrid").dataSource.read();

$("#YardagesGrid").data("kendoGrid").refresh();

}

},

edit: function (e)

{

if (e.model.isNew())

{

// Find the next hole number

var holes = this.dataSource.data();

var lastNum = 0;

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

{

var thisNum = holes[i].Number;

if (thisNum - lastNum > 1)

{

break;

}

lastNum = thisNum;

}

var nextNum = lastNum + 1;

e.container.find("input[name=Number]").data("kendoNumericTextBox").value(nextNum);

e.container.find("input[name=MaleRank]").data("kendoNumericTextBox").value(nextNum);

e.container.find("input[name=FemaleRank]").data("kendoNumericTextBox").value(nextNum);

}

});

function numericNoDecimalEditor(container, options)

{

$('<input data-bind="value:' + options.field + '" name="' + options.field + '"/>')

.appendTo(container)

.kendoNumericTextBox({

format: "n0",

decimals: 0

});

}

Any ideas how I can make this work?

Thanks,
Jason

Grid

answered on 11 Mar 2020

3 answers

837 views

Use Calc() for Window width, height

Would it be possible to set custom width and height using CSS calc()?

The situation is the following: I have a UI which consists of a main area and a sidebar.

When I open the window I want to be able to center the window within the main area, without covering the sidebar. And in my case, the sidebar having 400px, I would like to be able to set the Kendo Window width: calc(100% - 440px) and add a position left of 20px. In this way I would have control on various types of layouts.

Thanks,

Andy

Window

answered on 11 Mar 2020