Telerik Forums
UI for ASP.NET MVC Forum
3 answers
2.1K+ 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
486 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
2 answers
267 views
Hello,

I am a first time user of Kendo UI for ASP.NET MVC. The version I am using is Q1 2014 (2014.1.318). In Kendo Grid while doing custom server binding, if I keep on clicking a column header for sorting, on every third click, the grid misses to send the sort descriptor to the server and the sort order falls back to default . The same happens when I tried the custom server binding from the demo which comes with the product installation. I sorted the column 'Ship City' and on every third click I can see that the 'Grid-sort:' parameter value is empty (I used Chrome developer tool to check this). On the next two clicks, I can see it as 'ShipCity-asc' and 'ShipCity-desc'. I have attached a screen shot which shows the issue in the demo. Can anyone kindly suggest why this might be happening?

Thanks

Shameer
Shameer
Top achievements
Rank 1
 answered on 14 May 2014
3 answers
733 views
Hi,

      I have a grid and i need to set hyperlink for three columns and also I have these column font color change depend on the column value... How do i do that..

here is my Index.cshtml

columns: [
           { field: "BatchNo", width: "150px" },
           { field: "BatchDate",
             width: "250px",
            format: "{0:dd-MMM-yyyy hh:mm:ss tt}",
      parseFormats: ["yyyy-MM-dd'T'HH:mm:ss.zz"] },
           { field: "FileType", width: "250px" },
           { field: "BatchFileName", width: "600px" },
           { field: "BatchRecords", title: "StageCount", width: "150px", template: "\u003cb\u003e\u003ca href=\u0027/#=FileType#/Index?Batchno=#=BatchNo#\u0027\u003e#=BatchRecords#\u003c/a\u003e\u003c/b\u003e" },
           { field: "LoadCount", width: "150px", template: '#=SetLoadColor(BatchRecords,LoadCount,ReportCount)#'  },
           { field: "ReportCount", width: "150px", template: '#=SetReportColor(BatchRecords,LoadCount,ReportCount)#' },
           { field: "Status",
             width: "150px",
             template: "#=Status#",
             editor: statusDropDownEditor
           },
           { field: "EntityCode", width:"150px" },
           { field: "EntityName", width:"150px" },
           { field: "CreatedBy", width:"200px" },
           { field: "CreatedDate",
             width:"250px",
              format: "{0:dd-MMM-yyyy hh:mm:ss tt}",
      parseFormats: ["yyyy-MM-dd'T'HH:mm:ss.zz"] },
           { field: "ModifiedBy", width:"350px" },
           { field: "ModifiedDate",
             width:"250px",
              format: "{0:dd-MMM-yyyy hh:mm:ss tt}",
      parseFormats: ["yyyy-MM-dd'T'HH:mm:ss.zz"] },
           { command: ["edit"], title:" ", width:"200px"}],
           editable: "inline",
       pageable: true,
       sortable: true,
       filterable: true,
       columnMenu: true,
       resizable: true,

My Functions to change the column color..

function SetLoadColor(BatchRecords,LoadCount,ReportCount)
{
    if(BatchRecords===LoadCount||LoadCount===0 )
    return LoadCount;
    else
    return "<font color=\"red\">"+LoadCount+"</font>";
}
 
function SetReportColor(BatchRecords,LoadCount,ReportCount)
{
    if(BatchRecords===ReportCount&&LoadCount===ReportCount||ReportCount===0 )
    return ReportCount;
    else
    return "<font color=\"red\">"+ReportCount+"</font>";
}

I need to set hyperlink like this "href=/#=FileType#/Index?Batchno=#=BatchNo" on all three columns...along with color change rule..

Dimiter Madjarov
Telerik team
 answered on 13 May 2014
1 answer
435 views
Hi

I'm sure this is relatively straightforward but all my columns are showing correctly except for a time column which is showing as [object][object].

property is type System.TimeSpan

Any ideas?

Thanks
Ant
Top achievements
Rank 1
 answered on 13 May 2014
1 answer
388 views
Hi Guys,
I'm building up a site using mvc (razor) and kendo (plus ef).
I Built all controllers and view and right now they are exactly how Visual studio created them.

so for the first step I tried to put every /entity/Index.cshtml in a different tab

Here my code:
@(Html.Kendo().TabStrip()
         .Name("MainAcsTab")
         .Items(tabstrip =>
         {
             tabstrip.Add().Selected(true).Text(AcsViewRes.TabUser).Content(
                 Html.Action("Index","User").ToString());
             tabstrip.Add().Text(AcsViewRes.TabGroups).Content(
                 Html.Action("Index","Group").ToString());
             tabstrip.Add().Text(AcsViewRes.TabRoles).Content(
                 Html.Action("Index","Role").ToString());
             tabstrip.Add().Text(AcsViewRes.TabFunctions).Content(
                 Html.Action("Index","Function").ToString());
         })
   )

as soon as I run the application I can see the tab, and the first tab content as expected.
However I get an error:

Uncaught TypeError: undefined is not a function - placed here:
jQuery(function(){jQuery("#MainAcsTab").kendoTabStrip({});});

as a consequence of this issue (I suppose) I'm not able to change tab.

Regarding the navigation...
My indexes contains the ul list of all object and a link to edit/detail/delete each object.
If I click on one of this link, say details, the url changes from "localhost/AccessControl/#MainAcsTab-1" to "localhost/AccessControl/User/Details/1" and I loose my tab.

Is there a way to keep every view change inside my currently selected tab?

do I have to link every view as partial?

as a note my _layout and _viewStart are as created by VS

Thank you
Fabio
Dimiter Madjarov
Telerik team
 answered on 12 May 2014
3 answers
171 views
Hello ,

I have Kendo modal window coming up on button click like this

 wnd = $("#Add").kendoWindow({

title: "test",

actions: ["Close"],

content: direction,

width: "800px",

height: "600px",

visible: false,
Draggable: false,

modal: true

}).data("kendoWindow");

}

//wnd.refresh(direction);

wnd.center();
wnd.resi = false;
wnd.open();

How can i stop window from resizing? draggable false do not help

Anamika
Kiril Nikolov
Telerik team
 answered on 12 May 2014
1 answer
898 views
Hello,

I have a popup modal window coming up ona  button click. I have Draggable false still when window Comes up i can drag and Change ist size. How can i stop this.
wnd = $("#Add").kendoWindow({

title: "test",

actions: ["Close"],

content: direction,

width: "800px",

height: "600px",

visible: false,
Draggable: false,

modal: true

}).data("kendoWindow");
wnd.center();
wnd.resi = false;
wnd.open();
Kiril Nikolov
Telerik team
 answered on 12 May 2014
9 answers
2.1K+ views
I have a Kendo MVC Grid. In which I have Pagination which is Server Event and a Filter Option which Calls the Read of the Grid. But when I Include a Grouping It say's a error in the Browser Console " Cannot readproperty 'length' ". I have tried the solutions given on the other forum threads.
1)Giving .ServerOperation(false) which makes Pagination and Filtration nonfunctional. But  I need .ServerOperation(true) to make my Pagination and Filtration to work.
The code is below :

#######################Kendo Grid#############################

 @(Html.Kendo().Grid(Model.UpcomingMilestone)
                                                          .Name("grd_UpcomingMilestone")
                                                          
                                                          .Columns(columns =>
                                                          {
                                                              columns.Bound(c => c.ProjectName).Title("Project Name").Groupable(false);
                                                              columns.Bound(c => c.NextMilestone).Title("Next Milestone Name").Groupable(false);
                                                              columns.Bound(c => c.NextMilestoneDate).Title("Next Milestone Date").ClientTemplate("#= kendo.toString(NextMilestoneDate, \"MM/dd/yyyy\") #").Groupable(false);
                                                              columns.Bound(c => c.ProjectManagerName).Title("Project Manager Name").Groupable(false);
                                                              columns.Bound(c => c.TeamLeadName).Title("Team Lead Name").Groupable(false);
                                                              columns.Bound(c => c.WeekStartDate).ClientTemplate("#= kendo.toString(WeekStartDate, \"MM/dd/yyyy\") #");
                                                          })
                                                                  .Pageable(pageable => pageable
                                                                    .Refresh(true)                                                                   
                                                                    .ButtonCount(5)) // Enable paging
                                                                    //.Groupable()
                                                                  .HtmlAttributes(new { @class = "grd_UpcomingMilestone" })
                                                                  .DataSource(dataSource => dataSource // Configure the grid data source
                                                                      .Ajax() // Specify that ajax binding is used
                                                                      .Read(read => read.Data("filterGridParams").Action("FilteredUpcomingMilestone", "UpcomingMilestone"))// Set the action method which will return the data in JSON format                                                                        
                                                                      .PageSize(10)
                                                                                              //.Group(group => group.Add(c => c.WeekStartDate))
                                                                                              //.ServerOperation(false)
                                                                   )

                                                        )
###############################Filter Expression###############################################
function filterGridParams() {

                return {
                    TeamLeadPersonId: $("#ddlTeamLead").data("kendoDropDownList").value(),
                    ProjectManagerPersonId: $("#ddlProjectManager").data("kendoDropDownList").value()
                };
            }
#################################Button Click For Filteration##########################################
<input id="GoButton" onclick="fun_FilteredUpcomingMilestone()" type="button" class="GoButton" value="Go" />
function fun_FilteredUpcomingMilestone() {

       
        UpdateHiddenFieldValues();      
        //call the read method of the Grid, with Parameters and set the page Index to one
        var grd_UpcomingMilestone = $("#grd_UpcomingMilestone").data("kendoGrid");
        grd_UpcomingMilestone.dataSource.page(1);
       
    }
###############################Action #################################
public ActionResult FilteredUpcomingMilestone([DataSourceRequest] DataSourceRequest request, string TeamLeadPersonId, string ProjectManagerPersonId)
        {

              var UpcomingMilestoneModel = new UpcomingMilestoneModel();
             var upcomingMilestoneModel = new PagedDataResult<UpcomingMilestoneData>();

            if (UpcomingMilestoneModel.FirstTimeLoad)
            {
                //First time call, do not load the data
                UpcomingMilestoneModel.UpcomingMilestone = new List<UpcomingMilestoneData>();
              
            }
            else
            {
                //Load the data, for other events
                upcomingMilestoneModel = UpcomingDAL.GetUpcomingMilestoneData (request.ToPageDataInfo<UpcomingMilestoneData>(), TeamLeadPersonId, ProjectManagerPersonId);

                UpcomingMilestoneModel.UpcomingMilestone = upcomingMilestoneModel.ResultList;

               
            }           

           
            UpcomingMilestoneModel.FirstTimeLoad = false;

            return Json(new DataSourceResult
            {
                Data = UpcomingMilestoneModel.UpcomingMilestone, // Process data (paging and sorting applied)
                Total = upcomingMilestoneModel.TotalRecords // Total number of records
               
            });


           

         





        }







































Dhaval
Top achievements
Rank 1
 answered on 12 May 2014
3 answers
413 views
My data is currently being bound using the TreeViewItemModel, is there any way to set the SpriteCssClasses for the items from the controller?
Petur Subev
Telerik team
 answered on 12 May 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?