Telerik Forums
UI for ASP.NET MVC Forum
1 answer
235 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
203 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
561 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
558 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
75 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
189 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
7 answers
1.3K+ views

Trying to figure out how to select all items in a multiselect after reading the data.

@(Html.Kendo().MultiSelect()
.Name("Benchmarks")
.DataValueField("ID")
.DataTextField("BenchmarkName")
.Events(e => e.DataBound("selectAllBenchmarks"))
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetBenchmarksForPeriodOfEntry", "Reporting")
.Data("filterPeriodOfEntry");
});
})
.AutoClose(true)
.HtmlAttributes(new { style = "width: 240px" })
)

my "selectAllBenchmark" function fires but then I don't know how to loop through the datasource and select each item in the datasource.

mth developer
Top achievements
Rank 1
 answered on 27 Apr 2016
1 answer
59 views

Hey all...

I'm trying to figure out something that's either probably pathetically simple and is for some reason just eluding me or it's not possible and I've pulled all this hair out for nothing...

 

I know that when you just add the .Filterable property onto a column it adds the nifty little filter onto it that's pretty awesome out of box.  The one small over-site IMHO is that it is not a distinct list and is not sorted.  I haven't seen any options to enable these sort of things...and I've been reading posts from others looking for this sort of functionality...and they've been told it's not there yet.

So what I want to do is to pass the Grid's DataSource into a controller action as an argument using the .Data off the .Read in the .Filterable's .DataSource...then inside that controller action I'd use a Linq query to return a sorted distinct list.

The reason I want to do that is I want to avoid having to make another call across the wire to get all those record when I already had them in the grid...it should be more performant IMHO.  :)

So is this possible and I'm just missing it?  I'm using Razor so I'd appreciate any examples to be in that format, but I'll take any help in any format I can get.  :)

Kostadin
Telerik team
 answered on 27 Apr 2016
1 answer
62 views
I'm trying to customize the Scheduler to have a light-weight Control, without header and footer (Navigation, etc)
The rows height should also be much smaller.

You will find attached to this message an image that shows what I want to achieve...
Is that possible?

Thank you !
AKROS
Top achievements
Rank 1
 answered on 27 Apr 2016
1 answer
524 views

Hello,

 

Can you use the detail template to display a partial view thats loaded by ajax ?

 

I currently have a div outside of the grid that is loaded when you click a line in the grid , but it would be smarter if it just opened up a detail and displayed the partial view there in.

 

Any ideas on how to do that ?

 

Regards,

Emil

Nikolay Rusev
Telerik team
 answered on 27 Apr 2016
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?