Questions on UI for ASP.NET MVC Forum

5 answers

437 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

605 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.5K+ 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

835 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

254 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

223 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

16 answers

1.4K+ views

Nuget package always freezes Visual Studio

Hi there, I am just trying to install the MVC 5 version from the private nuget feed. Everytime I try to install it, it freezes Visual Studio, any of them. I've tried in 2012, 2013, and 2015. Same thing always happens. When I check the project, the package installs the Scripts and the fonts folder, no editor templates or content.

The output says Installing Telerik.UI.xxx.MVC5xxx, adding package Telerik.UI.MVC5. Added package Telerik.UI.MVC5, and that's where it freezes.

I cannot use the telerik template creators because I want to add kendo UI to my existing projects. Nuget package is the best way. I tried downloading the nuget package too and installing it that way, still same freeze. What is going on? Thanks.

Installer and VS Extensions

answered on 10 Sep 2018

1 answer

74 views

MVC Grid Groupable greyed out when dragging column

Here is my Razor grid markup...

@(Html.Kendo().Grid<Karpos.WebUI.Models.HolidayDinnerModel>(Model) //Bind the grid to ViewBag.Products
.Name("grid")
.Columns(columns =>
{
columns.Bound(model => model.PLU).Groupable(true);
columns.Bound(model => model.Name);
})
.Pageable() //Enable the paging.
.Sortable() //Enable the sorting.
.Groupable()

)

The grid loads with data correctly but when I try to drag the PLU column to the Head to group on PLU, it is greyed out. All columns are the same way.

Any help?

Grid

answered on 07 Sep 2018

1 answer

76 views

Unable to Loop Modified Child Rows and Update Associated Master Row (Batch In-line)

I have been trying a number of different ways to batch edit child rows and click one save button to then save those changes locally and update the associated master rows. I am not using Ajax, ServerOperation is set to false on both grids. My problem is that upon setting the master row cells, the main grid is refreshed, collapsing all my child rows, losing their edits and ultimately only the first row changes are saved. Any advice on how to stop this refresh from happening until my loop is complete?

Grid

answered on 07 Sep 2018