Telerik Forums
UI for ASP.NET MVC Forum
12 answers
2.8K+ views
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
Anton Mironov
Telerik team
 answered on 21 Dec 2020
1 answer
142 views

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?

 

n/a
Top achievements
Rank 1
 answered on 20 Dec 2020
1 answer
359 views

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

   

Nikolay
Telerik team
 answered on 18 Dec 2020
1 answer
242 views

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>

 

Alex Hajigeorgieva
Telerik team
 answered on 17 Dec 2020
1 answer
110 views

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 ..

Alex Hajigeorgieva
Telerik team
 answered on 17 Dec 2020
5 answers
295 views

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.

Dimitar
Telerik team
 answered on 17 Dec 2020
1 answer
308 views

Hi ,

I am using a Html form inside the Kendo window .But the model values are not binding to the textbox and dropdown controls when I am submitting the form.

Here is my code.

Html.Kendo().Window()
.Name("addressPopup")
.Visible(false).Title(false)
.Scrollable(false)
.Draggable(false)
.Modal(true)
.Content(@<text>
<div id="AddressVerificationModal" style="padding:2% !important">
<h1 class="header-lbl-md-2" style="line-height:1px">Verify information</h1>
<div class="divider-headpopup " style="width:445px">
<span class="divider-headpopup" />
</div>
<br />
<br />
<div class="searchformfld padright" style="width:49%!important">
@Html.TextBoxFor(m => m.FirstName, new { placeholder = " ", autocomplete = "off", onBlur = "ValidateField(event)" })

</div>

<div class="searchformfld " style="width:30%;padding-top:11px">
            @Html.DropDownListFor(m => m.StateCode, new SelectList(States, "StateCode", "StateCode"), new { placeholder = " ", autocomplete = "off" })
            <label for="StateCode" id="lblStateCode">State*</label>
 </div>

 </div></text>).Render();

If I remove the Kendow Window code it is binding the values as expected.

Ivan Danchev
Telerik team
 answered on 16 Dec 2020
8 answers
926 views

I'm seeing an issue where if there are multiple grids on a page they do not load at the same time. One seems to load and then the other, while the other shows the ajax spinner. Here is the code in question:

 <div style="clear: both; padding-top: 10px; ">
        @(Html.Kendo().Grid<SalesSummary>()
                      .Name("totalsGrid")
                      .Columns(columns =>
                      {
                          columns.Bound(c => c.TotalInvoicedSales).Title("Invoiced Sales").Format("{0:c}").HtmlAttributes(new { @class = "money" });
                          columns.Bound(c => c.TotalCalculatedSales).Title("Total Sale").Format("{0:c}").HtmlAttributes(new { @class = "money" });
                          columns.Bound(c => c.NumberOfOrders).Title("# of Orders").Format("{0:0}");
                          columns.Bound(c => c.NumberOfDistinctItems).Title("# Of Unique Items Sold").Format("{0:0}");
                          columns.Bound(c => c.TotalQtyOrdered).Title("Qty Ordered").Format("{0:0}");
                          columns.Bound(c => c.TotalQtyShipped).Title("Qty Shipped").Format("{0:0}");
                      })
                      .DataSource(dataSource => dataSource
                          .Ajax()
                          .Read(read => read.Url(Url.HttpRouteUrl("Default", new { controller = "SalesReps", action = "Sales_GetSalesTotalsData" })).Data("getFilterValuesForTotalsGridRead")))
        )
    </div>

    <div style="width: 100%;">
        <div style="float: left; width: 900px; margin-top: 10px; font-weight: bold; font-size: .9em;">
            Sales Reps:
        </div>
    </div>
    <div style="clear: both; padding-top: 10px; ">
        @(Html.Kendo().Grid<SalesRepSummaryItem>()
                      .Name("grid")
                      .NoRecords()
                      .Sortable()
                      .Columns(columns =>
                      {
                          columns.Bound(c => c.SalesRepFullName).Title("Sales Rep");
                          columns.Bound(c => c.TotalSales).Title("Invoiced Sales").Format("{0:c}").HtmlAttributes(new { @class = "money" }).Width(150);
                          columns.Bound(c => c.CalculatedTotalSales).Title("Total Sales").Format("{0:c}").HtmlAttributes(new { @class = "money" }).Width(150);
                          columns.Bound(c => c.NumberOfOrders).Title("# of Orders").Format("{0:0}");
                          columns.Bound(c => c.NumberOfItems).Title("# Of Items").Format("{0:0}");
                          columns.Bound(c => c.TotalOrdered).Title("Qty Ordered").Format("{0:0}");
                          columns.Bound(c => c.TotalShipped).Title("Qty Shipped").Format("{0:0}");
                      })
                      .DataSource(dataSource => dataSource
                          .Ajax()
                          .Read(read => read.Url(Url.HttpRouteUrl("Default", new { controller = "SalesReps", action = "Sales_GetSalesData" })).Data("getFilterValuesForGridRead")))
        )
    </div>
I'm seeing this on the main load as well as when I attempt to force a rebind:
  function rebindGrids() {
        var grid = $("#totalsGrid").data("kendoGrid");
        grid.dataSource.read();

        grid = $("#grid").data("kendoGrid");
        grid.dataSource.read();
    }

It's not a speed issue, I can see that the second grid does not load until the first finishes. Commenting out the first grid makes the second grid render instantly. With the first grid showing the second does not render until the first grid shows data.

Alex Hajigeorgieva
Telerik team
 answered on 15 Dec 2020
7 answers
560 views

We've built an MVC app using Kendo MVC tools. It runs perfectly in a Windows desktop environment under all major browsers. However, on iOS devices none of our grids appear using Chrome. Using Safari, our grids appear but no scroll bars appear. I've attached images of each. This was captured using BrowserStack which emulates most major devices and browsers.

Please advise on why are grids are not appearing under Chrome and why we're missing scroll bars under Safari. Also, no JavaScript errors are being generated.

Thanks very much.

Denitsa
Telerik team
 answered on 14 Dec 2020
2 answers
784 views

Have a field of a grid with a client template like this.  Includes a "check all " box in the header.

columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' id='gridCheckbox'  onclick='handleClick(this);' value='#= LineItemId #'  #= Selected ? 'checked':'' # class='chkbx' />")
           .HeaderTemplate("<input type='checkbox' id='masterCheckBox' onclick='checkAll(this)'/>").Width(50);

 

I have a button that when clicked needs to grab the value of any checkbox (its value is a number) that is checked in this field,  and put into a list or array. This list should not include the checkbox in the header.  I seen this example but its not quite what im trying to do, but similar idea.  I need a jquery selector to get a list of those checkboxes that are checked and the value attribute put into an array.

BitShift
Top achievements
Rank 1
Veteran
 answered on 11 Dec 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
Rating
ScrollView
ButtonGroup
CheckBoxGroup
Licensing
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
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?