Questions on UI for ASP.NET MVC Forum

6 answers

779 views

How can I change the info text on the pager bar so instead of saying 1 - 10 of 219 items it says Page 1 of 21"

The documentation seems to suggest this is possible via the "Of" property, but I can only make it show the row count or nothing.

-------------------

The Messages method configures all messages displayed by the pager. Use this setting to override the default messages or to localize the pager.

The available messages are:
Display
Empty
First
ItemsPerPage
Last
Next
Of
Page
Previous
Refresh
Display
The Display method sets the pager info message. By default, it is set to "{0} - {1} of {2} items". The placeholders represent the first item in the page, the last item in the page, and the total number of items in the Grid.
The following example demonstrates how to set the display message.

Grid

answered on 14 Sep 2018

3 answers

75 views

Arbitrarily bind a clienttemplate to a model

Is there a way to simply bind a clienttemplate [String] to a model? I'm not talking about any particular control.

@Html.Kendo.Bind("<a href='/Foo/# =ID #'>link</a>", Model);

General Discussions

answered on 14 Sep 2018

3 answers

311 views

Server fIlter on chart datasource doesn't work

Hi, here is the problem. I have mvc chart set in razor view. Here is the definition:

  <div class="demo-section k-content wide">
@(Html.Kendo().Chart<List<Novolyze.VOD.WebUI.Models.ChartSource>>()
.AutoBind(false)
.DataSource(dataSource => dataSource
.Read(read => read
.Action("DailyStatisticJson", "Production")
//.Data("getFilterParams")
)
.Group(group => group
.Add<string>("SeriesName"))

)
.Name("dailyStatisticChart")
.Title("Daily Statistic")
.Zoomable(zoomable => zoomable
.Mousewheel(mousewheel => mousewheel
.Lock(ChartAxisLock.Y))
.Selection(selection => selection
.Lock(ChartAxisLock.Y)))
.Pannable(pannable => pannable
.Lock(ChartAxisLock.Y))
.Legend(legend => legend
.Visible(false)
)
.SeriesDefaults(seriesDefaults => seriesDefaults
.Column()
.Stack(true)
)
.Series(series => series
.Column(model => model).Field("Value").CategoryField("Category").ColorField("ColorName")
)
.CategoryAxis(axis => axis
.Date()
.BaseUnit(ChartAxisBaseUnit.Days)
.Labels(labels => labels
.Rotation("auto"))
)
)

I also have contlroler method:

public ActionResult DailyStatisticJson([DataSourceRequest] DataSourceRequest request)
{

//Some logic and return datasource JSON, that works well

}

I want to refresh the chart with new data based on some external filtering. I have the following Javascript code that should do the trick, but it doesn't

function executeFilter(filters) {
  var chart = $("#dailyStatisticChart").data("kendoChart");
if (chart) {
chart.dataSource.filter(filters);
//chart.dataSource.read();
}
}

The point is: if I call just filter() and not the read(), chart data disappear, controller is not called. If I uncomment read(), then controller is called, but filter property is empty in the controller parameter. I can find the workaround to pass additional data with uncommenting Data to datasource definition but then I will use another param in controller, not DatasourceRequest, which will be uglier. Is there a solution with filter?

Chart

answered on 13 Sep 2018

5 answers

428 views

Set Column.Template Width and Column Filter by Multi Checkboxes

Hello Admin,

1) How to set the width of this grid's first column where columns.Template(@<text>....</text>)?

2) How to enable multi checkboxes for the last two columns? As you see code below, it always show "Contains" and "Start With" for all string columns.

Here is the code on the page:

@{
Html.Kendo().Grid(Model)
    .Name("grid")
    .Columns(columns =>
    {
        columns.Template(@<text>
    @if (ViewBag.IsMyRequest == true)
{
    if (item.CompletedFlag == "fully completed" || (item.CompletedFlag == "partially completed" && item.CurrentStatus == "not reviewed"))
    {
    @Html.ActionLink("View", "Read", "Request", new { item.Id, tab = ViewBag.CurrentTab }, new { @class = "btn btn-default" })
}
else
{
        @Html.ActionLink("Update", "Edit", "Request", new { item.Id, tab = ViewBag.CurrentTab }, new { @class = "btn btn-default" })}
}
else if (ViewBag.IsPendingRequest == true)
{
        @Html.ActionLink("Approve", "Approve", "Request", new { item.Id, tab = ViewBag.CurrentTab }, new { @class = "btn btn-default" })
}
else if (ViewBag.IsApprovedDenied == true || ViewBag.IsCompleted == true)
{
        @Html.ActionLink("View", "Read", "Request", new { item.Id, tab = ViewBag.CurrentTab}, new { @class = "btn btn-default" });
}
                </text>);
        columns.Bound(request => request.Id).Width(100).Filterable(ftb => ftb.Cell(cell => cell.Template("integerFilter").Operator("eq").ShowOperators(false).InputWidth(70)));
        columns.Bound(request => request.Requestor).Encoded(false);
        columns.Bound(request => request.RequestDate).Format("{0:MM/dd/yyyy}").Encoded(false).MinScreenWidth(688);
        columns.Bound(request => request.ChangeStartDateTime).Format("{0: M/d/yyyy h:mm tt}").Encoded(false).MinScreenWidth(688);
        columns.Bound(request => request.ChangeEndDateTime).Format("{0: M/d/yyyy h:mm tt}").Encoded(false).MinScreenWidth(688);
        columns.Bound(request => request.RequestSubject).Encoded(false).MinScreenWidth(864);
        columns.Bound(request => request.CurrentStatus).Encoded(false).MinScreenWidth(864).Filterable(ftb => ftb.Multi(true).CheckAll(true));
        columns.Bound(request => request.CompletedFlag).Encoded(false).MinScreenWidth(864).Filterable(ftb =>ftb.Multi(true).CheckAll(true));
    })
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.Contains("Contains")
.StartsWith("Starts With "))
.ForNumber(num => num.Clear()
.IsEqualTo("Equal to"))
.ForDate(d => d.Clear())
)
.Mode(GridFilterMode.Row))
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Resizable(resize => resize.Columns(true))
.Selectable()
.Sortable()
.DataSource(dataSource => dataSource
.Server()
.Model(model => model.Id(request => request.Id))
)
.Scrollable(s => s.Enabled(true).Height("auto"))
.ToolBar(toolbar =>
{
toolbar.Template(@<text>
            <div class="toolbar">
                <label class="category-label" for="category">Requests</label>
                @Html.ActionLink("New Request", "New", "Request", null, new { @class = "btn-primary btn" })
            </div>
        </text>);
})
.Render();
            }
<script>
    function integerFilter(e) {
        e.element.kendoNumericTextBox({
            spinners: false,
            format: "#",
            decimals: 0
        });
    };
</script>
@section scripts {
}

Thanks in advance for your help!

Anieda

Grid

answered on 13 Sep 2018

4 answers

592 views

sort dataSource in @(Html.Kendo().MultiSelect()

I'm setting up a MultiSelect as shown below.
How can setup sorting of the DataSource?

@(Html.Kendo().MultiSelect()
.Name("Country")
.DataTextField("Country")
.DataValueField("CountryId")
.Filter(FilterType.Contains)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetCountries", "Helper").Data("{ any: false }");
});
})
)

DropDownList

answered on 13 Sep 2018

4 answers

1.7K+ views

Use Upload in an Event and save the file name in the model

Hello to all.

I have a scheduler with a Custom Editor.

A model with the member Image (string)

I'd like to use an Upload control in order to

1) upload the image on the server, by sending also the calendarID in case of editing an existing calendar event

2) on Save, store the file name in the Image member of the model.

At the moment I'm able to insert an Upload control in the custom Editor, but I'm not able to store the filename in the Model member (via MVVM)

Is this possible?

Should I use the "save event" of the calendar to discover the current value of the Upload control and update the model (how is possible to update the model ???)

Thanks.

My code:

member of the Model:

[Display(Name = "Logo")]

public string Image { get; set; }

Custom Editor:

(NB: calendarID should be the ID of the current calendar in case of editing, but I don't know how :-( )

Thanks!!!

<div class="k-edit-label">

@(Html.LabelFor(model => model.Image))

</div>

<div data-container-for="Image" class="k-edit-field">

@(Html.Kendo().Upload()

.HtmlAttributes(new { accept = "image/*" })

.Name("calendarImages")

.Async(async => async

.Save("SaveImage", "Calendar", new { calendarID = 1 })

.Remove("RemoveImage", "Calendar", new { calendarID = 1 })

.AutoUpload(true)

)

.Multiple(false)

)

</div>

Scheduler

answered on 12 Sep 2018

3 answers

2.4K+ views

Update or change datasource on the client-side

I'd like to create a grid based on a ViewModel type like you normally would:

@(Html.Kendo().Grid<BlockoutPeriodVM>()

.Name("BlockoutWeeks")

.Columns(columns =>

{

columns.Bound(b => b.Name).Title("Name");

columns.Bound(b => b.StartDate).Title("Start Date").Format("{0:d}");

columns.Bound(b => b.EndDate).Title("End Date").Format("{0:d}");

columns.Template(@<text>[buttons]</text>).Title("Edit").ClientTemplate(@"#= crm.setup_classSchedule_edit.getBlockoutCommandTemplate(data) #");

})

)

but I want to manage the data that it is bound to myself, on the client-side. In my script, I will deserialize an array of BlockoutPeriodVMs and would then like to set that array as the datasource of the grid. I will also offer CRUD support for this array outside of the grid so I'm hoping the Grid/datasource can make the array an observable array and update according to any changes I make. I found this old thread asking the same thing for jQuery Kendo UI, but is there a way to set the read action to a function like that using the MVC Html helper?

Grid

answered on 12 Sep 2018

2 answers

826 views

Implement File Upload

I try to use drag and drop/select from file folder to upload multiple files. It does not act the way as your demo does. It can not select multiple files. It can not drag and drop. The drag and drop region does not show.

Here is the code in the Upload.cshtml page:

@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data", id = "form" }))
{
<div class="form-input">
  <div>
   The Upload can be used as a drop-in replacement
   for file input elements.
  </div>
  <div>
   @(Html.Kendo().Upload()
   .Name("attchments")
   .Async(a => a
    .Save("Upload", "Home")
    .Remove("RemoveUpload", "Home")
    .AutoUpload(true))
   ))
  </div>
  <p style="padding-top: 1em; text-align: right">
   <button type="submit" class="k-button k-primary">Submit</button>
  </p>
</div>
}

In _Layout.cshtml page, I have the following links:

What do I missed?

Thanks in advance for your help!

Anieda

Upload

answered on 11 Sep 2018

1 answer

245 views

Checkboxes below the expanded node lose their state

Hi,

I'm using the MVC TreeList with remote data loading.I have the latest column to be a checkbox, but I have an issue when the node is expanded. After expanded, all of the nodes below in the same tier get unchecked, even if they were checked before that. Here is a video of the problem.

https://www.screencast.com/t/zt234VFtdLEO

Am I doing something wrong?

This is the code for the tree list:

@(Html.Kendo().TreeList<TreeEntity<Organization>>()
.Name("treelist")
.Columns(columns =>
{
columns.Add().Field(e => e.Value.Id).Width(280).Title("ORG ID");
columns.Add().Field(e => e.Value.Name).Width(280).Title("ORGANIZATION NAME");
columns.Add().Field(e => e.Value.ActiveFlag).Width(60).Title("ACTIVE");
columns.Add().Width(60).Title("SELECT").TemplateId("cbx-template");
})
.DataSource(dataSource => dataSource
.Read(read => read.Action("OrganizationsTree_Read", "Home"))
.Model(m =>
{
m.Id(f => f.Id);
m.ParentId(f => f.ParentId).DefaultValue(null);
m.Field(f => f.Value.Id);
m.Field(f => f.Value.ParentId);
})
)
.Events(events => { events.DataBound("onTreeDataBound"); events.Expand("onTreeExpand"); })
.Height(540)
)

DataBound and Expand are JS methods without any code except console.log(arg).

Thank you

TreeList

answered on 11 Sep 2018

2 answers

217 views

Validation class for MaskedTextBox

Hello,

I am trying to add (css: border-color:red) to MaskedTextBox when field is required on submit function but I couldn't find this class. What is name of this class?

Also, I need to remove this class if the customer click on Save button that can skip validations.

Thank you for help.

MaskedTextBox

answered on 10 Sep 2018