Telerik Forums
UI for ASP.NET MVC Forum
2 answers
583 views
This may be a dumb question, so please excuse me if it is.

I'm looking into starting a new web application project. I've made a web app before using ASP .Net AJAX and the Component Art controls.  If I go with the AJAX framework, I'll most certainly use Telerik's controls; I've had a great experience with Telerik's support for their WPF controls.  However, I am also considering using ASP .Net MVC, but I noticed that there are far fewer controls available for that than under AJAX.

My question: Is the smaller selection of controls available for the MVC framework just a matter of the AJAX framework being around longer or is there a technical limitation?

Thanks.
Don
Top achievements
Rank 1
 answered on 12 Feb 2014
10 answers
286 views
Hello there,

I am trying the simple example on the site (Ajax Grid Biding and Editing) and the Grid isn't showing me any data. I tried the server binding and it works. Below is my code.

Razor:
@(Html.Kendo().Grid<KendoTest2.Models.DocumentType>()
      .Name("grid")
      .DataSource(dataSource => dataSource // Configure the grid data source
          .Ajax() // Specify that ajax binding is used
          .Read(read => read.Action("Products_Read", "Home")) // Set the action method which will return the data in JSON format
       )
      .Columns(columns =>
      {
          // Create a column bound to the ProductID property
          columns.Bound(product => product.Id);
          // Create a column bound to the ProductName property
          columns.Bound(product => product.Name);
          // Create a column bound to the UnitsInStock property
        
      })
      .Pageable() // Enable paging
      .Sortable() // Enable sorting
)
Controller:

public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request)
        {
            using (var northwind = new MMCC_DocumentManagementEntities())
            {
                IQueryable<DocumentType> products = northwind.DocumentTypes;
                DataSourceResult result = products.ToDataSourceResult(request);
                return Json(result);
            }
        }
It's the simple example on the site, adapted on my model. That's all. Not showing data. I checked and the Json(result) returns data. What could it be the problem?
Vladimir Iliev
Telerik team
 answered on 12 Feb 2014
2 answers
1.0K+ views
Hi,

I want to display an enum in my dropdown list column of Kendo Grid.
I get an success till binding the enum in a dropdown list and displaying it to the Grid. But however it displays as a textbox instead of a dropdown list when I add/edit an item in edit popup. It shows proper dropdown list in InLine editing mode.
One more issue is it displays enum values (1, 2 or 3) instead of enum texts (Red, Amber or Green) in a grid.

My grid column is:
columns.Bound(r => r.RagStatus).EditorTemplateName("RAGStatus");
 
Enum is:
public enum RAGStatus
{
           Red = 1,
            Amber = 2,
            Green = 3,
}
 
public static List<SelectListItem> EnumToSelectList(Type enumType)
{
            return Enum
              .GetValues(enumType)
              .Cast<int>()
              .Select(i => new SelectListItem
                {
                    Value = i.ToString(),
                    Text = Enum.GetName(enumType, i),
                }
              )
              .ToList();
}
 
Enum template is:
@model int
@(
 Html.Kendo().DropDownListFor(m => m)
        .BindTo(EnumToSelectList(typeof(RAGStatus)).ToList())
        .OptionLabel(optionLabel: "Please Select")
        .SelectedIndex(0)
)
Please help.

Thanks,
Nirav


Shawn
Top achievements
Rank 2
 answered on 11 Feb 2014
3 answers
141 views
Hi,
I have a question about the design of a Grid. I attach a image that show an idea of how I need the grid.
Please, I wonder if this is possible. 

Thanks.
Petur Subev
Telerik team
 answered on 11 Feb 2014
5 answers
102 views
anyone know if the autocomplete control is capable of grouping?
Petur Subev
Telerik team
 answered on 11 Feb 2014
1 answer
111 views
So I've been reading, that AutoComplete does not have a value property. Is this true? If so, why not. I was forced to use a multicomplete field and set the MinValue to 1
in order to get the job done. Also, can anyone explain the difference between .Template and .ClientTemplate
Alexander Popov
Telerik team
 answered on 11 Feb 2014
1 answer
445 views
I am trying to do the following:
  1. Use a Kendo UI Grid
  2. Have columns that have dropdowns for editors
  3. Have a re-usable method to implement those dropdowns
  4. Send the values from the grid to the server when the form posts

Here's what I've done so far:
I have the grid showing on my page and editable.  I am able to send the values from the grid to the server with the form post (using a method similar to the one shown here: http://www.telerik.com/support/code-library/submit-form-containing-grid-along-with-other-input-elements)
I have looked at the custom editor examples here (http://demos.telerik.com/kendo-ui/web/grid/editing-custom.html) and here (http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/editor-templates) but this method involves creating a partial view for each dropdown.  I would prefer not to have to copy/paste/edit this code every time I need a new dropdown.  I think there should be a way to create a re-usable partial view that can perform this function.  Along these lines, I have created a small view model and partial view like what is mentioned here (https://stackoverflow.com/questions/11498215/asp-net-mvc-built-in-support-for-dropdownlist-editor-template).

Current status:
The dropdown appears in my grid as expected, and I can select a value.  I don't know how to get the text and value of the selected item so I can include them in the ClientTemplate, however.

My grid looks like this:
@(Html.Kendo().Grid<AccountManagement.Business.ViewModels.Areas.DM.RehireDocumentSettingViewModel>()
                    .Name("DocumentSettings")
                    .Columns(columns => {
                            /*
                            columns.Bound(ds => ds.FormID)
                                .ClientTemplate("#= FormID #" +
                                    "<input type='hidden' name='DocumentSettings[#= index(data)#].FormID' value='#= FormID #' />"
                                );
                            */
                            columns.Bound(ds => ds.FormsViewModel)
                                .ClientTemplate("#= 'test' #" +
                                    "<input type='hidden' name='DocumentSettings[#= index(data)#].FormID' value='#:data.Value #' />"
                                );
                            columns.Bound(ds => ds.DocumentDateTypeName)
                                .ClientTemplate("#= DocumentDateTypeName #" +
                                    "<input type='hidden' name='DocumentSettings[#= index(data)#].DocumentDateTypeName' value='#= DocumentDateTypeName #' />"
                                );
                            columns.Bound(ds => ds.RemoveIfOlderThanDays)
                                .ClientTemplate("#= RemoveIfOlderThanDays #" +
                                    "<input type='hidden' name='DocumentSettings[#= index(data)#].RemoveIfOlderThanDays' value='#= RemoveIfOlderThanDays #' />"
                                );
                            columns.Command(command => command.Destroy());
                        }
                    )
                    .ToolBar(toolbar => {
                        toolbar.Create();
                    })
                    .Navigatable()
                    .Sortable()
                    .Scrollable()
                    .Editable(editable => editable.Mode(GridEditMode.InCell))
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Batch(true)
                        .ServerOperation(false)
                        .Events(events => events.Error("error_handler"))
                        .Model(model => model.Id(ds => ds.FormID))
                        .Read("RehireDocumentSetting_Editing_Read", "RehireSetup")
                    )
                )

The small viewmodel for my dropdown partial editor looks like this:
public class DropDownViewModel
    {
        public string SelectedID { get; set; }
        public IEnumerable<SelectListItem> Items { get; set; }
    }

My partial view looks for the dropdown editor looks like this:
@model AccountManagement.Business.ViewModels.Areas.DM.DropDownViewModel
 
@(Html.Kendo().DropDownListFor(m => m)
    .DataValueField("Value")
    .DataTextField("Text")
    .BindTo(new SelectList(Model.Items, "Value", "Text", Model.SelectedID))
    .Value("SelectedID")
)

So my question is: is there a way to fix my ClientTemplate for the FormsViewModel column so that it displays the text of the selected item when not being edited (instead of 'text' as it does now) and submits the ID of the selected item to the server?  Alternatively, is there another way to do this that meets items 1-4 at the top of this post?

Any ideas are appreciated.

Thanks,
Brian




Petur Subev
Telerik team
 answered on 11 Feb 2014
0 answers
148 views
I am developing my ASp.net MVC application using Kendoui MVC extensions. So In my form I have all the kendoui grid, dropdown, datepicker etc... I have accumulated them all in my @using(Html.BeginForm ()) But I am not sure How do i post my form data to the controller. If anybody has done that could you please shre your experience.

For example:

I have two entities: Faculty and FacultyType in My DAL

​public class Faculties
{
    public int FacultyId { get; set; }
    public string StaffNumber { get; set; }

    public int FacultyTypeId { get; set; }
    public virtual FacultyTypes FacultyTypes { get; set; }
}

public class FacultyTypes
{
    public FacultyTypes()
     {
       this.Faculties = new List<Faculties>();
      }
    public int FacultyTypeId { get; set; }
    public string FacultyTypeCode { get; set; }
    public string FacultyType { get; set; }
    public bool IsDefunct { get; set; }
    public virtual ICollection<Faculties> Faculties { get; set; }
}


I have my ViewModels in my application:

​public class ViewModelFaculty
{
    public int FacultyId { get; set; }
    public string StaffNumber { get; set; }

    public ViewModelFacultyTypes FacultyType { get; set; }
}

public class ViewModelFacultyTypes
{

    [ScaffoldColumn(false)]
    public int FacultyTypeId { get; set; }

    [Required(ErrorMessage ="Faculty Type Code is Required")]
    public string FacultyTypeCode { get; set; }

    [Required]
    public string FacultyType { get; set; }

     public bool IsDefunct { get; set; }

}

My View page having kendoui extensions for ASp.net MVC.

@using(Html.BeginForm())
{
<fieldset>
<legend class="main">Personal Particulars</legend>
<div class="view-table">
<div class="view-row">
<div class="view-name"><label for="staffId">Staff ID</label></div>
<div class="view-name"><input id ="txtStaffId" name="StaffId" class="k-textbox" data-bind="value: StaffId" type="text" required /></div>
<div class="view-name"><label for="facultyType">Faculty Type</label></div>
<div class="view-name">
@(Html.Kendo().DropDownList()
.Name("ddFacultyType")
.DataTextField("FacultyType")
.DataValueField("FacultyTypeId")
.OptionLabel("Select Faculty Type")
.Enable(true)
.AutoBind(true)
.DataSource(ds =>
{
ds.Read(read =>
{
read.Action("GetFacultyTypes", "NewFaculty");
})
.ServerFiltering(true);
})

)
</div>
</div>
}

I am showing a part of my view as if I could post two fields then rest all will be of same logic.
So now when I submit my form I need to post the data in the form to controller.
Even kendoUi website as also not given any end to end example of how to use the extensions in a form and how to post the data.

If anyone has been working in same enviorment or any direction on how to do please suggest me.

Steve
Top achievements
Rank 1
 asked on 11 Feb 2014
6 answers
403 views
We are trying the trial version to determine if we are going to purchase it but my testing has run into a problem. I am trying to load a data source in JavaScript so that will be called when a id from the treeview is passed on selection ( that part is working) , but when I call my java script function the data source creates but no data is returned, I have included my JavaScript function here and I have also included the method from the controller it is to call, can someone tell me why I get no data back, i have created an alert at the end of the function to show the data but the length is always zero for the loop does not execute

here is the JavaScript

    var updateAgencySystemInfo = function (agencyId, agencySystemModel) {
        var ds = new kendo.data.DataSource({
            trasnport: {
                read: {
                    type:"POST",
                    url: "/Administrator/GetAgencySystemInfo",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json"
                },
                parameterMap: function (options, operation) {
                    switch (operation) {
                        case "read":
                            return JSON.stringify(options);
                            break;
                        //case "destroy":
                        //    return JSON.stringify(options);
                        //    break;
                        //case "create":
                        //case "update":
                        //    return JSON.stringify(options);
                        //    break;
                    }
                }
            },
            schema: {
                model: {
                    id: "AgencySystemID", // the identifier of the model
                    fields: {
                        "AgencySystemID": { type: "number", editable: false },
                        "AgencyID": { type: "number", editable: false },
                        "Description": { type: "string" },
                        "DatabaseTypeID": { type: "number" },
                        "DataSource": { type: "string" },
                        "InitalCatalog": { type: "string" },
                        "UserID": { type: "string" },
                        "Password": { type: "string" },
                        "LastImportStartDateTime": { type: "date" },
                        "LastImportEndDateTime": { type: "date" },
                        "NextImportDateTime": { type: "date" },
                        "UpToDateTime": { type: "date" },
                        "ImportFrequency": { type: "number" },
                        "ImportFrequencyUnitID": { type: "number" },
                        "MaxImportWindow": { type: "number" },
                        "IsActive": { type: "boolean" }
                    }
                }
            }
        });
        ds.read({ Id: agencyId });
        
        ds.fetch();
        var datasourcedata = ds.data();
        
        for (var i = 0; i < datasourcedata.length; i++) {
            var dataitem = datasourcedata[i].Description;
            alert(dataitem);
        }



        return datasourcedata.length;
    };


Now here is the method from the controller the datasource is to call for the data.

        [HttpPost]
        public JsonResult GetAgencySystemInfo(long? agencyID)
        {
            var agencySystemInfo = (from p in dc.mst_AgencySystem where p.AgencyID == agencyID select p).ToList();

            return Json(agencySystemInfo, JsonRequestBehavior.AllowGet);

        }


Thanks,
rglunt68
Roy
Top achievements
Rank 1
 answered on 10 Feb 2014
1 answer
169 views
Hi,

I've posted a question to this topic a year ago and the solution went fine. Today I updated to the newest version of Kendo UI and now I have problems with the code. Looks like the update broke things for me.

The original question was, how to bind data in a clientdata from the parent row. The solution worked by using the DetailInit Method of the Parent Grid to set the data in the datasource of the Childgrid.
http://www.telerik.com/forums/grid-bind-a-clientdetailtemplate-to-a-collection-in-parent-row

My Parent Grid looks like this:
​
01.@(Html.Kendo().Grid<Models.AgentCommissionDetail>()
02..Name("commissionGrid")
03.        .Columns(
04.            col =>
05.            {
06.                    // cols..
07.            })
08.            .ClientDetailTemplateId("detailTemplate")
09.        .DataSource(dataSource => dataSource
10.       .Ajax()
11.       .ServerOperation(false)
12.    )
13.    .Events(events => events.DetailInit("initDetail"))
14.    .BindTo(Model.GroupedDetails)


Child Template:
01.@(Html.Kendo().Grid<Models.AgentCommissionDetail>()
02.        .Name("details_#=CustomerNr#")
03.        .Columns(col =>
04.        {
05.        // cols
06.        })
07.        .DataSource(dataSource => dataSource
08.            .Ajax()
09.            .ServerOperation(false)
10.           .Sort(p => { p.Add(x => x.ArticleGroup); p.Add(x => x.DiscountGroup); p.Add(x => x.ProductGroup); p.Add(x => x.Revenue).Descending(); })
11.        )
12.        .Pageable()
13.        .Sortable()
14.        .ToClientTemplate()
15.)

And finally the DetailInit to wire it together:
1.function initDetail(e) {
2.    var grid = $("#details_" + e.data.CustomerNr).data("kendoGrid");
3.    grid.dataSource.data(e.data.Details);
4.}

As I said, everything worked fine in the last years version. 

Following steps happen:
 - I expand a row
 - My data is shown as usual
 - But now, an post server request is made to my controller action. That's pretty strange, because I didn't specify any read methods in my datasource.
 - Since no data is returned from the controller, the grid will be empty as soon as the request is finished.

If I comment out the DataSource specification of the Childgrid, no request is made. But then my data is not sortedand Server Paging is enabled. Due to this, I tried to create a new datasource in the initDetail JS-Function, which has the specified sort-definition and turned off server paging. But I'm unable to set the Grid's datasource (already searched in the forums).

Was there a breaking change?

Thanks for any advices.

Greets


Petur Subev
Telerik team
 answered on 10 Feb 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
SegmentedControl
+? 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?