Telerik Forums
UI for ASP.NET MVC Forum
4 answers
406 views
Hello,

I can't get failure of delete action to work correctly in the crud grid examples

If I return an error from the server (usually because foreign key relation prevents delete):

 public ActionResult DeleteModel([DataSourceRequest] DataSourceRequest request, tb_model_list model)
        {
...
...
            ModelState.AddModelError("modelcode", "Can't Delete.");
            return Json(ModelState.ToDataSourceResult());
        }

then the row is still deleted from the grid ?

Marcel
Marcel
Top achievements
Rank 1
 answered on 09 Jan 2013
3 answers
646 views

Hello again,
I tried to make the Detail Template example from the local installed examples and it gives me this message

The following sections have been defined but have not been rendered for the layout page "~/Views/Shared/_Layout.cshtml": "HeadContent".

this is the cshtml

@{
    ViewBag.Title = "DetailGrid";
}

<h2>DetailGrid</h2>

@model IEnumerable<KendoUIMvcApplication2.ViewModels.EmployeeViewModel>

@{ Html.Kendo().Grid(Model)
    .Name("Employees")
    .Columns(columns =>
    {
        columns.Bound(e => e.FirstName).Width(140);
        columns.Bound(e => e.LastName).Width(140);
        columns.Bound(e => e.Title).Width(200);
        columns.Bound(e => e.Country).Width(200);
        columns.Bound(e => e.City);
    })
    .DetailTemplate(e =>
    {            
            Html.Kendo().TabStrip()
                    .Name("TabStrip_" + e.EmployeeID)
                    .SelectedIndex(0)
                    .Items(items =>
                    {
                        items.Add().Text("Orders").Content(@<text>
                                
                                @(Html.Kendo().Grid(e.Orders)
                                        .Name("Orders_" + e.EmployeeID)
                                        .Columns(columns =>
                                        {
                                            columns.Bound(o => o.OrderID).Width(101);
                                            columns.Bound(o => o.ShipCountry).Width(140);
                                            columns.Bound(o => o.ShipAddress).Width(200);
                                            columns.Bound(o => o.ShipName).Width(200);
                                            columns.Bound(o => o.ShippedDate).Format("{0:d}");
                                        })
                                        .Pageable()
                                        .Sortable()
                                )
                                
                        </text>);
                        items.Add().Text("Contact Information").Content(                                
                                @<div class="employee-details">                                    
                                    <ul>
                                        <li>
                                            <label>Birth Date:</label>@e.BirthDate.Value.ToString("d")
                                        </li>
                                        <li>
                                            <label>Country:</label>@e.Country
                                        </li>
                                        <li>
                                            <label>City:</label>@e.City
                                        </li>
                                        <li>
                                            <label>Address:</label>@e.Address
                                        </li>
                                        <li>
                                            <label>Home Phone:</label>@e.HomePhone
                                        </li>
                                    </ul>
                                </div>);                                                       

                    })
                    .Render();
    })
    .RowAction(row =>
    {
        if (row.Index == 0)
        {
            row.DetailRow.Expanded = true;
        }
    })
    .Pageable()
    .DataSource(dataSource => dataSource.Server().PageSize(5))
    .Sortable()
    .Render();
}

@section HeadContent {
    <style scoped="scoped">
        .employee-details ul
        {
            list-style:none;
            font-style:italic;
            margin-bottom: 20px;
        }

        .employee-details label
        {
            display:inline-block;
            width:90px;
            font-style:normal;
            font-weight:bold;
        }
    </style>


And i cannot find it in  the \shared where to look for this section,or maybe is not defined,in this case where should i define this?

Online example has a different approach more clear,but it doesn't show the actions from the controller like this
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
    .Name("Employees")
    .Columns(columns =>
    {
        columns.Bound(e => e.FirstName).Width(140);
        columns.Bound(e => e.LastName).Width(140);
        columns.Bound(e => e.Title).Width(200);
        columns.Bound(e => e.Country).Width(200);
        columns.Bound(e => e.City);
    })
    .ClientDetailTemplateId("employeesTemplate")
    .Pageable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("HierarchyBinding_Employees", "Grid"))
        .PageSize(5)
    )
    .Sortable()
    .Events(events => events.DataBound("dataBound"))
)

<script>
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
</script>

<script id="employeesTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
            .Name("TabStrip_#=EmployeeID#")
            .SelectedIndex(0)
            .Items(items =>
            {
                items.Add().Text("Orders").Content(@<text>
                    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
                        .Name("Orders_#=EmployeeID#")
                        .Columns(columns =>
                        {
                            columns.Bound(o => o.OrderID).Width(101);
                            columns.Bound(o => o.ShipCountry).Width(140);
                            columns.Bound(o => o.ShipAddress).Width(200);
                            columns.Bound(o => o.ShipName).Width(200);
                        })
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
                        )
                        .Pageable()
                        .Sortable()
                        .ToClientTemplate())
                </text>                        
                );
                items.Add().Text("Contact Information").Content(
                    "<div class='employee-details'>" +
                        "<ul>" +
                            "<li><label>Country:</label>#= Country #</li>" +
                            "<li><label>City:</label>#= City #</li>" +
                            "<li><label>Address:</label>#= Address #</li>" +
                            "<li><label>Home Phone:</label>#= HomePhone #</li>" +
                        "</ul>" +
                    "</div>"
                );                
            })
            .ToClientTemplate())
</script>

<script>
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
</script>

@section HeadContent {
    <style scoped="scoped">
	    .employee-details ul
        {
            list-style:none;
            font-style:italic;
            margin-bottom: 20px;
        }

        .employee-details label
        {
            display:inline-block;
            width:90px;
            font-style:normal;
            font-weight:bold;
        }
    </style>

Which version is correct or better?
and for the version using the section,where do i have to declare that section,in _layout.cshtml or where and, how?
Atanas Korchev
Telerik team
 answered on 09 Jan 2013
1 answer
190 views
Hi,

I have a grid that is using ClientRowTemplate and when I add a new record the popup editor does not display, it just adds a blank uneditable record in the grid.  Is it possible to use ClientRowTemplate and still us popup editing/adding?

Thank you,
David A.
Dimiter Madjarov
Telerik team
 answered on 08 Jan 2013
1 answer
285 views
Hello.
I have some problem with Grid.
I have some grid with colums: Id, firstName, lastName and template YearOfBirth...
Here is my viewModels

Person = kendo.data.Model.define({
        id: "",
        firstName: "",
        lastName: "",
        age: "",
        myFunc: function () {
            return 2013 - this.age;
        }
    });
 
    viewModel = kendo.observable({
        personArr: [],
        loadDataFromController: function () {
            personArr = new kendo.data.ObservableArray([]);
            var vm = this;
            $.ajax({
                dataType: 'json',
                url: '/Home/GetPersons',
                success: function (json) {
                    vm.setData(json);
                }
            });
        },
        setData: function (json) {
            for (var i = 0; i < json.length; i++) {
                var temp = new Person();
                temp.id = json[i].Id;
                temp.firstName = json[i].FirstName;
                temp.lastName = json[i].LastName;
                temp.age = json[i].Age;
                this.get("personArr").push(temp);
            }
        }
    });
    viewModel.loadDataFromController();
    kendo.bind($('#PersonGrid'), viewModel);


and here is my KendoGrid initialization

<div id="PersonGrid">
    @(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns =>
        {
            columns.Bound("id").Groupable(false);
            columns.Bound("firstName");
            columns.Bound("lastName");
            columns.Template(@<text></text>).ClientTemplate("#=myFunc()#").Width(120).Title("Year of birth");
        })
    .Sortable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
     )
    .Pageable(page => page.PageSizes(true))
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new Dictionary<string, object>
        {
            {"data-bind", "source: personArr" }
        })
    )
</div>

Everything is fine, but I can't sort my last column with template myFunc
How I can fix this ?


Dimo
Telerik team
 answered on 08 Jan 2013
3 answers
666 views
I am trying
var grid = $("#Grid").data("kendoGrid");
grid.dataSource.read();
but it doesn't work. I found another post in the non-mvc forum where somebody had to set "cache" to false.  Is this required?  If so, how do I set this cache setting using the MVC Helper?
Pat
Top achievements
Rank 1
 answered on 07 Jan 2013
6 answers
445 views
I would like to see the complete functional code for the "Editing custom Editor" for Grid ,because something is missing there(in the online example).
there is a line:
columns.Bound(p => p.Employee).ClientTemplate("#=Employee.EmployeeName#");
but who is ("#=Employee.employeeName") and also is correct that syntax? .i supose it should be a template.but where it is?

I would like to add inside the grid also the Category of the product(which means a Dropdownlist with all the categories), just like in the example,but the code is for Order-Employee case.either way is still missing something there that template and how is bound to that list of that FK in our case, CategoryID.
Or again,if i can get an complete functional example for MVC(cshtml file and the code from the controller) with Northwind database just like in the online example.
Again i mention that in the \Program files(x86)\Telerik\Kendo UI for ASP.MVC there is NO \Examples folder with the examples,it would be nice to have all those examples,if they work.

thanks in advance.

Daniel Knoll
Top achievements
Rank 1
 answered on 07 Jan 2013
9 answers
159 views
Hi,

I am trying to buil a customer detail page with MVC4. On thisdetail page I have the grid listing all adresses of the customer. So far so good. When a user edits the data in the address grid and clicks "Save", the controller receives only the data which was valid before the user edited the address.

Html.Kendo().Grid(Model.Adresses).Name("AddressGrid")
                .Columns(columns =>
                {
                    columns.Bound(a => a.Name).Width(100);
                    columns.Bound(a => a.StreetLine1).Width(100);
                    columns.Bound(a => a.StreetLine2).Width(100);
                    columns.Bound(a => a.ZipCode).Width(100);
                    columns.Bound(a => a.City).Width(100);
                    columns.Bound(a => a.Country).Width(100);
                    columns.Bound(a => a.Type).Width(100);
                    columns.Command(cmd => { cmd.Edit(); }).Width(100);
  
                })
                .ToolBar(commands =>
                    {
                        commands.Save();
                    })
                .Editable(editable => editable.Mode(GridEditMode.InCell))
                .DataSource(ds => ds.Ajax()
                                        .Batch(true)
                                        .ServerOperation(false)
                                        .Model(m =>
                                        {
                                            m.Id(i => i.Id);
                                            m.Field(i => i.Id).Editable(false);
                                            m.Field(i => i.Name).Editable(true);
                                            m.Field(i => i.StreetLine1).Editable(true);
                                            m.Field(i => i.StreetLine2).Editable(true);
                                            m.Field(i => i.ZipCode).Editable(true);
                                            m.Field(i => i.City).Editable(true);
                                            m.Field(i => i.Country).Editable(true);
                                            m.Field(i => i.Type).Editable(true);
                                        })
                                        .Update(update => update.Action("Customer_Update", "Customer",new { Command = "Update" }))
                              )
Atanas Korchev
Telerik team
 answered on 07 Jan 2013
1 answer
86 views
Dear all,
What I wish to do is the following,
imagine having a feed that has two fields for example city, postcode and I wish in the autocomplete when someone types the city on select to autocoplete the postcode.

is it possible?
Georgi Krustev
Telerik team
 answered on 07 Jan 2013
1 answer
159 views
Hello I have a grid in my razor view,
I have added these resources
<link rel="stylesheet" href="@Url.Content("~/Content/KendoThemes/kendo.common.min.css")">
    <link rel="stylesheet" href="@Url.Content("~/Content/KendoThemes/kendo.rtl.min.css")">
    <link rel="stylesheet" href="@Url.Content("~/Content/KendoThemes/kendo.default.min.css")">
 
<script src="@Url.Content("~/Scripts/jquery.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo.web.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>


here is my grid

  
@(Html.Kendo().Grid<Nop.Web.Models.Customer.CustomerInfoModel>()
    .Name("Grid")   
    .Columns(columns => {       
        columns.Bound(p => p.Active);
       // columns.Bound(p => p.cbSubscriptions).ClientTemplate("#=Employee.EmployeeName#");
        columns.Bound(p => p.cbSubscriptions);
        columns.Bound(p => p.FirstName);
        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("EditingInline_Create", "Customer"))
                        .Read(read => read.Action("UsersList", "Customer"))
                .Update(update => update.Action("EditingInline_Update", "Grid"))
                .Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
            )
)
<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>

This works fine. it calls my action in controller to read the data, but the problem is that, it is displaying any rows in grid, even the controller returns the record. I have checked the console, there is no script error, and my network tab shows that these data has been transferred from the server. 

  1. data[{Email:familymanager1_user1@gmail.com, AllowUsersToChangeUsernames:false, UsernamesEnabled:false,…},…]
    1. 0{Email:familymanager1_user1@gmail.com, AllowUsersToChangeUsernames:false, UsernamesEnabled:false,…}
    2. 1{Email:familymanager1_user2@gmail.com, AllowUsersToChangeUsernames:false, UsernamesEnabled:false,…}
    3. 2{Email:familymanager1_user3@gmail.com, AllowUsersToChangeUsernames:false, UsernamesEnabled:false,…}
    4. 3{Email:as@sad.com, AllowUsersToChangeUsernames:false, UsernamesEnabled:false, Username:aasasasasas687,…}
  2. total4

Am I missing something to add. 
Nikolay Rusev
Telerik team
 answered on 07 Jan 2013
1 answer
205 views
I read http://www.kendoui.com/code-library/mvc/grid/binding-to-a-web-apicontroller.aspx , but remote WebApi not work
@(Html.Kendo().Grid<KendoUIMvcApplication3.Models.Product>()
      .Name("Grid")
      .Columns(columns =>
      {
          columns.Bound(p => p.ProductName);
          columns.Bound(p => p.UnitsInStock);
          columns.Command(c =>
          {
              c.Edit();
              c.Destroy();
          });
      })
      .ToolBar(tools =>
      {
          tools.Create();
      })
      .Sortable()
      .Pageable()
      .Filterable()
      .DataSource(dataSource => dataSource
        .Ajax()
            .Model(model =>
            {
                model.Id(p => p.ProductID);
            })
            .Read(read => read.Url("http://192.168.1.10:699/api/Product").Type(HttpVerbs.Get))
            .Create(create => create.Url("http://192.168.1.10:699/api/Product").Type(HttpVerbs.Post))
            .Update(update => update.Url("http://192.168.1.10:699/api/Product").Type(HttpVerbs.Put))
            .Destroy(destroy => destroy.Url("http://192.168.1.10:699/api/Product").Type(HttpVerbs.Delete))
      )
)
 
<script>
 
$(function() {
    var grid = $("#Grid").data("kendoGrid");
 
    // WebAPI needs the ID of the entity to be part of the URL e.g. PUT /api/Product/80
    grid.dataSource.transport.options.update.url = function(data) {
        return "http://192.168.1.10:699/api/Product/" + data.ProductID;
    };
 
    // WebAPI needs the ID of the entity to be part of the URL e.g. DELETE /api/Product/80
    grid.dataSource.transport.options.destroy.url = function(data) {
        return "http://192.168.1.10:699/api/Product/" + data.ProductID;
    };
});
 
</script>


Atanas Korchev
Telerik team
 answered on 07 Jan 2013
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
ComboBox
Upload
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
Accessibility
ListView (Mobile)
Pager
ColorPicker
DateRangePicker
Security
Wizard
Styling
Chat
DateInput
MediaPlayer
TileLayout
Drawer
SplitView
Template
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
SegmentedControl
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?