Telerik Forums
UI for ASP.NET MVC Forum
4 answers
170 views

I have noticed many glaring omissions and incomplete documentation when trying to look up how to use some of these components.  For example, for the MVC Grid documentation found at http://demos.telerik.com/aspnet-mvc/grid/remote-data-binding it shows in the cshtml code:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()   
    .Name("grid")
    .Columns(columns => {
        columns.Bound(p => p.OrderID).Filterable(false);
        columns.Bound(p => p.Freight);
        columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
        columns.Bound(p => p.ShipName);
        columns.Bound(p => p.ShipCity);
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Orders_Read", "Grid"))
     )
)

Notice the Read method on the DataSource method, pointing to a GET Action called "Orders_Read" in the "Grid" controller.  Of course looking at the controller code example only shows:

using System.Web.Mvc;
using Kendo.Mvc.UI;
using Kendo.Mvc.Extensions;
 
namespace Kendo.Mvc.Examples.Controllers
{
    public partial class GridController : Controller
    {
        public ActionResult Remote_Data_Binding()
        {
            return View();
        }
    }
}

No Orders_Read action there, and no clue as to what other actions the DataSource object can make use of in this Grid context.  I assume the user is supposed to go look up the DataSource component now, which may or may not have an HtmlHelper.  I've noticed that about a few other components...  needing to do something, trying to find hhelp and it takes one to the Kendo UI documentation, where the syntax and building of these components is vastly different than the HTML Helpers of the MVC libraries.

 

So what is the best way to actually learn how to use these components? I'm looking for all levels of help, basic, intermediary, and advanced.  Like using an MVC Grid and the MVVM model together from C# ASP.NET...

 

 

Misho
Telerik team
 answered on 27 Jun 2016
3 answers
305 views

We have an Issue with the Server-side filtering feature from the kendoAutoComplete. This autocomplete is contained in a html form tag. When the request is performed on the asp.net mvc endpoint the DataSourceRequest is completly empty, becuase all the values for this object are in HttpContext.Request.Form, from where the DataSourceRequestAttribute doesn't parse it from. What should we do, to get the DataSourceRequest correctly bound?

HTML Code

<form class="navbar-form" role="search" method="post" action="@Url.Action("Results","Search")">

// some other controls

<div class="input-group">
<span class="k-widget k-autocomplete k-header k-state-default myClass">
<input type="text" id="autoCompleteSearch" name="autoCompleteSearch" class="form-control" />

</span>
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>

 

JS Code:

$('#autoCompleteSearch').kendoAutoComplete({
minLength: 1,
dataTextField: 'Caption',
dataValueField: 'Value',
filter: "contains",
dataSource: {
serverFiltering: true,
transport: {
read: {
type: "post",
dataType: "json",
url: '@Url.Action("AdvancedSearchAutoComplete_Read", "AjaxValues")?searchType=' + window.searchType
}
},
schema: {
data: "Data"
}
}
});

Server-side:

[System.Web.Mvc.HttpPost]
public JsonResult AdvancesSearchAutoComplete_Read(int searchType, [DataSourceRequest] DataSourceRequest request)
{

//...

}

 

Thank you in advance!

Peter Milchev
Telerik team
 answered on 24 Jun 2016
1 answer
2.3K+ views

Hello,

is it possible to remove the title and the Update and Cancel button so that I can use my own template?
(if yes how to call the upade and cancel with javascript)

I want to have my own Toolbar with update and cancel and some other bottons and also e special title bar...

robert

Maria Ilieva
Telerik team
 answered on 24 Jun 2016
5 answers
776 views

Hello,

I am a beginner with kendo UI and have a problem with the following input box:

<input data-role="datepicker" data-format="dd.MM.yyyy" data-bind="enabled: isEnabled, value: DateToSave" />

The date is picked correctly (displayed on the page), but after saving to the server the value in the server table is one day off. The displayed value on the page (after saving) is also one day off from the picked value.

These are the project infos:

- Telerik ASP.NET MVC 4 (v2013.3.1119)

- culture: "de-AT"

editorTemplate and DateTimeModelBinder

@model DateTime?
 
<div class="span-datepricker">
    <input name="datepicker" />
</div>
 
<script>
    $(document).ready(function () {
        // create DatePicker from input HTML element
        $("input[name='datepicker']").kendoDatePicker();
    });
</script>

using System;
using System.Globalization;
using System.Web.Mvc;
 
namespace Presentation.Host.App_Start
{
    public class DateTimeModelBinder : IModelBinder
    {
        private const string DateTimePattern = "ddd MMM dd yyyy HH:mm:ss 'GMT'zzz";
 
        public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
        {
            string value = bindingContext.ValueProvider.GetValue(bindingContext.ModelName).AttemptedValue;
            if (!string.IsNullOrWhiteSpace(value))
            {
                int timeZoneInfoIndex = value.IndexOf(" (", StringComparison.Ordinal);
                if (timeZoneInfoIndex > 0)
                {
                    value = value.Substring(0, timeZoneInfoIndex);
                    return DateTime.ParseExact(value, DateTimePattern, CultureInfo.InvariantCulture).AddDays(1);
                }
 
                return DateTime.Parse(value);
            }
            return null;
        }
    }
}

ViewModel:

.....
public DateTime? DateToSave { get; set; }
...

If you could give me some hints where to start looking I'd be thankful.

Best regards.

Manu

Maria Ilieva
Telerik team
 answered on 24 Jun 2016
6 answers
2.4K+ views

Hello,

I have the following grid with a deleteRow event where I want to use my own conformation (sweetalert). In the event I first cancel the delete operation and then ask the user if he will delete the row or not.

Which code is necessary to delete the current row with Javascript/jQuery (line 19. in the code)?

01.function deleteRow(e) {
02. 
03.       $("#grid").data("kendoGrid").cancelChanges();
04. 
05.       swal({
06.           title: "Löschen",
07.           text: "Sind Sie sich sicher, dass Sie den aktuellen Datensatz löschen wollen?",
08.           type: "warning",
09.           showCancelButton: true,
10.           confirmButtonColor: "#DD6B55",
11.           confirmButtonText: "OK",
12.           cancelButtonText: "Abbrechen",
13.           closeOnConfirm: true,
14.           closeOnCancel: true
15.       },
16.           function (isConfirm) {
17.               if (isConfirm) {
18.                   
19. 
20. 
21.               }                  
22.           });
23.   }

Kostadin
Telerik team
 answered on 24 Jun 2016
1 answer
129 views

Hi, Am using Telerik MVC wrappers for creating a grid. Done an ultra simple example of this and this seems to be enough to repeat the issue:

 

cshtml:

@Html.Kendo().Grid(Model.Records).Name("Search")

If I just use the above, I get the grid with all the data in it no problem, however if I decide I want to make it sortable on the fly, I run what I understand to be the correct js below, this just causes all the data to be deleted with no errors.

javascript:

$('#Search').data('kendoGrid').setOptions({ sortable: true });

 

is there something you have to do with MVC wrapper settings to make the javascript methods less flaky?

 

Also, am using latest trial version as of this date.

 

Thanks,

Gavin

Kostadin
Telerik team
 answered on 24 Jun 2016
1 answer
741 views

Hi, I have seen this error in a number of threads on the forum, none of which seem to be caused by the same thing as I am trying. 

 

All it amounts to is using the same 'Id' column in the expressions for both a custom command routing value and the datasource server() model id mapping. I dont really understand why using the id in these two places should cause this problem?

 

            @(Html.Kendo().Grid(Model.DetailRecords).Name("MyGrid")
                .Columns(columns =>
                {
                    columns.Command(commands => commands.Custom("View").Action("Index", "Detail")
                        .DataRouteValues(rv => rv.Add(m => m.Id)));
                    columns.Bound(m => m.Heading);
                })
                .DataSource(ds => ds.Server().Model(model => model.Id(m => m.Id)))
            )

If this is a bug, is there a work around I can use?

 

Thanks,

Gavin

Konstantin Dikov
Telerik team
 answered on 24 Jun 2016
4 answers
570 views

I am trying to call detail grid/child grid but it is not getting called.

Here is my code:

@(Html.Kendo().Grid<OpenInvoicesInfo>()
          .Name("grid")
      .ColumnMenu(i => i.Columns(false))
      .Columns(columns =>
      {
          columns.Bound(p => p.INVOICE).ClientTemplate("<input type='checkbox' value='#= INVOICE #' class='testclass' onclick='rowCheck(this)'  />").Width(4);
          columns.Bound(i => i.INVOICE).Title("INVOICE").Width(15);
          columns.Bound(i => i.ORDER_NBR).Title("Order").Width(10);
          columns.Bound(i => i.CUST_PO_NBR).Title("CustomerPO").Width(20);
          columns.Bound(i => i.RI_FLAG).Title("RI").Width(5);
          columns.Bound(i => i.AGE_DAYS).Title("AGE_DAYS").Width(7);
          columns.Bound(i => i.AGE_GROUP).Title("AGE").Width(8);
          columns.Bound(i => i.ORIG_AMOUNT).Title("Orig Amt").Width(10);
          columns.Bound(i => i.OPEN_AMOUNT).Title("Open Amt").Width(10);

      }).Pageable(pageable => pageable
          .Refresh(true)
      )
      .Scrollable()
      .Sortable()
      .Filterable()
      .ClientDetailTemplateId("template")
      .DataSource(dataSource => dataSource
          .Ajax().UseJniErrorHandler()
          .Model(model =>
              {
                  model.Id(i => i.INVOICE);
                  model.Field(i => i.INVOICE).Editable(false);
              })
          .PageSize(8)
          .Read(read => read.Action("GetOpenInvoices", "Maint", new { cust = Request.QueryString["cust"] }))
      )
        .Events(events => events.DataBound("dataBound"))
)

<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<CustomerComments>()
            .Name("grid_#=INVOICE#") // template expression, to be evaluated in the master context
            .Columns(columns =>
            {
                columns.Bound(o => o.INVOICE).Width(15);
                columns.Bound(o => o.Comment).Width(40);
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .Model(model =>
                            {
                                model.Id(o => o.INVOICE);
                                model.Field(o => o.INVOICE).Editable(false);
                            })
                .PageSize(10)
                        .Read(read => read.Action("GetCustomerComments", "Maint", new { Id = "#=INVOICE#" }))
            )
            .Pageable()
            .Sortable()
            .ToClientTemplate()
    )
</script>

<script type="text/javascript">

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

Controller method:

public ActionResult GetCustomerComments([DataSourceRequest] DataSourceRequest request, string Id)
        {

            List<JNI.Enterprise.Contracts.CustomerComments> customer = InvoiceService.GetCustomerComments(Id);

            return Json(customer.ToDataSourceResult(request));
        }

Gaurav
Top achievements
Rank 1
 answered on 23 Jun 2016
4 answers
1.2K+ views

I am trying something simple, or what should be simple.  Creating a Kendo MVC Grid, and populating it via Ajax.  Before you suggest it, I have looked in the developer tools in Chrome, and there are no Javascript errors whatsoever.  No exceptions in the code, and no javascript errors.  It will most likely be something simple, but I just cannot seem to find it.

I have placed a breakpoint in the action in which it should be calling, and it never, ever even calls it.  If it at least called it, I'd know where to start looking, but it never calls it.  And again, no javascript errors whatsoever, as shown in the attached screen capture.

My cshtml page:

@{
    ViewBag.Title = "Index";
}
 
<h2>Index</h2>
 
@(Html.Kendo().Grid<User>()
    .AutoBind(true)
    .Name("userGrid")
    .Columns(cols => {
        cols.Bound(c => c.UserId);
        cols.Bound(c => c.FirstName);
        cols.Bound(c => c.LastName);
        cols.Bound(c => c.UserName);
    })
    .Scrollable()
    .Sortable()
    .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes(true)
        .ButtonCount(5))
    .DataSource(ds => ds
        .Ajax()
        .Read(r => r.Action("AllUsers", "Home").Type(HttpVerbs.Get))
        .PageSize(20))
)

My Controller is also just as simple:

using System.Collections.Generic;
using System.Web.Mvc;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using TelerikMVC_Template.Models;
using TelerikMVC_Template.Repository;
 
namespace TelerikMVC_Template.Controllers
{
    [Authorize]
    public class HomeController : Controller
    {
        private readonly IUserRepository userRepository = new UserRepository(new VUsersContext());
 
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }
 
        [HttpGet]
        [ActionName("AllUsers")]
        public JsonResult AllUsers([DataSourceRequest]DataSourceRequest request)
        {
            IEnumerable<User> theseUsers = userRepository.SelectAll();
            return Json(theseUsers.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }
    }
}

And finally my User class definition:

public class User
{
    public System.Guid UserId { get; set; }
    public string UserName { get; set; }
    public string Email { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Comment { get; set; }
    public string Password { get; set; }
    public System.DateTime LastLoginDate { get; set; }
    public System.DateTime LastPasswordChangedDate { get; set; }
    public System.DateTime CreationDate { get; set; }
    public bool IsLockedOut { get; set; }
    public bool IsActive { get; set; }
    public int FailedPasswordAttemptCount { get; set; }
    public System.DateTime? LastPasswordFailedDate { get; set; }
    public System.DateTime CreatedDate { get; set; }
}

 

Joe
Top achievements
Rank 1
 answered on 23 Jun 2016
3 answers
53 views

 I understand how to pass additional data as a parameter example I am doing this
.Read(read => read.Action("GetOpenInvoices", "Maint", new { cust = Request.QueryString["cust"] }))
Is it possible to have Parent/child  or grid/details grid to do without entity framework meaning asking custom stored procedures for the data?
I have a grid with Invoices. I want user to select multiple checkboxes  and then click the button and based on that 2nd grid gets populated.
or have a parent grid loaded and based on checkboxes (invoice# which is a string) I click ask stored procedure to get me corresponding comments.
Initially 2nd grid is empty.
If you have any example that will be great.
I want an example without entity framework.
Please reply if there is any easy solution.

Thank you,
Gaurav

Gaurav
Top achievements
Rank 1
 answered on 23 Jun 2016
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
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
ListView (Mobile)
Pager
Accessibility
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
MediaPlayer
TileLayout
DateInput
Drawer
SplitView
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Template
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Licensing
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
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?