Questions on UI for ASP.NET MVC Forum

1 answer

183 views

I'm looking to customize the paging of the ListView to have an infinite scroll (loading next group when getting to the bottom). Similar to the functionality offered in the grid. Is there any way to achieve this? It kind of looks like the ASP.NET AJAX listview has the ability to customize the pager. Is there any way to go about this?

Thanks

ListView

answered on 01 Sep 2016

3 answers

101 views

unable to bind grid properly

Hello I have a grid in my razor view,
I have added these resources

<link rel="stylesheet" href="@Url.Content("~/Content/KendoThemes/kendo.common.min.css")">

<link rel="stylesheet" href="@Url.Content("~/Content/KendoThemes/kendo.rtl.min.css")">

<link rel="stylesheet" href="@Url.Content("~/Content/KendoThemes/kendo.default.min.css")">

<script src="@Url.Content("~/Scripts/jquery.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo.web.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>

here is my grid

@(Html.Kendo().Grid<Nop.Web.Models.Customer.CustomerInfoModel>()

.Name("Grid")

.Columns(columns => {

columns.Bound(p => p.Active);

// columns.Bound(p => p.cbSubscriptions).ClientTemplate("#=Employee.EmployeeName#");

columns.Bound(p => p.cbSubscriptions);

columns.Bound(p => p.FirstName);

columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);

})

.ToolBar(toolBar => toolBar.Create())

.Editable(editable => editable.Mode(GridEditMode.InLine))

.Pageable()

.Sortable()

.Scrollable()

.DataSource(dataSource => dataSource

.Ajax()

.Events(events => events.Error("error_handler"))

.Model(model => model.Id(p => p.Id))

.Create(update => update.Action("EditingInline_Create", "Customer"))

.Read(read => read.Action("UsersList", "Customer"))

.Update(update => update.Action("EditingInline_Update", "Grid"))

.Destroy(update => update.Action("EditingInline_Destroy", "Grid"))

)

<script type="text/javascript">

function error_handler(e) {

if (e.errors) {

var message = "Errors:\n";

$.each(e.errors, function (key, value) {

if ('errors' in value) {

$.each(value.errors, function () {

message += this + "\n";

});

}

});

alert(message);

}

</script>

This works fine. it calls my action in controller to read the data, but the problem is that, it is displaying any rows in grid, even the controller returns the record. I have checked the console, there is no script error, and my network tab shows that these data has been transferred from the server.

data: [{Email:familymanager1_user1@gmail.com, AllowUsersToChangeUsernames:false, UsernamesEnabled:false,…},…]
1. 0: {Email:familymanager1_user1@gmail.com, AllowUsersToChangeUsernames:false, UsernamesEnabled:false,…}
2. 1: {Email:familymanager1_user2@gmail.com, AllowUsersToChangeUsernames:false, UsernamesEnabled:false,…}
3. 2: {Email:familymanager1_user3@gmail.com, AllowUsersToChangeUsernames:false, UsernamesEnabled:false,…}
4. 3: {Email:as@sad.com, AllowUsersToChangeUsernames:false, UsernamesEnabled:false, Username:aasasasasas687,…}
total: 4

Am I missing something to add.

Grid

answered on 31 Aug 2016

5 answers

1.1K+ views

Displaying checkbox in Kendo grid for DataTable Model in ASP MVC

Hi i am binding my kendo grid with DataTable and trying to display some columns as checkbox using clienttemplate. However every time i am trying i am getting error doing that.

Does anyone know how i can achieve this?

I have attached the mockup of image what im trying to achieve i.e. grid-mockup.jpg.

The error message i get is: Uncaught ReferenceError: ColumnName is not defined

Here is my Razor code:

@using Kendo.Mvc.UI

@model System.Data.DataTable

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

.Name("Grid")

.Columns(columns =>

{

foreach (System.Data.DataColumn column in Model.Columns)

{

if (column.ColumnName != "SupplierNumber" && column.ColumnName != "CustomerItemNumber")

{

columns.Bound(column.ColumnName).ClientTemplate("<input type='checkbox' disabled #= ColumnName == 'True' ? checked='checked' : '' # />");

}

else

{

columns.Bound(column.ColumnName);

}

columns.Command(cmd => cmd.Edit());

})

.Pageable()

.Sortable()

.Editable(ed => ed.Mode(GridEditMode.PopUp))

.Filterable()

.Groupable()

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

var id = Model.PrimaryKey[0].ColumnName;

model.Id(id);

foreach (System.Data.DataColumn column in Model.Columns)

{

var field = model.Field(column.ColumnName, column.DataType);

if (column.ColumnName == id)

{

field.Editable(false);

}

})

.Read(read => read.Action("Read", "Home"))

.Update(update => update.Action("Update", "Home"))

)

Grid

answered on 31 Aug 2016

1 answer

202 views

Grid Filter Date Minimum

We are using ASP.NET MVC and have a grid with a date column which as a filter. The date filter has datepickers. In the filter datepickers, is there a way to prevent the user from selecting some minimum date (like two years ago).

Grid

answered on 30 Aug 2016

1 answer

1.6K+ views

Getting DropDown to select item by Model value inside Kendo Template

I am trying to get a Kendo DropDownList—declared inside of a Kendo Template script block—to automatically select an item from its list when a data value is provided to the template. I’m not having any luck doing this because I don’t understand how to plumb this particular case. My project has many other Kendo DropDownList controls, and they work just fine, but they are not declared inside of any Kendo Templates.

Basically, I have a parent Kendo Grid with the following declaration (irrelevant Razor omitted for clarity):

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

.ClientDetailTemplateId("documentUploadTemplate")

My intention is to provide an editor template for the grid consisting of a Kendo Template script block. At the moment, that template looks like this:

<script id="documentUploadTemplate" type="text/kendo-tmpl">

<div>

<p>ID: ${Id}</p>

<p>Document Type ID: ${DocumentTypeId}</p>

<p>Document Type Name: ${DocumentTypeName}</p>

<p>Path: ${Path}</p>

<p>FileName: ${FileName}</p>

<p>MIME Type: ${MimeType}</p>

</div>

<div>

@(Html.Kendo().DropDownList()

.Name("uxDocumentTypeName#=Id#")

.OptionLabel("Please Select...")

.DataValueField("DocumentTypeId")

.DataTextField("DocumentTypeName")

.DataSource(s =>

{

s.Read(r =>

{

r.Action("GetDocumentTypes", "MyController");

})

.ServerFiltering(true);

})

.ToClientTemplate()

)

</div>

</script>

My parent grid, which is working fine, is bound to a populated DocumentUploadViewModel, and its field values are surfaced in the Kendo Template for debugging purposes. When I invoke my grid’s “edit” button, I see the selected grid item’s bound data appear correctly inside the DIV at the top of the presented template.

The drop-down itself is full of data from the DataSource.Read.Action call, and I can manually make selections. However, I am unsure how to wire the control so that it automatically selects the item specified by the passed-in “DocumentTypeId” field. I do see this field value rendering correctly in the DIV, and the visible ID matches one of the items found in the drop-down’s data.

Normally, I would write @Html.Kendo.DropDownListFor(m => m.DocumentTypeId) but I can’t get at the “model” passed into the Kendo template. I have tried .BindTo("#=DocumentUploadViewModel.DocumentTypeId") as well as other variations, to no avail.

DropDownList

answered on 30 Aug 2016

4 answers

762 views

Telerik Grid UI MVC - data disappears after load

Hello, I am using Kendo Grid on my MVC site. Loading data using AJAX call. But, the data disappears right after loading. Below is a code for Grid control in the view.

@(Html.Kendo().Grid<SomeViewModelClass>()
.Name("criteriaGridDiv")
.AutoBind(false)
.DataSource(datasource => datasource
.Ajax()
.Model(module =>
{
module.Id("ID");
module.Field("ScoreValue", typeof(int));
module.Field("ProjectID", typeof(string));
module.Field("CallMonitoringFormTypeID", typeof(int));
module.Field("FailureOnNotMet", typeof(bool));
})
.Create(create => create.Action("Create_Criteria", "Permission", new { ModuleId = ViewBag.ModuleId }))
.Update(update => update.Action("Edit_Criteria", "Permission", new { ModuleId = ViewBag.ModuleId }))
)
.Columns(columns =>
{
columns.Bound("ID").Visible(false);
columns.Bound("ProjectID").Visible(false);
columns.Bound("CallMonitoringFormTypeID").Visible(false);
columns.Bound("CriteriaStatement").Title("Criteria");
columns.Bound("ScoreValue").Title("Score Value").HtmlAttributes(new { style = "max-width:100px;" });
columns.Bound("FailureOnNotMet").Title("Fail call if Not Met?").ClientTemplate("<input type='checkbox' #= FailureOnNotMet ? checked='checked':'' # class='failureOnNotMetCheck' />");
columns.Command(command => command.Edit()).HtmlAttributes(new { style = "max-width:200px;" });
})
.ToolBar(toolbar => toolbar.Create().Text("Add New Criteria").HtmlAttributes(new { id = "radGridButton" }))
.Editable(editable => { editable.Mode(GridEditMode.InLine); })
.HtmlAttributes(new { style = "max-width:90%;height:500px;" }))

Any thought on what I am missing here?

Thanks in advance.

Kirtan

Grid

answered on 30 Aug 2016

1 answer

1.1K+ views

Display/Modify pre uploaded files in Kendo Grid in ASP MVC

Hi,

I need to display data in grid where it needs to display pre uploaded files in one of the column. User will also be able to edit the column and be able to delete or upload new attachment in the column. The user should be able to upload multiple files and the grid should display multiple files if the user has already uploaded previously.

I have been able to display data in grid with one attachment but having hard time to figure out how to display multiple files and enable uploading multiple files in the grid.

Here is my code:

Razor View:
Test.cshtml

@using Kendo.Mvc.UI

@{

ViewBag.Title = "Test";

}

<h2>Test</h2>

<input id="btnSearch" type="button" value="Search" class="btn btn-default icon-btn-input" />

<div class="col-sm-12">

@(Html.Kendo().Grid<KendoUIApp3.Models.Certification>()

.Name("Grid1")

.Columns(columns =>

{

columns.Bound(e => e.SupplierNumber).Width("170px");

columns.Bound(e => e.CustomerItemNumber).Width("170px");

})

.Editable(editable => editable.Mode(GridEditMode.InLine))

.Pageable(x => x.PageSizes(new object[] { 10, 20, 50, 100, "All" }))

.Reorderable(reorder => reorder.Columns(true))

.AutoBind(false)

.Selectable()

.Sortable(sortable => sortable

.AllowUnsort(true)

.SortMode(GridSortMode.MultipleColumn))

.Scrollable(scr => scr.Height(322))

.Filterable(filterable => filterable

.Extra(false)

.Operators(operators => operators

.ForString(str => str.Clear()

.Contains("Contains")

.StartsWith("Starts with")

.IsEqualTo("Is equal to")

.IsNotEqualTo("Is not equal to"))))

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

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

.ServerOperation(false)

.Read(read => read.Action("GetTestData", "Home"))

.Model(model =>

{

model.Id(p => p.SupplierNumber);

}))

.Events(events => events.Change("onRowSelect"))

)

</div>

<br/><br/>

<div class="col-sm-12">

@(Html.Kendo().Grid<KendoUIApp3.Models.CertificationDetail>()

.Name("Grid2")

.Columns(columns =>

{

columns.Command(command =>

{

command.Edit().Text("Edit").HtmlAttributes(new { title = "Edit" });

}).Width(180).Title("Action");

columns.Bound(e => e.CertificationName).Width("170px");

columns.Bound(e => e.Value).ClientTemplate("<input type='checkbox' disabled #=Value == true ? checked='checked' : '' # />").Width("170px");

columns.Bound(e => e.Attachment).Width("300px").ClientTemplate("#if (Attachment != null && Attachment != '')" +

"{# <a href='#=Attachment#' target='_blank' class='btn-success'>View Attachment</a> #}#")

.EditorTemplateName("_UploadAttachment");

})

.Editable(editable => editable.Mode(GridEditMode.InLine))

.Pageable(x => x.PageSizes(new object[] { 10, 20, 50, 100, "All" }))

.Reorderable(reorder => reorder.Columns(true))

.AutoBind(false)

.Selectable()

.Sortable(sortable => sortable

.AllowUnsort(true)

.SortMode(GridSortMode.MultipleColumn))

.Scrollable(scr => scr.Height(322))

.Filterable(filterable => filterable

.Extra(false)

.Operators(operators => operators

.ForString(str => str.Clear()

.Contains("Contains")

.StartsWith("Starts with")

.IsEqualTo("Is equal to")

.IsNotEqualTo("Is not equal to"))))

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

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

.ServerOperation(false)

.Read(read => read.Action("GetDetailTestData", "Home").Data("selectedRow"))

.Model(model =>

{

model.Id(p => p.CertificationName);

})

.Update(update => update.Action("SaveCertificationDetail", "Home")))

)

</div>

<script>

$('#btnSearch').click(function(e) {

$('#Grid1').data('kendoGrid').dataSource.read();

});

function selectedRow() {

var grid = $("#Grid1").data("kendoGrid");

var selectedItem = grid.dataItem(grid.select());

var data = selectedItem ? selectedItem.toJSON() : {};

return { model: data }

}

function onRowSelect() {

$('#Grid2').data('kendoGrid').dataSource.read();

}

</script>

_UploadAttachment.cshtml

@using Kendo.Mvc.UI

@(Html.Kendo().Upload()

        .Name("uploadedFiles")

        .Messages(m => m.Select("Upload Attachment"))

        .Async(a => a

                .Save("SaveAttachments", "Home")

                .Remove("RemoveAttachments", "Home")

            .AutoUpload(true)

        )

        .Multiple(false)

        //.Events(e => e.Success("onUploadSuccess"))

        //.Events(e => e.Upload("function(args){checkFileExtension(args,'.pdf');}"))

        .HtmlAttributes(new { accept = ".pdf" })

)

HomeController.cs

public ActionResult Test()

{

    return View();

}

public JsonResult GetTestData([DataSourceRequest] DataSourceRequest request)

{

    var certificationList = new List<Certification>();

    certificationList.Add(new Certification {SupplierNumber = "4343", CustomerItemNumber = "123344"});

    certificationList.Add(new Certification {SupplierNumber = "4242", CustomerItemNumber = "23453"});

    return Json(certificationList.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

}

public JsonResult GetDetailTestData([DataSourceRequest] DataSourceRequest request, Certification model)

{

    var certificationDetailLists = new List<CertificationDetail>();

    if (model.SupplierNumber == "4343")

    {

        certificationDetailLists.Add(new CertificationDetail {CertificationName = "ROHS", Value = true, Attachment = "Test.pdf"});

        certificationDetailLists.Add(new CertificationDetail {CertificationName = "REACH", Value = false});

    }

    else

    {

        certificationDetailLists.Add(new CertificationDetail { CertificationName = "RLIM", Value = false });

        certificationDetailLists.Add(new CertificationDetail { CertificationName = "RETIM", Value = true });

    }

    return Json(certificationDetailLists.ToDataSourceResult(request));

}

public ActionResult SaveAttachments(IEnumerable<HttpPostedFileBase> uploadedFiles)

{

    return Json(null);

}

public ActionResult RemoveAttachments(string[] fileNames)

{

    return Json("");

}

Model:

public class Certification

{

    public string SupplierNumber      { get; set; }

    public string CustomerItemNumber { get; set; }

}

public class CertificationDetail

{

    public string CertificationName { get; set; }

    public bool Value               { get; set; }

    public string Attachment        { get; set; }

}

Grid

answered on 30 Aug 2016

1 answer

236 views

Web Grid UI MVC In-cell/batch edit with a bool? column I still get drop list when clicking next to checkbox.

So I'm using 2016.1.412 Telerik controls. MVC Grid UI.

I've followed this (http://www.telerik.com/support/code-library/checkbox-column-and-incell-editing) in order to get one of my boolean? columns to only show a checkbox and allow single click changes. It works if I very carefully click on the check box. If I click (within the cell) but next to the check box I get the drop list with the values "true, false, not set". How do I get rid of the drop list?

1.columns.Bound(p => p.SendTo).Template(@<text></text>).ClientTemplate("<input type='checkbox' #= SendTo ? checked='checked':'' # class='sendtochkbx'/>")

2. .Title(GridColumns.SendToPorzio)

3. .Filterable(true)

4. .HtmlAttributes(new { style = "text-align: center;" })

5. .Sortable(false)

6. .Width(150)

7. .Locked(true)

8. .HeaderTemplate("Send To Porzio <input type='checkbox' id='masterCheckBox' onclick='checkAll(this)'/> ");

1.$("#SpendGrid").on('click',

2. '.sendtochkbx',

3. function () {

4. var checked = $(this).is(':checked');

5. var dataItem = grid.dataItem($(this).closest('tr')); //grid is defined earlier in code block

6. dataItem.set('SendTo', checked);

7. });

Grid

answered on 30 Aug 2016

1 answer

58 views

How to style web app with consistent Kendo look/feel

How can I style my web application to have a consistent look and feel?

Most places I used the kendo controls (Kendo helpers) however there are some places in my application where I've had to use the standard html helpers or just the regular markup.

In those cases I would the appearance of the Kendo style. (Checkboxes, textboxes, etc).

How can I accomplish this?

General Discussions

answered on 29 Aug 2016

3 answers

588 views

grid.saveRow(); does not call the controller to update

Hi,

I have a where i need to display data and have a button in each row, on click of the button need to toggle the record with selected property as 0 or 1.

I have used a custom command as i do not need to edit the records. and have used a click on the command, below is the code in the javascript method called in the click. But this makes the row editable and then updates the record but there is no post done to the controller, i have set the Update and Create event both. Please can you help and let me know if this is the current way of doing it.

columns.Command(command =>

{

command.Custom("Set").Click("onSetActive").HtmlAttributes(new { @className = "k-icon k-update", @title = "Set" });

command.Custom("Unset").Click("onUnsetActive").HtmlAttributes(new { @className = "k-icon k-cancel", @title = "Unset" });

}).Width(145);

......

.Create(update => update.Action("Update", "My"))
.Read(read => read.Action("Read", "My"))
.Update(update => update.Action("Update", "My"))

function onSetActive(e)

{

e.preventDefault();

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

var row = $(e.currentTarget).closest("tr");