Questions on UI for ASP.NET MVC Forum

2 answers

393 views

Grid dataItem() function - eq(1) is John not Jane

HI

The wrong description in online document.

jquery eq(index), the index is 0-based, so the comment 'displays "Jane Doe"' was WRONG :

dataItem
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-dataItem

EXAMPLE - GET THE DATA ITEM TO WHICH THE FIRST TABLE ROW IS BOUND

$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
var grid = $("#grid").data("kendoGrid");
var data = grid.dataItem("tr:eq(1)");
console.log(data.name); // displays "Jane Doe" <-------------------- the comment was WRONG

Best regards

Chris

Grid

answered on 23 Feb 2017

4 answers

521 views

Search grid data with datetime , int, nullable fields

Hi,

I am using search option in kendo ui grid. I have datetime, int, nullable fields. How do i search grid data with different data types.

Help on this is much appreciated.

Please find the attached image for grid details which i have.

Sample code on this will be very useful.

Regards,

Kiran

Grid

answered on 23 Feb 2017

1 answer

6.1K+ views

Line breaks in grid data

Hi,

I'm using a client row template to style my grid which is created as follows:

@(Html.Kendo().Grid<TEAMSV2.Models.JobLogNoteDTO>()

.Name("jobLogGrid")

.DataSource(datasource => datasource

.Ajax()

.Read(read =>

{

read.Action("GetJobLogNotes", "TeamsV2").Type(HttpVerbs.Post);

})

.Sort(sort => sort.Add("DateCreated").Descending())

.PageSize(10)

)

.Columns(columns =>

{

columns.Bound(note => note.ItemNo).Title("Ref.").Width(60);

columns.Bound(note => note.DateCreated).Title("Note Recorded").Width(110);

columns.Bound(note => note.NoteHtml).Title("Description").Encoded(false);

columns.Bound(note => note.Employee).Title("Employee").Width(110);

})

.HtmlAttributes(new { style = "max-height:496px; height:496px;" })

.Scrollable()

.Sortable()

.Pageable()

.ClientRowTemplate(Html.Partial("JobLog/JobLogTab/JobLogNotesGridTemplate").ToHtmlString())

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

)

The row template is as follows:

<tr>

<td>

<a href="/TeamsV2/Search?search=#:data.ItemNo#" style="text-decoration:underline;">#:data.ItemNo#</a>

</td>

<td>

#: kendo.toString(data.DateCreated, 'd MMM yyyy HH:mm')#

</td>

<td>

#: data.NoteHtml#

</td>

<td>

#: data.Employee#

<br />

<div class="JobLogEmployeePhoto" data-id="#: data.EmployeeID#">

</div>

</td>

</tr>

The value of "data.NoteHtml" contains "/n" for line breaks as it was inserted via a TextArea. These /n's are not showing as line breaks in the grid. I've tried replacing them with HTML so the data contains <br> tags instead but they still do not show.

My main question is this: If I modify the data so that the string acxtually contains HTML markup for <BR> or <BR></BR> or <BR /> how can I get the client row template to treat this as HTML instead of just as a string.

I've set Encoded(false) for the column but still no joy.

Thanks,

Mark.

Grid

answered on 23 Feb 2017

2 answers

73 views

Is there any difference in the Date/Time Pickers between the following versions?

Hi there,

Is there any difference globalisation/culture changes between the following versions: Kendo UI Complete v2013.1.319 and Kendo UI v2017.1.118 ?

After upgrading I started getting the error: " The field (insert field name) must be a date."

Do I need to upgrade the JQuery Version? Currently using v1.9.1

I'm setting the culture the same way. Using a script inside the page:

kendo.culture("@(((CultureInfo)Session["culture"]).Name)");

The code for creating the DatePicker hasn't changed:

@(Html.Kendo().DatePickerFor(model => model.DateOfTesting)

.Name("DateOfTesting")

.Format("dd MMM yyyy")

.Culture(((CultureInfo)Session["Culture"]).Name)

.HtmlAttributes(new { style = "width:100%" })

)

@Html.ValidationMessageFor(model => model.DateOfTesting)

The scripts on my page are the same:

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

The scripts on the Layout Page are the same

<script src="@Url.Content("~/Scripts/jquery.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo.web.min.js")"></script>

<script src="@Url.Content("~/Scripts/Cultures/kendo.culture.en.min.js")" type="text/javascript"></script>

@*Loading Multiple culture files in the Layout Page*@

<script src="@Url.Content("~/Scripts/Cultures/kendo.culture.en-US.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/Cultures/kendo.culture.en-GB.min.js")" type="text/javascript"></script>

@*and so on for each culture*@

<script src="@Url.Content("~/Scripts/Cultures/kendo.culture.CULTURE .min.js")" type="text/javascript"></script>

Note: The last line is just an example

If I revert to the previous version ir works properly, if I upgrade then it doesn't with the exact same code.

Any idea?

Thank you

DatePicker

answered on 23 Feb 2017

2 answers

70 views

Possible use of the Sceduler

Hi,

It would be possible to use the Scheduler control like something similar to the ones from the attached files? The pictures are taken from this link: https://forecastapp.com/747070/schedule .

Basicly we would need two Scehuler controls, one with Projects(the data to be grouped in projects and the children of the projects will be the employees) and one with an overview of the Team (the data will be grouped in employees, and the children of the employees will be their projects).

Thanks!

Scheduler

answered on 23 Feb 2017

3 answers

109 views

Scheduler grouping

Hi there,

I would like to do a vertical grouping by meeting room, and then by employee. I saw a lot of examples, where each room contains all employees.
I have to achieved something slightly different: For each room, I have to list the employees that have an Appointment for this room. For instance:

Room 1
Employee A
Employee B
Room 2
Employee A
Employee C
Employee D
Room3
Employee F

Is that possible?
Currently, it seems that the Scheduler control can only create a "cross product" of the room and employee.

Cheers
Nicolas

Scheduler

answered on 22 Feb 2017

1 answer

556 views

remove span and classes

to be able to get the desired menu for my css, i need the following output of menu:

01.<ul id="leftMenu" data-role="menu" class="k-widget k-reset k-header k-menu k-menu-horizontal" index="0"role="menubar"style="display: block;">

02. <li id="HeaderMain" style="display: inline-block;" class="k-item k-state-default k-first selectedMenu" role="menuitem">

03. <div class="mnuLiCont">

04. <div class="mnuHomeIcon"></div>

05. <div class="mnuTxt">Home</div>

06. </div>

07. </li>

08. <li id="HeaderDashBoard" style="display: inline-block;" class="k-item k-state-default"role="menuitem">

09. <div class="mnuLiCont">

10. <div class="mnuDashBoardIcon"></div>

11. <div class="mnuTxt">Dashboard</div>

12. </div>

13. </li>

14.</ul>

This is the code im doing to be able to create this menu:

01.@(Html.Kendo().Menu()

02. .Name("leftMenu")

03. .Items(items =>

04. {

05. items.Add().HtmlAttributes(new { @id = "HeaderMain" , @class = "selectedMenu",@style ="display: inline-block;"});

06. items.Add().HtmlAttributes(new { @id = "HeaderDashboard", @style = "display: inline-block;" });

07. items.Add().HtmlAttributes(new { @id = "HeaderExtra", @style = "display: none;" });

08. })

09. .HtmlAttributes(new {@style = "display: block"})

10.

11. )

1.(document)

2. .ready(function () {

3. $("#HeaderMain").append("<div class='mnuLiCont'><div class='mnuHomeIcon'></div><div class='mnuTxt'>Home</div></div>");

4. $("#HeaderDashboard").append("<div class='mnuLiCont'><div class='mnuDashBoardIcon'></div><div class='mnuTxt'>Dashboard<v></div>");

5.

6.

7. });

And in the next code you can see the undesired SPAN in each menu item, which i need to get rid of.

01.<ul id="leftMenu" data-role="menu" class="k-widget k-reset k-header k-menu k-menu-horizontal" index="0"e="menubar"style="display: block;">

02. <li id="HeaderMain" style="display: inline-block;" class="k-item k-state-default k-first selectedMenu" role="menuitem">

03. <span class="k-link"></span>

04. <div class="mnuLiCont">

05. <div class="mnuHomeIcon"></div>

06. <div class="mnuTxt">Home</div>

07. </div>

08. </li>

09. <li id="HeaderDashBoard" style="display: inline-block;" class="k-item k-state-default"role="menuitem">

10. <span class="k-link"></span>

11. <div class="mnuLiCont">

12. <div class="mnuDashBoardIcon"></div>

13. <div class="mnuTxt">Dashboard</div>

14. </div>

15. </li>

16.</ul>

Menu

answered on 22 Feb 2017

4 answers

77 views

JQuery 3..0.0 upwards breaks my MVC grid foreign key column!

Hi, I was wondering if anyone else has this issue. I have Kendo 2016.3.914 installed and upgraded to Jquery 3.1.1 from 2.2.4 and it seems to break my gird foreign key. When I click in it a box appears and then disappears, but no dropdown etc. I rolled back to 2.2.4 and all was fine.

I don't really want to have to roll back my jquery version - has anyone else come across this?

Grid

answered on 21 Feb 2017

1 answer

276 views

AutoComplete select event - e.dataItem property not exists

HI

Fix the document description please, There have no e.dataItem property (undefined) :

WRONG :

kendo.ui.AutoComplete > select
http://docs.telerik.com/kendo-ui/api/javascript/ui/autocomplete#events-select
EVENT DATA
e.dataItem Object
The data item instance of the selected item.

WORKS :

C:\Program Files\Telerik\UI for ASP.NET MVC Q2 2016\wrappers\aspnetmvc\Examples\VS2015\Kendo.Mvc.Examples\Areas\razor\Views\autocomplete\events.cshtml
C:\Program Files\Telerik\UI for ASP.NET MVC R1 2017\wrappers\aspnetmvc\Examples\VS2015\Kendo.Mvc.Examples\Views\autocomplete\events.cshtml

function onSelect(e) {
if ("kendoConsole" in window) {
var dataItem = this.dataItem(e.item.index());
kendoConsole.log("event :: select (" + dataItem + ")");
}
}

I don't know why the AutoComplete do not provide the e.dataItem property,
but developers will be confused by the wrong document description.

Best regards

Chris

AutoComplete

answered on 21 Feb 2017

3 answers

449 views

KendoTreeView search with LoadOnDemand true

Hello

I have a treeview which is bound to remote dataset. LoadOnDemand is true so everytime a node is clicked read is called with id to load ist children.

Now i want to have serach box where text Input should filter the treeview to all Levels.

I tried this way

http://docs.telerik.com/kendo-ui/controls/navigation/treeview/how-to/filter-out-search-results

But it does not work as expected as i believe this methos is for loadondemand false.

Can you please suggest a way to make it work . I Need LoadOndemand true as i have 2000+ records in tree

Thanks

Anamika

TreeView

answered on 21 Feb 2017