Questions on UI for ASP.NET MVC Forum

1 answer

453 views

Kendo Grid MVC - is possible to suggest in the filter field only available values in the grid?

Given a grid, GridFilterMode.Row, with 3 columns (First Name, Surname, Nick Name) with 100 rows.

Given I have filtered the Surname column and now the grid is displaying 10 rows based on the applied filter on the Surname column.

If type one or more letters in the "First Name" field filter it will suggest all corresponding values to the dataSource even the ones that are not being displayed in the grid due to the applied filter in the column Surname.

Is there any way to suggest only values in the "view()" data (only values displayed in the grid)?

I haven't found any additional information on the documentation.
Any help is welcome.

Example:

No filters have been applied so far:

Applying a filter to the "Freight" column to values bigger than "890.00":

Grid has now 2 rows based on the Freight filter. The user has typed on the "Ship Name" filter column and the grid has suggested all possible names that match with it instead suggest only based on the 2 available rows (QUICK-Stop | Queen Cozinha)

Filter

Grid

answered on 13 Jul 2023

1 answer

194 views

Kendo Grid Edit Form Not submitting if the any field on the form has html tags as data.

Hi,

I have a kendo grid, user wants to enter html data in one of the column.

user clicks edit button on the grid row then an edit form opens as popup. This edit form is a model.cshtml with all the fields of the model on it. This edit cshtml does not have any button on it. "Update" button is created on fly.

User enters html data (tags etc) and clicks Update button then it return 401 error. Which I think is because its taking the tags as an injection attack. If user enters normal text then it works fine.

what can do to make the edit form allow submit html tags data? can you please help me?

Thanks

CNS

answered on 12 Jul 2023

0 answers

159 views

Grid Destory command passing null to controller

My Grid has the following code

.DataSource(dataSource => dataSource
.Ajax()
.AutoSync(false)
.Model(model => model.Id(p => p.No))
.Destroy(update => update.Action("DeleteData", "DataController"))
.Events(evt => evt.Error("cancelDelete"))

Following is the controller

[HttpPost]
public ActionResult DeleteData([DataSourceRequest] DataSourceRequest request, Datamodel data)
{

I see data has null when it call the controller function

What could be the reason for data is null and the No is not passed.

Thanks

Grid

asked on 12 Jul 2023

0 answers

177 views

View icon in the grid column is not displayed properly.

@(Html.Kendo().Grid(Model)
.Name("XXXXDataGrid")
.Columns(columns =>
{
columns.Command(command => { command.Custom("View").Click("ViewMap").Text(" ").IconClass("k-icon k-i-search"); }).Width(50).Title("View");

})

I am using above syntax to display the grid column with search icon but the icon is not displayed properly as shown.

Using

Note sure the reason or how to debug this

Thanks

Grid

updated question on 11 Jul 2023

1 answer

175 views

Grid width is not getting set what ever I tried

I am using the following syntax and followed few examples to resize the grid but couldn't how can I adjust the width of the gird

 @(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns => {
        columns.Bound(p => p.ItemId).Visible(false);
        columns.Bound(p => p.ItemName).HeaderTemplate("ItemID")
        .Template(@<text><a href="@Url.Action("ItemDetail", "Storage", new { ItemId = item.ItemId })">@item.UnNumber</a></text>);
columns.Bound(p => p.UnNumber).HeaderTemplate("UN Number").Filterable(false);
columns.Bound(p => p.PackingInstructions).HeaderTemplate("Packing Instructions");
columns.Bound(p => p.IsCargo).HeaderTemplate("Cargo Only");
columns.Bound(p => p.SdsSheetFileName).HeaderTemplate("SDS #1")
    .Template(@<text><a href="@Url.Action("GetReport", "Storage", new { fileName = item.SdsSheetFileName })" target="_blank">@item.SdsSheetFileName</a></text>);
        columns.Bound(p => p.GroundShipmentFileName).HeaderTemplate("Example Shipment Ground (Fully Regulated)")
        .Template(@<text><a href="@Url.Action("GetReport", "Storage", new { fileName = item.GroundShipmentFileName })" target="_blank">@item.GroundShipmentFileName</a></text>);
        columns.Bound(p => p.NextDayShipmentFileName).HeaderTemplate("Example Shipment Next Day (Fully Regulated)")
        .Template(@<text><a href="@Url.Action("GetReport", "Storage", new { fileName = item.NextDayShipmentFileName })" target="_blank">@item.NextDayShipmentFileName</a></text>);
        columns.Bound(p => p.FreightShipmentFileName).HeaderTemplate("Example Shipment Freight (Fully Regulated)")
        .Template(@<text><a href="@Url.Action("GetReport", "Storage", new { fileName = item.FreightShipmentFileName })" target="_blank">@item.FreightShipmentFileName</a></text>);
        columns.Bound(p => p.GroundShipmentLimitedFileName).HeaderTemplate("Example Shipment Ground (Limited Quantity)")
        .Template(@<text><a href="@Url.Action("GetReport", "Storage", new { fileName = item.GroundShipmentLimitedFileName })" target="_blank">@item.GroundShipmentLimitedFileName</a></text>);
        columns.Bound(p => p.NextDayShipmentLimitedFileName).HeaderTemplate("Example Shipment Next Day (Limited Quantity)")
        .Template(@<text><a href="@Url.Action("GetReport", "Storage", new { fileName = item.NextDayShipmentLimitedFileName })" target="_blank">@item.NextDayShipmentLimitedFileName</a></text>);
        columns.Bound(p => p.FreightShipmentLimitedFileName).HeaderTemplate("Example Shipment Freight (Limited Quantity)")
        .Template(@<text><a href="@Url.Action("GetReport", "Storage", new { fileName = item.FreightShipmentLimitedFileName })" target="_blank">@item.FreightShipmentLimitedFileName</a></text>);
    })
    .Pageable()
    .Sortable()
    .Filterable()
    .Navigatable()
    .Size(ComponentSize.Small)
     .HtmlAttributes(new { style = "height: 550px;width:500px;" })
)

Grid

answered on 10 Jul 2023

1 answer

147 views

Use Scheduler in the form of a daily roster

Hi,

Is it possible to use the MVC scheduler like a daily rostering system with locations down the left then times along the top and resources can be assigned to these locations and times?

When I look at examples, the times are always down the left and days along the top.

Thanks,

Ian

Scheduler

answered on 07 Jul 2023

0 answers

112 views

Grid column menu filtering doesn't persist

We are having an issue when a column gets filtered out via the column menu, the filtered state of the gird doesn't persist if the grid gets reloaded or user moved to another area that has the same grid.

i.e. if user filters out customer column, navigates elsewhere, comes back then the customer column will reappear.

Using v2023. 1. 117

Grid

asked on 06 Jul 2023

1 answer

165 views

validation is not firing on Upload with other controls

I have a form as follows where it fires validation for text box controls but not for file upload

<form id="frmItem">
    <table class="table table-bordered">
        <thead class="bg-dark text-center text-white">
            <tr>
                <th colspan="2">Add/Modify Item</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="width:404px;">Item ID Name</td>
                <td>
                    @(Html.Kendo().TextBox().Name("txtItemName")
                        .HtmlAttributes(new { placeholder = "Item ID Name", required = "required", validationmessage = "Enter Item ID Name" }))
                </td>
            </tr>
            <tr>
                <td>UN Number</td>
                <td>
                    @(Html.Kendo().TextBox().Name("txtUnNumber")
                        .HtmlAttributes(new { placeholder = "UN Number", required = "required", validationmessage = "Enter UN Number" }))
                </td>
            </tr>
            <tr>
                <td>Packing Instructions</td>
                <td>
                    @(Html.Kendo().TextBox().Name("txtPackingInstructions")
                        .HtmlAttributes(new { placeholder = "Packing Instructions", required = "required", validationmessage = "Enter Packing Instructions" }))
                </td>
            </tr>
            <tr>
                <td>SDS Sheet</td>
                <td>
                    @(Html.Kendo().Upload().Name("SdsSheet")
                        .Multiple(false)
                        .HtmlAttributes(new { required = "required" }))
                </td>
            </tr>
            <tr>
                <td>Cargo Only?</td>
                <td>@(Html.Kendo().CheckBox().Name("txtCargoOnly"))</td>
            </tr>
            <tr>
                <td>Example Shipment Ground (Fully Regulated)</td>
                <td>@(Html.Kendo().Upload().Name("GroundShipment"))</td>
            </tr>
            <tr>
                <td>Example Shipment Next Day Air (Fully Regulated)</td>
                <td>@(Html.Kendo().Upload().Name("NextDayShipment"))</td>
            </tr>
            <tr>
                <td>Example Shipment Freight (Fully Regulated)</td>
                <td>@(Html.Kendo().Upload().Name("FreightShipment"))</td>
            </tr>
            <tr>
                <td>Example Shipment Ground (Limited Quantity)</td>
                <td>@(Html.Kendo().Upload().Name("GroundShipmentLimited"))</td>
            </tr>
            <tr>
                <td>Example Shipment Next Day Air (Limited Quantity)</td>
                <td>@(Html.Kendo().Upload().Name("NextDayShipmentLimited"))</td>
            </tr>
            <tr>
                <td>Example Shipment Freight (Limited Quantity)</td>
                <td>@(Html.Kendo().Upload().Name("FreightShipmentLimited"))</td>
            </tr>
            <tr>
                <td colspan="2">
                    <button class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md" type="submit">Submit</button>
                </td>
            </tr>
        </tbody>
    </table>
</form>
<script>
    $(document).ready(function () {
        var validator = $("#frmItem").kendoValidator().data("kendoValidator");

        $("#frmItem").submit(function (event) {
            event.preventDefault();

            if (validator.validate()) {
                
            } else {
                
            }
        });
    });
</script>

Upload

answered on 05 Jul 2023

1 answer

145 views

Security Trimming in multi-level menus

Am I missing a configuration option? I have a menu which has several levels of menus. With "Security Trimming" enabled, root level objects get trimmed with no issues. Parents which have their children objects "trimmed", still show up. Example:

@(Html.Kendo().Menu()
                          .Name("Menu")
                          .SecurityTrimming(true)
                          .Items(items =>
                          {
                                items.Add().Text("Home").Action("Index", "Home");
                                items.Add().Text("Owners").Action("Index", "Owners");
                                items.Add().Text("Interred").Action("Index", "Interred");
                                items.Add().Text("Maintenance").Items(itm =>
                                {
                                    itm.Add().Text(@"Sections/Lots/Spaces").Action("Index", "MaintainSpaces");
                                    itm.Add().Text("Search Tags").Action("Index", "MaintainSearchTags");
                                    itm.Add().Text("Undertakers").Action("Index", "MaintainUndertakers");
                                    itm.Add().Text("Reclaim Spaces").Action("Index", "MaintainReclaimSpaces");
                                    itm.Add().Text("Research Tool").Action("Index", "MaintainResearchTool");
                                    itm.Add().Text("Headstones").Action("Index", "MaintainHeadstones");
                                });
                                items.Add().Text("Reports").Items(itm =>
                                {
                                    itm.Add().Text("Available Spaces").Action("Index", "ReportsPage");
                                });
                        })
                )

As you can see the "Maintenance" and "Reports" menu items are still visible. An example situation would be :

A unauthorized user sees the "Home" button, and everything else should be trimmed. While the actual actions are getting trimmed, the "Maintenance" and "Reports" menu items (with nothing in them) are still there.

Am I missing a configuration option to also remove parents?

Menu

answered on 03 Jul 2023

1 answer

319 views

Change to Input/Select Option when change the Operators

Hello,
I've use kendo Grid MVC for my project and want to change the Input type when filter (in one field):

choose "Contains" display to input text.
choose "Is Equal To" display Select Option.

What i want like the below image:

Have any way to config this ?

My Source Code :

<script type="text/javascript">

$(window).resize(function () {
var gridElement = $("#BudgetApprovalAuditGrid"),
newHeight = gridElement.innerHeight(),
otherElements = gridElement.children().not(".k-grid-content"),
otherElementsHeight = 0;

otherElements.each(function () {
otherElementsHeight += $(this).outerHeight();
});

gridElement.children(".k-grid-content").height(newHeight - otherElementsHeight);
});

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);
}
}

function datePicker(args) {

args.kendoDatePicker({
format: "dd/MM/yyyy"
});
}

function GetListDataSetNameFilter(element, fieldName) {
element.kendoDropDownList({
dataSource: {
transport: {
read: {
url: "@Url.Action("_GetListDataSetNameFilter", "BudgetApprovalAudit")",
}
}
},
filter: "Contains",

optionLabel: "-Select Value-"
});
}

function GetListBudgetNameFilter(element, fieldName) {
element.kendoDropDownList({
dataSource: {
transport: {
read: "@Url.Action("_GetListBudgetNameFilter", "BudgetApprovalAudit")",
}
},
filter: "Contains",

optionLabel: "-Select Value-"
});
}
function GetListApprovalStatusFilter(element, fieldName) {
console.log("elementelementelementelementelementelementelement>>>>>>>>>>>>>>>>>>>>>>>>", element)
element.kendoDropDownList({
dataSource: {
transport: {
read: {
url: "@Url.Action("_GetListApprovalStatusFilter", "BudgetApprovalAudit")",
}
}
},
filter: "Contains",
optionLabel: "-Select Value-"
});
}
function OnDataBoundBudgetApprovalAuditGrid(e) {
//console.log("OnDataBoundBudgetApprovalAuditGrid",e)
//if ($('#BudgetApprovalAuditGrid tbody .k-grouping-row:contains("DatasetName") td p').length != 0) {
// for (var i = 0; i < $('#BudgetApprovalAuditGrid tbody .k-grouping-row:contains("DatasetName") td p').length; i++) {
// var tempHTML = $('#BudgetApprovalAuditGrid tbody .k-grouping-row:contains("DatasetName") td p')[i].innerHTML
// //do something
// //tempHTML

// $('#BudgetApprovalAuditGrid tbody .k-grouping-row:contains("DatasetName") td p')[0].innerHTML = tempHTML

// }
// //$('#BudgetApprovalAuditGrid tbody .k-grouping-row:contains("DatasetName") td p')[0].innerHTML = "Your text";
//}
}

</script>

<div style="height: calc(100vh - 220px);">
<div style="height: 900px">
@(Html.Kendo().Grid(Model)
.Name(gridId)
.HtmlAttributes(new { })
.Columns(columns =>
{
columns.Bound(p => p.DatasetName).Title("Dataset Name22222222").ClientGroupHeaderTemplate("#=value#").Width(100)
.Filterable(x => x.UI("GetListDataSetNameFilter").Extra(false).Operators(operators => operators.ForString(str => str.Clear().IsEqualTo("Is Equal To"))));

columns.Bound(p => p.BudgetName).Title("Budget Name").Width(150).ClientGroupHeaderTemplate("#=value#")
.Filterable(x => x.UI("GetListBudgetNameFilter").Extra(false).Operators(operators => operators.ForString(str => str.Clear().IsEqualTo("Is Equal To"))));

columns.Bound(p => p.ApprovalStatus).Title("Approval Status").Width(300)
.Filterable(x => x.UI("GetListApprovalStatusFilter").Extra(false).Operators(operators => operators.ForString(str => str.Clear().IsEqualTo("Is Equal To"))));

columns.Bound(p => p.ApprovalPath).Title("Full path").Width(300);
columns.Bound(p => p.UserName).Title("User Name").Width(150);
columns.Bound(p => p.CompletedUserName).Title("Completed User Name").Width(150);
columns.Bound(p => p.TimeDateString).Title("Created Date").Width(200)
.Filterable(x => x.Extra(false).Operators(operators => operators.ForString(str => str.Clear().Contains("Contains"))));

columns.Bound(p => p.CompletedTimeDateString).Title("Completed Date").Width(200)
.Filterable(x => x.Extra(false).Operators(operators => operators.ForString(str => str.Clear().Contains("Contains"))));

columns.Template(@<text> </text>).Title(" ");

})
.ToolBar(toolbar =>
{
toolbar.Template(@<text><a class="k-button" style="opacity:0"></a></text>);
})
.DataSource(ds => ds.Ajax().Read("_GetListBudgetApproval", "BudgetApprovalAudit")
.Events(events => events.Error("error_handler"))
).Events(x=>x.DataBound("OnDataBoundBudgetApprovalAuditGrid"))
.Sortable()
.Scrollable()
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.IsEqualTo("Is Equal To")
.Contains("Contains")
))
)
.Resizable(resize => resize.Columns(true))
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row)))
</div>
</div>

Thanks

Filter

Grid

answered on 30 Jun 2023