Questions on UI for ASP.NET MVC Forum

6 answers

668 views

Grid Grouping by Foreign Key - Group header wrong

I'm trying to enable grouping by a foreign key column. However, a default Ajax setup will display the id of the column, not the display text for the group header. With server binding, the group header displays as expected. With Ajax binding however, it won't.



Using Kendo 2012.2.607. I know this used to work with Telerik, used it all the time.


@(Html.Kendo().Grid(Model.Users)
    .Name("Users")
    .DataSource(c => c.Ajax()
        .Read("_Roles", "Users")
        .Group(g => g.Add(o => o.RoleId)))
    .Columns(c => {
        c.Bound(o => o.UserName);
        c.ForeignKey(o => o.RoleId, Model.Roles);
        c.Bound(o => o.IsActive);
    })
    .Sortable()
    .Filterable()
    .Groupable()
    .Pageable())



With this, the group headers will read as "Role: 1", "Role: 2" and so on.  Expected "Role: Admin", "Role: User", etc. Can't really find any options to fix this. Trying to add a ClientGroupHeaderTemplate doesn't work either - always yields an error about whatever value being undefined. The anonymous function called to display the template has no real data to display the correct label.




c.ForeignKey(o => o.RoleId, Model.Roles)
    .ClientGroupHeaderTemplate("#= Title #");



Edit - I setup a jsfiddle here to illustrate.

Grid

answered on 05 Jun 2018

1 answer

324 views

Displays my DateTime picker along with a textbox with the value of the datetimepicker

Hello,

I'm presently using asp.net core Kendo DateTimePicker control -

@(Html.Kendo().DateTimePickerFor(m => m.DateTime)
.HtmlAttributes(new { style = "width:300px;", id = "DateTime" })
.Value(Model.DateTime)
)

Also, I have a hidden variable in the form,

<input type="hidden" asp-for="DateTime" />

The problem here is it displays two controls, it gets and sets the data in the right way! Would appreciate any help! Thanks in advance!

DatePicker

answered on 04 Jun 2018

1 answer

156 views

Plot scatter chart where the data should be plotted time(example:12:45:12) vs weekday(Monday).

Hi,
I am working on the scatter chart where the data should be plotted time(example:12:45:12) vs weekday(Monday).Where X-axis is Weekdays from Monday to Friday and Time is y-axis 9:00 am to 4:00 pm with Interval of 1 hour. I did not found any examples on this unable to achieve this.
Below is the sample code Kindly help me in this regard.

Thanks & Regards,
Sampath

<div class="roundbox" style="width:450px; height:350px; border: solid 5px steelblue; float:right; margin-top:10px; margin-bottom:20px">
            @(Html.Kendo().Chart<AdvantEdgePortal.Web.ViewModels.DayTimeStamp>()

          .Name("chartcallTimings")
          .Title("Call Timings")

            .DataSource(dataSource => dataSource.Read(
                    read => read.Action("GetCallDataCompletionTime", "Home"))
            )
          .Legend(legend => legend
              .Position(ChartLegendPosition.Bottom)
          )
          .SeriesDefaults(seriesDefaults => seriesDefaults
              .Scatter().Labels(labels => labels
                  .Visible(false)
              )
          )

          .Series(series =>
          {
              series.Scatter(m => m.WeekDay, m => m.TimeofDay);
              //series: [{ type: "scatterLine", name: "3.1C", data: [[10, 70], [13, 90], [25, 100]], dashType: "dot" }]
          }

      )
          .CategoryAxis(axis => axis
          .Categories("Monday", "Tuesday", "Wednesday", "Thrusday", "Friday")
          .MajorGridLines(lines => lines.Visible(false))
           .Categories(c => c.WeekDay)
          )
         .ValueAxis(axis => axis
                .Numeric()
                .MajorUnit(1)
                .Min(9)
                .Max(16)
                .Labels(labels => labels.Format("{0:N0}:00"))
            .Line(line => line.Visible(true))
            )

            .ChartArea(chartArea =>
            {
                chartArea.Height(340);
                chartArea.Width(440);
                chartArea.Margin(5);
            })

            )

        </div>

Chart

answered on 01 Jun 2018

3 answers

904 views

[Solved] kendoValidator and AddModelError

Hello.

I'm using kendoValidator to display all my validation errors with the kendo validation template. Using this:

<script>

$(function () { $("form").kendoValidator();});

</script>

But I have certain errors that I handle server side in the controller. Because they are kind of complex. And then I added the errors to the model this way:



ModelState.AddModelError("Hours", "The hours and the minutes can't be both 0.");

But if I add an error this way it is displayed with the standard ASP NET MVC way:

<span class="field-validation-error text-danger" data-valmsg-for="Hours" data-valmsg-replace="true">The hours and the minutes can't be both 0</span>

¿Is some kind of way to display those errors like the kendoValidator way?

In the image attached I show one error client side like kendo validation and two error's server side. I would like to all of then be like the client side error.

Thank you.

<span class="field-validation-error text-danger" data-valmsg-for="Hours" data-valmsg-replace="true">The hours and the minutes can't be both 0.</span>

General Discussions

answered on 30 May 2018

1 answer

176 views

Page number in Excel

Hello.

I am using Export to Excel functionality.

Is there a way of adding page numbers to the excel generated from the grid?

I have tried the following but it does not work.

function excelExport(e) {
var sheet = e.workbook.sheets[0];

sheet.pageNumber = true;

}

Or is there any property which can be set when defining the Excel?

.Excel(excel => excel
.FileName("Users.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("Excel_Export_Save", "UserAndGroup"))
)

Thanks

Grid

answered on 30 May 2018

1 answer

1.7K+ views

Grid with mix of static and dynamic columns -- need sorting and filtering

I have a Grid with a mix of static and dynamic columns. The static columns have a lot going on -- the user can choose groups of columns to display. There's formatting, commands, etc. I retrieve the main list of models from the database based on some filter criteria from the user. Based on the user selection for displayed columns, I augment the data returned with additional data and fill out more data on the models.

However, the tricky part is that users can customize additional fields they want to see in this table. These fields are dynamic. Our application is for building forms, so they define their own fields. Let's say a customer defines 200 fields they want to have on their form. Of those 200 fields, they wish to display 4 of them in the grid I'm struggling with. These fields are stored in a table "flat",so like:

CustomerID FieldID FieldName

1 1 "age"

The answers to these are stored like:

FieldID UserID Value:

1 1 25

I retrieve the data for these dynamic fields with a combination of Linq and SQL. I pivot the data, so get:

UserID 1 3 4 6

1 25 "foo" "bar" 3/4/2010

Currently, I'm taking these results and I'm adding it to a Dictionary<> per Model. Then I dynamically add them to my Kendo MVC grid:

foreach (var key in Model.AdminColumns.Keys)
{
c.Template(@<text>@item. </text>).ClientTemplate(String.Format("#=CustomFields['{0}']#", key.ToUpper())).HeaderTemplate(Model.AdminColumns[key]);
}
})

I can display the data just fine. However, I really need to add sorting and filtering to these columns. I understand that's not supported the way I'm doing it. The problem is, I can't seem to find a solution that will give me what I need. I can't change the nature of the data obviously. But, I'm willing to take a new approach. However, I keep running into road blocks. I tried using the dynamic keyword and building a model, but the grid helper didn't like that. I was thinking of going down the path of returning a json model with the dynamic fields merged in as first class members of each dataitem, but then i'm not sure how to define the grid.

Do you have any suggestions? My complete grid code is shown below.

@(Html.Kendo().Grid(Model.Donors).Name("DonorGrid")

.DataSource(ds =>

ds.Ajax()

.ServerOperation(false)

.Model(m => m.Id(x => x.DonorId))

.Read(r => r

.Action("GetDonors", "Donor")

.Type(HttpVerbs.Post)

.Data("getAdditionalData"))

.PageSize(Model.RowsPerPage)

)

//.ToolBar(t => t.Excel())

.Excel(e => e.FileName("DonorsExport.xlsx"))

.Columns(c =>

{

c.Group(g => g.Title(" ").CenterGroupHeader()

.Columns(cm =>

{

//cm.Select().Width(30);

cm.Bound(m => m.DonorId).ClientTemplate("<a href=\"/App/Donor.aspx/EditDonor?donorId=#=DonorId# \">Edit</a>").HeaderTemplate("Edit").Width(75).Filterable(false).Sortable(false).Locked(true).CenterCell();

cm.Bound(m => m.AdminThumbnail).ClientTemplate("<img src=\"#=AdminThumbnail#\" width=50px

;").HeaderTemplate("").Visible(Model.Columns.Thumbnail).Width(75).Filterable(false).Sortable(false).Locked(true).CenterCell();

cm.Bound(m => m.Email).Visible(Model.Columns.Email);

cm.Bound(m => m.Unsubscribed).ClientTemplate("#if(Unsubscribed){# <span class='red glyphicon glyphicon-flag'></span> #}#").Visible(Model.Columns.Email).Width(80).CenterCell();

}));

c.Group(g => g.Title("Current Status").CenterGroupHeader()

.Columns(cs =>

{

cs.Bound(m => m.CompositeStatusText).HeaderTemplate("Status").Visible(Model.Columns.Status);

}));

c.Group(g => g.Title("Participation").CenterGroupHeader()

.Columns(cg =>

{

cg.Bound(m => m.ParticipationStatusText).HeaderTemplate("Participation").Visible(Model.Columns.Participation);

cg.Bound(m => m.ParticipationStatusDateTimeText).HeaderTemplate("Date").Format("{0:M/d/yy}").Visible(Model.Columns.Participation);

cg.Bound(x => x.LastLoginDays).HeaderTemplate("Last Login Date").Visible(Model.Columns.Participation);

}));

c.Bound(m => m.SharedStatus).HeaderTemplate("Shared").Visible(Model.Columns.Shared);

c.Group(g => g.Title("App Dates").CenterGroupHeader()

.Columns(ca =>

{

ca.Bound(m => m.PreScreenDate).HeaderTemplate("Pre-screen").Format("{0:M/d/yy}").Visible(Model.Columns.AppDates);

ca.Bound(m => m.OverallAppText).HeaderTemplate("Overall App").Format("{0:M/d/yy}").Visible(Model.Columns.AppDates);

ca.Bound(m => m.PercentComplete).HeaderTemplate("% Complete").Visible(Model.Columns.AppDates).Format("{0:P}");

ca.Bound(m => m.AppUpdateDays).HeaderTemplate("App Update").Visible(Model.Columns.AppDates);

}));

c.Group(g => g.Title("Eligibility").CenterGroupHeader()

.Columns(ce =>

{

ce.Bound(m => m.EligibilityPrescreen).ClientTemplate(

"<div>#= EligibilityPrescreen#<br/>" +

"#=Eligibility.ScreeningEligible#, #=Eligibility.ScreeningQuestionable#, #=Eligibility.ScreeningIneligible#" +

"</div>"

).HeaderTemplate("Pre-screen").Visible(Model.Columns.Eligibility);

ce.Bound(m => m.EligibilityOverall).ClientTemplate(

"<div>#= EligibilityOverall#<br/>" +

"#=Eligibility.OverallEligible#, #=Eligibility.OverallQuestionable#, #=Eligibility.OverallIneligible#" +

"</div>"

).HeaderTemplate("Overall").Visible(Model.Columns.Eligibility);

}));

c.Group(g => g.Title("Frozen").CenterGroupHeader()

.Columns(cf =>

{

cf.Bound(m => m.FrozenEnabled).ClientTemplate(

"<table><thead><td>A</td><td>S</td><td>I</td><td>N</td></thead><tr>" +

"<td>#=FooCount#</td>" +

"<td>#=SelectedCount#</td>" +

"<td>#=NotSelectedCount#</td>" +

"<td>#=NetworkCount#</td>" +

"</tr></table>"

).HeaderTemplate("Frozen Enabled").Visible(Model.Columns.FrozenEnabled);

}));

c.Bound(m => m.AlternateId).HeaderTemplate("Reference #");

foreach (var key in Model.AdminColumns.Keys)

{

c.Template(@<text>@item. </text>).ClientTemplate(String.Format("#=CustomFields['{0}']#", key.ToUpper())).HeaderTemplate(Model.AdminColumns[key]);

}

})

.Filterable()

.Pageable(p => p.AlwaysVisible(true).PageSizes(new[] { 25, 50, 100, 500, 1000 }))

.Sortable()

.Selectable(s => s.Mode(GridSelectionMode.Multiple).Type(GridSelectionType.Row).Enabled(true))

.Resizable(r => r.Columns(true))

.NoRecords("No donors were found matching this criteria."));

Grid

answered on 30 May 2018

2 answers

184 views

[Solved] Multi Category Axis Alignment

Hi,

I have 2 CategoryAxis, by Month and Year:

.CategoryAxis(axis => axis

.Date()

.Labels(l => l.Format("{0:MMM}"))

.BaseUnit(ChartAxisBaseUnit.Months)

.MajorGridLines(lines => lines.Visible(false))

)

.CategoryAxis(axis => axis

.Date()

.Labels(l => l.Format("{0:yyyy}"))

.BaseUnit(ChartAxisBaseUnit.Years)

.MajorGridLines(lines => lines.Visible(false))

)

Is there a way to align the Year within that Years Months. For instance currently the years are split evenly along the graph and not sitting within the Jan > Dec of the current year. See attached image.

Thanks.

Grid

answered on 30 May 2018

1 answer

183 views

MaskedTextBox ClearPromptChar(true) NOT WORKS in Grid

HI

I have found that MaskedTextBox ClearPromptChar(true) NOT WORKS in Grid/EditorTemplates*.

Is there have any solution ?

*see attachment.

*Telerik DevCraft R2 2017 SP1.

Best regards

Chris

Grid

answered on 29 May 2018

1 answer

289 views

height grid percentage

Hi,

I want to set my grid in percentage and not by pixels, I don't find the way to do it, because although I set the grid to be set by percentage it's always required pixels in the div uses the class "k-grid-content"

can you help me? I want the grid to look good in pc and also in laptop/

Thanks!

Grid

answered on 29 May 2018

1 answer

132 views

How to prevent Foreign relational model validation

I am using Kendo MVC grids as provided in your examples and linking them directly to my domain models. The problem I am facing is that when I am trying to edit/create a certain Model, not only its primitive properties, but also any of the other Models' properties it contains are validated. For example, if I have a School model, and it contains a Country (which i can select via a populated dropdown), it should only validate School properties such as Name, etc. But it's unreasonable if it also tries to validate all the properties under Country. I don't care in my form if Country has all the required fields. All I care about is populating the Country dropdown with Id, Name for Value and Text. When I look at the Request.Form, I can clearly see that its trying to bind all the fields that start with "models" and that includes all the relational models' properties.

Please tell me a workaround/solution and also please fix your documentation or your library to not enable this by default as it is a waste of time. I have been searching how to fix this for a long time and it's very frustrating that these basic cases are not well thought out.

General Discussions

answered on 28 May 2018