Telerik Forums
UI for ASP.NET MVC Forum
1 answer
206 views

hi, I have created a grid that works 'fine' and display one line as supposed, 

        @(Html.Kendo().Grid<ESACatalog.Models.tb_Part>()
    .Name("gridPart")
    .Columns(columns => {
        columns.Bound(p => p.PartID).Width(150);
        columns.Bound(p => p.ClassID);
        columns.Bound(p => p.PartListPrice).Width(100).Title("List Price");
        columns.Bound(p => p.PartDesc).Title("Description");
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Get_Part", "Home").Data("getParameter")))
        )

 

I need now to read the value of column ClassID to reuse it so i tried the following code

var grid = $("#gridPart").data("kendoGrid");

grid.bind("change", function(e) {
    var dataItem = grid.dataSource.view()[0];
    if (dataItem) {
        var value = dataItem.columnName;
        console.log(value);
    }
});

but got a message as unassigned

I would really appreciate any help

thanks
Ray

Anton Mironov
Telerik team
 answered on 25 Apr 2023
2 answers
137 views
Have a grid on a 2nd tab of a tabstrip.  When the page loads, the first grid loads fine via an mvc controller method, but when I hit the 2nd tab, the grid isnt calling its DataSource.Read method.  What could I be missing?  Sorry if I cant provide code snippets at the moment,  but in the Dev tools window of the browser I can force the grid on the 2nd tab to load by calling it with javascript.  Its just not databinding initially - something with the tabs?
Anton Mironov
Telerik team
 answered on 25 Apr 2023
0 answers
124 views

Have a common scenario - a Grid that has an MVC controller method for its DataSource read action.  Can someone confirm If Im understanding the capabilities correctly.  I dont supposed I realized that if I used the features on the Grid - I dont need to manually provide UI elements to filter the grid :)  

(1) Having Scrollable() enabled and using the DataSourceRequest with PageSize = N  (not explicitly setting Pageable), I will get the capability to fetch only N records at a time and if using an IQueryable and calling something like myData.ToDataSourceResult(request), where myData is an IQueryable and request is the passed in DataSourceRequest - the result will be a query that is already updated before its actually executed? This is what I normally refer to as paging, but without any page numbers etc.  Just fetching a limited number of records at a time, instead of the whole thing.

(2) If Filterable is ALSO enabled, I do not need seperate UI widgets to get values for filtering the data serverside by modifying a query before its executed, but rather the filters are embeded within the DataSourceRequest and just happens?  I tested this and this seems to be the case.   futher more, this all works with the above, eg getting only N records at a time.

Question
If I have 2 filters applied on my grid, one for a date and one for a name/string, along with PageSize = 50, how does this affect the actual query that gets executed?  Is it applying WHERE conditions first then doing a Take(N) records, or does the Take happen first?

 

Blazor
Top achievements
Rank 1
Iron
 updated question on 25 Apr 2023
0 answers
126 views

I declare a radio button group on the page inside a list-type control (or a @foreach loop). Radio button group is bound to a model property and needs to have its name prefixed with an index like so: "Model[0].PropOne". When I use @Html.Name helper with other controls like a checkbox it works right, but with radio buttons it produces a name like this - Model_0__PropOne. So, looks like it replaces brackets and dots with an underscore. What do I need to do to get it to work?

Nikita
Top achievements
Rank 2
Iron
Iron
 asked on 24 Apr 2023
1 answer
253 views

Hello,

I have kendo TabStrip contain 2 tabs, each tab has kendo Grid with 2 groups and details (layout below). Tab one is active and has layout with expand detail rows but when the tab two is active, the second group and detail rows not expand. Both tabs have the same setting. I want both tabs to expand detail rows when selected. 

Grant Name: xxxx
Project Name: xxxxxx
Project Item: ..........
Project Item: ..........
Project Name: xxxxxx
Project Item: ..........
Project Item: ..........
Project Item: ..........
Project Item: ..........
Project Name: xxxxxx
Grant Name: oooooo
Project Name: xxxxxx
Project Item: ..........
Project Item: ..........
Project Name: xxxxxx
Project Item: ..........
Project Item: ..........
Project Item: ..........
Project Item: ..........
Project Name: xxxxxx

My TabStrip coding

@(Html.Kendo().TabStrip()
        .Name("ReimbusementDetails")
        .Items(x =>
        {                
        x.Add().Text("Submitted")
        .Selected((AuthorizationService.AuthorizeAsync(User, "InternalUser")).Result.Succeeded)
        .Content(
            @<text>
            @(Html.Kendo().Grid<Grants.Models.ProjectReimbursementView>()
                .Name("ReimbursmentSubmitted")
                .Columns(column =>
                {
                    column.Bound(c => c.GrantName).ClientGroupHeaderTemplate("Grant Name: #=value# (Project Count: #=CustomCount(value, aggregates.ProjectName,'ReimbursmentSubmitted')#)").Hidden(true);
                    column.Bound(c => c.ProjectName).ClientGroupHeaderTemplate("Project Name: #=value# (Reimbursement Count: #=count#)").Hidden(true);
                    column.Bound(c => c.InvoiceDate).Title("Invoice Date").Width(130)
                        .ClientTemplate("#if (MultipleCategory == 0)"
                        + "{#<a onclick=\"windowSingleProcess(#=ProjectReimbursementId#)\"><span style='color:blue; cursor:pointer;'>#= kendo.toString(InvoiceDate,'MM/dd/yyyy') #</span></a>"
                        + "#}else"
                        + "{#<a onclick=\"windowMultipleProcess(#=ProjectReimbursementId#)\"><span style='color:blue; cursor:pointer;'>#= kendo.toString(InvoiceDate,'MM/dd/yyyy') #</span></a>"
                        + "#}#");
                    column.Bound(c => c.VendorName).Title("Vendor name");
                    column.Bound(c => c.InvoiceNumber).Title("Invoice #");
                    column.Bound(c => c.GrantFundedTotal).Title("Grant Funds Requested").Width(150).Format("{0:c2}").HtmlAttributes(new { style = "text-align:right!important" });
                    column.Bound(c => c.ContributionFundedTotal).Title("Match").Width(150).Format("{0:c2}").HtmlAttributes(new { style = "text-align:right!important" });
                    column.Bound(c => c.BudgetCategory).Title("Budget Category");
                    column.Bound(c => c.ProcessedDate).Title("Submitted Date").Format("{0:d}").Width(130);
                })
                .Sortable()
                .Scrollable(s => s.Height("auto"))
                .ColumnMenu()
                .Mobile()
                .ToolBar(tool => tool.Excel())
                .Excel(ex => ex
                    .AllPages(true)
                    .Filterable(true)
                    .FileName("Reimbursement Submitted.xlsx")
                    .ProxyURL(Url.Action("ValidationErrorExport", "Application"))
                )               
                .DataSource(ds => ds
                    .Ajax()                    
                    .GroupPaging(true)
                    .Group(g =>
                    {
                        g.Add(x => x.GrantName);
                        g.Add(x => x.ProjectName);
                    })
                    .Aggregates(ag =>
                    {
                        ag.Add(x => x.GrantName).Count();
                        ag.Add(x => x.ProjectName).Count();
                    })
                    .Read(read => read.Action("MyReimbursementSubmitted", "ProjectReimbursement"))
                )
            )
            </text>
        );

        x.Add().Text("In Progress")            
        .Content(
            @<text>
            @(Html.Kendo().Grid<Grants.Models.ProjectReimbursementView>()
                .Name("ReimbursmentInProgress")
                .Columns(column =>
                {
                    column.Bound(c => c.GrantName).ClientGroupHeaderTemplate("Grant Name: #=value# (Project Count: #=CustomCount(value, aggregates.ProjectName,'ReimbursmentInProgress')#)").Hidden(true);
                    column.Bound(c => c.ProjectName).ClientGroupHeaderTemplate("Project Name: #=value# (Reimbursement Count: #=count#)").Hidden(true);
                    column.Bound(c => c.InvoiceDate).Title("Invoice Date").Width(130)
                        .ClientTemplate("#if (MultipleCategory == 0)"
                        + "{#<a onclick=\"windowSingleProcess(#=ProjectReimbursementId#)\"><span style='color:blue; cursor:pointer;'>#= kendo.toString(InvoiceDate,'MM/dd/yyyy') #</span></a>"
                        + "#}else"
                        + "{#<a onclick=\"windowMultipleProcess(#=ProjectReimbursementId#)\"><span style='color:blue; cursor:pointer;'>#= kendo.toString(InvoiceDate,'MM/dd/yyyy') #</span></a>"
                        + "#}#");
                    column.Bound(c => c.VendorName).Title("Vendor name");
                    column.Bound(c => c.InvoiceNumber).Title("Invoice #");
                    column.Bound(c => c.GrantFundedTotal).Title("Grant Funds Requested").Width(150).Format("{0:c2}").HtmlAttributes(new { style = "text-align:right!important" });
                    column.Bound(c => c.ContributionFundedTotal).Title("Match").Width(150).Format("{0:c2}").HtmlAttributes(new { style = "text-align:right!important" });
                    column.Bound(c => c.BudgetCategory).Title("Budget Category");                        
                    column.Bound(c => c.ProcessedDate).Title("Process Date").Format("{0:d}").Width(130);
                })                    
                .Pageable()
                .Sortable()
                .Scrollable(s => s.Height("auto"))
                .ColumnMenu()
                .Mobile()  
                .ToolBar(tool => tool.Excel())
                .Excel(ex => ex
                    .AllPages(true)
                    .Filterable(true)
                    .FileName("Reimbursement In Progress.xlsx")
                    .ProxyURL(Url.Action("ValidationErrorExport", "Application"))
                )
                .Events(ev => ev.DataBound("ExpandProgress"))
                .DataSource(ds => ds
                    .Ajax()                                    
                    .GroupPaging(true)                    
                    .Group(g =>
                    {
                        g.Add(x => x.GrantName);
                        g.Add(x => x.ProjectName);                                
                    }) 
                    .Aggregates(ag =>
                    {                            
                        ag.Add(x => x.GrantName).Count();
                        ag.Add(x => x.ProjectName).Count();
                    })
                    .Read(read => read.Action("MyReimbursementInProgress", "ProjectReimbursement"))
                )
            )
            </text>
        );
        })
    )

function ExpandProgress(e) {        
        grid = $("#ReimbursmentInProgress").data("kendoGrid");
        $(".k-master-row").each(function (index) {
            grid.expandRow(this);
        });        
    }

I have tried with Event DataBound("ExpandProgress") javascript but still not working.

Any advice to achieve this. Thank you.

Anton Mironov
Telerik team
 answered on 19 Apr 2023
1 answer
179 views

Hi guys.

I have a grid with 4 command buttons. I need to align the last one to the right. I try some ways I find on the support furum but I can't obtain my goal. Can you help me? This is my code:

</style>
    .impExcel a { float: right; }
    .impExcel { float: right; }
</style>

then...

            @(
                Html.Kendo().Grid<MCP310.Models.MCP_Detail>()
                .Name("Grid_MCP_Detail")
                .ToolBar(toolbar => {
                    toolbar.Create().HtmlAttributes(new { @class = (Model.idStatoRichiesta > 0 ) ? "k-button-outline-primary  k-state-disabled" : "k-button-outline-primary k-state-default" });
                    toolbar.Save().HtmlAttributes(new { @class = "k-button-outline-primary"});
                    toolbar.Custom().Text("t").IconClass("k-icon k-i-file-excel impExcel").HtmlAttributes(new { @class = "k-button-outline-primary impExcel", @id = "btnImportExcel"});
                })
                .Columns(columns => {
.....

Thanks

Cristian

Cristian
Top achievements
Rank 1
Iron
 answered on 14 Apr 2023
1 answer
661 views

I have the following in a .cshtml file:

                @(Html.Kendo().Grid<TaxCertApp.ViewModels.ViewModel>()
          .Name("FilingFeesGrid")
          .Pageable()
          .Sortable()
          .Scrollable()
          .HtmlAttributes(new { style = "height:500px;" })
          .AutoBind(false)
          .Columns(columns =>
          {
              columns.Bound(s => s.DistributionDate).Format("{0:MM/dd/yyyy}").Width(100).EditorTemplateName("Date");
              columns.Bound(s => s.Disbursed)
                .Format("{0:C2}")
                .EditorTemplateName("Disbursed")
                .Width(100)
                .ClientFooterTemplate("Total: #=sum#")
                .HtmlAttributes(new { style = "text-align: right" })
                .FooterHtmlAttributes(new { style = "text-align: right" });
              columns.Bound(s => s.Received)
                .Format("{0:C2}")
                .EditorTemplateName("Received")
                .Width(100)
                .ClientFooterTemplate("Total: #=sum#")
                .HtmlAttributes(new { style = "text-align: right" })
                .FooterHtmlAttributes(new { style = "text-align: right" });
              columns.Bound(s => s.CHECKNO).Title("Check Number").Width(100);
              columns.Bound(s => s.DESCRIPTION).Title("Description").Width(300);
          })
            .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(10)
            .Aggregates(aggregates =>
            {
                aggregates.Add(p => p.Disbursed).Sum();
                aggregates.Add(p => p.Received).Sum();
            })
            .Read(read => { read.Action("Fees", "Fees").Data("{ ID: " + @Model.ID + "}"); })
            )
                )

 

This generates a grid with 2 columns having sum aggregates.  The format of those 2 columns is currency.  How can I get the sum aggregates to display with the same currency format?  I have included a picture of the rendered grid. 

Question #2: How can I access the two aggregate sum's to display a "difference" number (the Disbursed sum - the Received sum)?

Anton Mironov
Telerik team
 answered on 13 Apr 2023
9 answers
438 views

We have a page that contains a mvc kendo grid. This grid contains a detail template = all working as expected!

Also, on the same page there is a checkbox.

 

In our grid (below), and we want to switch SALES OUT and COST VALUE column groupings based on the checkbox being checked. Does the checkbox have to be a html checkbox or can we leave it as a .net checkbox and do this in the code behind?

I'm new to kendo so any help greatly appreciated. We are trialling it to see if ti fits our requirements.

Thanks Simon

@(Html.Kendo().Grid<Web_AllPFCs_BySMR_v5>()
              .Name("wpsbysmr")
              .Columns(columns =>
              {
                  columns.Bound(c => c.SMRCat).Title("Category").Width(150);
 
                  columns.Group(g => g.Title("Sales Out").Visible(true)
                      .Columns(costvalue =>
                      {
                          costvalue.Bound(c => c.Avg1_Invoice).Width(100).Title("PPU Calendar YTD").Format("{0:£#,##0}");
                          costvalue.Bound(c => c.Avg2_Invoice).Width(100).Title("PPU Calendar PYTD").Format("{0:£#,##0}");
                          costvalue.Bound(c => c.Value1).Width(100).Title("Calendar YTD").Format("{0:£#,##0}");
                          costvalue.Bound(c => c.Value2).Width(100).Title("Calendar PYTD").Format("{0:£#,##0}");
                          costvalue.Bound(c => c.PFCDiffSale).Width(100).Title("Change").Format("{0:£#,##0}");
                          costvalue.Bound(c => c.PFCPercSale).Width(100).Title("Change %").Format("{0:0.0%}");
                      })
                  );
 
                  columns.Group(g => g.Title("Cost Value").Visible(false)
                      .Columns(costvalue =>
                      {
                          costvalue.Bound(c => c.Avg1_Cost).Width(100).Title("PPU Calendar YTD").Format("{0:£#,##0}");
                          costvalue.Bound(c => c.Avg2_Cost).Width(100).Title("PPU Calendar PYTD").Format("{0:£#,##0}");
                          costvalue.Bound(c => c.Cost1).Width(100).Title("Calendar YTD").Format("{0:£#,##0}");
                          costvalue.Bound(c => c.Cost2).Width(100).Title("Calendar PYTD").Format("{0:£#,##0}");
                          costvalue.Bound(c => c.PFCDiffCost).Width(100).Title("Change").Format("{0:£#,##0}");
                          costvalue.Bound(c => c.PFCPercCost).Width(100).Title("Change %").Format("{0:0.0%}");
                      })
                  );
 
              })
              .Scrollable(s => s.Height("auto"))
              .HtmlAttributes(new { style = "max-height:550px !important;" })
              .Pageable(pageable => pageable
                  .Refresh(true)
                  .PageSizes(true)
                  .ButtonCount(15))
              .DataSource(dataSource => dataSource
                  .Ajax()
                  .Read(read => read.Action("WPSBySMR", "Home"))
                  .PageSize(10)
              )
              .Events(e => e.DataBound("wpsbysmr_Databound"))
              .ClientDetailTemplateId("SMRCatDetails")
        )

 

Ryan
Top achievements
Rank 1
Iron
Iron
Iron
 updated answer on 12 Apr 2023
5 answers
335 views
Hello,
i've got some problems with kendo window: i've got a window opened by grid context menu. if i open the window, close and reopen the content of the window is shown smaller than the first time.

i'm using  the 1.9.1 version of jquery and the 2013.2.716 version of kendo min.

why this happens?

thanks a lot
Paolo


Gav
Top achievements
Rank 1
Iron
 answered on 12 Apr 2023
1 answer
113 views

Hi,

Would there be a way to interact with the Rating widget by setting a minimum and maximum value of 1, within a grid?

For example in this way:

columns.Bound(p => p.IsFavorite).Title("Is Favorite?").Width(140).Editable("returnFalse").ClientTemplate(Html.Kendo().Rating()
                 .Name("rating_#=ProductID#")
                 .Min(1)
                 .Max(1)
                 .Label(false)
                 .HtmlAttributes(new { data_bind = "value: IsFavorite" })
                 .Selection("single")
                 .ToClientTemplate().ToHtmlString()
             );

I have tried but when I select the only star it no longer lets me deselect it

Any help would be greatly appreciated

Javier B.

Iva
Telerik team
 answered on 11 Apr 2023
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
ComboBox
Upload
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
Accessibility
ListView (Mobile)
Pager
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
DateInput
MediaPlayer
TileLayout
Drawer
SplitView
Template
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
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
Bohdan
Top achievements
Rank 3
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Elliot
Top achievements
Rank 1
Iron
Iron
Iron
Sunil
Top achievements
Rank 1
Cynthia
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Bohdan
Top achievements
Rank 3
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Elliot
Top achievements
Rank 1
Iron
Iron
Iron
Sunil
Top achievements
Rank 1
Cynthia
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?