Questions on Kendo UI for jQuery Forum

1 answer

393 views

Duplicate Multiple Inserts on Update Insert and Delete commands

The code (nothing wrong with the code)

@(Html.Kendo().Grid<CourseTypeViewModel>()

      .Name("MyCourseTypesGrid")

      .Editable(e => e.Mode(GridEditMode.InLine))

      .ToolBar(toolbar => toolbar.Create().Text("New Course"))

      .Columns(columns =>

          {

              columns.Bound(o => o.Title);

              columns.Bound(c => c.IsActive).Width(60);

              columns.Bound(c => c.DotCourse).Width(60);

              columns.Bound(c => c.RenewalInterval).ClientTemplate("#=RenewalInterval# (#=TimeFrame#)").Width(60);

              columns.Bound(c => c.TimeFrame).Width(80);

              columns.Command(command =>

                  {

                      command.Edit();

                      command.Destroy();

                  }).Width(200);

          }).Sortable().Pageable().Groupable()

        .DataSource(datasource => datasource

        .Ajax()

        .Model(p => p.Id(m => m.Id))

        .Create(create => create.Action("InsertCourseType", "Admin"))

        .Read(read => read.Action("CourseTypesGridData", "Admin"))

        .Update(update => update.Action( "UpdateCourseType", "Admin"))

        .Destroy(delete => delete.Action("DeleteCourseType", "Admin"))))

Just posting this because I saw some similar posts that seemed unanswered
I was having some problems in that whenever I updated an item in my grid I was finding new records filling up
my database.
Update the record
During debugging I was seeing that the insert method was being called multiple times instead of the expected update. This was very frustrating.
10 new rows
I noticed that the the number of new phantom rows was equal to the number of records showing on the page.
The solution
It seems that the update or insert for the grid is based on the id being zero. I don't know what this would mean for other types. Anyhow, the problem is that in my viewmodel code I had forgot to copy over the primarykey ids so they were all zero.
The kendo grid
Apparently, decides to do an insert for every PrimaryKey equalling zero. If a non-zero value is there the update method is called.

Grid

answered on 15 May 2013

1 answer

101 views

Kendo problem with jquery ui dialog

Your kendo.common.css contains the following declaration

:-webkit-any(body):after {
content: "";
display: block;
visibility: hidden;
height: 0;
font: 0/0;
-webkit-transform: translateZ(0);
}

The content css property cause a problem in jquery ui dialog - the scrollbar of the dialog are invisible/disapears
If i am removing the content (putting in comment) all works well - scroll bars appears.

Are you familar with such problem? what can be cause by removing the conten:"" css property.

Thanks
Sigal

General Discussions

answered on 15 May 2013

1 answer

143 views

Unable to stop default navigation of tabstrip.

In my application we are showing multiple views under a same tab.
Here I am adding two screenshots to illustrate the case.
Here the active tab has href = [the id of the calendar view].
now from the details(view as shown in details.png) page when I am tapping the calendar icon of the tabstrip(i,e the active tab) it's navigating to the calendar(view as shown in calendar.png) view.
I wanted to stop this navigation, but I am not being able to do so.
I have tried adding jQuery click event on the tabs but it's not firing the click event when its related view is not visible.
Please refer me a way to do that.
Thanks Dave

TabStrip (Mobile)

answered on 15 May 2013

3 answers

843 views

Lazy Load Initial Grid Data MVC

I am using code as follows

Kendo().Grid

      ...

      .DataSource(datasource => datasource

.Ajax()

.Model(m => m.Id(p=> p.Id))

.Read(read => read.Action("ClassificationTypesGridData", "Admin"))

I have seven grids that load in hidden divs. I don't want them to fetch data until the my show grid button is clicked.

Grid

answered on 15 May 2013

3 answers

89 views

Drag & Drop: Potential Bug

I believe I have found a bug in the TreeView control. I have produced this in FF & IE latest, within the attachment.

To reproduce:

Expand "outer 6"
Drag "inner 3" over "outer 1" and release
Drag "outer 1" over "inner 2" and release
ISSUE: "inner 3" disappears
ISSUE: try collapsing "inner 2", spinner graphic stays

I'm thinking this has to do with the fact that I started with an existing ul/li structure as it doesn't appear to happen on the demos.

If I'm incorrect here, what is the resolution?

JB

TreeView

answered on 15 May 2013

1 answer

214 views

TreeView - Binding to remote data - How to bind when parent and child datafield is different

I m using MVC 4 and trying bind to database using below sample

@(Html.Kendo().TreeView()
.Name("treeview")
.HtmlAttributes(new {@class="demo-section" })
.DataTextField("Table")
.DataSource(dataSource => dataSource
.Read(read => read
.Action("GetData", "TreeView")
)))

but I can't get it work because my data is like
- Table1 (Table)
- Column1.1 (Column)
- Column1.2
- Table2
- Column2.1
- Column2.2

When i use .DataTextField("Table"), I only manage to get parent tree view without child.
I wonder how to put in DataTextField since parent field is Table while child field is Column.

Please help!

TreeView

answered on 15 May 2013

1 answer

551 views

Kendo Grid Filter on a dynamic column

I am working on a Kendo Grid which has a Status column that is an aggregate of statuses of several other columns. I track the individual statuses as integer values and the aggregate column should show the least of the statuses. Now, using template, I am able to render the text for the Status column fine, however, the problem is that I want this column to be filterable. This is not working as the value is calculated.

In DataSource, this is how I have declared the custom field,

schema: {
model: {
Status: function () {
return helper.GetStatus(this.EntriesStatus);
}
}
}

This is how I used it in the Column definition,

{
field: "Status",
title: "Status",
width: "100px",
filterable: true,
template: kendo.template("#if (HasError) {# <strong class='clrRed' > \#= Status() #\ </strong> #} else { # \#= Status() #\ #} #"),
hidden: false,
menu: false
}

Could anyone point out where I am going wrong or a more efficient way out?

Grid

answered on 15 May 2013

13 answers

528 views

Widget Display with changed Font Size

When changing a page's font size, the widgets do not display perfectly. Some parts of the widgets are mis-aligned, and other things happen.

For an example, open http://demos.kendoui.com/web/numerictextbox/index.html. Then with Chrome Developer Tools select the first "input type=text" and as the element's style enter a font size of 16px.

The "up/down" buttons will stay at their current location at the top of the span. They should be vertically centered instead.
The border at the left side of the "up/down" buttons is too short. There is a gap at the bottom.

What do you suggest? Is it easily possible to change the font size? Can some "magic" be applied globally? Or has this to be done widget for widget?

Michael G. Schneider

General Discussions

answered on 15 May 2013

0 answers

281 views

How can I add a class|style to a row depending on value within row item?

Hi,

I have a grid that has roughly 12 columns each that map to a field within the data or combine multiple.

My question is is there an easy way for me to add a class to a row if a value meets certain criteria?

Example:

[{Status: Up, ............},{Status:Down,.........}]

First row may be green text, second row may be red text.

I was hoping for something easier than creating a row template, as I am afraid that if I do a row template I lose the ability to show/hide columns and filter. I also didn't want to do the row template simply to keep my html minimal.

Is there a better way that I have overlooked?

**Edit**

I suppose I could create a template for each column item and check the desired field and apply the css there.
{ field: 'Number', title: '#', template:'<div class="a-status-#= Status#">#=Number#</div>' },
Though I do not know how to perform a validation check with the kendo syntax
** if (Status === "Up") add class, else do nothing **

** Edit 2 **

Nevermind, poor research on my part. Found another question which adresses the same issue.

http://www.kendoui.com/forums/ui/grid/kendo-ui-style-grid-rows.aspx

I have used the Databound event solution.

Grid

asked on 14 May 2013

1 answer

139 views

Abort AJAX request on close event Kendo Window

Hi, my question is how can I abort/cancel the ajax request that is made when I open a Kendo Window with the content as the answer from a URL. This is import for me, because the ajax request that I make takes about 30 seconds to be answered and if a close the window before that, I cant open the window again until the answer comes, because the ajax request keeps working in the browser and blocks the new request. In JQuery you can call abort() to the ajax request object, but i cant find that object in the Kendo Window documentation.

Thanks for youre time

Window

answered on 14 May 2013