Questions on Kendo UI for jQuery Forum

1 answer

98 views

Grid Edit Popup Lightbox Only Over Grid DIV?

Hi,

Is there a way to have the kendoGrid editing popup window display only over the grid itself, that is, not cover the entire body of the document, but only cover the DIV element that has become the kendoGrid?

Thanks,

Dan

Grid

answered on 07 Aug 2012

0 answers

129 views

Example of using Template column with Asp.net MVC & Razor

Can anyone point me to examples of the two overloads for the template column in a .cshtml file?

Grid

asked on 06 Aug 2012

0 answers

132 views

Grid custom binding to complex model

We have a Kendo grid binding to a custom JSON model. It looks something like this:

{
id: "{GUID}",
name: "user",
attributes:
{
firstname: "Joe",
lastname: "Meadows"
}
}

We are able to get this to bind to the grid using custom templates. In addition, we are able to allow inline editing to work by configuring
the columnInfo "field" value to be "attributes.fieldname".

However, when we go to save the inline edits, the grid is again confused and is trying to write to the root object. Example:

{
id: "{GUID}"
firstName: "Tony",

...
}

How can I get it to properly save my values into my .Attributes collection?

Thank you!

Grid

asked on 06 Aug 2012

2 answers

471 views

Kendo Grid - Update -> odd grid row results - begins duplicating first item

I can recreate this with or without the MVC extensions, but im trying to solve it without but the sample is easier to demonstrate .

To the best of my understanding when kendo grid's datasource makes a request on (Update / Destroy / Create) and is successful (where the result responds status code ok) it will rebind the results (from the response) if presented to the grid.

The problem that I am having now is when it gets to this rebinding part. I created a quick demo using the kendo mvc (trial) to see if there was anything im missing but it ended up doing the same funny things.

Lets say the grid has three items.
{Data: [{Id : 1, Name: "item1"}, {Id: 2, Name: "item2"}, {Id : 3, Name: "item3"}] ... }

When the data is read from the server it is fine.
When the data is updated / created going to the server is fine as well as the new json coming back out of the server.
What happens next is a little odd.

Step1
Lets say I change "item1" to "bob" and click update then everything will look great and the grid will be updated as expected.
Step 2
Lets say I change any other item to "Tim" ... click update then the problem occurs. This row ends up appearing as the first item in the grid.
The obvious thing would be that it doesnt have the id part selected in the datasource which is why I retreated back to kendo mvc to test it correctly as getting the json incorrect is quite a easy thing to do.
(normally I would not have the id as a column, but the test is more relevant)

@(Html.Kendo().Grid<KendoMvcQuickTest.Models.Test>()

.Name("Grid")

.Columns(columns => {

columns.Bound(p => p.Id).Width(100);

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

columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);

})

.ToolBar(toolbar => toolbar.Create())

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

.Pageable()

.Sortable()

.Scrollable()

.DataSource(dataSource => dataSource

.Ajax()

.Events(events => events.Error("error_handler"))

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

.Create(update => update.Action("Create", "Grid"))

.Read(read => read.Action("Read", "Grid"))

.Update(update => update.Action("Update", "Grid"))

.Destroy(update => update.Action("Destroy", "Grid"))

)

The controller

public class GridController : Controller

{

public ActionResult Read([DataSourceRequest] DataSourceRequest request)

{

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

}

public ActionResult Create([DataSourceRequest] DataSourceRequest request, Models.Test[] models)

{

foreach (var testItem in models)

{

testItem.Id = Data.Max(e => e.Id) + 1;

this.Data.Add(testItem);

}

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

}

public ActionResult Update([DataSourceRequest] DataSourceRequest request, Models.Test[] models)

{

foreach (var testItem in models)

{

var item = Data.FirstOrDefault(e => e.Id == testItem.Id);

item.Name = testItem.Name;

}

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

}

public ActionResult Destroy([DataSourceRequest] DataSourceRequest request, Models.Test[] models)

{

foreach (var testItem in models)

{

var item = Data.FirstOrDefault(e => e.Id == testItem.Id);

Data.Remove(item);

}

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

}

private Models.TestColleciton Data

{

get

{

return this.Session["TestCollection"] == null ?

(this.Session["TestCollection"] = Build()) as Models.TestColleciton :

(this.Session["TestCollection"]) as Models.TestColleciton;

}

private Models.TestColleciton Build()

{

var collection = new Models.TestColleciton();

collection.Add(new Models.Test() {

Id = 1,

Name = "item1"

});

collection.Add(new Models.Test()

{

Id = 2,

Name = "item2"

});

collection.Add(new Models.Test()

{

Id = 3,

Name = "item3"

});

return collection;

}

The JavaScript looks like:

<script>

jQuery(function(){jQuery("#Grid").kendoGrid({columns:[{title:"Id",width:"100px",field:"Id",encoded:true,editor:

"\u003cinput class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field Id must be a number.\" data-val-required=\"The Id field is required.\" id=\"Id\" name=\"Id\" type=\"number\" value=\"0\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Id\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"

},{title:"Name",field:"Name",encoded:true,editor:

"\u003cinput class=\"text-box single-line\" id=\"Name\" name=\"Name\" type=\"text\" value=\"\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Name\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"

},{width:"200px",command:[{name:"edit",buttonType:"ImageAndText",text:"Edit"},{name:"destroy",buttonType:"ImageAndText",text:"Delete"}]}],pageable:{},sortable:true,editable:{confirmation:"Are you sure you want to delete this item?",mode:"inline"},toolbar:{command:[{name:null,buttonType:"ImageAndText",text:"Add new item"}]},dataSource:{transport:{read:{url:"/Grid/Read"},update:{url:"/Grid/Update"},create:{url:"/Grid/Create"},destroy:{url:"/Grid/Destroy"}},pageSize:10,page:1,total:0,serverPaging:true,serverSorting:true,serverFiltering:true,serverGrouping:true,serverAggregates:true,type:"aspnetmvc-ajax",filter:[],error:error_handler,schema:{data:"Data",total:"Total",errors:"Errors",model:{id:"Id",fields:{Id:{type:"number"},Name:{type:"string"}}}}}});});

</script>

Everything looks great so far.
Pre Step 1 - read:

{"Data":[{"Id":1,"Name":"item1"},{"Id":2,"Name":"item2"},{"Id":3,"Name":"item3"}],"Total":3,"AggregateResults":null,"Errors":null}

Step 1 - Update row where the Id is 1 to "bob"
Request Result

{"Data":[{"Id":1,"Name":"bob"},{"Id":2,"Name":"item2"},{"Id":3,"Name":"item3"}],"Total":3,"AggregateResults":null,"Errors":null}

Grid looks fine.
Step 2 - Update row where the id is 3 to "tim"
Request Result

{"Data":[{"Id":1,"Name":"bob"},{"Id":2,"Name":"item2"},{"Id":3,"Name":"tim"}],"Total":3,"AggregateResults":null,"Errors":null}

Now the grid looks a bit odd.
a newly updated row looks exactly like the first item. Both the id and name column on row 3 is exactly the same as row 1.

If the page/grid is refreshed then it looks as expected.
the version is: Kendo UI Complete v2012.2.710 (http://kendoui.com), which is from the Telerik Control Panel. Tested with the most recent internal build js files and the same problem.

If there is no json result then the grid is fine ie just give a response status code, but this causes problems to the 'created' items, as they wont know their relevant ids.

Is there something trivial that I'm missing here? I'm fairly sure I've had this simple functionality working before, but might be just having one of those days.

Thanks to anyone able to help.

Matt

Grid

answered on 06 Aug 2012

0 answers

44 views

How to get the cell by field property in Update event?

I have a grid Update event that passes (e) to the function and I'm sure I should be able get the cell by field name but I'm not sure how. I want to change the css of the cell once I get it like I am here:

  $('tr[data-uid="' + row.uid + '"] td:nth-child(1)').css("background-color", "Pink"); 

I can see in Firebug (attached file has screenshot) that the cells are included in (e), the one I'm 
trying to get is named PO_ID.

Grid

asked on 06 Aug 2012

0 answers

47 views

How to get the cell by title in Update event?

I have a grid Update event that passes (e) to the function and I'm sure I should be able get the cell by field name but I'm not sure how. I want to change the css of the cell once I get it like I am here:

  $('tr[data-uid="' + row.uid + '"] td:nth-child(1)').css("background-color", "Pink"); 

I can see in Firebug (attached file has screenshot) that the cells are included in (e), the one I'm 
trying to get is named PO_ID.

Grid

asked on 06 Aug 2012

0 answers

242 views

Is there a good wireframe tool to use with Kendo UI?

I plan to create an ASP.NET MVC3 based website, that uses EF 5.0 for database access, built using VS2012 and .NET 4.5.

A couple questions please-

1. Is Kendo UI the best choice for an ASP.NET MVC3 website that must run on IE7 and works with .NET 4.5?
2. Is there a decent wireframe or website mocking tool that I can from within VS2012 that will later work with Kendo UI?

Thanks, Dave

General Discussions

asked on 06 Aug 2012

0 answers

47 views

How to customize the style of editing popup

Hi everybody,

I'm new on KendoUI.How do I customize the popup editor? Height, width, background...

Can anyone help me?

Thanks in advance.

Grid

asked on 06 Aug 2012

1 answer

221 views

DataSource Caching

Hi I was wondering if it were possible to cache a datasource from one page to another. I have seen a previous thread mention that you can use cache: "inmemory" inside the read attribute but that t is cleared when the page is refreshed. Unfortunately my page has to be refreshed on clicks but would like to keep my datasources if the query are the same. Thanks J

Data Source

answered on 06 Aug 2012

5 answers

240 views

Unterminated kendo min scripts cause error when combining script files

I use the Telerik MVC ScriptRegistrar to combine and compress all my javascript files. I noticed that unlike the Telerik MVC javascript files, the contents of kendo minified javascript files are not terminated by a semicolon. So when the ScriptRegistrar combines the javascript files, whatever follows my kendo.web.min.js file fails to load properly. In my specific case, it was telerik.common.js.

I didn't notice this until I tried to publish my files to go live, since in debug mode, the ScriptRegistrar does not use the min files. I fixed it by just adding a semicolon in.

Is there something I'm doing wrong, or is this just a pitfall of combining javascript files into one? Should Kendo min files have that semicolon? Or maybe this is a ScriptRegistrar shortcoming?

General Discussions

answered on 06 Aug 2012