Questions on Kendo UI for jQuery Forum

2 answers

542 views

[Solved] 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

58 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

64 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

266 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

67 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

247 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

300 views

[Solved] 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

1 answer

883 views

White box appearing over content in views on Chrome

Hi,
I wrote a simple timepicker widget and found what seems to be a bug with the scroll container in chrome. When you click on the clock button on the timepicker, a white box covers the majority of the window. I've reproduced the bug in this jsfiddle: http://jsfiddle.net/WX4fR/ It has a temporary css workaround commented out.

I've run into this problem on other views as well. It seems to happen inconsistently with different window dimensions and not specifically with the timepicker widget. My current chrome version is 21.0.1180.60.

Thanks,
Jordan

General Discussions

answered on 06 Aug 2012

1 answer

227 views

[Solved] textContent not working with IE7/8

Hi,
I've been using the suggested method of testing the textContent property when a tab is selected to identify the new current tab.. It works fine with Chrome, FF, IE9 but the textContent property appears to be undefined with IE7/8. Example code below. is this a bug?:

<!DOCTYPE html>
<html>
<head>
<title></title>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.kendostatic.com/2012.2.710/js/kendo.web.min.js"></script>
   <link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css" rel="stylesheet" />
</head>
<body>

<div id="example" class="k-content">
       <div id="tabStrip">
           <ul>
               <li class="k-state-active">
                   Paris
               </li>
               <li>
                   New York
               </li>
               <li>
                   London
               </li>
           </ul>
       </div>
   </div>

<script type="text/javascript">
   $(document).ready(function () {
       var tabstrip = $("#tabStrip").kendoTabStrip({
           select: onSelect
       });
   });

   function onSelect(e) {
       alert(e.item.textContent);
   }
</script>
</body>
</html>

Regards, Ian

TabStrip

answered on 06 Aug 2012

0 answers

81 views

dataSource and kendoGrid don't sync on server side error

kendoGrid automatically removes a row from the grid once the delete button has been clicked. However, I don't want this to happen if the server throws an error.

I've half-resolved the issue by calling grid.dataSource.read() on errors so that the grid reloads the not-yet-deleted row. However, on any other command, the grid continues to try to delete this row and continues to throw the same error.

I want my grid to try to delete a row on the server and remove the row from the grid when the action is complete. If the server throws an error, I want the grid to display the error and stop trying to delete the entry. How do I do this?

Grid

asked on 06 Aug 2012