Telerik Forums
UI for ASP.NET MVC Forum
1 answer
74 views
I want to set the min/max of a datepicker with javascript. Currently I can do this via $('...').data('tDatePicker').minValue/maxValue = new Date(...) however, this does not reflect in the rendering of the calendar. Is there a way to rerender the calendar?

Thanks.
Georgi Krustev
Telerik team
 answered on 15 May 2014
3 answers
400 views
I have a timesheet grid that is setup for batch editing. There are row totals and column totals and a bunch of decimal data in each cell. Each row has data for Monday through Friday for the first week and Mo-Fri for the second week.  Totals are updated for Week 1 and Week2 as well as the 2 week total. Individual lines in the grid represent projects that are being billed against.

I have the grid set up to calculate the row totals as the user enters information in each cell and tabs to the next by hooking into the gridSave event and running javascript to do a running total and updating the row total field. Here's an example.

//Calculate week sums and total sums
   function gridSave(e) {
 
       
           var Mo1_time = e.values.Mo1_time,
                Tu1_time = e.model.Tu1_time,
                We1_time = e.model.We1_time,
                Th1_time = e.model.Th1_time,
                Fr1_time = e.model.Fr1_time,
                Sa1_time = e.model.Sa1_time,
                Su1_time = e.model.Su1_time,
                Mo2_time = e.model.Mo2_time,
                Tu2_time = e.model.Tu2_time,
                We2_time = e.model.We2_time,
                Th2_time = e.model.Th2_time,
                Fr2_time = e.model.Fr2_time,
                Sa2_time = e.model.Sa2_time,
                Su2_time = e.model.Su2_time,
                Wk1_time = 0,
                Wk2_time = 0
 
           Wk1_time = Mo1_time + Tu1_time + We1_time + Th1_time + Fr1_time + Sa1_time + Su1_time;
           Wk2_time = Mo2_time + Tu2_time + We2_time + Th2_time + Fr2_time + Sa2_time + Su2_time;
 
           e.model.set("Wk1_time", Wk1_time);
           e.model.set("Wk2_time", Wk2_time);
 
           e.model.set("Sum_time", Wk1_time + Wk2_time);
       }

What I'd like to do is expand this to also do a column total and update the aggregate in the footer, but I'm not sure how to do this. (Need to have a total for each day of the week). Right now I have it set so that the aggregates properly calculate column totals and display when the grid data is first loaded from the controller, but then they are static until all data is saved and the grid is re-populated. I need real-time updates.

Thanks in advance!
Petur Subev
Telerik team
 answered on 15 May 2014
3 answers
296 views
Hello,

I am using the "Export Grid to PDF" from the Code Library. 
http://www.kendoui.com/code-library/mvc/grid/export-grid-to-pdf.aspx

It works great, but I need to be able to choose which rows to export to PDF, with a checkbox, not the entire grid. 

I created this checkbox:
columns.Template(e => e.IsChecked).ClientTemplate("<input type='checkbox' #= IsChecked ? checked='checked':'' # value='#=EmployeeID#' />")
How can I access this in the controller, where the method to create the export is located?

Can someone point me in the right direction?



Petur Subev
Telerik team
 answered on 15 May 2014
6 answers
157 views
Hi,

we're using a Grid with Virtual Scroll Paging enabled and have found that when we scroll down the list and get past the PageSize record (in our case its 300) and its time for it to retrieve the next set of records it calls the controller function defined in .Read() twice... any idea why it calls it twice !? 

Thanks.

Sincerely,

-Igor
Alexander Popov
Telerik team
 answered on 15 May 2014
6 answers
501 views
I have a menu where I wanted to make the text labels hidden and only have the top menu item choices show the image when the screen / client area is a smaller size and found it actually pretty easy to do:

<style type="text/css">
@@media only screen and (max-width: 920px){
    #RootMenu .menuItemText { display:none; visibility: hidden;}                 
 }
</style>

and for the menu:

 @(Html.Kendo().Menu()        
                .Name("RootMenu")
                .HtmlAttributes( new {style="white-space:nowrap;overflow:hidden;max-height:38px;"} )
                .HighlightPath(false)
                .Orientation(MenuOrientation.Horizontal)
                .Items(items => {
                  
                    items.Add().Text("<span class='menuItemText'>Home</span>").Action("Index", "Home").ImageUrl("~/Images/home-white-24.png").Encoded(false);
                 })
        
 )

The key is to wrap the menu item text in span with a classname and making sure .Encoded(false) is set.

From there the media query will do the rest.

Have it working quite nicely at http://www.renepilon.com

Mark
Top achievements
Rank 1
 answered on 15 May 2014
2 answers
200 views
Hi All,

I am trying the Kendo grid. Especially when using the incell mode. It seem like i can't go to the next cell bellow.
If you imagine excel, i want update the sheet in column A. Now i am updating the value of A1, then i want to update cell A2.
In Excel i can just use the down key to move to cell A2.
How can we do it in Kendo Grid?

Please find the code at other thread:
http://www.telerik.com/forums/can%27t-choose-the-first-item-in-dropdown-on-kendo-grid-colum-foreignkey

Thanks in advance.
Csa
Top achievements
Rank 1
 answered on 15 May 2014
1 answer
159 views
I have some questions regarding the MVC Server wrappers.

1. Is there any true benefit for the MVC Server wrappers other than time saved form manually coding the JS? Like are there some special tricks or handlers that are only available via the server wrappers?

2. Is there anyway to specify the dataType for the Wrapper DataSource builder? Example if im using WebApi to serve some data if i use the grid and use the Ajax or WebApi Datasource builder i get nothing but using that same WebApi endpoint if i use the client-side initializing it works. Sample code at the end.

3. What are the pros and cons for the server side functions like Paging, sorting etc..

***************** CODE for # 2 ************************
@model Tsms.Az.Dds.Dto.ViewModels.Classroom.AvailableViewModel
 
@{
    ViewBag.Title = "WebApi";
}
 
<h2>WebApi</h2>
 
<h3>MVC Wrappers</h3>
<div>
    @(Html.Kendo()
        .Grid<Tsms.Az.Dds.Dto.ViewModels.Classroom.AvailableGridItem>()
        .Name("AvailableClassesGrid")
        .Columns(columns =>
        {
            columns.Bound(c => c.ClassDateColumn).Title("Date").Width(150)
                .ClientTemplate(
                    "<span class='ac#= ClassroomType#-#: LanguageType# ;'>#= ClassDateColumn#</span>" +
                    "<br/><br/>" +
                    "# if ( window.location.pathname.indexOf('/Register/Classroom') == 0 ) { #" +
                        "<a data-tsms='acAction' class='button red'><i class='icon-ok'></i> Select</a>" +
                    "# } else { #" +
                        "<a href='Register/Classroom?classID=#=ClassroomID#' data-tsms='acAction' class='button red'>Register</a>" +
                    "# } #"
                );
            columns.Bound(c => c.ClassLocationColumn).Title("Address").Encoded(false).ClientTemplate("<span class='ac#= ClassroomType#-#: LanguageType# ;'>#= ClassLocationColumn#</span>");
            columns.Bound(c => c.ClassDirectionsColumn).Title("Directions").Width(250).Encoded(false).ClientTemplate("<span class='ac#= ClassroomType#-#: LanguageType# ;'>#= ClassDirectionsColumn#</span>");
            columns.Bound(c => c.DisplayCity).Visible(false);
            columns.Bound(c => c.ClassTimeColumn).Visible(false);
        })
        .Pageable(p => p.Enabled(Model.GridSettings.PageableSettings.Enabled).PageSizes(Model.GridSettings.PageableSettings.Enabled))
        .Sortable(s => s.Enabled(Model.GridSettings.SortableSettings.Enabled))
        .Scrollable(s => s.Enabled(Model.GridSettings.ScrollableSettings.Enabled))
        .Selectable(s => s.Enabled(Model.GridSettings.SelectableSettings.Enabled))
        .Filterable(f => f.Enabled(Model.GridSettings.FilterableSettings.Enabled))
        .DataSource(source => source
            .Ajax()
            .ServerOperation(false)
            .Read(read => read.Url("/api/classroom/get-available-grid-list-test").Type(HttpVerbs.Get))
        )
        .Deferred()
    )
</div>
 
<hr />
<h3>Client Side</h3>
<div id="grid"></div>
 
@section scripts
{
<script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "json",
                            transport: {
                                read: "/api/classroom/get-available-grid-list-test"
                            },
                            pageSize: 5,
                            serverPaging: false,
                            serverFiltering: false,
                            serverSorting: false
                        },
                        height: 430,
                        filterable: true,
                        sortable: true,
                        pageable: true,
                        columns: [{
                                field: "ClassDateColumn",
                                filterable: false
                            },
                            "ClassLocationColumn"
                        ]
                    });
                });
</script>
}
Vladimir Iliev
Telerik team
 answered on 14 May 2014
1 answer
1.8K+ views
I want to filter a grid via JavaScript, but cant seem to work out how to pass data,
I have tried like this, Can this be done, thanks
​
var grid = $("#StudentInvoices").data("kendoGrid");
grid.dataSource.read({ "page": 1, "pageSize": 10, "filter": "Paid~eq~false" })
Dimiter Madjarov
Telerik team
 answered on 14 May 2014
3 answers
2.0K+ views
I'm attempting to add a handler for errors to an MVC grid wrapper.  My grid gets its data and does editing via AJAX.  That is working properly.  I'm now trying to add support for authorization/roles so I want to be able to show the user a message when they don't have access and, for example, click on the Edit button.

All the samples I've seen use events.error.  So I created a grid as below with a javascript function as below.  However, when trying to show the view in the browser I get a compilation error in the browser "'Kendo.Mvc.UI.Fluent.GridEventBuilder' does not contain a definition for 'Error' and no extension method 'Error' accepting a first argument of type 'Kendo.Mvc.UI.Fluent.GridEventBuilder' could be found (are you missing a using directive or an assembly reference?)"

I'm sure I must be missing something simple.  Can anyone offer assistance in where I've gone off the tracks?  At least as helpful, can you point me to the correct spot in the documentation to find this information?

@(Html.Kendo().Grid<KendoMVC4.Models.Power>()
      .Name("grid")
      .DataSource(dataSource => dataSource // Configure the grid data source
                    .Ajax() // Specify that ajax binding is used
                    .Read(read => read.Action("ExecutedPowers_Index", "Powers")) // Set the action method which will return the data in JSON format
                    .PageSize(10)
                    .Model(model => model.Id(p => p.ID))
                    .Create(update => update.Action("Power_Create", "Powers"))
                    .Update(update => update.Action("Power_Update", "Powers"))
                    .Destroy(update => update.Action("Delete", "Powers"))
                 )
                .Columns(columns =>
                {
                    columns.Bound(p => p.PowerNumber);
                    columns.Bound(p => p.Status);
                    columns.Command(command => { command.Edit(); command.Destroy();  }).Width(200);
                    columns.Command(command => { command.Custom("Forfeit").Click("showForfeit"); });

                })
                .Pageable()
                .Sortable()
                .ToolBar(toolbar => toolbar.Create())
                                .Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("PowerEditor")
                                    .Enabled(User.IsInRole("PowerEditor"))
                                    .Window(w => w.Title("Edit Power Details"))
                                    .Window(w => w.Width(560))
                                    .Window(w => w.Height(750))
                                 )
                .ClientDetailTemplateId("client-powerDetails")
                .Events(events => events.Error(@<text>function(e) { $.proxy(error, $("#Grid").data("kendoGrid"))(e); }</text>))
    
                )

<script type="text/javascript">
function grid_errorHandler(e) {
        if (e.errors) {
            var message = "Errors:\n\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n\n";
                    });
                }
            });
            alert(message);
        }
        else if (e.xhr.status == 401) {
            //show message
            var grid = $("#grid").data("kendoGrid");
            grid.table.on("click", "tbody > tr", function (e) {
                e.stopPropagation();
            });
            grid.element.find("> .k-grid-toolbar").hide();
        }
    }
</script>
Daniel
Telerik team
 answered on 14 May 2014
8 answers
444 views

I have a problem on date display in grid. I already read some  issue here in this forums but still there's no solution.

My problem is the "p.CreatedDate" field which is not displaying properly. See attached image file

I hope you could help me on this.

Thank you and God bless...

Here's my code below:

Html.Kendo().Grid(Of SPIMS.ViewModel.EventViewModel.Index)() _
                .Name("grid") _
                .Sortable _
                .Columns(Sub(c)
                                 c.Bound(Function(p) p.ID).HeaderHtmlAttributes(New With {.style = "text-align: center; font-weight: bold"}).Width(10)
                                 c.Bound(Function(p) p.CreatedDate).Format("{0:dd/MM/yyyy}").Width(20).Title("Date").HeaderHtmlAttributes(New With {.style = "text-align: center; font-weight: bold"})
                                 c.Bound(Function(p) p.Source).HeaderHtmlAttributes(New With {.style = "text-align: center; font-weight: bold"}).Width(20)
                                 c.Bound(Function(p) p.Message).HeaderHtmlAttributes(New With {.style = "text-align: center; font-weight: bold"}).Width(50).Title("Description")
                                 c.Command(Sub(commands)
                                                   commands.Custom("View").Click("showDetails")
                                           End Sub).Title(" ").Width(10)
                         End Sub) _
                .Scrollable() _
                .Filterable() _
                .Pageable(Sub(pager)
                                  pager.Input(True)
                                  pager.Numeric(True)
                                  pager.Input(True)
                                  pager.PreviousNext(True)
                                  pager.Refresh(True)
                                  pager.PageSizes(True)
                                  pager.ButtonCount(10)
                          End Sub) _
                .HtmlAttributes(New With {.style = "height:450px;width:900px;"}) _
                .DataSource(Sub(d)
                                    d.Ajax() _
                                    .PageSize(10) _
                                    .Model(Sub(model) model.Id(Function(p) p.ID)) _
                                    .ServerOperation(True) _
                                    .Read(Function(read) read.Action("Model_Read", "Event"))
                            End Sub).Render()
Silver Lightning
Top achievements
Rank 1
 answered on 14 May 2014
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?