Questions on UI for ASP.NET MVC Forum

0 answers

127 views

Hi,

In our grids we are implementing paging. The difficulty is that the rows does not have the same height. So when adjusting pagesize to fit the grid, the grid is out of the view of the browser. When setting pagesize to small we have big white spaces.

Any way to configure this so the pagesize is based on the height of the window?

Roel

Grid

asked on 10 Nov 2021

0 answers

132 views

Need sample code for export excel for all pages in mvc

Hi,

I have one table

Employee

...................................

Id name Path

1 a c:Uploads/abc.txt

2 b c:Uploads/Resume.docx

i am storing files in folder

my requirement is that

I am displaying those records in kendo grid

after clicking path for particular row display that file in popup

I need sample code for this

View

asked on 09 Nov 2021

2 answers

261 views

Populate Grid Records Based upon Toggle button

Hi,

I have one table

Emplpyee

..................

Id Name Active

1 a 1

2 b 0

my requirement is that

i have one toggle button (by default select Yes(1))

based upon that values load grid records

once i change that value to No then display records based upon that

can you please provide me sample code for this one

Switch

answered on 09 Nov 2021

1 answer

227 views

Is there a HighlightFirst option for DropDownList?

The ComboBox control appears to have a configuration called HighlightFirst which supresses the automatic highlighting of the first list item as the user types.

Is there any way of implementing this same logic on the DropDownList control? By default, it appears to highlight / focus on the first option in the list when the user begins to type.

@(Html.Kendo().DropDownList()
        .Name("Sku")
        .DataValueField("Value")
        .DataTextField("Text")
        .//HighlightFirst(false)
        .Filter("contains")
        .AutoBind(false)
        .BindTo(new List<SelectListItem>()
                {
                    new SelectListItem(){ Value = "ZIP100", Text = "ZIP100 - Zip Active Stool | Stock | 400H-550H | Purple Moon	" },
                    new SelectListItem(){ Value = "ZIP101", Text = "ZIP101 - Zip Active Stool | Stock | 400H-550H | Juice Green" },
                    new SelectListItem(){ Value = "ZIP102", Text = "ZIP102 - Zip Active Stool | Stock | 400H-550H | Capri Mid Blue" },
                    new SelectListItem(){ Value = "ZIP103", Text = "ZIP103 - Zip Active Stool | Clearance | 400H-550H | Opal Light Blue" },
                    new SelectListItem(){ Value = "ZIP104", Text = "ZIP104 - Zip Active Stool | Clearance | 400H-550H | Oyster Grey" },
                    new SelectListItem(){ Value = "ZIP105", Text = "ZIP105 - Zip Active Stool | Clearance | 400H-550H | Melon Rush" },
                    new SelectListItem(){ Value = "ZIP106", Text = "ZIP106 - Zip Active Stool | Stock | 400H-550H | Charcoal" },
                    new SelectListItem(){ Value = "ZIP107", Text = "ZIP107 - Zip Active Stool | Clearance | 400H-550H | Capri Blue with NC Whale Seat Pad" },
                    new SelectListItem(){ Value = "ZIP108", Text = "ZIP108 - Zip Active Stool | Clearance | 400H-550H | Juice Green with NC Whale Seat Pad" },
                    new SelectListItem(){ Value = "ZIP109", Text = "ZIP109 - Zip Active Stool | Clearance | 400H-550H | Melon Rush with NC Whale Seat Pad" },
                    new SelectListItem(){ Value = "ZIP110", Text = "ZIP110 - Zip Active Stool | Clearance | 400H-550H | Opal Blue with NC Whale Seat Pad" },
                    new SelectListItem(){ Value = "ZIP111", Text = "ZIP111 - Zip Active Stool | Clearance | 400H-550H | Oyster Grey with NC Whale Seat Pad" },
                    new SelectListItem(){ Value = "ZIP112", Text = "ZIP112 - Zip Active Stool | Clearance | 400H-550H | Purple Moon with NC Whale Seat Pad" }
                })
    )

ComboBox

DropDownList

answered on 04 Nov 2021

1 answer

418 views

How to insert 2 pictures into the HEADER of a RadFlowDocument Word document

Anyone know how to adding 2 images in the header , one on the left and one on the right?

I try setting defaultHeaderParagraph.Properties.TextAlignment.LocalValue = Alignme

nt.Justified; but it does not work

.

both images still align to left.

Thanks in advance.

Editor

answered on 04 Nov 2021

1 answer

94 views

I am unable to display data in Telerik Grid. in asp.net core mvc in VS2019.

Hi All,

Please find the attachment for my project and DB script. Due size issue i am sharing only few files excep ref files. I am displaying data in Home.cshtml. After login youser details are displayed in Home.cshtml page. Added MVC HTML helper tabel and Telerik Grid to display data based on the user login.

But Telerik grid data is not displaying i dont know what is my mistake. Same thing i did in Telerik MVC there it works fine but in core mvc telerik grid is not working as expected.

Data displaying in HTML helper tables but not displaying in Telerik Grid control. I need to submit this test project for client approval please henp me to use telerik grid in Coremvc.

Sample Screens:

Error in ;

Please find the attachemnt for project File and script.

Grid

answered on 04 Nov 2021

2 answers

278 views

kendo grid redirects to API and shows JSON when column title is clicked for sorting

Hi,

I have a Kendo grid on a page that is created using this code in my cshtml file

 @(Html.Kendo().Grid<Entity>()
        .Name("productsGrid")
        .Columns(columns =>
        {
            columns.Bound(schema => schema.Ns).Width(150)
                .Filterable(false).Sortable(false);
            columns.Bound(schema => schema.Name).Title("Entity Name").Width(250);
            columns.Bound(schema => schema.Desc).Title("Description")
                .ClientTemplate("#= preserveDirtyFlag(data, data.Desc) #")
                .Filterable(false).Sortable(false);
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Sortable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .ServerOperation(true)
            .PageSize(100)
            .Model(model =>
            {
                model.Id(entity => entity.Id);
                model.Field(entity => entity.Ns).Editable(false);
                model.Field(entity => entity.Name).Editable(false);
                model.Field(entity => entity.Desc);
            })
            .Read(read => read.Action("GetEntityList", "Products").Data("getQuery"))
            .Events(e => e.RequestStart("onPageChange"))
        )
        .Events(e => e.DataBound("onDataBound"))
        .ClientDetailTemplateId("fieldDescriptions")
)

Everything works perfectly fine on first load.

The pagination works perfectly (have removed the code for that from above). Even the filtering works smoothly. super smooth.

The only issue is with sorting.

---

As the code shows that sorting is enabled on the single column: 'Entity name'

As soon as that column title is clicked in order to sort the data, the browser redirects to a new URL

earlier it was at

/CatalogManager/Descriptions

but after clicking on the 'Entity Name' in order to sort that table, it redirects to:

/CatalogManager/Descriptions/GetEntityList?sortField=Relevancy&sortFieldValue=_score&descriptionsGrid-sort=Name-desc

and then shows the pure JSON output that the GetEntityList controller returns instead of rendering in the grid.

Why does filtering and pagination work well but sorting breaks the page?

---

The amazing thing is, if I remove the '/GetEntityList' from the url manually and just navigate to:

/CatalogManager/Descriptions?sortField=Relevancy&sortFieldValue=_score&descriptionsGrid-sort=Name-desc

Then the table is displayed in its full glory sorted by the required field. So they question is, why does it navigate to the API url and display the raw JSON data in the first place?

Grid

Sortable

answered on 03 Nov 2021

1 answer

178 views

Calculate Measures in a PivotGrid

Hello,

I'm trying to use a pivotgrid where a ratio is calculated, but I can find a way to do it, as the Total is always wrong.

Example : I don't know how to calculate the cell with "?"

| Object 1 | Object 2 | Total Object |

01/01/2021 | 15 | 12 | 0.8 | 15 | 6 | 0.4 | 30 | 18 | ? |

02/01/2021 | 16 | 10 | 0.625| 12 | 6 | 0.5 | 28 | 16 | ? |

Total Date | 31 | 22 | ? | 27 | 12 | ? | 58 | 34 | ? |

Thanks for your help

PivotGrid

answered on 02 Nov 2021

1 answer

225 views

Telerik radcombobox deselect disabled items on OnClientCheckAllChecked

I have a Telerik RadComboBox that is programmatically generated in C#. In the aspx file, I have this JavaScript function which I would like to deselect any disabled comboBox item when the "Check All" choice is selected.

        function OnClientCheckAllChecked(sender, args) {

            var checkedItems = sender.get_checkedItems();

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

                console.log(checkedItems[i].get_text());

                if (checkedItems[i].get_enabled() === false) {

                    console.log("enabled is false for " + i);
                    checkedItems[i].set_checked(false);
                }
                
                console.log("checked is " + checkedItems[i].get_checked());
            }
        }

However, it does not work as intended. The disabled item is still checked after clicking the "Check All".

Here is an image of the description:

ComboBox

General Discussions

answered on 02 Nov 2021

1 answer

157 views

Yaxis step size

Hello

I hvae just started to use line chart and i am using demo exmple but y axis looks very bad

@using Kendo.Mvc.UI;

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

 

<div id="page-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default" style="min-height: 100px;">
                <div class="panel-body index" style="padding: 0px">
                    Todays Totals
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-2">
            <div class="panel panel-default" style="min-height: 500px;">
                <div class="panel-body index" style="padding: 0px">
                    Filters
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="panel panel-default" style="min-height: 500px;">
                <div class="panel-body index" style="padding: 0px">
                    Sales by platform
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="col-lg-12">
                <div class="panel panel-default" style="min-height: 400px;">
                    <div class="panel-body index" style="padding: 0px">
                        <div class="k-content wide">
        
                            @(Html.Kendo().Chart()
     .Name("chart1")
     .Title("Internet Users")
     .Legend(legend => legend
         .Position(ChartLegendPosition.Bottom)
     )
     .Series(series =>
     {
         series.Line(new double[] { 15.7, 16.7, 20, 23.5, 26.6 }).Name("World");
         series.Line(new double[] { 67.96, 68.93, 75, 74, 78 }).Name("United States");
     })
     .CategoryAxis(axis => axis
         .Categories("2005", "2006", "2007", "2008", "2009")
         .MajorGridLines(lines => lines.Visible(false))
     )
     .ValueAxis(axis => axis
         .Numeric().Labels(labels => labels.Format("{0}%"))
     )
)

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="panel panel-default" style="min-height: 270px;">
                    <div class="panel-body index" style="padding: 0px">
                        Grid
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

it looks like this

Chart

answered on 01 Nov 2021