Questions on UI for ASP.NET MVC Forum

1 answer

168 views

[Solved] CRUD operations via Ajax problems

I've implemented a simple grid with popup editor templates. CRUD operations are implemented using AJAX calls.

Problem 1 - Duplicate records being created.
I create a first record and it is added fine. When I create a second record, the first one is duplicated (along with the second record being created). I have resolved this issue by setting the ID of the model on creation and returning to client.

Problem 2 - Multiple Delete calls
When I delete one record it works fine. When I delete a second record, two calls are made, this one and the previous one. As the previous record has already been deleted an exception is generated.

Problem 1 and 2 are both resolved if I refresh the browser after each operation. Is this a known issue? Is there a way to manually refresh the grid after each operation?

Grid

answered on 04 Apr 2013

3 answers

131 views

Strange behavior when using objects within objects using Grid.

I am unable to get the grid to show the date properly when using objects within objects.
Here's a small example of where I am seeing this problem

HomeController.cs

public ActionResult Index()

{

return View();

}

public static IEnumerable<Models.Customer> GetCustomers()

{

var db = new Data.SomeDataContext();

var query = ...

return query;

}

public static IEnumerable<Models.Orders> GetOrders()

{

var db = new Data.SomeDataContext();

var query = ...

return query;

}

public ActionResult CustomerOrder_Read([DataSourceRequest] DataSourceRequest request)

{

var query = from o in GetOrders()

join c in GetCustomers() on o.CustomerAccountNumber equals c.AccountNumber

select new CustomerOrder

{

Order = o,

Customer = c

};

return Json(query.ToDataSourceResult(request));

}

~/Home/Index.chtml

<div>

@(Html.Kendo().Grid<Apex.Models.CustomerOrder>()

.Name("Grid")

.Columns(col =>

{

col.Bound(p => p.Order.OrderId);

col.Bound(p => p.Order.Date);

col.Bound(p => p.Order.Status);

col.Bound(p => p.Customer.Name);

col.Bound(p => p.Customer.Mobile);

})

.DataSource(data => data

.Ajax()

.PageSize(10)

.Read(read => read.Action("ServiceOrder_Read", "Home"))

)

.Sortable()

.Pageable()

)

</div>

ExampleModels.cs

public class CustomerOrder

{

public Customer Customer { get; set; }

public Order Order { get; set; }

}

public class Customer

{

public string AccountNumber { get; set; }

public string Name { get; set; }

public string Mobile { get; set; }

public DateTime CreatedDate { get; set; }

public DateTime ModifiedDate { get; set; }

}

public class Order

{

public string Status { get; set; }

public string OrderId { get; set; }

public DateTime Date { get; set; }

}

Result

The problem is that the grid results should show a DateTime; However, it shows this...

Order    Date                     Status    Name    Mobile      
00-01    /Date(1364670000000)/    Open      Adam    111-111-1111
00-02    /Date(1364670000000)/    Closed    Eve     222-222-2222
00-03    /Date(1364670000000)/    Open      Buddha  333-333-3333

Grid

answered on 04 Apr 2013

1 answer

196 views

Back Button Support

Does the KendoUI grid for ASP.NET MVC gracefully handle the back button out of the box? I assume it would do something like adding page numbers, search filters, sorting options, etc. as hashtags to the URL.

Is this possible?

Thanks!

Grid

answered on 04 Apr 2013

8 answers

510 views

CrossTab

Hello
I want to implement "CrossTable"!
I found an example from Telerik, but could not find from you!

http://www.telerik.com/community/forums/aspnet-ajax/grid/cross-tab-pivot-style-data-entry.aspx

Can I use something other than DataTable (gridBindingToDataTable)?

please help!
and sorry for my bad english!

Grid

answered on 04 Apr 2013

1 answer

426 views

Hide command buttons icon

How to add command button icons? I would like to show only text.

For example command below display Delete button but I would like to hide icon which appears near the button.

columns.Command(commands =>
{
commands.Destroy()
})

Grid

answered on 03 Apr 2013

3 answers

801 views

Model binding to complex object not working when updating (ModelState.IsValid == false)

Been looking hard for answers to this but haven't been successful. These are the conditions:

MVC 4
Kendo MVC 2013,1,319,340
Grid using Ajax Binding
Using Web Api

I'm binding the grid to a model with a structure that looks something like this:

Organization
- Id
- Name
- Address
---- Id
---- Street
---- Zip
---- City

Most works fine (Creating (POST), Deleting (DELETE), Get (get)). However, when trying to update (PUT), the Address is not properly bound in the controller. I've attached a screenshot from fiddler showing the request body. Looks kinda weird to me.

I've also attached two screens showing the invalid ModelState and the error.

So, my question is if it's possible to properly bind the whole object (Organization) including the Address? I quess my model could be flattened but if possible I'd like to avoid that to keep it cleaner.

Grid

answered on 03 Apr 2013

5 answers

220 views

batch mode appear validations

Hello,
i have a strange error when i am using the grid in batch mode.
even if i have all the values in the grid fields when i press the save changes button,it appears a message box with some required validation errors.I put some validations on the viewModel
something like this
[Required(ErrorMessageResourceType = typeof(Payroll.Resources.Resources),ErrorMessageResourceName = "ValidationMessage_Required")]
public string Name { get; set; }

indeed i put that javascript code
<script type="text/javascript">

function error_handler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}
</script>
but the validations should active only if i do not have anything in the grid fields.

Why it appears those messages?what could be the error?

Regards,
Daniel

Grid

answered on 03 Apr 2013

1 answer

140 views

[Solved] Navigation and saving issues with editor template - multiple input boxes

Hello,

I'm having a problem with an editor template that I have inside the grid. I'm using an inline edit grid with keyboard navigation turned on. The editor template has 3 Kendo Numeric Textboxes in it, so when the user goes into the grid cell they will see all three textboxes. They are supposed to be able to type in those three inputs and then move on to the next cell to be edited. I've run into a couple of problems with this and was hoping to get some help as to the best way to handle this type of input.

1) My first issue was that the tabbed navigation did not work inside the cell. Initially focus goes to the first input control, which is as desired. But then if the user hits the tab key the focus goes to the next cell in the grid. The behavior I was hoping for was that focus would go to the next control in the cell. I was able to solve this issue by binding to the "keydown" event on the input controls and manually handling the tab key press and setting focus to the next control. But I'm wondering if there is a better way to handle this or if this is something that the control should handle out of the box?

2) The second issue is a little more problematic because I haven't been able to figure out a workaround. I'm using the grid Save event to run some custom logic to handle saving these multiple values back to my model. With the keydown code that I implemented above, the Save event fires after tabbing out of the first two textboxes. But when tabbing out of the last textbox the Save event does not fire. The difference with the last textbox is that I'm not overriding the keydown code anymore and just letting the grid navigate to the next cell. But shouldn't the Save event still fire in this case?

Let me know if my description makes sense or if I can provide any additional detail. If it would be helpful I can try to use the demo source code to create an example of my situation.

Thanks for your help!

Regards,
Brian

Grid

answered on 02 Apr 2013

2 answers

702 views

[Solved] Extending GridBuilder and putting default columns at the END of the column list

Hey peeps,

I am a bit stuck on this problem.
I have a ton of maintenance CRUD views that I am implementing in my project. I use convention to ensure I am consistent with naming of repo's, views, editors, etc... and using this to simplify the building of my grids with editor templates etc...
I have created an HtmlHelper extension that returns a GridBuilder<T> so that I can keep the building of the grids for my CRUD views uniform and consistent - and give me a single place to make changes if necessary.
All my grids will show a CreatedOn column and a Commands column with Edit and Destroy buttons. I cannot figure out a way to get these columns to ALWAYS be at the END of the column list. All works hundreds with the creation of the grid but these 2 columns are always FIRST in the list and I don't want them to be.

Here is a simple example.
First the extension I have created. Note the 2 columns created here which will display in all views that use this grid.

public static class HtmlHelperExtensions

{

public static GridBuilder<T> SavitarCRUDGrid<T>(this HtmlHelper helper, string name)

where T : class, IEntity

{

string entityType = typeof(T).ToString();

int index = entityType.LastIndexOf('.');

entityType = entityType.Substring(index + 1, entityType.Length - (index + 1));

return helper.Kendo().Grid<T>()

.Name(name)

.Groupable()

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

.Pageable()

.Selectable(e => e.Mode(GridSelectionMode.Single))

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

.Columns(columns =>

{

columns.Bound(p => p.CreatedOn).Width(100).Format("{0:dd/MM/yyyy}");

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

})

.Editable(editor => editor

.Mode(GridEditMode.PopUp)

.Window(window => window

.Name("EditorWindow")

.Title("Smartrail Editor")

.Visible(false)

.Modal(true)

.Width(475)

.Render()

)

.TemplateName(entityType + "Editor")

)

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

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

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

.Create(x => x.Action("Editor_Create", entityType))

.Read(x => x.Action("Editor_Read", entityType))

.Update(x => x.Action("Editor_Update", entityType))

.Destroy(x => x.Action("Editor_Destroy", entityType))

.ServerOperation(false));

}

And here is the usage in my EditorTemplate.

@(Html.SavitarCRUDGrid<ReefType>("Grid1")

.BindTo(Model)

.Columns(columns =>

{

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

})

)

This works perfectly, except the order of the columns in the grid is
Created On, Commands, Description
I am trying to get CreatedOn and Commands to the end so my grid renders as
Description, Created On, Commands.

Any ideas?

TIA
Mike

General Discussions