Telerik Forums
UI for ASP.NET MVC Forum
20 answers
349 views

Hi,

Not having much luck using this PivotGrid seems it very undeveloped.

How can i sort the Columns from A to Z?

Thanks,
Lee.

Grace
Top achievements
Rank 1
Veteran
 answered on 15 Nov 2020
12 answers
1.1K+ views

There is a Grid with dynamic columns.The number of columns is not fixed(10-20col). there is horizontal and vertical scrolling

Html structure:

<div id="root">
  <div id="grid-param"> ...html contet...</div>
  <div id="grid"> </div>
</div>

Export:

var grid = $("#grid").data("kendoGrid");
var progress = $.Deferred();
kendo.drawing.drawDOM($("#grid-param"))
 .then(function (header) {
       grid._drawPDF(progress)
 .then(function (foolGrid) {
      foolGrid.children.push(header);
      return kendo.drawing.exportPDF(foolGrid, { margin: { left: '2cm', top: '8cm', right: '2cm', bottom: '2cm' },  allPages: true });})
.done(function (dataURI) {
 kendo.saveAs({
  dataURI: dataURI,
  fileName: name });
  progress.resolve();});
});

 

As a result, a document is formed in which content is superimposed on each other (pic in attach). The top of the Grid displays content from div #grid-param.

how to group content correctly so that there is no overlap?)

kedto ver. 2018.1.221.545

 


Georgi Denchev
Telerik team
 answered on 13 Nov 2020
1 answer
639 views

Hi,

When am trying to load json data to kendo grid am getting above error in chrome console. 

here is my json 

[{"EMPNUMBER":57,"EMPNAME":"Seldon, Brenda","COMPANY":"IT","PROJECTNAME":"Bullhorn P1 Integ","CHARGEDESC":"BizTalk Testing"},{"EMPNUMBER":70,"EMPNAME":"DiSanto, Lisa","COMPANY":"IT","PROJECTNAME":"Employee Time-off Tasks","CHARGEDESC":"Vacation (Personal Holiday) Regular Kelly Only"},{"EMPNUMBER":70,"EMPNAME":"DiSanto, Lisa","COMPANY":"IT","PROJECTNAME":"2020 Production Support","CHARGEDESC":"Production Support"}]

 

here is my design code

@( Html.Kendo().Grid<TimeControlReportEnhancements.Models.TimeControlGrid>()
                .Name("client")
                .Columns(columns =>
                {
                   
                    columns.Bound(p => p.EMPNAME);
                    columns.Bound(p => p.COMPANY).Width(150);
                    columns.Bound(p => p.PROJECTNAME).Width(150);
                    columns.Bound(p => p.CHARGEDESC).Width(150);
                    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
                })
                .ToolBar(toolbar =>
                {
                    toolbar.Create();
                    toolbar.Save();
                })
                .HtmlAttributes(new { style = "height: 550px;" })
                .Editable(editable => editable.Mode(GridEditMode.InCell))
                .Filterable()
                .Pageable()
                .Navigatable()
                .Sortable()
                .Scrollable(scr => scr.Height(550))
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Batch(true)
                    .PageSize(20)
                    .ServerOperation(false)
                    .Events(events => events.Error("error_handler"))
                    .Model(model => model.Id(p => p.EMPNUMBER))
                    .Create("Filter_Multi_Editing_Create", "Home")
                    .Read("GetAllEmployees", "Home")
                    .Update("Filter_Multi_Editing_Update", "Home")
                    .Destroy("Filter_Multi_Editing_Destroy", "Home")
                )
)

Martin
Telerik team
 answered on 13 Nov 2020
1 answer
126 views
Hi, I would like to know if there is a way to get a sql db column  MS_Description as a column name tooltip  from the standard object used to describe a grid element:

columns.Bound(p => p.Country).Title("Country").Visible(true);
Anton Mironov
Telerik team
 answered on 13 Nov 2020
8 answers
327 views

I've just upgraded to version 2020.3.915 of the framework, from version 2020.2.513, and the button badges have broken.

The original code was:-

@(Html.Kendo().Button().Name("reviewButton").Content("Review").Badge(b => b.Value((string)ViewBag.NoToReview).Type("error").Visible((bool)ViewBag.ReviewBadge).Shape(BadgeShape.Circle)).HtmlAttributes(new {style= "margin-right:10px;width:150px;margin-bottom:2px;" ,@class="k-primary"}).Events(e=>e.Click("review")))

This now throws an error:-

ButtonBadgeSettingsBuilder' does not contain a definition for 'Value' and the best extension method overload 'ValueExtensions.Value(HtmlHelper, string)' requires a receiver of type 'HtmlHelper'

I have modified the code to:-

@(Html.Kendo().Button().Name("reviewButton").Content("Review").Badge(b => b.Text((string)ViewBag.NoToReview).Visible((bool)ViewBag.ReviewBadge).Shape(BadgeShape.Circle).ThemeColor(BadgeColor.Warning).Position(BadgePosition.Outside)).HtmlAttributes(new {style= "margin-right:10px;width:150px;margin-bottom:2px;" ,@class="k-primary"}).Events(e=>e.Click("review")))

However the badge colour isn't red (this doesn't seem to change whatever the ThemeColor setting), and the badge placement is within the button, and not on the upper right corner as before.

The documentation and other forum posts mention a button placement option, but this is missing from the intellisense options shown, and the documentation entry for this is now missing.

I need the badges to be red, and overlapping the top-right button corner as before. How can I achieve this?

AP
Top achievements
Rank 1
Iron
Iron
Veteran
 answered on 12 Nov 2020
1 answer
1.3K+ views

how to load external epi data into kendo grid. am getting empty grid using below code. but in api it shows it is returning json data.

here is my code.

@(Html.Kendo().Grid<TimeControlReportEnhancements.Models.TimeControlGrid>()
          .Name("grid")
          .Columns(columns =>
          {
              columns.Bound(p => p.EMPNAME);
              columns.Bound(p => p.COMPANY).Width(150);
              columns.Bound(p => p.PROJECTNAME).Width(150);
              columns.Bound(p => p.CHARGEDESC).Width(150);
              columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
          })
          .ToolBar(tools =>
          {
              tools.Create();
          })
          .Sortable()
          .Pageable()
          .Filterable()
          .DataSource(dataSource =>
              dataSource
                .WebApi()
                .Model(model =>
                {
                    model.Id(p => p.EMPNUMBER);
                })
          .Events(events => events.Error("error_handler"))
          .Read(read => read.Url("https://localhost:44376/api/Home/DBA"))
         
          )

Neli
Telerik team
 answered on 12 Nov 2020
2 answers
372 views

Hello,
i have a variable that get the names and IDs from the selected Rows, so if i select like one Row or more on the first page, and then changed the page, the selected Rows aren't in the variable anymore.

so I'm checking the Variable in the Console and in first page, after selecting few Rows : for every selection I'm pushing the new selected values to old one.

So this is my Grid Widget:

 

    @(Html.Kendo().Grid<WebCalendar_09K.Models.UserViewModel>()
    .Name("gridMitarbeiter")
    .HtmlAttributes(new { style = "height: 100%;width:100%;padding:0px;" })
    .Events(eve =>
    {
        eve.Change("onChange_Grid_Mitarbeiter");
    })
    .Columns(columns =>
    {
        columns.Select().Width(75).HtmlAttributes(new { @class = "checkbox-align" }).HeaderHtmlAttributes(new { @class = "checkbox-align, headerGrid" });
        columns.Bound(c => c.Vorname).HeaderHtmlAttributes(new { @class = "headerGrid" });
        columns.Bound(c => c.Name).HeaderHtmlAttributes(new { @class = "headerGrid" });
        columns.Bound(c => c.Crmusername).HeaderHtmlAttributes(new { @class = "headerGrid" });
    })
    .Scrollable()
    .Sortable()
    .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Multiple)
            .Type(GridSelectionType.Row)
            )
    .Pageable(pageable => pageable
            .Info(true)
            .Input(true)
            .Numeric(false)
            .ButtonCount(5)
            .Responsive(true)
         )
    .ToolBar(t => t.Search())
 
    .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("Mitarbeiter_Read", "User"))
            .PageSize(20)
    )
 
    )

 

and this is the on change Grid_function :

function onChange_Grid_Mitarbeiter(e) {
            Global_Array_Grid_mitarbeiter_Selected = new Array();
            var msInterne = $("#MS_Interne").data("kendoMultiSelect");
            var grid  = $("#gridMitarbeiter").data("kendoGrid");
            var rows = e.sender.select(); // all the selected values from the grid
 
            rows.each(function (e) {
                var dataItem = grid.dataItem(this);
                // the variable i need
                Global_Array_Grid_mitarbeiter_Selected.push(dataItem);
                console.log(Global_Array_Grid_mitarbeiter_Selected);
            });
 
        }

 

so every Time i change the page it starts with no value in rows and push the first row selected from the second page into the array Global_Array_Grid_mitarbeiter_Selected.

So how to change the page without loosing the selection ?

 

Thanks in advance

 

K.Ramadan 

Georgi Denchev
Telerik team
 answered on 11 Nov 2020
5 answers
4.4K+ views

I am developing a server side grid page ,i have googled it and did not find the correct behavior for me,

I need to each page size change dynamically and also the total number be set not via result len because i want to show user  that we have for example 10000 pages but each time send him only 100 when i do so if my page size is 100

               
         .DataSource(dataSource => dataSource
        .Custom()
        .Type("aspnetmvc-ajax")
        .ServerPaging(true)        
        .ServerSorting(true)
        .ServerFiltering(true) 
        .Transport(transport => transport
            
            .Read(read => read.Action("GetTodaysSalesList", "Sales")                              
            .Data("filterData"))

        )
        
        .Schema(schema => schema.Model(model =>
        {
            model.Id(p => p.RowID);
            model.Field(p => p.InvestorID).Editable(true);
            model.Field(p => p.LoanNumber).Editable(false);
            model.Field(p => p.LoanStatus).Editable(false);
            model.Field(p => p.LoanCategory).Editable(false);
            model.Field(p => p.CRBFundedDate).Editable(false);
            model.Field(p => p.NoteDate).Editable(false);
            model.Field(p => p.LoanAmount).Editable(false);
            model.Field(p => p.NetFunding).Editable(false);
            model.Field(p => p.Rate).Editable(false);
            model.Field(p => p.XIRR).Editable(false);
            model.Field(p => p.DateOfSale).Editable(false);
            model.Field(p => p.DaysOutstanding).Editable(false);
            model.Field(p => p.AccruedInterest).Editable(false);
            model.Field(p => p.CRBOriginationFee).Editable(false);
            model.Field(p => p.ImputedInterest).Editable(false);
            model.Field(p => p.Platform).Editable(false);
        }).Data("Data").Total("Total"))          

this controller side i have tried some options

option one:

   var test = _loans.ToDataSourceResult(request);
                test.Total = 1000;
                return   Json(test, JsonRequestBehavior.AllowGet);

 option two

              
                return   Json( new {Data=loans.ToDataSourceResult(request) Total=10}, JsonRequestBehavior.AllowGet);

 

 

the total has no influnce

Alex Hajigeorgieva
Telerik team
 answered on 10 Nov 2020
4 answers
1.3K+ views

Hello friends. My second day with Kendo UI for ASP.NET MVC (newbie questions):

tl;dr version:

This:

@Html.HiddenFor(model => model.ProjectID)
 
... lines ommitted for brievity
 
.ClientFooterTemplate("<div style='text-align:right;color:blue;'><a href='" + Url.Action("Index", "PurchaseInvoice/#= ProjectID #")+"'>#= kendo.format('{0:C}',sum)#</a></div>");

generates this:

<a href="/PurchaseInvoice/[object HTMLInputElement]">$191,449.65</a>

 which shows the amount as a link (great). But what I need to be generated is this:

<a href="/PurchaseInvoice/259">$191,449.65</a>

... where 259 is the ProjectID.

Note that ProjectID is part of the model, but not of the grid's data. That's likely my problem here.

What am I missing? Is there an easier way to do this?

Long version:

@(Html.Kendo().Grid<DataLibrary.ProjectCost>()
    .Name("CostGrid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Month)
            .Width(100)
            .Title("Mois")
            .Hidden();
        columns.Bound(c => c.SupplierName)
            .Width(300)
            .Title("<div style='text-align:left;'>Fournisseur </div>")
            .HtmlAttributes(new { @style = "text-align:left;" })
            .ClientFooterTemplate("<div style='text-align:right;'>TOTAL: </div>");
        columns.Bound(c => c.OrderAmount)
            .Format("{0:C}")
            .Width(100)
            .Title("Commandé")
            .HtmlAttributes(new { @style = "text-align:right;" })
            .ClientGroupHeaderColumnTemplate("#= kendo.format('{0:C}',sum)#")
            .ClientFooterTemplate("<div style='text-align:right;'>#= kendo.format('{0:C}',sum)#</div>");
        columns.Bound(c => c.InvoiceAmount)
            .Format("{0:C}")
            .Width(100)
            .Title("Facturé")
            .HtmlAttributes(new { @style = "text-align:right;" })
            .ClientGroupHeaderColumnTemplate("#= kendo.format('{0:C}',sum)#")
            .ClientFooterTemplate("<div style='text-align:right;color:blue;'><a href='" + Url.Action("Index", "PurchaseInvoice/#= projectID #")+"'>#= kendo.format('{0:C}',sum)#</a></div>");
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Aggregates(aggregates =>
        {
            aggregates.Add(c => c.OrderAmount).Sum();
            aggregates.Add(c => c.InvoiceAmount).Sum();
        })
        .Group(groups =>
        {
            groups.AddDescending(c => c.Month);
        })
        .Read(read => read.Action("CostSummary", "Project", new { ID = Model.projectID }))
    )
    .Events(events => events.DataBound("collapseGroupRows"))
)

 

I've tried many variations:

.ClientFooterTemplate("<div style='text-align:right;color:blue;'>#= kendo.format('{0:C}',sum)#</div>");
.ClientFooterTemplate("<div style='text-align:right;color:blue;'><a href='/PurchaseInvoice?ProjectID=#=projectID#'>#= kendo.format('{0:C}',sum)#</a></div>");
.ClientFooterTemplate("<div style='text-align:right;color:blue;'><a href='/PurchaseInvoice?ProjectID=#=projectID#>#= kendo.format('{0:C}',sum)#</a></div>");
.ClientFooterTemplate("<div style='text-align:right;color:blue;'><a href='/PurchaseInvoice?ProjectID=#=projectID#>#= kendo.format('{0:C}',sum)#</a></div>");
.ClientFooterTemplate(@Html.ActionLink("#= kendo.format('{0:C}',sum)#","Index", "PurchaseInvoice", new { ProjectID = "#= projectID#" }, null).ToHtmlString());
.ClientFooterTemplate(@Html.ActionLink("#= kendo.format('{0:C}',sum)#","Index", "PurchaseInvoice", new { ProjectID = "#=projectID#" }, new { @style = "text-align:right;color:blue;" }).ToHtmlString());
.ClientFooterTemplate(@Html.ActionLink("#= kendo.format('{0:C}',sum)#","Index", "PurchaseInvoice", new { ProjectID = "#= projectID#" }, null ).ToHtmlString());
.ClientFooterTemplate(@Html.ActionLink("#= kendo.format('{0:C}',sum)#","Index", "PurchaseInvoice", new { ProjectID = "#= projectID#" }, null ).ToHtmlString());

 

Perhaps one of these is a (almost) better implementation (none of these work as-is though).

Thanks

Francois
Top achievements
Rank 1
 answered on 10 Nov 2020
3 answers
698 views

hi

I try to show my image instead of the icon of image in viewer.

i use 

.Views(v=>v.List(a=>a.TemplateId("template")))

 

<script id="template" type="text/kendo-ui-template">
<img src="~/Content/UserFiles/Folders/Images/demos-web.png"/>  
</script>

 

bot it dose not show any things.

i upload two image show with template and without template.

thank you.

mehran
Top achievements
Rank 1
 answered on 10 Nov 2020
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
ListView (Mobile)
Pager
Accessibility
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
MediaPlayer
TileLayout
DateInput
Drawer
SplitView
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Template
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
+? more
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?