Questions on UI for ASP.NET MVC Forum

1 answer

181 views

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

114 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

91 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

254 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

602 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

373 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!

Anyways here is my front end code here

AutoComplete

Grid

TextBox

answered on 11 May 2023

1 answer

495 views

updated my project to the latest kendo version - cant reference themes and project broken.

Good day,

i Just updated kendo ui mvc project to the latest version currently out yesterday. now its broken.

before upgrade

after upgrade

General Discussions

Grid

Upload

answered on 10 May 2023

1 answer

106 views

Upload Files() config method has no effect

I'm trying to add a previously uploaded file to the list of files of the upload control using .Files() config method. Nothing shows up when I load the page. Am I missing a step? Control is configured for synchronous upload with Multiple set to false.

Upload

answered on 04 May 2023

1 answer

156 views

My Mvc razor DropdownList with templates shows only undefined

Hi

Im struggling with figuring out what is wrong in my code. I have a DropdownList made like this:

@(Html.Kendo().DropDownListFor(model => model.CitizenAppartmentEnrollmentType)
		.Name("booking_CitizenAppartmentEnrollmentTypeDropdown")
		.DataSource(s => { s.Read(r => { r.Action("GetEnrollmentTypeList", "Booking"); }); })
		.DataTextField("EnrollName")
		.DataValueField("EnrollId")
		.Template("<span class=\"booking_EnrollmentTypeDropdownItem\"><span class=\"bookingColorBox\" style=\"background-color:#=data.EnrollColor#;\"></span><span>#=data.EnrollName#</span></span>")
		.ValueTemplate("<span class=\"booking_EnrollmentTypeDropdownItem\"><span class=\"bookingColorBox\" style=\"background-color:#=data.EnrollColor#;\"></span><span>#=data.EnrollName#</span></span>")
		.Height(400)
		.Events(e => { e.Change("booking_Dialog_EnrollmentType_DropdownOnChangeEvent"); })
		.HtmlAttributes(new { style = "width:375px", data_bind = "value:CitizenAppartmentEnrollmentType" })
	)

When I comment out the Template and ValueTemplate lines, the result looks like in the attached image "without Template". And when its not commented out the result becomes like in the other screenshot.

Heres the c# controller being called:

public class BookingController : Controller {
         private GS gs = new GS();
         public ActionResult GetEnrollmentTypeList() {
		if (TempData.ContainsKey("GS")) {
			gs = (GS)TempData["GS"];
			TempData.Keep();
		}

		if (gs.EnrollementTypeDic.ContainsKey(gs.CurrentFloorId)) {
			var enrollTypes = gs.EnrollementTypeDic[gs.CurrentFloorId];

			var booking_CitizenAppartmentEnrollmentTypeDropdown = enrollTypes.Select(x => new {
				EnrollId = x.Id,
				EnrollName = x.Name,
				EnrollColor = x.Color.Remove(1, 2)
			});
			return Json(booking_CitizenAppartmentEnrollmentTypeDropdown, JsonRequestBehavior.AllowGet);
		} 

		return Json(null, JsonRequestBehavior.AllowGet);
	}
}

The Controller 100% surely doesnt call the return Json(null); part, and debugging shows that the data being fed to the return Json, is exactly what i want.

I need the EnrollColor variable for making a small colored box in front of the EnrollName. Thats what the template html is for in my case.

I followed this demo, where the first dropdown with the Categories is very similar to what i need, except I need simply some colored boxes, and not images. But should function just the same. And I also tried #: data.EnrollName # aswell as #= data.EnrollName # .. And if I dont put the .data there, the widget casts an error.

Any help please :)

DropDownList

answered on 04 May 2023

0 answers

232 views

Adding a default CSS class to tables created with Add Table Wizard

Greetings,
We are using the kendo editor for asp.net MVC. I need to apply some custom styling to tables created with the Add Table Wizard. I see that the wizard provides the ability to add a css class to the table. I am wondering if there is a way I could have a css class added automatically anytime a user creates a table with the wizard. I am trying to avoid having the users type in that css class value every time they create a table. It would be ideal if it could happen in the background, but populating the text box on the wizard with the class name would also work.

Any help would be appreciated.

Thanks,
Bob

Editor

asked on 03 May 2023