Telerik Forums
UI for ASP.NET MVC Forum
3 answers
330 views
I have a ap.net mvc4 page in which there is one form and two grids but my problem is that grids are firing the wrong methods and i have no clue what is wrong can someone please help me out i had the similar problem in the past i created a page again with the same code anf it worked but now i am not able to solve this problem. My update method is calling the update method and other methods are firing wrong methods as well please help me out


<kendo:grid>
<%: Html.Kendo().Grid<SSTS.Models.StudentsViewModel>()
    .Name("grid")
          .Columns(columns =>
          {
              // columns.Bound(student => student.CustomerName);
              columns.Bound(student => student.SchoolYear).Width(160);
        
          
              columns.Bound(student => student.YearStart).Width(50);
              columns.Bound(student => student.YearEnd).Width(50);
                columns.Command(commands =>
              {
                  commands.Edit(); // The "edit" command will edit and update data items
                  commands.Destroy(); // The "destroy" command removes data items
              }).Title("Commands").Width(50);
          })
          .ToolBar(toolbar => toolbar.Create()) // The "create" command adds new data items
          .Editable(editable => editable.Mode(GridEditMode.InLine)) // Use inline editing mode
          .DataSource(dataSource =>
              dataSource.Ajax()
                .Model(model =>
                {
                    model.Id(student => student.StudentNumber); // Specify the property which is the unique identifier of the model
                //    model.Field(student => student.StudentNumber).Editable(false); // Make the studentID property not editable

                model.Field(p => p.StudentNumbers).DefaultValue(
                      ViewData["defaultCategory"] as SSTS.Models.StudentNumbersViewModel);
         
                
                })
                .Create(create => create.Action("students_Create", "Student")) // Action invoked when the user saves a new data item
                .Read(read => read.Action("students_Read", "Student"))  // Action invoked when the grid needs data
                .Update(update => update.Action("students_Update", "Student"))  // Action invoked when the user saves an updated data item
                .Destroy(destroy => destroy.Action("students_Destroy", "Student")) // Action invoked when the user removes a data item
          )
              .Pageable()
%>




<%: Html.Kendo().Grid<SSTS.Models.StudentsViewModel>()
    .Name("grid2")
          .Columns(columns =>
          {
              // columns.Bound(student => student.CustomerName);
              columns.Bound(student => student.BoardingPoint);//.ClientTemplate("#=CustomerNames.CustomerName#").Width(160);
          
              columns.Bound(student => student.StudentNumber).ClientTemplate(
    "<a href='" +
        Url.Action("ViewStudent", "Home") +
        "/#= StudentNumber #'" +
    ">#= StudentNumber #</a>"
); ;
          
            
              columns.Bound(student => student.Description).Width(250);
              columns.Bound(student => student.NumberofSections).Width(250);
              columns.Bound(student => student.ContactNumber).Width(250);
                columns.Command(commands =>
              {
                  commands.Edit(); // The "edit" command will edit and update data items
                  commands.Destroy(); // The "destroy" command removes data items
              }).Title("Commands").Width(200);
          })
          .ToolBar(toolbar => toolbar.Create()) // The "create" command adds new data items
          .Editable(editable => editable.Mode(GridEditMode.InLine)) // Use inline editing mode
          .DataSource(dataSource =>
              dataSource.Ajax()
                .Model(model =>
                {
                    model.Id(student => student.StudentNumber); // Specify the property which is the unique identifier of the model
                //    model.Field(student => student.StudentNumber).Editable(false); // Make the studentID property not editable

              //      model.Field(p => p.CustomerNames).DefaultValue(
               //         ViewData["defaultCategory"] as KendoGridAjaxEditing2.Models.CustomerNamesViewModel);
         
                
                })
                    .Create(create => create.Action("BoardingPoints_Create", "Student")) // Action invoked when the user saves a new data item
                    .Read(read => read.Action("BoardingPoints_Read", "Student"))  // Action invoked when the grid needs data
                    .Update(update => update.Action("BoardingPoints_Update", "Student"))  // Action invoked when the user saves an updated data item
                    .Destroy(destroy => destroy.Action("BoardingPoints_Destroy", "Student")) // Action invoked when the user removes a data item
          )
          .Pageable()

%>




   [AcceptVerbs(HttpVerbs.Post)]
            public ActionResult students_Create([DataSourceRequest]DataSourceRequest request, StudentsViewModel students)
            {
                var results = new List<StudentsViewModel>();

                if (students != null )//&& ModelState.IsValid)
                {
                       _studNum = HttpContext.Session["StudentNumber"].ToString();
                    StudentRepository.InsertSchoolYear(students, _studNum);
                    results.Add(students);

                }

                return Json(results.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);
            }
            [AcceptVerbs(HttpVerbs.Post)]
            public ActionResult students_Update([DataSourceRequest]DataSourceRequest request, StudentsViewModel students)
            {
                if (students != null && ModelState.IsValid)
                {

                    _studNum = HttpContext.Session["StudentNumber"].ToString();

                    StudentRepository.UpdateSchoolYear(students);
                    UpdateModel(students);




                }
                return Json(new[] { students }.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);
            }

            [AcceptVerbs(HttpVerbs.Post)]
            public ActionResult students_Destroy([DataSourceRequest]DataSourceRequest request, StudentsViewModel product)
            {
                _studNum = HttpContext.Session["StudentNumber"].ToString();

                StudentRepository.DeleteSchoolYear(product);



                return Json(new[] { product }.ToDataSourceResult(request, ModelState));
            }
        




            public ActionResult BoardingPoints_Read([DataSourceRequest] DataSourceRequest request)
            {
                _studNum = HttpContext.Session["StudentNumber"].ToString();


                return Json(StudentRepository.GetSBoardingPoint(_studNum).ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
            }

            [AcceptVerbs(HttpVerbs.Post)]
            public ActionResult BoardingPoints_Create([DataSourceRequest]DataSourceRequest request, StudentsViewModel students)
            {
                var results = new List<StudentsViewModel>();

                if (students != null )
                {
                      _studNum = HttpContext.Session["StudentNumber"].ToString();
                    StudentRepository.InsertBoardingPoint(students, _studNum);
                    results.Add(students);

                }

                return Json(results.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);
            }
            [AcceptVerbs(HttpVerbs.Post)]
            public ActionResult BoardingPoints_Update([DataSourceRequest]DataSourceRequest request, StudentsViewModel students)
            {
                if (students != null )
                {
                    _studNum = HttpContext.Session["StudentNumber"].ToString();


                    StudentRepository.UpdateBoardingPoint(students);
                    UpdateModel(students);




                }
                return Json(new[] { students }.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);
            }

            [AcceptVerbs(HttpVerbs.Post)]
            public ActionResult BoardingPoints_Destroy([DataSourceRequest]DataSourceRequest request, StudentsViewModel product)
            {

                _studNum = HttpContext.Session["StudentNumber"].ToString();
                StudentRepository.DeleteBoardingPoint(product);



                return Json(new[] { product }.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);
            }
Daniel
Telerik team
 answered on 26 Sep 2014
2 answers
2.5K+ views
So I am using the latest build at the time of writing this "2014.2.909" and I have some "info" tooltips that the contents will dynamically change based on a combobox selection.

The tooltip is set up like this: 
1.@(Html.Kendo().Tooltip()
2.  .For(".glyphicon-question-sign")
3. .Position(TooltipPosition.Top)
4.  .Animation(true)                              
5.  .Events(events => events.Show("tooltipReset"))
6.  .Width(450)
7. .ContentTemplateId("tooltip-template")
8.)


Now I am using a template like this:

01.<script id="tooltip-template" type="text/x-kendo-template">
02.              <div id="tooltipContent" class="panel panel-primary">
03.                  <div class="panel-heading">
04.                      <h3 class="panel-title"><span class="glyphicon glyphicon-info-sign"></span> Helpful Hint</h3>
05.                  </div>
06.                  <div class="panel-body">
07.                      <div class="row">
08.                          <div class="col-md-12">
09.                              #=target.data('title')#
10.                          </div>
11.                      </div>
12.                  </div>
13. 
14.              </div>
15. 
16.          </script>
 

(You can hopefully see I am using bootstrap theme here as well) 

The current tooltipReset function I have created functions like this: 

1.function tooltipReset(e) {
2. 
3.    var contentpanel = $("#tooltipContent").first(".col-md-12").width();
4.    e.sender.refresh();
5.    e.sender.popup.wrapper.width(contentpanel);
6. 
7.}


On top of this I have had to override the current styling to make sure my bootstrap panel appears as I want it without the black surround: 

01..k-tooltip
02.{
03. 
04.}
05. 
06..k-tooltip, .k-tooltip-content
07.{
08.    color:#2a2828;
09.    background:none !important;
10.    background-color:transparent !important;
11.    border:none !important;
12.    
13.}
14. 
15. 
16..k-callout, .k-callout-w{
17.    border:none !important;
18.}


Now this shows a mini panel that floats as I require but I can't seem to get the size to dynamically expand/ contract based on the content being supplied. I tried setting the width to "auto" but this didn't seem to expand the right hand side so the text was either touching or overlapping the panel contents. 

So is there a better way of doing what I want? 


On top of that is there a better way to restyle the tool tips as the changes I have put in have affected other tool tips I have. These are not related to this like graph tool tips etc. 

Thanks in advance. 

Jelly Master
Top achievements
Rank 1
 answered on 26 Sep 2014
1 answer
144 views
Hello,
I've a grid defined as 
@(Html.Kendo().Grid<Communications.Communication>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.Protocol).Title(ResourceStrings.Protocol);
            columns.Bound(c => c.Date).ClientTemplate(@DateTimeHtmlHelper.GetParsedDate("Date")).Title(ResourceStrings.Date);
            columns.Bound(c => c.CodiceRapporto).Title(ResourceStrings.CodeDossier);
            columns.Bound(c => c.Type).Title(ResourceStrings.Type);
            columns.Command(commadnAction => commadnAction.Custom("download").Text("Download").Click("Download"));
        })
        .Resizable(resize => resize.Columns(true))
        .Scrollable(scr => scr.Enabled(true))
        .Filterable()
        .Sortable()
         .DataSource(dataSource => dataSource
        .Ajax()
        )
        .ToolBar(toolbar =>
        {
            toolbar.Template(@<text>
                <div class="toolbar">
                    <label>Data da </label>
                    @Html.Kendo().DatePicker().Name("dateFrom").Value(@Model.DateFrom)
                    <label> Data a </label>
                    @Html.Kendo().DatePicker().Name("dateTo").Value(@Model.DateTo)
                    @Html.Kendo().Button().Name("btnCarica").Content(ResourceStrings.BtnLoadData).Events(events => { events.Click("LoadData"); })
                </div>
            </text>);
        }
        )
)

<script>
    function Download(e) {
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
 
    var content ="@Html.ActionLink("CommunicationsReport", "Reports", new { protocol = 123 })"
 
        alert(content);
 
    }
 
</script>

I wish at column click to load open a new page for downloading a pdf....

in other parts of the project I've used something as

var content ="@Html.ActionLink("CommunicationsReport", "Reports", new { protocol = 123 })"

but now I can't since I don't have the link client side.... is there any simple way of doing that?

Thanks
Dimiter Madjarov
Telerik team
 answered on 26 Sep 2014
1 answer
116 views
I'm using VS2012 and MVC5. I dowloaded the telerik.ui.for.aspnetmvc.2014.2.903.trial and followed the below steps

Added the Kendo.Mvc.dll reference to my project. (got Kendo.Mvc.dll from telerik.ui.for.aspnetmvc.2014.2.903.trial\wrappers\aspnetmvc\Binaries\Mvc5)
Copied the JS and Style folders from telerik.ui.for.aspnetmvc.2014.2.903.trial
Created BundleConfig.cs as per the telerik website tutorial
added the reference link _Layout.cshtml and did the web.config settings as suggested

when i run the application i'm getting javascript runtime error in the following debugger code


jQuery(function(){jQuery("#datepicker").kendoDatePicker({"format":"M/d/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});

can please help to resolve my issue.

Dimo
Telerik team
 answered on 26 Sep 2014
2 answers
284 views
I am re-wiring a grid from traditional MVC to use a Telerik Grid and have a grid that appears not to be requesting data from the controller:

@ModelType EditUserViewModel
@Code
    ViewData("Title") = "UserRoles"
End Code
 
<h2>Roles for user: @Model.UserName</h2>
<hr />
@Using (Html.BeginForm("UserRoles", "Account", FormMethod.Post, New With {.encType = "multipart/form-data", .name = "myform"}))
@Html.AntiForgeryToken()
 
 @(Html.Kendo().Grid(Of SelectRoleEditorViewModel).Name("Roles") _
     .Columns(Sub(c)
                  c.Bound(Function(x) x.Selected)
                  c.Bound(Function(x) x.RoleName)
                  c.Bound(Function(x) x.Description)
              End Sub) _
    .Editable(Function(editable) editable.Mode(GridEditMode.InLine)) _
    .DataSource(Function(dataSource) dataSource _
             .Server() _
             .Model(Sub(model) model.Id(Function(p) p.RoleName)) _
             .Read(Function(read) read.Action("UserRolesRead", "Account", New With {.id = Model.id}))) _
     .Pageable())

Controller:
Public Function UserRolesRead(req As DataSourceRequest, id As String) As ActionResult
    Dim Db = New ApplicationDbContext()
    Dim user = Db.Users.First(Function(u) u.Id = id)
    Dim model As New List(Of SelectRoleEditorViewModel)()
    model = user.Roles
    Return View(model)
End Function

GIven this is non-Ajax I'd expect the Grid to 'read' the datasource upon initial rendering, but a breakpoint in the first line of 'UserRolesRead' is never hit and the Grid is rendered empty.

Anyone any ideas?
Thanks
Nikolay Rusev
Telerik team
 answered on 25 Sep 2014
1 answer
692 views
What is the best way to get the Kendo MVC controls to honor the Bootstrap "form-control" class? I have already seen these two related resources:

http://www.telerik.com/forums/do-you-plan-to-create-bootstrap-3-compatible-theme-
http://docs.telerik.com/kendo-ui/using-kendo-with-twitter-bootstrap

I generally have no problem with the Bootstrap v.3 and the Telerik bootstrap theme working together. The key exception in my case is the  "form-control" class. For example the controls (drop-downs, auto-completes, etc) do not wrap below the label as expected on a standard (non-horizontal) form.  I often use the "for" Html Helper e.g. @Html.KendoDropDownFor.

MVC 5 standard For helpers are now good at allowing for the additional "{ @class = "form-control" } argument. Need to do something similar with the kendo controls
Dimo
Telerik team
 answered on 25 Sep 2014
1 answer
94 views
I have a mvc grid that is populated with a datasource generated by a datable, the problem is that when i change the datable result the columns of the grid doesnt change.

On the other hand the rows changes because i can see the number of items changed.

I would like to know how to change the columns when i change the datatable result.
Dimo
Telerik team
 answered on 25 Sep 2014
1 answer
106 views
I've been fighting with the Foreign Key Colums and being able to edit them. I finally got it working, but it only saves if I click the Save Changes button.

.Editable(editable => editable.Mode(GridEditMode.InCell))

If I change the editable.Mode to GridEditMode.InLine and I get An exception of type 'System.NotSupportedException' occurred in Kendo.Mvc.dll but was not handled in user code.

Any advice?
Cody
Top achievements
Rank 1
 answered on 24 Sep 2014
3 answers
474 views
I only need to show a few rows (say 5 -100) in my grid so I rather use local binding.  But I need to use inline edit on a date column.
How do I go about doing this?

The current solution/examples uses ajax to read the data. I could take that approach and it would result in one extra unnecessary request. The bigger problem is, the query to read the data is a bit complex so I am using Native SQL and I am not sure how to mix that in with Kendo's DataSourceRequest.
My current code which I know is wrong when it comes to pagination.
var enterpriseAccounts = db.Database.SqlQuery<EnterpriseAccountsVM>(enterpriseAccountsQuery, new SqlParameter("accountType", AccountType.Enterprise)).ToList();
return Json(enterpriseAccounts.ToDataSourceResult(request));

I could solve all my problems by using client side pagination but have updates call the server. Is this possible?

Xavier
Top achievements
Rank 1
 answered on 23 Sep 2014
7 answers
308 views

Grid in inline edit mode.

@(Html.Kendo().Grid<Security.UserViewModel>()
    .Name("Users")
    .Columns(columns =>
    {
        columns.Bound(c => c.UserId).Hidden();
        columns.Bound(c => c.UserName).Title("Логин");
        columns.Bound(c => c.FirstName).Title("Имя");
        columns.Bound(c => c.LastName).Title("Фамилия");
        columns.Bound(c => c.Email).Title("E-mail");
        columns.ForeignKey(c => c.FirstRoleId, (System.Collections.IEnumerable)ViewData["roles"], "RoleID", "RoleName").Title("Роль");
        columns.Command(command =>
            {
                command.Edit();
                command.Destroy();
            });
    })
    .ToolBar(toolBar => toolBar.Create())
    .Editable(editing => editing.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .Scrollable()
     .DataSource(dataSource => dataSource       
        .Ajax()                
        .Events(events => events.Error("error"))
        .Model(model => {
            model.Id(u => u.UserId);
        })
        .Create(update => update.Action("Create", "Users"))
        .Read(read => read.Action("Read", "Users"))
        .Update(update => update.Action("Update", "Users"))
        .Destroy(delete => delete.Action("Delete", "Users"))
    )
)

When I add new row grid sends to the server blank "FirstRoleName" instead of "FirstRoleId". When I update the row all works fine.
Made temporary workaround:

$(function () {
    var grid = $("#Users").data("kendoGrid");
    // bind to the save event
    grid.bind("save", function (e) {
        if (e.model.isNew()) {
            e.model.FirstRoleId = $("input#FirstRoleId").val();
        }
    });
});

I think it is a bug.

Archana
Top achievements
Rank 1
 answered on 23 Sep 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?