Questions on UI for ASP.NET MVC Forum

3 answers

109 views

Open Upload Dialog when Drag&Drop is used to add files?

Is there a way to open the upload dialog when a user drags and drops files, so that they can keep track of the files being uploaded and their status?

FileManager

answered on 22 Dec 2020

3 answers

1.3K+ views

Customize raw data to export to make it hyperlink in excel file

Hello,

I'm trying when exporting a Grid to excel file to format some columns raw content into hyperlink text.

here is the implementation of my excelExport function:

01.function excelExport(e) {

02. if (!exportFlag) {

03. e.sender.showColumn(3);

04. e.sender.showColumn(4);

05. e.sender.showColumn(5);

06. exportFlag = true;

07.

08. var sheet = e.workbook.sheets[0];

09. var data = this.dataSource.view();

10.

11. for (var i = 0; i < data.length; i++) {

12. sheet.rows[i + 1].cells[3].formula = "=HYPERLINK(" + data[i].LinkExportPdf + ", Export Pdf " + data[i].Id + ")";

13. sheet.rows[i + 1].cells[4].formula = "=HYPERLINK(" + data[i].LinkExportPpt + ", Export Ppt " + data[i].Id + ")";

14. }

15. e.preventDefault();

16.

17. setTimeout(function () {

18. e.sender.saveAsExcel();

19. });

20. } else {

21. e.sender.hideColumn(3);

22. e.sender.hideColumn(4);

23. e.sender.hideColumn(5);

24. exportFlag = false;

25. }

26. }

What i tried to do first is to assign direct the value by changing the cell value which doesn't provide any result, 2nd problem, when debugging the columns 3, 4 and 5 aren't into my sheet object even with the showColumn and when downloading the excel file, like any of the operation above isn't take in consideration.

My Grid set Events like this:

1..Events(e =>

2.{

3. e.DataBound("dataBound");

4. e.ExcelExport("excelExport");

5.})

The excel setting is like this:

1..Excel(excel => excel

2. .FileName("ExcelFileName.xlsx")

3. .AllPages(false)

4. .ProxyURL(Url.Action("BackOfficeExportFunction", "Grid"))

5.)

Thanks in advance for your help !

Grid

answered on 22 Dec 2020

15 answers

826 views

[Solved] add new record selected values are not displaying properly in kendo grid MVC incell mode.

Hi,

I have a kendo MVC grid with incell edit mode.

when i click add new record and in new record row i have a autocomplete , cascading dropdown and normal dropdowns.

when i select values in first column and after move to second column then first column values are disappearing and again when i click on first column then values are showing in first column.

Grid

answered on 22 Dec 2020

1 answer

11.8K+ views

How to bind MVC Kendo Grid databound event?

I am using MVC Kendo UI. I have defined my grid in Razor

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

.Name("Grid")

.Columns(col =>

{

col.Bound(p => p.BatchDetailID)

.ClientTemplate("<input class='chkbox' type='checkbox' value='#=BatchDetailID#' />")

.HeaderTemplate("<input type='checkbox' id='selectAll' />")

.Width(30)

.Sortable(false)

.Filterable(false);

col.Bound(p => p.BatchKey).Title("State");

col.Bound(p => p.OriginalCost).Title("Total Cost");

})

.AutoBind(true)

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Read(read => read

.Action("GetData", "Home", new { batchID = Model.BatchID })))

)

1> I want to bind DataBound event of the grid in document ready function.
but when i do that i get null reference.

$function({

var grid = $("#Grid").data("kendoGrid"); // grid variable is null here

grid.bind("dataBound", function(){

//dosomething here

});

})

2>If i bind the event using the following approach then i have to declare the onDataGridBound function as Global. The Grid cannot access scoped function

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

.Name("Grid")

.Events(x => x.DataBound("onDataGridBound"))

)

is there any way to declare onDataGridBound as scoped function, and grid can still access it?

Grid

answered on 22 Dec 2020

12 answers

2.9K+ views

[Solved] Dynamically update client footer

Hi,

@(Html.Kendo().Grid(Model.Products)

.Name("FabricGrid")

.Columns(columns =>

{

columns.Bound(p => p.Fabric).ClientFooterTemplate("Fabric Count: #=count#");

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

columns.Bound(p => p.UPrice).Format("{0:c}");

columns.Bound(p => p.Qty).Width(120).ClientFooterTemplate("Total :").Format("{0:0.00}");

columns.Bound(p => p.Total).ClientTemplate("#= kendo.format('{0:c}', Qty * UPrice) #").ClientFooterTemplate("#= kendo.format('{0:c}', sum)#");

columns.Command(command => command.Edit()).Width(110);

columns.Command(command => command.Destroy()).Width(110);

})

.Scrollable()

.Sortable()

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

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.Aggregates(aggregates =>

{

aggregates.Add(p => p.Fabric).Count();

aggregates.Add(p => p.Total).Sum();

})

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

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

.Update(update => update.Action("Product_Update", "ShoppingCart"))

.Destroy(destroy => destroy.Action("Product_Delete", "ShoppingCart"))

)

I have the above grid which displays the total price of the order in the grid's footer. The footer total is updated automatically when I delete a row. When I edit a row and change the value in the qty column, the row total column is updated correctly ClientTemplate("#= kendo.format('{0:c}', Qty * UPrice) but the footer total does not change .ClientFooterTemplate("#= kendo.format('{0:c}', sum)#").

Also, how do you justify the column display? I want the numbers to be right justified to they all lineup like in excel.

thanks

Grid

answered on 21 Dec 2020

1 answer

176 views

Selected values not working

I have a controller with code like this

public ActionResult Edit(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Assembly assembly = db.Assemblies.Find(id);
            var assemblyViewModel = new AssemblyViewModel
            {
                AssemblyId = assembly.AssemblyId,
                Description = assembly.Description,
                AssemblyItemMasterIds = db.AssemblyItems
                    .Where(w => w.AssemblyId == assembly.AssemblyId)
                    .Select(s => s.ItemMasterId)
                    .ToList()
            };

            return PartialView(assemblyViewModel);
        }

The view looks like this.

@(Html.Kendo().MultiSelectFor(model => model.AssemblyItemMasterIds)
                    .Name("AssemblyItemMasterIds")
                    .DataTextField("text")
                    .DataValueField("id")
                    .Placeholder("Select Items...")
                    //.AutoBind(false)
                    .DataSource(source => {
                        source.Read(read =>
                        {
                            read.Action("GetItemMasters", "ItemMasters");
                        })
                        .ServerFiltering(true);
                    })
                )

I have validated that the model is populated and that AssemblyItemMasterIds does have a list of the id's that should be selected.

If I click on the dropdown, the selected values populate. Shouldn't they be populating without me having to that?

What am I missing?

MultiSelect

answered on 20 Dec 2020

1 answer

401 views

How to customize column and load list property

Hi,

I have a model like below:

class Foo{

public int id {get; set;}

public string name {get; set;}

public List<int> values {get; set;}

}

I would like to display the model with telerik grid as follow:

Id Name Jan-21 Feb-21 Mar-21

1 name1 10 20 30

2 name2 20 30 40

The Id is mapped to Foo.Id; Name is mapped to Foo.Name; Jan-21, Feb-21, Mar-21 are dynamic generated(in the future it will change) and the value is from the Foo.values.

I checked all the columns' example, telerik seems doesn't support such scenario. The model's field is supposed to be static and not supports List property.

Does anyone have a good idea to accomplish the feature? Many thanks in advance.

Best regards,

Ping

Grid

answered on 18 Dec 2020

1 answer

273 views

GridEditMode.PopUp Template not working for HTML.Kendo().RadioButtonFor

I have a kendo grid which pops up a custom template. All the fields are working correctly except the kendo button. I need it to be checked by default when the page pops up, but that does not happen when I use @Html.RadioButtonFor but it does get to the javascript.

If I use @Html.Kendo().RadioButtonFor it does not get checked by default nor does it hit the javascript.

Is there something not right with the way I am calling the button

<div class="form-group row">
@Html.HiddenFor(model => model.MessageType)
<div class="col-sm-4 k-edit-field">
@Html.RadioButtonFor(model => model.MessageType, new { Checked = "checked", @id = "rad_system" })<span class="system_message">System Outage</span>

</div>
<div class="col-sm-4 k-edit-field">
@Html.RadioButtonFor(model => model.MessageType, new { id = "rad_system_maintenance" })<span class="system_maintenance_message">System Maintenance</span>

</div>
<div class="col-sm-4 k-edit-field ">
@Html.RadioButtonFor(model => model.MessageType, new { @id = "rad_news" })<span class="news_message">News</span>

</div>

</div>

Grid

answered on 17 Dec 2020

1 answer

133 views

First Selected Filter in the MenuGrid

Hello,

I am trying to set "startswith" as a first selected filte instead of "eq".

This my Grid

<div id="gridFirmenSuche_PVIEW" style="height:100%;background-color:pink;">

@(Html.Kendo().Grid<WebCalendar_09K.Models.FirmaViewModel>()

.Name("gridFirmenSuche")

.HtmlAttributes(new {style = "height: 100%;width:100%;padding:0px;"})

.Events(eve =>

{

eve.Change("onChange_Grid_FirmenSuche");

eve.FilterMenuOpen("onfilterMenuInit_Default");

})

.Columns(columns =>

{

columns.Bound(c => c.Firma).HeaderHtmlAttributes(new {@class = "headerGrid"});

columns.Bound(c => c.Firma2).HeaderHtmlAttributes(new {@class = "headerGrid"});

columns.Bound(c => c.Plzz).Title("Plz").HeaderHtmlAttributes(new {@class = "headerGrid"});

columns.Bound(c => c.Ort).HeaderHtmlAttributes(new {@class = "headerGrid"});

})

.Scrollable()

.Sortable()

.Selectable(selectable => selectable

.Mode(GridSelectionMode.Single)

.Type(GridSelectionType.Row)

)

.Pageable(pageable => pageable

.Info(true)

.Input(true)

.Numeric(false)

.ButtonCount(5)

.Responsive(true)

)

.Filterable(ftb => ftb

.Mode(GridFilterMode.Menu)

.Extra(false)

)

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("Read_Firmen", "Firma"))

.PageSize(20)

//.ServerOperation(true)

)

</div>

and this is what i tried to do in the onfilterMenuInit_Default()

i tried this onOpen and onInitialize

function onfilterMenuInit_Default(e) {

e.container

.find("[data-bind='value: filters[0].operator']")

.find("[value=eq]")

.removeAttr("selected");

e.container

.find("[data-bind='value: filters[0].operator']")

.data("kendoDropDownList")

.value("startswith");

e.container

.find("[data-bind='value: filters[0].operator']")

.find("[value=startswith]")

.attr("selected", "selected");

e.container.data("kendoPopup").bind("activate", function (e) {

this.element.find(":kendoFocusable").eq(1).focus();

this.element.find(".k-button.k-primary").css("color", "#ffa500");

});

}

But THIS DID NOT WORK .. I NEED HELP ..

Grid

answered on 17 Dec 2020

5 answers

334 views

select ALL not working for server filtering true

This is very urgent production issue.

I have the below function which is attached to my multiselect 'select' event.

function SelectAllMultiSelect(e) {

var dataItem = this.dataSource.view()[e.item.index()];

var values = this.value();

if (dataItem.Value === "ALL") {

this.value(" ");

} else if (values.indexOf("ALL") !== -1) {

values = $.grep(values, function (value) {

return value !== "ALL";

});

this.value(values);

}

This works fine for controls which don't have server filtering set to true. For the control set to server filtering true, this is not working. It was working in older version 2015 and now, stopped working in 2017. Even if I select a new item, 'ALL' doesn't go away. Please let me know the resolution.

Thanks.

MultiSelect

answered on 17 Dec 2020