Telerik Forums
UI for ASP.NET MVC Forum
2 answers
172 views
Hello,

I'm wondering if I can use my custom developed filters with the multiselect, instead of being tied only to the ready-made ones (starts with, contains, equals)

I want to implement the custom filter server-side, i.e the multi-select makes an AJAX request with the query and the server makes the filtering then returns the results.

Thank you.
kabbas
Top achievements
Rank 1
 answered on 28 Mar 2013
2 answers
105 views
Hello,

We are facing serious problems using Kendo UI Grid with IE 10. For example, when scrolling down, select a row
at the end, the Grid 'jumps' back to first row.
This is very anoying for the user, because the selected row leaves the visible area.

This behaviour does not occur in FF or Chrome.

Many thanks in advance Thomas

More details in attached images.




Dimiter Madjarov
Telerik team
 answered on 28 Mar 2013
1 answer
267 views
I have a model with the [Required] attribute applied to several properties.  When I use a pop-up editor from my grid if I Update a record, the Grid DataSource's Create and Update methods are called without any validation occurring.

Model Example:

public class SessionMain
{
[Required]
public string Title { get; set; }

[Display(Description = "Auction")]
[Required]
public long AuctionID { get; set; }

[Display(Description = "Increment Set")]
[Required]
public long IncrementSetID { get; set; }

[Display(Description = "Venue")]
[Required]
public long VenueID { get; set; }

[Display(Description = "Ringman Lane")]
[Required]
public long RingmanLaneID { get; set; }
}

Grid declaration:

@(Html.Kendo().Grid<Spectrum.Model.SessionMain>()
.Name("sessionGrid")
.HtmlAttributes(new { style = "height: 500px" })
.AutoBind(true)
.Columns(columns =>
{
columns.Bound(c => c.ID).Groupable(false);
columns.Bound(c => c.Title).Groupable(false);
  columns.Bound(c => c.VenueID).Groupable(true);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
}
)
.Editable(editable => editable
.Mode(GridEditMode.PopUp)
.TemplateName("SessionPopUp")
.Window(window => {
window.Title("Session");
window.Name("sessionWindow");
window.Modal(true);
window.Resizable();
window.Width(960);
}))
.Pageable(pageable => pageable
.Enabled(true)
.PageSizes(new int[3] { 10, 25, 50 })
.Refresh(true))
.Sortable()
.Scrollable()
.Selectable()
.DataSource(datasource => datasource
.Ajax()
.Model(model => model.Id(s => s.ID))
.Events(events => events.Error("gridError"))
.Create(cfg => cfg.Action("GridCreate", "Session").Data("getAuctionID"))
.Read(cfg => cfg.Action("GridRead", "Session").Data("getAuctionID"))
.Update(cfg => cfg.Action("GridUpdate", "Session"))
.Destroy(cfg => cfg.Action("GridDestroy", "Session"))
.ServerOperation(false))
.Events(ev => ev.Change("setGridChange"))
)

Popup Declaration (file in \Shared\EditorTemplates named "SessionPopUp.cshtml"):

@model Spectrum.Model.SessionMain@Html.ValidationSummary(true)
@Html.HiddenFor(model => model.ID)<table>
    <tr>
        <td>@Html.LabelFor(model => model.Title)</td>
        <td>
            @Html.TextBoxFor(model => model.Title, new { @class = "k-textbox" })
            @Html.ValidationMessageFor(model => model.Title)
        </td>
        <td>@Html.LabelFor(model => model.SessionType, "Session Type")</td>
        <td>
            @(Html.Kendo().DropDownListFor(model => model.SessionType)
                .Name("sessionTypeDropDown")
                .Items(items => {
                    items.Add().Text("Live").Value("1");
                    items.Add().Text("Internet").Value("2");
                })
                .OptionLabel("Select Session Type...")
            )
            @Html.ValidationMessageFor(model => model.SessionType)
        </td>
    </tr>
    <tr>
        <td>@Html.LabelFor(model => model.IncrementSetID, "Increment Set")</td>
        <td>
            @(Html.Kendo().DropDownListFor(model => model.IncrementSetID)
            .DataTextField("Title") //Specifies which property of the Product to be used by the combobox as a text.
            .DataValueField("ID") //Specifies which property of the Product to be used by the combobox as a value.
            .DataSource(source => source
            .Read(read => read.Action("List", "IncrementSet"))
                )
            .OptionLabel("Select Increment Set...")
            )
            @Html.ValidationMessageFor(model => model.IncrementSetID)
        </td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>
            @Html.LabelFor(model => model.VenueID, "Venue")
        </td>
        <td>
            @(Html.Kendo().DropDownListFor(model => model.VenueID)
            .DataTextField("Title") //Specifies which property of the Product to be used by the combobox as a text.
            .DataValueField("ID") //Specifies which property of the Product to be used by the combobox as a value.
            .DataSource(source => source
                .Read(read => read.Action("GetVenuesList", "Venue"))
                )
            .OptionLabel("Select Venue...")
            )
            @Html.ValidationMessageFor(model => model.VenueID)
        </td>
    </tr>
</table>
Petur Subev
Telerik team
 answered on 28 Mar 2013
1 answer
194 views
Hello to all,

we are using check box column in Kendo Grid. The problem is, that the user has to click twice to
edit check box (click once to activate edit mode, wait, then change the value) . This is cumbersome and annoying for our users.

Ist there a possibility (example), implementing CheckBox in Grid, using a single click to change value ?

Many thanks
Thomas
Dimiter Madjarov
Telerik team
 answered on 28 Mar 2013
4 answers
284 views
Hi,

DataSourceRequest ‘Sorts’ parameter (‘Filters’ and ‘Groups’
too) are null in my MVC action. Other parameters (‘PageSize’, for example) bind
properly.

If I use MVC wrapper for Kendo Grid everything works
perfectly, but I need to connect grid’s data source with MVC action without
wrapper. Is it possible?

JS libraries bundle:
jquery.min.js
kendo.all.min.js
kendo.aspnetmvc.min.js

Grid example:
$('#cars').kendoGrid({
            pageable: true,
            sortable: true,
            dataSource: new kendo.data.DataSource({
                serverPaging: true,
                serverSorting: true,
                schema: { data: "Data", total: "Total" },
                transport: {
                    read: {
                        url: '@Url.Action("GetCars")',
                        contentType: "application/json; charset=utf-8",
                        type: "POST"
                    },
                    parameterMap: function (options) {
                        return JSON.stringify({ request: options }); 
                    }
                }
            })
        });

HTTP request:
{"request":{"sort":[{"field":"Name","dir":"desc"}]}}

MVC action:
[HttpPost]
public JsonResult GetCars([DataSourceRequest]DataSourceRequest request)
{
     ..............
}

 Thanks!
Max
Top achievements
Rank 1
 answered on 28 Mar 2013
3 answers
458 views
Hi,

I'm new to the Kendo UI stuff, so please forgive me if this is an easy one; I've been trying to find some documentation that might tell me what I'm doing wrong, but nothing so far.

I have a grid with (ATM) nine rows in it. I need to make this grid pageable. I followed this example to do so (http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/custom-binding) with the only deviations being that I set my page size to five (since I only have nine rows) and I didn't do the sorting part since I'm not using that right now. I did not do that part beginning with "Custom AJAX Binding" because it didn't seem relevant to the rest of the example.

Here's what I've got:

Controller method:
public ActionResult Assigned([DataSourceRequest(Prefix = "Grid")] DataSourceRequest gridRequest)
{
    if (gridRequest.PageSize == 0)
    {
        gridRequest.PageSize = 5;
    }
 
    var orders = _orderModel.GetDashboardOrders(DashboardOrderStatus.Assigned);
     
    if (gridRequest.Page > 0)
    {
        orders = orders.Skip((gridRequest.Page - 1)*gridRequest.PageSize).ToList();
    }
 
    orders = orders.Take(gridRequest.PageSize).ToList();
 
    ViewData["total"] = orders.Count; 
 
    var model = new DashboardModel
                    {
                        SelectedTab = "Assigned",
                        Orders = orders
                    };
    model = SetGlobalTabsBasedOnUserRole(model) as DashboardModel;
    return View(model);
}

and the declaration of the grid on my CSHTML page:
@(Html.Kendo()
.Grid<ProjX.Web.Models.Entities.DashboardOrder> ()
.Name("Grid")
.EnableCustomBinding(true)
.BindTo(Model.Orders)
.TableHtmlAttributes(new {style="width: 850px;"})
.Columns(columns =>
             {                    
                <columns removed for readability, they work fine>
             })
             .Pageable(x => x.PageSizes(true))
             .DataSource(ds => ds
                 .Server()
                 .Total((int)ViewData["total"])
                 ))


On my page I have the paging controls showing up on my grid, but it shows there only being one page "bubble" and a message saying "1-5 of 5 items" None of the forward/back arrows are enabled.

I'm kind of stumped here; I've been trying to find some documentation or blog post that shows me where I went wrong, but so far nothing. So, what am I doing wrong here?
Atlas
Top achievements
Rank 1
 answered on 27 Mar 2013
3 answers
165 views
Hi,

I'll be using Kendo UI for ASP.NET MVC in portions of a website.  What would be a valid copyright message to put in the about box?

Thanks
LynnD
Telerik team
 answered on 27 Mar 2013
4 answers
185 views
I created a new MVC project in visual Studio 2012, using the telerik KendoUI for MVC Web Application template (after installing the 2013.1.319 release)  I then set up some grids and sparkline charts.

These have worked, but when I set up an editable grid, I've encountered issues
  • The buttons for edit / update / cancel have the text underlined, like hyperlinks - which hasn't happened in other kendo projects I've created.
  • Clicking the update button, the controller saves the change, but the web page doesn't close the edit, (both using inline and the pop-up editors).
  • If I make the primary key field read-only, the value is not posted back to the controller, even though it's specified as the ModelID.

I have put the page and controller code in an older project (v2012.2.913) and the first two issues disappear.

The grid definition is:-

<div style="font-size:small;width:700px; margin-bottom:15px;">
@(Html.Kendo().Grid<PMS2Monitor.Models.SystemSetting>()
.Name("settingsGrid")
.Columns(columns=>
    {columns.Bound(p=>p.SettingCode);
    columns.Bound(p => p.SettingDescription).Title("Description");
 
    columns.Bound(p => p.SettingValue).Title("Value");
    columns.Command(command => { command.Edit();  });
      
    })
     .Editable(editable=>editable
        .Mode(GridEditMode.InLine))
 
    .Pageable()
    .Filterable()
     
    .DataSource(dataSource=>dataSource
        .Ajax()
        .Model(m=>m.Id(p=>p.SettingCode))
        .PageSize(8)
        .Events(events => events.Error("error"))
        .Read(read=>read.Action("InterfaceSettings","Home"))
         .Update(update=>update.Action("UpdateSetting","Home"))
        )
         
   
       ) </div>

The object meta data is defined as:-

[MetadataType(typeof(SystemSettingMD))]
   public partial class SystemSetting
   {
       public class SystemSettingMD
       {
          [ReadOnly(true)]
           public object SettingCode { get; set; }
 
           [ReadOnly(true), StringLength(50)]
           public object SettingDescription { get; set; }
 
           [StringLength(500), Required]
           public object SettingValue { get; set; }
 
       }
   }

The controller is:-

 

public ActionResult InterfaceSettings([DataSourceRequest] DataSourceRequest request)
       {
 
           var query = _repository.GetSettings();
 
           query = query.OrderByDescending(c => c.SettingCode);
 
           return Json(query.ToDataSourceResult(request));
 
       }
 
       [AcceptVerbs(HttpVerbs.Post)]
       public ActionResult UpdateSetting([DataSourceRequest] DataSourceRequest request, Models.SystemSetting setting)
       {
           try
           {
               _repository.updateSetting(setting);
 
               return Json(ModelState.ToDataSourceResult());
           }
           catch (Exception ex)
           {
               ModelState.AddModelError("ERR1", ex.Message);
 
               return Json(ModelState.ToDataSourceResult());
           }
 
 
 
       }

I've attached a screenshot of the grid buttons.

Thanks



AP
Top achievements
Rank 1
Iron
Iron
Veteran
 answered on 27 Mar 2013
0 answers
642 views
There is a breaking change with the new version of jQuery which affects the Kendo Q1 2013 version 2013.1.319

Since the empty result returned from the server in case everything is executed properly on the server side for the update and destroy requests, the error event of the dataSource is triggered because the empty result is not valid JSON.

The suggested resolutions when using the MVC Extensions are:
  • Use the Latest Internal Build version 2013.1.327
  • Change the response of the Update/Destroy actions from just serializing the ModelState to:
    return Json(ModelState.IsValid ? new object(): ModelState.ToDataSourceResult());


Kendo UI
Top achievements
Rank 1
 asked on 27 Mar 2013
1 answer
92 views
Hi Guys,

I'm using VS2010 with MVC 3 before. The grouping of the grid before is working as expected using this codes.

@(Html.Telerik().Grid<MyModelHere>()
        .Name("MyGridNameHere")
        .Columns(columns =>
                 {
                     columns.Bound(o => o.DueDateShortString).Width(75).Title(Html.Talent().GlobalTextResource("DueDate").ToString());               
                     columns.Bound(o => o.LearningCurriculumLabel).Hidden().ClientGroupHeaderTemplate("<div class='gridHeaderLabelGroup headerStandardGroup'><#= Key #></div>");
                 })
    .EnableCustomBinding(true)
    .DataBinding(dataBinding => dataBinding.Ajax().Select("RequiredTrainingGrid", "LearningManagement", new {id = Model.PersonID}).Enabled(true))
    .Sortable(sorting => sorting.SortMode(GridSortMode.SingleColumn).OrderBy(x => x.Add("DueDateShortString")))
    .Groupable(grouping => grouping.Groups(groups =>
           {
                groups.Add(o => o.LearningCurriculumLabel);
            }).Visible(false))
    .Pageable(paging => paging.Enabled(true).PageSize(5))
     )



But after migrating to VS2012 MVC 2012. This code is not working anymore.

Need your help on this guys.



Alvin
Daniel
Telerik team
 answered on 27 Mar 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?