Telerik Forums
UI for ASP.NET MVC Forum
2 answers
99 views

I have a grid that includes the Export to Excel functionality.

I retrieve the grid options via getOptions() and store them to local storage so that I may later restore those settings by using setOptions().  The  Export to Excel button is not being displayed after I call setOptions() so I'm assuming this is something I need to manually add to the configuration.  However, I'm having a hard time coming up with the syntax.  How do I do this?

The relevant configuration of the grid looks like this:

.ToolBar(tools => tools.Excel())
.Excel(excel => excel
    .AllPages(true)
    .FileName("Applications.xlsx")
    .Filterable(true)
    .ProxyURL(Url.Action("Excel_Export_Save", "Application"))
)

 

Code to populate the grid options looks like this:

var options = JSON.parse(gridOptions);
 
// Now that I have the options how do I add the Excel settings I defined on the
// grid above before calling setOptions()?
 
grid.setOptions(options);

PJ Melies
Top achievements
Rank 1
 answered on 03 May 2016
5 answers
168 views

I have a Menu that has 9 root level items and many children items under each of them.

I have added tooltips to the items, but I do not want tooltips for the root items to show up at all.

I am loading the text using the ContentHandler and I have tried setting the text for the root items to "" and also to null. I have tried just leaving them out of the JavaScript that I use to set the text.

No matter what I have tried, I get an empty tooltip box showing next to the root item when I first hover over it.

TIA,
Bob Mathis

Bob
Top achievements
Rank 2
 answered on 03 May 2016
2 answers
327 views

Hello, I'm getting very strange behavior on my action buttons on a Kendo Window. I'm currently on UI for ASP.NET MVC 2015.2.805, should I upgrade? ( i see UI for ASP.NET MVC Q1 2016 SP1 has Minimize / maximize events listed, any benefit?)

My setup is, a main view which loads a window, which contents are a kendo scheduler.  Here is the razor declaration for the window.

@(Html.Kendo().Window()
    .Name("shedulerWindow")            
   
.Title("Scheduler Window")      
    .Content(@<text>@Html.Action("_EvaultBackupSchedulerPopOut", "Dashboard")</text>)
    .Draggable()     
    .Resizable()    
    .Width(1285)      
    .Height(545)    
    .Position(settings => settings
           .Top(178)
           .Left(495)
           )
     .Actions(actions => actions              
                   .Minimize()                                 
                   .Custom("Maximize")                                 
                   .Custom("close")               
                    )
     .Events(ev => ev                                 
     .Close("onClose")
     )          
)

 

You'll notice i've started over-writing all of the real close and maximize actions with custom ones, simply because they don't work correctly out of the box; ie.Close never consistently fired my onClose method (50% or less). Maximize and restore were not working correctly and still not.

Now what's happening, when I maximize, I get two restore buttons show up which do not actually work correctly either.
Look at my 'restore code' image of how the HTML renders out.
Look at the restore icons to see what shows up.

 

 

Konstantin Dikov
Telerik team
 answered on 03 May 2016
4 answers
1.6K+ views
Hello,

I am using an inCell editable grid and I want to use a textarea in one column.

The column looks like this:
columns.Bound(p => p.Reason).Title("Reason")
.ClientTemplate("<textarea rows='2' style='text-overflow:ellipsis; display:block; width:99%; height:100%; font-family:Arial; font-size:12px;' readonly='readonly'>#= Reason #</textarea>");


And the Editor-Template like this:
@model string
 
@Html.TextAreaFor(m => m, new { rows = 2, cols = 35, wrap = "hard",  @readonly = true, style = "text-overflow:ellipsis; display:block; width:99%; height:100%; font-family:Arial; font-size:12px;" })


My problem is, that I have to click outside the textarea of my ClientTemplate (but still inside the cell) to get the cell switched into the edit-mode. Is there any possibility to get the edit-mode by clicking anywhere in the cell... also if I click on the readonly-textarea which is defined in the ClientTemplate?

If i don't use a ClientTemplate, the text which gets inserted, especially the returns won't be shown and the whole text is in one line.

Does anyone have a solution for that?
Konstantin Dikov
Telerik team
 answered on 02 May 2016
1 answer
242 views

I getting increasingly frustrated with the effort required to get Telerik/Kendo products to do anything other than look pretty in useless ineffective demos.

The DatePicker is beyond a joke.

Kiril Nikolov
Telerik team
 answered on 02 May 2016
1 answer
209 views

I've been buggered by this all day today.

I've got a Kendo grid in an MVC razor page running in AJAX mode with create and update actions calling a controller.

I've also got click-happy users that want to double-click the "update" button and are causing duplicate calls to the data service.  I've tried various things, including disabling the buttons on RequestStart and RequestEnd but a double click continually reposts data.

The following code disables both the update and cancel button.  inserting the k-state-disabled class and removing the action class replacing it with a dummy class.  When the data request is done the classes are restored.

Is there a better solution than this:

 

.DataSource(ds=>ds
  .Ajax()
  //Brevity
  .Events(events => events.Error("onValidationError"))
                      .Events(events => events.RequestStart("prs_RequestStart"))
                      .Events(events => events.RequestEnd("prs_RequestEnd"))
                      .Read(read => read.Action("ReadCreateProductVMs", "API", new { id = Model.Id }))
                      .Create(create => create.Action("CreateProductVM", "API"))
                      .Update(update => update.Action("UpdateProductVM", "API"))
                  ))
 
<script>
function prs_RequestStart(e) {
    var grid = $("#Grid");
    grid.find(".k-grid-update").addClass("k-state-disabled").addClass("qmims-noUpdate").removeClass(".k-grid-update");
    grid.find(".k-grid-cancel").addClass("k-state-disabled").addClass("qmims-noCancel").removeClass(".k-grid-cancel");
}
 
function prs_RequestEnd(e) {
    var grid = $("Grid");
    grid.find(".k-grid-noUpdate").removeClass("k-state-disabled").removeClass("qmims-noUpdate").addClass("k-grid-update");
    grid.find(".k-grid-noCancel").removeClass("k-state-disabled").removeClass("qmims-noCancel").addClass("k-grid-cancel");
}
 
</script>

Konstantin Dikov
Telerik team
 answered on 29 Apr 2016
1 answer
582 views

Hello, I'm trying to create a date range picker for a column in a kendo grid that will also use the datepicker UI. Running into a lot of issues here.

I have a JSON file that I am using as a datasource. I'm converting each date string into a date object.

Sorting seems to work on this column, but I'm having issues with any kind of gte/lte operators, they don't seem to work at all.

This is the config I have for the specific column, I'm not very familiar with Kendo and haven't found a forum that uses Kendo grid with pure javascript that utilizes a date range picker on just one column. Any help would be much appreciated, thanks!

{

                         field: '["Status Date"]',

                        title: "Status Date",
                        type: "date",
                        format: "{0: MM/dd/yyyy}",
                        filterable: {
                            operators: {
                                string: {
                                    lt: "Is before",
                                    gt: "Is after"
                                }
                            },
                            ui: function(element) {
                                element.kendoDatePicker({
                                    format: "{0: MM/dd/yyyy}",
                                });
                            },
                            extra: true,
                             messages: {
                                 "info": "Show items between dates:"
                             }
                        }
                    }

Dimitar
Telerik team
 answered on 29 Apr 2016
3 answers
565 views

hi,

i can get the group footer to show, but the total client footer. below is the code.  any ideas?  thanks.

 

    @(Html.Kendo().Grid<ClientReporting.ViewModels.Reports.VolumeViewModel>
        ()
        .Name("ReportGrid")
        .Columns(columns =>
        {
            columns.Bound(o => o.Firm).Width(130).Locked(true);
            columns.Bound(o => o.Collat).Width(70);
            columns.Bound(o => o.UserName).Width(100).Title("User");
            columns.Bound(o => o.Product).Title("Product Type").Width(110);
            columns.Bound(o => o.Symbol).Title("Symbol").Width(100);
            columns.Bound(o => o.Volume).Title("Amount (USD)").Width(150).Format("{0:n0}")
                    .ClientGroupFooterTemplate("Sub-total: #= kendo.toString(sum, \"n2\")#")
                    .ClientFooterTemplate("Period Total: #= kendo.toString(sum, \"n2\")#");
        })
        .ToolBar(tools => tools.Excel())
        .Excel(excel => excel
        .FileName("RevenueReport.xlsx")
        .Filterable(true)
        .AllPages(true)
        .ProxyURL(Url.Action("ExcelExportSave", "ReportGrid"))
        )
        .Sortable()
        .AllowCopy(true)
        .ColumnMenu()
        .Groupable(group => group.ShowFooter(true))
        .Resizable(resize => resize.Columns(true))
        .Scrollable(scrollable => scrollable.Virtual(true))
        .Scrollable(s => s.Height("500px"))
        .Filterable(filterable => filterable
        .Extra(true)
        .Operators(operators => operators
        .ForNumber(n => n.Clear()
        .IsEqualTo("Is Equal To")
        .IsGreaterThan("Is Greater Than")
        .IsGreaterThanOrEqualTo("Is Greater Than Or Equalt To")
        .IsLessThan("Is Less Than")
        .IsLessThanOrEqualTo("Is Less Than Or Equal To")
        )
        .ForDate(d => d.Clear()
        .IsEqualTo("Is Equal To")
        .IsGreaterThan("Is Greater Than")
        .IsGreaterThanOrEqualTo("Is Greater Than Or Equal To")
        .IsLessThan("Is Less Than")
        .IsLessThanOrEqualTo("Is Less Than Or Equal To"))
        )
        )
        .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Multiple)
            .Type(GridSelectionType.Row)
        )
        .AutoBind(false)
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(100)
            .Model(model =>
            {
                model.Id(p => p.Firm);
                model.Field(p => p.Collat).Editable(false);
                model.Field(p => p.UserName).Editable(false);
                model.Field(p => p.Product).Editable(false);
                model.Field(p => p.Symbol).Editable(false);
                model.Field(p => p.Volume).Editable(false);
            })
        .Read(read => read.Action("Volume", "ReportGrid")
        .Data("GetGridData"))
        .Group(groups =>
        {
            groups.Add(model => model.Firm);
            groups.Add(model => model.Collat);
            groups.Add(model => model.UserName);
            groups.Add(model => model.Product);
            groups.Add(model => model.Symbol);
        })
        .Aggregates(aggregates =>
        {
            aggregates.Add(model => model.Volume).Sum();
        })

        .Events(events => events.Error("onError").Change("onChange"))
        ))


Dimo
Telerik team
 answered on 29 Apr 2016
1 answer
78 views

Is there any plugin or provision for End user can build a query and generate a Chart.

Example: My application have a list of master items, i can select master item and make a project. Consider i have 20 master items in which 5 projects are InProgress, 5 are Completed projects and 10 items Not started a Project yet. Based on this i want to draw a pie chart or a bar chart.

Stamo Gochev
Telerik team
 answered on 28 Apr 2016
3 answers
193 views

I have a grid (EditPersonnelRolesGrid) with a column holding a dropdownlist for a training role. For each row on this list the dropdownlist will hold different values.

I use an EditorTemplate (GridPersonnelRoles) to render the dropdownlist. The dropdown list has a  Datasource.Read() where it passes the training exercise id to the controller which then passes back the relevant select list of training roles. The exercise id is stored as a column on EditPersonnelRolesGrid. A JavaScript function (getParentId) tries to get this information from the grid row. This code was adapted from other threads regarding the same problem. However this javascript function always returns the first row of grid values regardless of what row is selected. I would appreciate any help.

 

EditPersonnelRoles.cshtml:
 
@model IEnumerable<PersonnelRoleEditorModel>
@using Mallon.IReport.Models
@Html.Hidden("ID", (object)ViewBag.DrillReport)
@Html.Hidden("exID", (object)ViewBag.ExerciseID)
@Html.Hidden("TrainingEventID", (object)ViewBag.TrainingEventID)
@Html.Hidden("personID", (object)ViewBag.PersonID)
  
 
<table style="width:100%">
  <tr>
    <td>
      <div class="list rounded">
 
        @(Html.Kendo().Grid<PersonnelRoleEditorModel>()
          .Name("EditPersonnelRolesGrid")
          .Editable(editable => editable.Mode(GridEditMode.InLine).Enabled(true))
          .AutoBind(true)
          .Columns(columns =>
          {
            columns.Bound(r => r.PersonnelId).Hidden();
            columns.Bound(r => r.ExerciseAllocationId).Hidden();
            columns.Bound(r => r.ExerciseName).Title("Exercise");
            columns.ForeignKey(r => r.RoleOid, (System.Collections.IEnumerable)ViewBag.Roles, "Value", "Text")
              .EditorTemplateName("GridPersonnelRoles")
              .Title("Exercise")
              .Width(200);
            columns.Command(command => { command.Edit(); }).Width(172);
          })
          .DataSource(dataSource => dataSource
          .Ajax()
          .Model(model =>
          {
            model.Id(p => p.PersonnelId);
            model.Field(p => p.ExerciseName).Editable(false);
          })
          .Events(e =>
          {
          e.Error("handleAjaxError");
          })
          .Update(update => update.Action("UpdateExerciseRoles", "DrillAttendance"))
                .Read(read => read.Action("ReadPersonnelRoles", "DrillAttendance").Data("getPersonnelRolesValues"))
          ))
 
</div>
    </td>
  </tr>
</table>
 
 
GridPersonnelRoles.cshtml:
@model object
 
@(Html.Kendo().DropDownListFor(m => m)
  .DataValueField("Value")
  .DataTextField("Text")
  .DataSource(ds => ds.Read(read => read.Action("GetDropDownRolesList", "DrillAttendance").Data("getParentId")))
  )
 
Javascript:
function getParentId() {
  var target = $(event.currentTarget);
  var row = $(target).closest("tr");
  var grid = $(target).closest("[data-role=grid]").data("kendoGrid");
  var dataItem = grid.dataItem(row);
  return { exerciseId: dataItem.ExerciseAllocationId };
}
 
 
Controller code:
 public JsonResult GetDropDownRolesList(string exerciseId) 
    {
      ExerciseAllocation ea = DbSession.Get<ExerciseAllocation>(new Guid(exerciseId));
      SelectList Roles = SelectListHelper.TrainingEventRoles(DbSession, ea.Exercise, ea.Role);
 
      return Json(Roles, JsonRequestBehavior.AllowGet);
    }

Venelin
Telerik team
 answered on 28 Apr 2016
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
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
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?