Questions on UI for ASP.NET MVC Forum

12 answers

529 views

I am using Kendo UI ASP.NET MVC Grid (Razor) in Ajax mode with a popup editor.

As an example say: Customers have orders.

User of the application go to a grid that displays all customers. User is allowed to add/edit/delete customers (and their orders).
But when the user clicks on edit and the popup editor comes up that is when I want to load orders. I do not want to load orders eagerly since a customer may have many orders and the user may never edit any customer at all.

Seems like this should be a simple thing to do. I have looked through all forums/questions. I have not been able to find such an example. Can someone help me with this?

Thanks a bunch!

Grid

answered on 23 May 2023

2 answers

109 views

Clearing expand details after a while

Here is the code to show the list, it also has a part to show detail information by expanding the record, it shows the details first time you expand the record for some seconds and then clear them , and if you expand it again this time you can see details!
wonder if something triggered to clear the details or what, as it has the details so I don't think it would be matter of reading data!
@(Html.Kendo().Grid(Model)
.Name("LSGrid")
.AutoBind(false)
.NoRecords(x => x.Template("<div class=\"k-grid-norecords-template\">No records found that match your search criteria </div>"))
.Columns(columns =>
{
columns.Bound(p => p.Name).Title("Rail Infrastructure Manager").HeaderHtmlAttributes(new { style = "font-weight: bold" });
columns.Bound(p => p.Ref).Title("Line section ID").HeaderHtmlAttributes(new { style = "font-weight: bold" });

})
.Events(e => e.DetailExpand("detailExpand"))
.ClientDetailTemplateId("template")
.Pageable( pageable => pageable.ButtonCount(10))
.Sortable()
.Scrollable(scr=>scr.Height(300))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(true)
)
)

<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().Grid<Dto>()
.Name("grid_#=Id#") // template expression, to be evaluated in the master context
.Columns(columns =>
{
columns.Bound(o => o.Id).Title("State/Territory").Width(110);
columns.Bound(o => o.StartKm).Title("Start Km Point").Width(110);
columns.Bound(o => o.EndKm).Title("End Km Point").Width(110);
})
.Pageable()
.ToClientTemplate()
)
</script>

detailExpand: function (e) {
var dataItem = e.sender.dataItem(e.masterRow);
e.detailRow.find(".k-grid").data("kendoGrid").dataSource.data(dataItem.Jurisdictions);
},

Version of Kendo.MvC.dll as reference of project is 2021.2.616
Thanks

Grid

answered on 23 May 2023

1 answer

136 views

different new and edit popup editor for MVC

Can someone please help with the MVC wrapper syntax to accomplish this: https://docs.telerik.com/kendo-ui/knowledge-base/use-different-popup-editor-for-create-update

I would like to specify different template names for new and edit with two different cshtml editor template files

Grid

answered on 23 May 2023

1 answer

191 views

Grid Header doesn't resize correctly

Hi all, I'm having some trouble with grid resizing, see pics below:

Expected:

Results:
The only way around right now is to define .Width(xxx)

I've tried .Width("auto"), Custom css.

No error messages.

This project is an ASP.NET MVC project, and I'm using CDNs.

Grid's Code:

@(Html.Kendo().Grid<PDS.Web.Areas.Assets.Models.EquipmentModel>()
    .Name("EquipmentDashboardGrid")
    .Columns(col =>
    {
        col.Bound(m => m.EquipmentTypeName).Title(AssetManagement.Equipment_Type).Width(150).ClientGroupHeaderTemplate("#=value#").Hidden();
        col.Bound(m => m.SortOrder).Title(AssetManagement.Equipment_SortOrder).Width(135).Filterable(false);
        col.Bound(m => m.IsInstalled).Title(AssetManagement.Equipment_Installed).Width(130).Filterable(false).HtmlAttributes(new { style = "text-align: center" });
        col.Bound(m => m.ExtendedDesc2).Title(AssetManagement.EquipmentDashboard_Equipment).Width(250).Filterable(false);
        col.Bound(m => m.ExtendedDesc3).Title(AssetManagement.Equipment_Details).Width(250).Filterable(false);
        col.Bound(m => m.OpenInspectionCount).Title("Open Faults").Width(140).HtmlAttributes(new { style = "text-align: center" }).Sortable(true);
        col.Bound(m => m.InstalledDate).Title(AssetManagement.Equipment_Installed).Width(130).Filterable(false);
        col.Bound(m => m.ScheduledRemoval).Title(AssetManagement.EquipmentDashboard_ScheduledRemoval).Width(130).Filterable(false);
        col.Bound(m => m.RemovalDate).Title(AssetManagement.Equipment_Removal).Width(130).Filterable(false);
        col.Bound(m => m.LastSavedDateTime).Title(AssetManagement.Equipment_LastSaved).Width(175).Filterable(false).Sortable(true);
        col.Bound(m => m.CreatedDateTime).Title(AssetManagement.Equipment_Created).Width(175).Filterable(false);
        col.Bound(columns => columns.EquipmentTypeNameSort).Width(175).ClientGroupHeaderTemplate("#=value.split('_@@')[1]#").Hidden(true);
        col.Bound(m => m.EquipmentID).Title(AssetManagement.Equipment_ID).Width(145).Hidden(false);
        col.Bound(m => m.EquipmentTypePrefix).Hidden();
    })
    .Sortable()
    .Scrollable()
    .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
    .Resizable(resize => resize.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))

Grid

answered on 22 May 2023

0 answers

120 views

Grid edition InCell with empty edit field

Hi,

Telerik Kendo MVC version (2023.1.425)

With my grid defined in MVC Razor like this :

@(Html.Kendo().Grid(Model.Factures)
	.Name("gridSelection")
	.Columns(c =>
	{
	    c.Bound(f => f.Id).Visible(false);
	    c.BoundDate(f => f.DateDebut);
	    c.BoundDate(f => f.DateFin);
	    c.BoundDate(f => f.DateFacturation);
	    c.Bound(f => f.NumeroActuel);
	})
	.Editable(e => e.Mode(GridEditMode.InCell))
	.Pageable()
	.Navigatable()
	.Scrollable()
	.DataSource(d => d
	    .Ajax()
	    .Batch(true)
	    .ServerOperation(false)
	    .Model(m => m.Id(p => p.Id);
	    .Update(a => a.Action("Sauvegarder", "ModifFactures", GetBindParams("Update")).Data(KendoJSCall.JSGetAntiForgeryToken))
	    .Events(e => e.RequestEnd(KendoJSCall.OnGridCheckResults))
	)
)

I got a grid, data displayed correctly.
But when I click on a cell, it display a empty text field the data not follow. On lost focus (cellClose) I got this error :

Someone have an idea ?

Thanks!

Grid

updated question on 18 May 2023

0 answers

106 views

PageSize coming through as zero

I have a grid with the DataSource property specified as:

.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Events(e=>e.Error("getPoliciesError"))
.Read(read => read.Action("Applications_Read", "MultiSearch")
.Data("getPolicyFilter")
)
)

Initially, I was not specifying PageSize at all, however, when Applications_Read was called, PageSize was always 10 (which is what I wanted) so I assumed that was the default. Then we started getting errors where it was coming through as 0. So I added the PageSize method on the initializer. Now the error where it comes through as 0 is rare, but still happens occasionally.

Has anyone encountered this? For now I can fix it by just adding code to the Applications_Read method saying if it comes through as 0, set to 10, however that will be irritating as we add many more grids with different and possibly customizable page sizes.

Grid

asked on 17 May 2023

1 answer

268 views

Using javascript to popup a webpage withing a grid

Good day all!

trying to pop up to a new webpage from a grid. I want to pop it up in a controlled manner meaning not new window or tab rather just set the parameters of the window; hence I am using a javascript to do the window popup.

Anyways here is how I am building it:

columns.Bound(p => p.Tracking).ClientTemplate(
    "<a style='text-decoration:underline' target='_blank' href='javascript:popWindow('../myHinkleyCust/HLI_Tracking.aspx?Close=1&HideMenu=1&o= #= OrderNumber # ')'>Tracking" + "</a>"
    ).HtmlAttributes(new { @class = "text-center" }).HeaderHtmlAttributes(new { @class = "fw-bold text-center" }).Width(125);

However the script doesn't build correctly and my javascript looks like this:

In other words it breaks at the first '

Any help would be much appreciated :)

Grid

answered on 15 May 2023

1 answer

652 views

The checkboxfor is not working after upgrading the kendo version from 2020.1.114 to 2022.1.119

It is my checkbox code
<div class="row">
                        <div class="form-group">
                            <label class="form-label">
                                <span><b>@ResourceManagerClass.GetResource("CCTV Available", ProjectSession.Employee.LanguageId)</b></span>&nbsp;
                                @Html.Kendo().CheckBoxFor(x => x.IsCCTVAvailable).Checked(true).Enable(false).HtmlAttributes(new { @class = "form-control", @onclick = "ManageCCTVCameraInputBox(event)" }).ToClientTemplate()
                            </label>
                            <br />
                            <label class="form-label">
                                @ResourceManagerClass.GetResource("CCTV Detail", ProjectSession.Employee.LanguageId)
                            </label>
                            <br />
                            @(Html.TextAreaFor(x => x.CCTVDetail, 3, 5, new { @class = "form-control textAreaWith" }))
                        </div>
                    </div>




It is my function

function ManageCCTVCameraInputBox(e) {
        debugger
        if (e != undefined) {
            if (e.currentTarget.checked && e.currentTarget.id == "IsCCTVAvailable") {
                $('#CCTVDetail').prop('disabled', false);
            } else {
                $('#CCTVDetail').prop('disabled', true);
            }
        } else {
            if ('@Model.IsCCTVAvailable' == "True") {
                $('#CCTVDetail').prop('disabled', false);
            }
            else {
            $('#CCTVDetail').prop('disabled', true);
            }

        }
    }

This code is working fine in kendo 2020.1.114 after upgrading the checkboxes are not working so I have added Toclienttemplate() at the end of the textbox after adding Toclienttemplate() it is showing error unexpected error<

So I didn't made any changes in script also but from where it is binding I didn't get it

Can anyone suggest me a answer or any reference link

Thanks

Checkbox

answered on 11 May 2023

2 answers

404 views

Refreshing Telerik Grid with a button after updating the DataSource

Hello folks

I got this one nearly done. I can see that it is hitting my controller in the background but the refresh just keeps spinning :)

@model myHinkleyWebApp.Models.ItemInventory

<div id="table_data"><hr /><div class="row"><div class="col-12 padding-0"><h5>Check Product Availability</h5><div class="k-d-flex k-justify-content-left" style="padding-top: 54px;"><div class="k-w-100 text-left">
                    @{Html.RenderPartial("../Shared/EditorTemplates/Item_Search_Editor");}
                </div><div class="k-w-200 text-left"><input id="btnSubmit" type="submit" style="margin-left: 25px;" value="Submit" class="btn btn-outline-primary" name="submit" /></div></div>

                @(Html.Kendo().Grid<myHinkleyWebApp.Models.ItemInventory>()
    .Name("ItemInventory")
    .Columns(columns => {
        columns.Bound(p => p.Item_no);
        columns.Bound(p => p.Family);
        columns.Bound(p => p.Status);
        columns.Bound(p => p.DNPrice);
        columns.Bound(p => p.MapPrice);
        columns.Bound(p => p.QuantityAvailable);
        columns.Bound(p => p.QuantityConfirmed);
        columns.Bound(p => p.ConfirmedPromiseDate);
        //columns.Bound(p => p.inventory_id).Title("").ClientTemplate("<a href='" + Url.Action("Delete", new { id = "#=inventory_id#", m_id = "#=customer_id#" }) + "'>Delete</a>");
        //columns.Command(command => command.Destroy()).Width(150);
    })
    .ToolBar(tools => tools.Excel())
    //.Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable()
    .Navigatable()
    .Sortable()
    //.Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10)
        .Batch(true)
        .ServerOperation(false)
        .Events(events => events.Error("error_handler"))
    //.Model(model => { model.Id(p => p.inventory_id); model.Field(p => p.inventory_id).DefaultValue(Guid.Empty); model.Field(p => p.customer_id).DefaultValue(Guid.Empty); })
    //.Create("Item_Create_Update", "HLI_Customer_Specific_Inventory", new { CusNo = Model.CusNo })
    //.Read("SearchItems_ByNameOrFamily", "ItemInventory", new {search_phrase = ViewBag.SearchPhrase})
    //.Update("Item_Create_Update", "HLI_Customer_Specific_Inventory", new { CusNo = Model.CusNo })
    //.Destroy("Item_Destroy", "HLI_Customer_Specific_Inventory", new { CusNo = Model.CusNo })
    )
)
            </div><br /><br /></div></div><script>
    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);
        }
    }

    $("#btnSubmit").click(function () {
        var ItemInventory = $("#ItemInventory").data("kendoGrid");
       
        $filter = new Array();
        var ITEM = $("#item_no").val();

        $.ajax({
            type: "POST",
            url: "/ItemInventory/SearchItems_ByNameOrFamily",
            data: { search_phrase: ITEM },
            dataType: "json",
            success: function (result) {
                var ds = new kendo.data.HierarchicalDataSource({
                    data: result
                });

                ItemInventory.setDataSource(ds);
                ItemInventory.read(); 
                ItemInventory.refresh(); 
            }
        });   

        //ItemInventory.dataSource.read();
        
    });

</script>
 
After I click the button the grid is just spinning here is a view of that: 

    
       So really the help I need is with this javascript here: 

$("#btnSubmit").click(function () {
        var ItemInventory = $("#ItemInventory").data("kendoGrid");
       
        $filter = new Array();
        var ITEM = $("#item_no").val();

        $.ajax({
            type: "POST",
            url: "/ItemInventory/SearchItems_ByNameOrFamily",
            data: { search_phrase: ITEM },
            dataType: "json",
            success: function (result) {
                var ds = new kendo.data.HierarchicalDataSource({
                    data: result
                });

                ItemInventory.setDataSource(ds);
                ItemInventory.read(); 
                ItemInventory.refresh(); 
            }
        });   

        //ItemInventory.dataSource.read();
        
    });
To summarize I have a auto complete text box where I am entering an item. Then i want to push the button and refresh my grid which will pass the 
item number and search for it and bring it back down in the grid! 
Any help would be greatly appreciated!