Questions on UI for ASP.NET Core Forum

1 answer

130 views

Grid custom popup editor - distinguish Create vs Update

I have a grid which has a custom popup editor. When the editor opens I need to know whether I am in Edit or Create mode.

.Editable(e=> 
    e.Mode(GridEditMode.PopUp)
    .TemplateName("CompanyOwnersEditor")
    .Window(w => {
        w.Animation(false);
        w.HtmlAttributes(new { @class = "grid-popup-window" });
        w.Name("companyOwnersEditor");
    })        
    )

When I am in Edit mode my datasource for one of my DropDownList will be different than Create.

I am unable how to figure this out and Model is always null.

Grid

answered on 06 Jan 2023

1 answer

535 views

CRUD operations on a grid in a Razor page

Hello...

I have a grid on a razor page that shows related data to the main model. The grid has the usual CRUD operation buttons and there are corresponding post code in the .CS file. The anti-forgery token is configured and sent with each call back to the server. The grid is using in-line editing, so nothing custom at all. I have a Read operation defined, but because I am binding from the server it never gets called (just there for consistency). This is the grid in the CSHTML page:

@(Html.Kendo().Grid<SettlementHistoryModel>(Model.CoDefendantList)
	.Name("coDefendantGrid")
	.Mobile(MobileMode.Phone)
	.DataSource(ds => ds
		.Ajax()
		.PageSize(30)
		.Events(ev => ev.Error("errorHandler"))
		.Model(m =>
		{
			m.Id(cod => cod.SettlementId);
			m.Field(f => f.SettlementId).Editable(false);
		})
		.Batch(false)
		.Create(c => c.Url("/CaseEdit?handler=NewCoDefendant").Data("forgeryToken"))
		.Read(r => r.Url("/CaseEdit?handler=ReadCoDefendant").Data("forgeryToken"))
		.Update(u => u.Url("/CaseEdit?handler=UpdateCoDefendant").Data("forgeryToken"))
		.Destroy(d => d.Url("/CaseEdit?handler=DeleteCoDefendant").Data("forgeryToken"))
		.ServerOperation(false)
	)
	.Pageable()
	.Sortable(s => s
		.AllowUnsort(true)
		.SortMode(GridSortMode.Mixed)
		.ShowIndexes(true)
	)
	.ToolBar(tb => tb.Create())
	.Editable(ed => ed.Mode(GridEditMode.InLine))
	.Scrollable(s => s.Enabled(true).Height("auto"))
	.Columns(c =>
	{
		c.Command(c =>
		{
			c.Edit();
			c.Destroy();
		}).Width("15%").HtmlAttributes(new { style = "vertical-align: top;"}).Title("Actions");
		c.Bound(res => res.SettlementId).Title("ID").Width("5%");
		c.Bound(res => res.CaseId).Title("Case").Width("5%");
		c.Bound(res => res.Codefendant).Title("Co-Defendant").Width("15%");
		c.Bound(res => res.Settlement).Title("Settlement").Format("{0:c2}").Width("10%");
		c.Bound(res => res.SettlementDate).Title("Settlement Date").Format("{0:MM/dd/yyyy}").Width("10%");
		c.Bound(res => res.Comments).Title("Comments").Encoded(false);
	})
	.ColumnMenu(m => m
		.ComponentType("modern")
		.Columns(cm => cm.Sort("asc")))
	.Reorderable(r => r.Columns(true))
	.Resizable(rs => rs.Columns(true)))

Ok, so data populates in the grid with no problem and the appropriate Add, Edit and Delete buttons appear where they should. The appropriate post method is called. Here, for example, is the Update method:

public JsonResult OnPostUpdateCoDefendant(SettlementHistoryModel settlement, [DataSourceRequest] DataSourceRequest request)
{
	// Check for a valid object
	if (settlement != null)
	{
		//_context.SettlementHistories.Update(settlement);
		//_context.SaveChanges();
	}

	// And return the JSON for the object
	return new JsonResult(new[] { settlement }.ToDataSourceResult(request, ModelState));
}

The problem? When this method is hit, the SettlementHistoryModel object is not null, but all of the properties of the singular object ARE null (except the SettlementId, which is 0). It doesn't matter how the grid gets the data (server binding or Read action), which order the items are in the method signature, etc. The method is called, but ultimately the operation will fail because there is nothing in the SettlementHistoryModel object.

I've downloaded the grid demo and that seems to work. My code is pretty much exactly the same as the demo code, yet there is no way I have tried that gets my code working.

What am I missing?

Grid

updated answer on 06 Jan 2023

1 answer

138 views

DataSource Unauthorized error

In my webAPI i'm using the [Authorize] control.

When I call my webAPI to populate a grid or a dropdown with this code

.DataSource(source=>source.Custom()
.Transport(transport=>transport.Read(read=>
{
read.Url($"{WebApiUrl}")
.DataType("json").Data("forgeryToken");
})
)
.PageSize(12)

only in localhost it returns this error <Failed to load resource: the server responded with a status of 401 (Unauthorized)> .

Instead if I use an ajax call in javascript it works

$.ajax({
url: `${WebApiUrl}`,
method: 'get',
crossDomain: true,
cache: false,
xhrFields: {
withCredentials: true,
},
success: function (data) {
options.success(data)
}
})

I've searched in google but i didn't find anything that can help me. Do I have to pass the credentials somehow?

Thank you

DropDownList

Grid

Security

answered on 04 Jan 2023

1 answer

150 views

Setting styles from datasource

Hello,

I'm evaluating Telerik as a possible reporting solution. I'm totally new to Telerik and I currently use SQL Server SSRS for all reporting. There are some things that SSRS does easily but I don't see a parallel in Telerik, at least not yet.

Example: I have data that I retrieve from an SQL Server DB based on the client which contains style information for my reports. I can retrieve a path for the client's logo, their preferred color patterns for headers, footers, table styles, backgrounds, fonts, font styles (bold, italic, etc.) and then in SSRS I can define these settings as expressions taken from the datasource. Each client can have their own specific formatting so I want the report to be standardized in form but customized to the client with styles.

As a simple example, suppose I retrieve data that tell me the client wants Arial size 14 font for the title with gray background and Blue font color. These are stored as separate values that I retrieve from a stored procedure and the datasource is bound to the report. I created a mock report with the title, subtitle and rundate textboxes placed where they should be in the header section.

How can I assign the font styles and coloring to the text boxes?

Styling

TextBox

answered on 03 Jan 2023

1 answer

916 views

How to set numeric text box max value based on template data item field

I am setting up a custom kendo window for a grid popup. On the window I have a form that will be posted via ajax. I am attempting to use a numeric text box in the template for the popup but I need to set the max value based on the data item that is using the popup. Is it possible to use a numeric text box in a kendo template and set the max value to a field in the data item for the template? Also, I can't seem to figure out how to set up validation for numeric text box either. How do I use a numeric text box that is not bound to the model but still validates the input?

This is the grid columns. The custom command opens my kendo window.

.Columns(columns =>
            {
                columns.Bound(m => m.Name).Groupable(false);
                columns.Bound(m => m.InventoryTypeName);
                columns.Bound(m => m.Description).Hidden().Groupable(false);
                columns.Bound(m => m.Active);
                columns.Bound(m => m.BulkItems).Hidden();
                columns.Bound(m => m.QuantityOnHand).Hidden();
                columns.Bound(m => m.QuantityAssigned).Hidden();
                columns.Bound(m => m.QuantityTotal).Hidden();
                columns.Bound(m => m.Brand).Title("Brand Required").Hidden();
                columns.Bound(m => m.SerialNumber).Title("S/N Required").Hidden();
                columns.Bound(m => m.ModelNumber).Title("Model# Required").Hidden();
                columns.Bound(m => m.Size).Title("Size Required").Hidden();
                columns.Bound(m => m.Color).Title("Color Required").Hidden();
                columns.Bound(m => m.CreatedBy).Title("Creator").Hidden();
                columns.Bound(m => m.CreatedDate).Title("Creation Date").Hidden();
                columns.Bound(m => m.UpdatedBy).Title("Last Editor").Hidden();
                columns.Bound(m => m.UpdatedDate).Title("Last Edit Date").Hidden();
                columns.Command(m => { m.Edit(); m.Custom("Assign").Click("AssignInventory"); });
            })

Here is the script for the custom command.

@*Assign inventory script for command button*@
    <script type="text/javascript">
        function AssignInventory(e) {
            e.preventDefault();

            var assignTemplate = kendo.template($("#AssignInventoryTemplate").html());
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            var wnd = $("#AssignInventoryWindow").data("kendoWindow");

            wnd.content(assignTemplate(dataItem));
            wnd.center().open();
        }

        function AssignmentTypeData() {
            var inventoryTypeId = $("#InventoryTypeId").val();

            return { inventoryTypeId: inventoryTypeId };
        }

        function FilterAssignees(e) {
            return {
                assignmentTypeId: $("#AssignmentType").val()
            }
        }
    </script>

This is my template script for the window.

<script type="text/x-kendo-template" id="AssignInventoryTemplate">
    <form id="AssignInventoryForm" class="k-edit-form-container" action="/Inventory/AssignInventory" method="post" kendo-validator="true">
        <style>
            .k-edit-form-container {
                max-height: 600px;
            }

            .k-edit-form-container .k-edit-buttons {
                margin: 0;
                padding: 8px 0px;
            }
        </style>
        <input type="hidden" id="InventoryId" name="InventoryId" value="#:data.Id#" />
        <input type="hidden" id="InventoryTypeId" name="InventoryTypeId" value="#:data.InventoryTypeId#" />

        <div class="k-edit-label">
            <label>Assignment Type</label>
        </div>
        <div class="k-edit-field">
            @(Html.Kendo().DropDownList()
                .Name("AssignmentType")
                .DataTextField("Name")
                .DataValueField("Id")
                .OptionLabel("Select Assignment Type")
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("GetAssignmentPermissions", "InventoryType").Data("AssignmentTypeData");
                    });
                })
                .ToClientTemplate()
            )
        </div>

        <div class="k-edit-label">
            <label>Assign To</label>
        </div>
        <div class="k-edit-field">
            @(Html.Kendo().DropDownList()
                .Name("Assignee")
                .DataTextField("Name")
                .DataValueField("Id")
                .OptionLabel("Select Assignee")
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("GetAssignees", "Inventory").Data("FilterAssignees");
                    })
                    .ServerFiltering(true);
                })
                .Enable(false)
                .AutoBind(false)
                .CascadeFrom("AssignmentType")
                .ToClientTemplate()
            )
        </div>

        # if(data.BulkItems) { #
            <div class="k-edit-label">
                <label>Quantity To Assign</label>
            </div>
            <div class="k-edit-field">
                @*<span class="k-input k-textbox k-input-solid k-input-md k-rounded-md k-invalid" style="">
                    <input id="QuantityToAssign" class="k-input-inner" type="number" min="1" max="#:QuantityOnHand#" name="QuantityToAssign" value="1" required="required">
                </span>
                <div class="k-tooltip k-tooltip-error k-validator-tooltip k-invalid-msg field-validation-error k-hidden" data-for="QuantityToAssign" id="QuantityToAssign_validationMessage" data-valmsg-for="QuantityToAssign">
                    <span class="k-tooltip-icon k-icon k-i-warning"></span>
                    <span class="k-tooltip-content">The QuantityToAssign field is required.</span>
                    <span class="k-callout k-callout-n"></span>
                </div>*@
                @(Html.Kendo().NumericTextBox()
                    .Name("QuantityToAssign")
                    .Value(1)
                    .Min(1)
                    .Max(@<text>#:QuantityOnHand#</text>)
                    .ToClientTemplate()
                )
                <span class="k-invalid-msg" data-for="QuantityToAssign"></span>
            </div>
        #}#
    </form>

</script>

In the template I can set up a numeric input but I'd like to use the Kendo numeric text box if possible. Either way, I need to validate that the numeric input is within the min/max range but can't seem to get it to validate.

NumericTextBox

answered on 03 Jan 2023

0 answers

115 views

Custom Popup Editor pass parameter to datasource keying off of Edit or Create

I have a custom popup editor which has a DropDownListFor which has a datasource. I need to pass a parameter to the Read method which is a .NET action. The parameter needs to be whether or not we are in update or create mode.

I currently pass CompanyId from the ViewData but I need one more param as mentioned above. Since Model is null always in Edit or Create mode I cannot key off of that.

            @Html.LabelFor(m => m.UserId)
            @(Html.Kendo().DropDownListFor(m => m.UserId)
             .OptionLabel("Select..")
             .DataTextField("Text")
             .DataValueField("Value")
                 .DataSource(dataSource => {
                        dataSource.Custom()
                                  .Type("aspnetmvc-ajax")
                                  .Transport(transport => transport.Read("Global_SalesUsers_DropDown", "Company", new {companyId = companyId}))
                                    .Schema(schema => schema.Data("Data"))
                                    .Events(events => events.RequestEnd("processViewDataResponse"));
                    })           
            )
           @Html.ValidationMessageFor(m => m.UserId)

Grid

asked on 03 Jan 2023

0 answers

118 views

Custom popup editor, getting value from Model in edit mode and using it as DropDownList datasource parameter

I have a custom popup grid editor (which is a partial view). Model is always null in the editor so I cannot access the Model to key off values.

I have a datasource for this dropdown list as you can see below. I need to add a userId parameter to this datasource when in edit mode. Unfortunately I have not been able to figure out how to get that value since Model is null.

Any tricks I can do here?

<div class="editor-container">
    <div class="row">
        <div class="col">
            @Html.LabelFor(m => m.UserId)
            @(Html.Kendo().DropDownListFor(m => m.UserId)
             .OptionLabel("Select..")
             .DataTextField("Text")
             .DataValueField("Value")
                 .DataSource(dataSource => {
                        dataSource.Custom()
                                  .Type("aspnetmvc-ajax")
                                  .Transport(transport => transport.Read("Global_SalesUsers_DropDown", "Company", new {companyId = companyId}))
                                    .Schema(schema => schema.Data("Data"))
                                    .Events(events => events.RequestEnd("processViewDataResponse"));
                    })           
            )
           @Html.ValidationMessageFor(m => m.UserId)
        </div>
    </div>

Grid

asked on 03 Jan 2023

0 answers

91 views

Is it possible to block script execution in PDFViewer?

Hello!

Is it possible to block java script execution in PDF documents in PDFViewer?

Or maybe it is possible to find out if there is a script in the document?

I will be grateful for any answer.

PDFViewer

asked on 02 Jan 2023

1 answer

107 views

Cascading drop down data source change

Hello, I am trying to change the read action of my child drop down based on the parent drop down value. In my scenario, the read action for my "Assignee" drop down needs to call the appropriate controller based on the "Assignment Type" drop down value. I'm struggling to find documentation on how I can update the drop down data source. I'm assuming the best approach would be to utilize the select event of the parent drop down to then update the child drop down read action, but I need some direction on how to approach this. The following is the setup of my cascading drop down inputs. I'm not sure if it matters, but these are being used in a template for a custom grid command that opens a kendo window popup.

    <div class="k-edit-form-container">
        <style>
            .k-edit-form-container {
                max-height: 600px;
            }

            .k-edit-form-container .k-edit-buttons {
                margin: 0;
                padding: 8px 0px;
            }
        </style>
        <input type="hidden" id="InventoryId" name="InventoryId" value="#:data.Id#" />
        <input type="hidden" id="InventoryTypeId" name="InventoryTypeId" value="#:data.InventoryTypeId#" />
    </div>

    <div class="k-edit-label">
        <label>Assignment Type</label>
    </div>
    <div class="k-edit-field">
    @(Html.Kendo().DropDownList()
            .Name("AssignmentType")
            .DataTextField("Name")
            .DataValueField("Id")
            .OptionLabel("Select Assignment Type")
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("GetAssignmentPermissions", "InventoryType").Data("AssignmentTypeData");
                });
            })
            .ToClientTemplate()
        )
    </div>

    <div class="k-edit-label">
        <label>Assign To</label>
    </div>
    <div class="k-edit-field">
        @(Html.Kendo().DropDownList()
            .Name("Assignee")
            .DataTextField("Name")
            .DataValueField("Id")
            .OptionLabel("Select Assignee")
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("GetActiveInventoryTypes", "InventoryType").Data("FilterAssignees");
                });
            })
            .Enable(false)
            .AutoBind(false)
            .CascadeFrom("AssignmentType")
            .ToClientTemplate()
        )
    </div>

DropDownList

answered on 02 Jan 2023

0 answers

227 views

CheckBoxGroup BindTo() Method cannot convert List<object> to string[]

I've posted my question in a wrong forum,

So I reposted the quesiton again here.

Scenario:

I am trying to enable and disable CheckBoxGroup items,

and it dependes on whether if the categories of the item has values.

For example, If there are two categorie, which are animals and fruits.

If I recieved no datas of fruits, I'll disabled the CheckBoxGroup item "fruits".

What I've tried so far

I search through documents and found this tutorial of the BindTo() method,

However, I got an error message saying "Cannot convert from System.Collections.Generic.List<MyCheckBoxItemModel> to string []

Questions

1. According to the method, how can I convert List<model> to string[] in my .cshtml ?

2. (Extension Question) In the tutorial, I'm awared that in the "InputGroupItemModel" there was a "Enabled" attribute.

Is it mean that if passed it to the front end and attached it with the BindTo() method, the CheckBoxGroup will automatically enable or disable the checkbox item?

(I'll show my code below)

Code

CheckBoxItemDto.cs

 public class CheckBoxItemDto
    {
        //public IDictionary<string, object> HtmlAttributes { get; set; }

        //public string CssClass { get; set; }

        public bool? Enabled { get; set; }

        //public bool? Encoded { get; set; }

        public string Label { get; set; }

        public string Value { get; set; }
    }

CheckBoxItemViewModel.cs

public class CheckBoxItemViewModel
    {
        public List<CheckBoxItemDto> Items { get; set; }

        public string[] CheckBoxGroupValue { get; set; }
    }

MyViewModel.cs

public class EqInstsDataViewModel
    {
        public IEnumerable<MyOtherViewModel> MyOtherViewModel { get; set; }
        public CheckBoxItemViewModel CheckBoxItemViewModel { get; set; }
    }

Controller

 public IActionResult GetChartPartialView()
        {
            try
            { 
                List<CheckBoxItemDto> checkBoxItemDto = GetCheckBoxItem();  //Get CheckBox Items
                CheckBoxItemViewModel checkBoxItem = new CheckBoxItemViewModel() { Items = checkBoxItemDto };

                MyViewModel myViewModel = new MyViewModel() { Items = checkBoxItem }

                return PartialView("~/Views/Shared/_MyPartialView.cshtml", myViewModel);
            }
            catch (Exception ex)
            {
                return Json(ex.Message);
            }
        }

public List<CheckBoxItem> GetCheckBoxItem()
        {            
            try
            {
                #region CheckBoxItems

                var itemsList = new List<CheckBoxItemDto>()
                {
                    new CheckBoxItemDto()
                    {
                        Label = "Animals",
                        Value = "1",
                        Enabled = true
                    },
                     new CheckBoxItemDto()
                    {
                        Label = "Friuts",
                        Value = "2",
                        Enabled = false
                    } ,
                };

                #endregion

                return itemList;
            }
            catch(Exception)
            {
                throw;
            }
        }

_MyPartialView.cshtml

@(Html.Kendo().CheckBoxGroup()     
        .Name("MyCheckBox")
        .BindTo(Model.CheckBoxItemViewModel.Items)  //Cannot convert from List<CheckBoxItemDto> to string[]
        .Value(Model.CheckBoxItemViewModel.CheckBoxGroupValue)
        .Layout("horizontal")
     )

CheckBoxGroup

asked on 30 Dec 2022