Telerik Forums
UI for ASP.NET MVC Forum
2 answers
244 views

This is my Model bound view which works. 

What I need to be able to do is select a row from this grid and get its id, the id is in the vaultNidurstodur class.

From what I have gathered is that I need to use ajax, when I change from server to ajax I just get an empty grid.

How would I go about changing this to ajax ?

 

@model IEnumerable<VaultLeitarvefur.Models.VaultNidurstodur>
    <div class="col-xs-1">
        @(Html.Kendo().Grid<VaultLeitarvefur.Models.VaultNidurstodur>(Model)
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Verkefni).Title(VaultLeitarvefur.Models.VaultNidurstodur.Key01).Width(150);
        columns.Bound(p => p.Verkefnisnumer).Title(VaultLeitarvefur.Models.VaultNidurstodur.Key02).Width(100);
        columns.Bound(p => p.NanariStadsetning).Title(VaultLeitarvefur.Models.VaultNidurstodur.Key03).Width(100);
        columns.Bound(p => p.EfniTeikningar).Title(VaultLeitarvefur.Models.VaultNidurstodur.Key04).Width(100); ;
        columns.Bound(p => p.Teikninganumer).Title(VaultLeitarvefur.Models.VaultNidurstodur.Key08).Width(100); ;
        columns.Bound(p => p.Utgafa).Title(VaultLeitarvefur.Models.VaultNidurstodur.Key13).Width(100); ;
        columns.Bound(p => p.DagsetningUtgafu).Title(VaultLeitarvefur.Models.VaultNidurstodur.Key14).Format("{0:dd/MM/yyyy}").Width(100); ;
        //columns.Bound(p => p.file.Name).Filterable(false);
        columns.Bound(p => p.Id).Filterable(false).Visible(false);
        columns.Bound(p => p.File.Name).Title("Heiti").Width(100); ;
        columns.Bound(p => p.File.ModDate).Format("{0:dd/MM/yyyy}").Title("Breytingardags").Width(100); ;
    })
    .Events(events =>
              events.Change("row_change") // handle the "change" event
          )
    .DataSource(dataSource => dataSource
        .Server()
        .PageSize(40)
        .Model(model => model.Id(p => p.Id))
    )
    .Selectable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:750px;width:1800px;" })
        )
    </div>

 

I have a controler action

 

        public ActionResult Index()
        {
            List<VaultNidurstodur> returnList = CacheList();

            return View(returnList);
        }

that finds and returns a list of results.

Regards,

Emil

 

Emil
Top achievements
Rank 1
 answered on 20 Apr 2016
1 answer
256 views

Here is the example.

I need 1,2,3 step tab strip validation.

http://demos.telerik.com/aspnet-ajax/tabstrip/examples/application-scenarios/wizard/defaultcs.aspx

Dimiter Madjarov
Telerik team
 answered on 20 Apr 2016
2 answers
643 views

We are using SignalR binding within our grids to display column information. One thing we would like to do is show custom markup such as a web video. How would we go about displaying a video or custom markup within a Kendo Grid Column? Specifically in the code columns.Bound(p => p.Message) below?

I'm thinking I may need to use a client template, but so far I haven't been able to get it to work.

@(Html.Kendo().Grid<DSTDBContext.Models.Core.Notification>()
 .Name("NotificationHomeGrid")
.HtmlAttributes(new { style = "height: 99%;" })
.Scrollable(o => o.Height("height: 100%;"))      
.Resizable(resizable => resizable.Columns(true))
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.Sortable(sort => sort.SortMode(GridSortMode.MultipleColumn))
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable(pageable => pageable
.Refresh(true)
.Enabled(false)
.PageSizes(false))
.Columns(columns =>
{
columns.Bound(p => p.Id)
.Title("Actions")
.Width(65)
.Filterable(false)
.Sortable(false)
.ClientTemplate("<i class=\"fa fa-exclamation-circle fa-lg\"></i>");
columns.Bound(p => p.NotificationDate)
.Title("Date")
.Width(250)
.Filterable(false)
.Sortable(false)
.ClientTemplate("");

columns.Bound(p => p.Message)
.Title("Notification")
.Width(300)
.Sortable(true)
.Filterable(false);
})

.DataSource(dataSource => dataSource
.SignalR()
.AutoSync(true)
.Events(events => events.Push("onPush"))
.Sort(s => s.Add("CreatedAt").Descending())
.Transport(tr => tr
.Promise("notifyHubStart")
.Hub("notifyHub")
.Client(c => c
.Read("Read")
.Update("Update")
.Create("Create"))
.Server(s => s
.Read("Read")
.Update("Update")
.Create("Create")))
.Schema(schema => schema
.Model(model =>
{
model.Id(p => p.Id);
model.Field("NotificationDate", typeof (DateTime));
model.Field(p => p.Message);
}
)
)
)
)

Milena
Telerik team
 answered on 20 Apr 2016
1 answer
176 views

Sample from RegistrationModel

1.public int Status      {get; set;}
2.public string Batteries    {get; set;}   
3.public List<Batteries> BatteriesList     {get; set;}

    

 

Sample from Grid

1..Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("EditRegistration"))

 

Sample from popup editor template

01.<h2>Batteries</h2>
02.@{
03.   if(Model.BatteriesList != null)
04.   {
05.    <ul>
06.        @foreach(var x in Model.BatteriesList)
07.        {
08.        <li>x.Selection</li>
09.        }
10.    </ul>
11.   }
12.}

 

  • Model.BatteriesList is always null when the popup renders on-screen.
  • I know the BatteriesList is filled with data.
  • The other fields in my Editor Template show data.
  • Not sure what I am missing here.

Can you assist?

 

 

 

 

 

 

 

 

 

           

Dimiter Madjarov
Telerik team
 answered on 20 Apr 2016
2 answers
368 views

Hello,

I want to use Datasources' schema parse but i cant find any where how it use.

Ivan Danchev
Telerik team
 answered on 20 Apr 2016
1 answer
278 views
I'm using Kendo grid in a MVC project. The first column is a checkbox which defines by ClientTemplate:

    .Columns(columns =>
        {
            columns.Bound(c => c.Checked).ClientTemplate(@"<input type='checkbox' class='checkbox' />").Width(50).Title("");
            columns.Bound(c => c.Id).Hidden();
            columns.Bound(c => c.FirstName);
            columns.Bound(c => c.LastName);
            columns.Bound(c => c.Company);  
        })
        
What I want to have is: before click the header, it looks like the 1st screen shot. then make changes to the checkbox, click the header again, it will sort the row by the checkbox status, see screen shot 2.

I tried to set the 1st column sortable, but all others not sortable. Still not works. I think it is because when the data binds to the grid, c.Checked is always false. Now, if we click the checkbox, it does not change the value of that. That's why the sort does not work for this column.

How to make this work?


Thanks

Konstantin Dikov
Telerik team
 answered on 19 Apr 2016
2 answers
1.0K+ views

I am getting the error:  JavaScript runtime error: Unable to get property 'xxx' of undefined or null reference.

This occurs when I click the "Add New Record" in my Kendo grid.

Does this have something to do with the way the model in setup?

I was able to add a record previously when my data record was more flattened out.

Please advise.

 

My grid is setup as:

@(Html.Kendo().Grid<MyTest.Models.PersonModel>()
    .Name("myGrid")
    .Columns(col =>
    {
        col.Bound(x => x.Person.ID);
        col.Bound(x => x.Person.Field1);
        col.Bound(x => x.Person.Field2);
        col.Bound(x => x.Person.Field3);
        col.Command(x => {
            x.Custom("Extra Options").Click("showExtraOptions");
            x.Destroy();
        });
    })
    .ToolBar(x =>
    {
        x.Create();
        x.Save();
    })
    .Sortable()
    .Editable(x => x.Mode(GridEditMode.InCell))
    .Navigatable()
    .Scrollable(x => x.Height("auto"))
    .Filterable(x => x
        .Extra(false)
        .Mode(GridFilterMode.Menu)
        .Operators(op => op
            .ForString(str => str.Clear()
                .Contains("Contains")
                .StartsWith("Starts with")
                .IsEqualTo("Is equal to")
            )
        )
    )
    .Pageable(p => p
                .Refresh(true)
                .PageSizes(true)
                .ButtonCount(5))
    .DataSource(ds => ds
        .Ajax()
        .ServerOperation(false) // Paging, sorting, filtering and grouping will be done client-side
        .Batch(true)
        .PageSize(20)
        .Model(m =>
            {
                m.Id(x => x.Person.ID);
            })
        .Read(r => r.Action("GetPerson", "Home"))
        .Create(x => x.Action("CreatePerson", "Home"))
        .Destroy(x => x.Action("DeletePerson", "Home"))
        .Update(x => x.Action("UpdatePerson", "Home"))
    )
)

 

My model is:

public class PersonModel
{
    public My_Person Person{ get; set; }
    public List<Person_Options> PersonOptions { get; set; }
}
 
public class My_Person
{
    public string ID{ get; set; }
    public string Field1 { get; set; }
    public string Field2 { get; set; }
    public string Field3 { get; set; }
}

 

Jim
Top achievements
Rank 1
 answered on 19 Apr 2016
1 answer
266 views

I want export information from a Grid mvc to PDF without the tool bar but with the Client FooterTemplate, because, I  have the total amount about all rows  here

this is mi full code

 

<link href="~/Content/kendo/2016.1.112/kendo.common-material.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2016.1.112/kendo.material.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script>
<script src="~/Scripts/kendo/2016.1.112/jquery.min.js"></script>
<script src="~/Scripts/kendo/2016.1.112/kendo.all.min.js"></script>
<script src="~/Scripts/kendo/2016.1.112/kendo.aspnetmvc.min.js"></script>

<style>
    #grid .k-grid-content {
        height: 283px !important;
    }

    #grid > div.k-grid-footer > div > table > tbody > tr > td:nth-child(6) {
        text-align: right;
    }

    #grid > div.k-grid-footer > div > table > tbody > tr > td:nth-child(7) {
        text-align: right;
    }

    /*
        Use the DejaVu Sans font for display and embedding in the PDF file.
        The standard PDF fonts have no support for Unicode characters.
    */
    .k-grid {
        font-family: "DejaVu Sans", "Arial", sans-serif;
    }

    /* Hide the Grid header during export */ 
    /*.k-pdf-export .k-grid-toolbar,
    .k-pdf-export .k-pager-wrap*/
    .k-pdf-export .k-grid-toolbar
    {
        display: none;
    }
    
</style>
@{
    Layout = null;
}

<div id="transactions">
    @(Html.Kendo().Grid<Account.ViewModels.AccountManagement.AccountingViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.CompanyName);
        columns.Bound(p => p.ContractDescription);
        columns.Bound(p => p.ConceptType);
        columns.Bound(p => p.MovementDate).Title("Date").Format("{0:MMMM dd yyyy}");
        columns.Bound(p => p.Billing).Title("Invoice Number");
        columns.Bound(p => p.PaidFlag).Title("Status").ClientFooterTemplate("Total");
        columns.Bound(p => p.Paid).Title("Amount").Format("{0:c}").HtmlAttributes(new { style = "text-align:right" })
        .ClientFooterTemplate("#= kendo.format('{0:c}', sum) #");
    })
    .ToolBar(tools =>
    {
        tools.Excel();
        tools.Pdf();
    })
    .Excel(excel => excel.FileName("Transaction.xlsx").Filterable(true).ProxyURL(Url.Action("ExcelExportTransactions", "Accounting")))
    .Pdf(pdf=>pdf.AllPages()
    .FileName("Transactions.pdf")
    .Margin(0,1,100,1)
    .ProxyURL(Url.Action("PdfExportTransactions", "Accounting")))
    .Sortable()
    .Scrollable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Sort(sort => sort.Add("CompanyName").Ascending())
        .ServerOperation(true)
        .Model(model => model.Id(p => p.MovementID))
                .Read(read => read.Action("ReadTransactions", "Accounting"))
        .Aggregates(a => { a.Add(p => p.Paid).Sum(); })


     )
    )
</div>

Radoslav
Telerik team
 answered on 19 Apr 2016
1 answer
158 views

 

Hi,

 

Is there any telerik control for live tile for MVC ? There is one for ASP.Net but I was hoping to get one for MVC. If not, any ideas on what Telerik control I can use and try getting same behavior ?

Rumen
Telerik team
 answered on 19 Apr 2016
2 answers
538 views
What's the difference between kendo.common-bootstrap.core.min.css and kendo.common-bootstrap.min.css?  

Documentation shows to get Bootstrap 3 to work with Kendo you need to include kendo.common-bootstrap.min.css and kendo.bootstrap.min.css as described via http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/using-kendo-with-twitter-bootstrap

Thanks,
Antony
Top achievements
Rank 1
Iron
 answered on 19 Apr 2016
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
Dialog
MultiColumnComboBox
DropDownTree
Checkbox
Slider
Switch
Notification
Accessibility
ListView (Mobile)
Pager
Security
ColorPicker
DateRangePicker
Wizard
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
SmartPasteButton
PromptBox
SegmentedControl
LLM Kit
+? more
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?