Telerik Forums
UI for ASP.NET MVC Forum
1 answer
157 views
Hi:
I am new to using Kendo UI. I am using MVC4  (VS 2012) with Kendo Mvc wrappers. I am trying to display a DropdownlistboxFor associated with a model item. Then during listbox change event i want to save that model (in the controller). I have hardcoded listbox items added to the listbox like in the code below. Should i post an ajax call which will call a controller method that saves model? How do i do this ajax post with model data sent to the controller action with the combo box updated data?

Is there any other way?
Thank you so much for your help.

=========================================
My model code is:
public class PackageModelView
    {
        public int DefaultReason { get; set; }
}
=========================================
View code (say named file Package.cshtml) has:
@using .<model namespace directory>
@model PackageModelView

@(Html.Kendo().DropDownListFor(model => model.DefaultAction)
                        .DataTextField("Text")
                        .DataValueField("Value")
                        .BindTo(new List<SelectListItem>()
                        {
                            new SelectListItem()
                            {
                                Text = "Active",
                                Value = "1"
                            },
                            new SelectListItem()
                            {
                                Text = "In-active",
                                Value = "2"
                            }
                        })
                       .Value("1")
                    )


Petur Subev
Telerik team
 answered on 07 Nov 2014
1 answer
65 views
My old code:
      
function updateReconcileCB(cb) {
    var grid = $("#Receipts").data("kendoGrid");
    var di = grid.dataItem(grid.select());
    di.selected = cb.checked;
}


Was working just fine
however, since updating to: Kendo 2014.2.1008
This code works sporadically and although the Checkboxes get checked visually this code throws an error and the grid line is not recognized as checked/selected??

how Do I modify the code to fix?
or do I just revert back to old Kendo scripts? 
Kiril Nikolov
Telerik team
 answered on 06 Nov 2014
3 answers
368 views
Hi experts,

First of all, sorry for asking some basic stuff about the grid as I'm quite new on the kendo grid.

As mentioned in the title, I would like to know how do I generate the link that expands the child grid from ClientRowTemplate.

What I'm doing now is altering the hierarchy.cshtml from the demo.  But not getting any luck to achieve this.

Many Thanks,

Victor
Dimiter Madjarov
Telerik team
 answered on 06 Nov 2014
10 answers
1.0K+ views
Hi,

with this view

 

 

@(Html.Kendo().Grid<Reviews.Models.Review>().Name("ReviewGrid").Columns(columns =>
{
 
    columns.Bound(p => p.Customer);
    columns.Bound(p => p.Location);
    columns.Bound(p => p.Title).ClientTemplate("<strong>#: Title #</strong>");   //This works  
    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
 
})
.ToolBar(toolbar => toolbar.Create().Text("Ný Skyrsla"))
    .DetailTemplate(detail => detail.ClientTemplate(
        Html.Kendo().Grid<Reviews.Models.ReviewCategory>()
            .Name("ReviewCategory_#=ReviewID#")
            .Columns(columns =>
            {
                columns.Bound(o => o.TableNo);
                columns.Bound(o => o.Category);
                columns.Bound(o => o.Comment);
                //columns.Bound(o => o.PerformedDate);
               // columns.Bound(o => o.Id).ClientTemplate("<img alt='#: Id #' src='"
               //+ Url.Content("~/Report/ViewPic/")
               //     + "#: Id #' />").Title("Picture");
                columns.Bound(o => o.TableNo).ClientTemplate("<strong>#: TableNo #</strong>");//tthis does not work   
                 
                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("ReviewCategory_Create", "Home", new { reviewId = "#=ReviewID#" }))
                    .Read(read => read.Action("ReviewCategory_Read", "Home", new { id = "#=ReviewID#" }))
                        .Update(update => update.Action("ReviewCategory_Update", "Home", new { reviewId = "#=ReviewID#" }))
                    .Destroy(update => update.Action("ReviewCategory_Destroy", "Home"))
 
                )
                .ToHtmlString()
 
))
 
.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.ReviewID))
        .Create(update => update.Action("Review_Create", "Home"))
        .Read(read => read.Action("Review_Read", "Home"))
        .Update(update => update.Action("Review_Update", "Home"))
        .Destroy(update => update.Action("Review_Destroy", "Home"))
    )
)

The first clientTemplate works and

#: Title # get bound to Review.Title.

The second clientTemplate does not work, a js error comes , it says can not bind to TableNo. Writing Title instead of Table No will however display the title from Review class. so eventhourgh my grid is bound to ReviewCategory class the clienttemplate is displaying value from Review class.

Is this a bug ?.

Best

Ole

 

 

 

Nikolay Rusev
Telerik team
 answered on 06 Nov 2014
2 answers
148 views
Remote Data Binding from DataBase is not working as per given Examples in the site ..

I have Columns Like

EmpId       EmpName     ReportTo
1                  Ram               Null
2                  Sam                 1
3                  Priya                1
4                  Mathi                2
5                  Muhil                2

i need it like this

>Ram
    >Sam
         Mathi
         Muhil
      Priya

Can you post me any other Examples for Treeview Controller and Model using Linq ..

ram
Top achievements
Rank 1
 answered on 05 Nov 2014
4 answers
590 views
I am using MVC Tabstrip . It seems to put a red-color outline for that tab page, every time we select a tab item. I want to change this color as shown in this page (probably sort of greyish blue). How do i do that?

http://demos.telerik.com/aspnet-mvc/tabstrip/index


Arul
Top achievements
Rank 1
 answered on 05 Nov 2014
6 answers
3.1K+ views
There appears to be a problem using the Kendo ComboBox and DropDownList along with the client-side MVC unobtrusive validation. The validation errors do not appear on the client. Take the following Razor view for example:

@using Kendo.Mvc.UI
@model KendoDropDownTest.Models.TestModel
 
@{
    ViewBag.Title = "Kendo Drop Down and Combo Box Test";
}
 
<h2>Kendo Drop Down and Combo Box Test</h2>
 
@using (Html.BeginForm())
{
    @Html.ValidationSummary()
     
        <div>
            @Html.LabelFor(x => x.DropDownValue)
            @(Html.DropDownListFor(x => x.DropDownValue, Model.Options, "-- Select an Option --"))
            @Html.ValidationMessageFor(x => x.DropDownValue)
        </div>
 
    <fieldset>
        <legend>Kendo</legend>
        <div>
            @Html.LabelFor(x => x.KendoComboValue)
            @(Html.Kendo().ComboBoxFor(x => x.KendoComboValue)
                  .BindTo(Model.Options.Select(x => x.Text)))
            @Html.ValidationMessageFor(x => x.KendoComboValue)
        </div>
 
        <div>
            @Html.LabelFor(x => x.KendoDropDownValue)
            @(Html.Kendo().DropDownListFor(x => x.KendoDropDownValue)
                .OptionLabel("-- Select an Option --")
                .BindTo(Model.Options))
            @Html.ValidationMessageFor(x => x.KendoDropDownValue)
        </div>
    </fieldset>
     
    <input type="submit" value="Submit" />
}

The non-Kendo UI drop down appropriately shows the validation error when the form is submitted, but the Kendo controls do not. The model is very simple and uses attributes for validation:

public class TestModel
{
    [Required]
    public string DropDownValue { get; set; }
    [Required]
    public string KendoComboValue { get; set; }
    [Required]
    public string KendoDropDownValue { get; set; }
 
    public SelectListItem[] Options = new[]
    {
        new SelectListItem
        {
            Text = "Option 1",
            Value = "1"
        },
        new SelectListItem
        {
            Text = "Option 2",
            Value = "2"
        },
        new SelectListItem
        {
            Text = "Option 3",
            Value = "3"
        },
    };
}

Please let me know if there is a way to enable the client-side validation for these controls without having to manually wire it up. A solution which reproduces the issue is attached.
Georgi Krustev
Telerik team
 answered on 05 Nov 2014
5 answers
595 views
(1) I am using MVC application with Kendo MVC wrapper with razor syntax.
     I am trying to change a text of a tab item when a tab item is selected. How do i do that?

For example, disabling another tab-item when a tab is selected is NOT working with the current code.

==============================================================
event handler code (NOT working as far as disabling the tab item):

<script>
   function tabMain_select(e) {
        // gives valid item here - i checked in the debugger.
        var tabstripD = $("#tabMain").kendoTabStrip().data();      
        $(tabstripD).disable(0);
</script>

===========================================================
Code that renders the tab with three tab items (this works):
@(Html.Kendo()
    .TabStrip()
    .Name("tabMain")
    .Animation(false)
    .Events(e=>e.Select("tabMain_select"))
    .Items(tabs => 
                {
                    tabs.Add().Text("Recent History")
                              .Selected(true)                               // Will render as this tab selected
                              .LoadContentFrom("About","home");             // to render a view into this tab. 
                      
                    tabs.Add()
                        .Text("Package")
                        .LoadContentFrom("About","home")
                        .HtmlAttributes(new { style = "margin-right:60px" }); // To give space after this tab but before the next tab item.

                    tabs.Add()
                        .Text("Dirty Returns")
                        .LoadContentFrom("About", "home");
                }
            )
  )
=========================================================

Dimiter Madjarov
Telerik team
 answered on 05 Nov 2014
3 answers
177 views
after upgrading to latest version of kendo asp.net mvc 2014.2.903, it is making javascript error "Invalid Template".
It is observed that error occurs if hierarchical grid is filterable, for testing here is the sample code take from the example, i have changed this code to make sub grid as Filterable


@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(e => e.FirstName).Width(110);
            columns.Bound(e => e.LastName).Width(110);
            columns.Bound(e => e.Country).Width(110);
            columns.Bound(e => e.City).Width(110);
            columns.Bound(e => e.Title);
           
        })               
        .Sortable()
        .Pageable()
        .Scrollable()
        .ClientDetailTemplateId("template")
        .HtmlAttributes(new { style = "height:430px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(6)
            .Read(read => read.Action("HierarchyBinding_Employees", "Grid"))            
        )        
        .Events(events => events.DataBound("dataBound"))
)

<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
            .Name("grid_#=EmployeeID#")
            .Columns(columns =>
            {
                columns.Bound(o => o.OrderID).Width(70);
                columns.Bound(o => o.ShipCountry).Width(110);
                columns.Bound(o => o.ShipAddress);
                columns.Bound(o => o.ShipName).Width(200);
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
            )
            .Pageable()
            .Sortable()
            .Filterable()
            .ToClientTemplate()
    )
</script>
<script>
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
</script>
Dimiter Madjarov
Telerik team
 answered on 05 Nov 2014
2 answers
139 views
I have a grid with 2 child grids defined as client templates. I want to handle server side validation as described here: http://blogs.telerik.com/kendoui/posts/13-08-29/handling-server-side-validation-errors-in-your-kendo-ui-grid but I am unsure of how to have the javascript for each client grid as each grid has a different ID and will need a different errors list.
Spirent
Top achievements
Rank 1
 answered on 04 Nov 2014
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
Wizard
Security
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
+? more
Top users last month
Bohdan
Top achievements
Rank 3
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Elliot
Top achievements
Rank 1
Iron
Iron
Iron
Sunil
Top achievements
Rank 1
Cynthia
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Bohdan
Top achievements
Rank 3
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Elliot
Top achievements
Rank 1
Iron
Iron
Iron
Sunil
Top achievements
Rank 1
Cynthia
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?