Telerik Forums
UI for ASP.NET Core Forum
2 answers
682 views

Hi there,

I have a custom command column in my grid, as follows...

.Columns(columns =>
{
    columns.Bound(b => b.Created_DisplayString);
    columns.Bound(b => b.Closed_DisplayString);
    columns.Command(command => command.Custom("Close or ReOpen").Click("onCloseReOpen"));
})

 

My viewmodel has a (readonly) property that returns either "Close" or "ReOpen" (as appropriate)

public string CloseOrReOpen
{
    get
    {
        return (Closed_DateTime.HasValue ? "ReOpen" : "Close");
    }
}

 

How can I bind the text of the Command button to this property pls. (instead of the current "Close or ReOpen")?

Thx,

Erik

Aleksandar
Telerik team
 answered on 03 May 2021
1 answer
95 views

Hello i have a Kendo core grid that has inline edit mode turned on with create update and destroy. 

What i am trying to do is get the required validator to fire when you create/update and to my understanding you're supposed to use the [Required] attribute on the model that's populating the grid.

The problem is when i do that, my grid doesn't load, instead it immediately get an error saying X field is required and then my grid is left showing nothing in the datasource. 

Note: The controller returns sucessfully

What is the issue?

Grid implementation:

    @(Html.Kendo().Grid<AccessControlsModel>()
        .Name("kgAdmin")
        .Columns(columns =>
        {
            columns.Bound(col => col.PermissionID).Width(50).Hidden(true);
            columns.Bound(col => col.UserID).Width(100);
            columns.Bound(col => col.Initials).Width(50);
            columns.Bound(col => col.Country).Width(50).ClientTemplate("#=Country#");
            columns.Bound(col => col.Admin).Width(50).ClientTemplate("<input type='checkbox' #= Admin ? checked='checked':'' # class='chkbx admin'/>").Editable(@<text> function(e){ return false; }  </text>);
            columns.Bound(col => col.PendingStatus).Width(50).ClientTemplate("<input type='checkbox' #= PendingStatus ? checked='checked':'' # class='chkbx pendingstatus' />").Editable(@<text> function(e){ return false; }  </text>);
            columns.Bound(col => col.BOM).Width(50).ClientTemplate("<input type='checkbox' #= BOM ? checked='checked':'' # class='chkbx bom' />").Editable(@<text> function(e){ return false; }  </text>);
            columns.Bound(col => col.ProcessSheet).Width(50).ClientTemplate("<input type='checkbox' #= ProcessSheet ? checked='checked':'' # class='chkbx processsheet' />").Editable(@<text> function(e){ return false; }  </text>);
            columns.Bound(col => col.Matrix).Width(50).ClientTemplate("<input type='checkbox' #= Matrix ? checked='checked':'' # class='chkbx matrix' />").Editable(@<text> function(e){ return false; }  </text>);
            columns.Bound(col => col.Quality).Width(50).ClientTemplate("<input type='checkbox' #= Quality ? checked='checked':'' # class='chkbx quality' />").Editable(@<text> function(e){ return false; }  </text>);
            columns.Bound(col => col.Process).Width(50).ClientTemplate("<input type='checkbox' #= Process ? checked='checked':'' # class='chkbx process' />").Editable(@<text> function(e){ return false; }  </text>);
            columns.Bound(col => col.Release).Width(50).ClientTemplate("<input type='checkbox' #= Release ? checked='checked':'' # class='chkbx release' />").Editable(@<text> function(e){ return false; }  </text>);
            columns.Bound(col => col.Hold).Width(50).ClientTemplate("<input type='checkbox' #= Hold ? checked='checked':'' # class='chkbx hold' />").Editable(@<text> function(e){ return false; }  </text>);
            columns.Bound(col => col.AddItem).Width(50).ClientTemplate("<input type='checkbox' #= AddItem ? checked='checked':'' # class='chkbx additem' />").Editable(@<text> function(e){ return false; }  </text>);
            columns.Bound(col => col.Reports).Width(50).ClientTemplate("<input type='checkbox' #= Reports ? checked='checked':'' # class='chkbx reports' />").Editable(@<text> function(e){ return false; }  </text>);
            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
        })
        .NoRecords(c => c.Template("<strong>  No data </strong>"))
        .Sortable()
        .Editable(editable =>
        {
            editable.Mode(GridEditMode.InLine);
        })
        .ToolBar(tools =>
        {
            tools.Search().Text("Search all fields...");
            tools.Excel().HtmlAttributes(new { id = "save", @class = "k-button margin-left" });
            tools.Create();
        })
        .Scrollable(c => c.Enabled(true))
        .Resizable(resize => resize.Columns(true))
        .Reorderable(r => r.Columns(true))
        .Height(750)
        .HtmlAttributes(new { style = "width:100%;" })
        .DataSource(dataSource => dataSource
            .WebApi()
            .ServerOperation(false) 
            .Model(model =>
            {
                model.Id(p => p.PermissionID);
                model.Field(p => p.UserID).DefaultValue("JEINC\\");
                model.Field(f => f.Initials);
                model.Field(f => f.Country);         
            })
            .Events(events => {
                events.RequestEnd("GridRequestEnd");
                events.Error("error_handler");
            })
            .Read(read => read.Action("GetGridData", "Admin"))
            .Create(create => create.Action("Create", "Admin"))
            .Update(update => update.Action("Update", "Admin"))
            .Destroy(destroy => destroy.Action("Delete", "Admin", new { Id = "{0}" }))
        )
     )

 

The model:

    public class AccessControlsModel
    {
        public int PermissionID { get; set; }
        [Required]
        public string UserID { get; set; }
        public string Initials { get; set; }
        [UIHint("CountriesDDL")]
        public string Country { get; set; }
        public bool Admin { get; set; }
        public bool PendingStatus { get; set; }
        public bool BOM { get; set; }
        public bool ProcessSheet { get; set; }
        public bool Matrix { get; set; }
        public bool Quality { get; set; }
        public bool Process { get; set; }
        public bool Release { get; set; }
        public bool Hold { get; set; }
        public bool AddItem { get; set; }
        public bool Reports { get; set; }
    }

 

The error (immediately on load of the grid)

 

Thanks in advance!

Tyler

 

Eyup
Telerik team
 answered on 03 May 2021
1 answer
1.1K+ views

Hi,

I am struggling to use core UI wizard with respect to my requirement. What I need from wizard control is to provide navigation (Next, Previous), load partial views and submit data to a form. Following is an example;

 

<form>

Step 1

Partial View 1

Step 2

Partial View 2

Finish (Form submission)

 

 

 

Ivan Danchev
Telerik team
 answered on 03 May 2021
1 answer
2.2K+ views
@(Html.Kendo().Grid<Models.LwNotificationModel>()
    .Name("notifyGridBoard")
    .Columns(columns =>
    {
        columns.Template(@<text></text>).ClientTemplate(
"<input type='checkbox' class='rowCheckBox' />"
).Title("<input type='checkbox' id='selAll' />");
columns.Bound(p => p.EventDate).ClientTemplate(
"#= invalidFilterInElapsedTime(ElapsedTime, EventDate) #"
).Title("DATE").Width(130);
columns.Bound(p => p.Description).ClientTemplate(
"<div style='float:left;text-align:left'>#=Description#</div>"
).Title("UPDATES");
columns.Bound(p => p.Type).Title("TYPE").ClientTemplate(
"#= getType(Type) #"
).Filterable(false).Width(70);
columns.Bound(p => p.ContainerId).Title("CONTAINER");
columns.Bound(p => p.TruckVisitAppointmentNumber).Title("APPT");
columns.Bound(p => p.Notes).Template(@<text></text>).ClientTemplate(
"# if(hasNotes) { #" +
"# if(IsNotesRead) { #" +
"<div><img id='img_#=Gkey#' src='#=getImgPath('icon_note.png')#' onclick='noteView(#=Gkey#)' /><div>" +
"# } else { #" +
"<div><img id='img_#=Gkey#' src='#=getImgPath('icon_note_new.png')#' onclick='noteView(#=Gkey#)' /><div>" +
"# } #" +
"# } else { #" +
"<div><img id='img_#=Gkey#' src='' onclick='noteView(#=Gkey#)' /><div>" +
"# } #"
).Title("NOTE");
})
.ColumnMenu()
.Sortable(sortable => sortable.AllowUnsort(true).SortMode(GridSortMode.MultipleColumn))
.Filterable()
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
.Reorderable(reorder => reorder.Columns(true))
.Events(e => e.DataBound("onDataBound")
.Change("onChange").DataBinding("onDataBinding"))
.Pageable(
pager => pager
.Input(true)
.Numeric(true)
.Info(true)
.PreviousNext(true)
.Refresh(false)
.PageSizes(true)
.ButtonCount(5)
)
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read
.Action("WrapperApptRead", "Notification")
)
.PageSize(20)
.ServerOperation(false)
.Model(model => model.Id(p => p.Gkey))
)
.ToolBar(toolbar =>
{
toolbar.Template(@<text>
        <div id="notifyBoardToolbar" style="display: none;">
            <ul id="notifyGirdMenu">
                <li>
                    <div style="padding-right:4px">
                        <input type='button' class='generalButton' id='btnMsgDel' name='btnMsgDel' onclick='msgDel()' value='Delete' />
                    </div>
                </li>
                <li>
                    <div style="padding-right:4px">
                        <input type='button' class='generalButton' id='btnMsgDelAll' name='btnMsgDelAll' onclick='msgDelAll()' value='Delete All' />
                    </div>
                </li>
                <li>
                    <div style="padding-right:4px">
                        <input type='button' class='generalButton' id='btnAllRead' name='btnAllRead' onclick='msgAllRead()' value='Mark All as Read' />
                    </div>
                </li>
                <li>
                    <div style="padding-right:4px" id="id_menu_filter">
                        <input type='button' class='generalButton' value='Mark as...' />
                    </div>
                    <ul>
                        <li>
                            <a style="text-decoration:none;" onclick="msgRead()">Read</a>
                        </li>
                        <li>
                            <a style="text-decoration:none;" onclick="msgUnread()">Unread</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <div>
                        <input type='button' class='generalButton' id='txtExport' name='txtExport' onclick='exportAppt()' value='Export' />
                    </div>
                </li>
                <li style="width:400px">
                    <div id="catFilter" style="float:right">
                    </div>
                </li>
                <li style="float:right;border-right:0px">
                    <div>
                        <span class="k-icon helpcentericon" role="presentation" style="margin-top: 5px; margin-right: 3px; float: right; border-right: 0px">updatesGrid</span>
                    </div>
                </li>
            </ul>
        </div>
</text>);
})
    )
Nikolay
Telerik team
 answered on 30 Apr 2021
1 answer
252 views

Hi,

I'm using a Donut Chart and would like to specify the Color via expression like the expressionValue and categoryExpression like so:

series
    .Donut(model => model.Count, model => model.Status, model => model.Color)

I've looked via source code and can see that the ChartSeries class does have a Color filed but with no way of specifying it.

Can you please recommend a fix/solution?

PS I am using remote data source.

Nikolay
Telerik team
 answered on 30 Apr 2021
7 answers
1.5K+ views

Hello all,

Following the guidelines https://docs.telerik.com/kendo-ui/knowledge-base/fixed-headers-grid, I managed to create a stuck headers grid.
Nevertheless, I have the following two open points that are related with this.

  • How could we make both headers of columns and custom toolbar fixed?
  • In my scenario, I have set the first column as Sticky.
    Because of this the header of the first columns misses its alignment with the rest header columns.
    Please check Capture2 to get the picture of this.
    Changing Sticky to Lock, the issue is resolved but I would like to keep the first column Sticky because I want the scrollbar-x starting from the first column of my grid. Thus I am searching for a workaround to keep the first column sticky and also keep all columns aligned regardless of sticky setting. 

Best regards,

Sotiris

Sotiris
Top achievements
Rank 1
Veteran
Iron
 answered on 29 Apr 2021
4 answers
1.0K+ views

Our customers like to take data from the grid, and put it in editors like notepad, excel, word or others... 

 

Is there a way to copy the visible, or, all, the grid data to clipboard, as tab separated values? as in the attached picture

 

 

Nikolay
Telerik team
 answered on 28 Apr 2021
4 answers
112 views

I have a Core grid that manages the Sol objects. 

<div class="col-sm-12">
    @(Html.Kendo().Grid(Model)
                    .Name("mySolsGrid")
                    .Columns(columns =>
                    {
                        columns.Bound(c => c.Nom).Width(140);
                        columns.Bound(c => c.Code).Width(190);
                        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);
                    })
                    .ToolBar(
                        toolbar => {
                            toolbar.Create();
                            toolbar.Excel();
                        }
                    )
                    .Editable(editable => editable.Mode(GridEditMode.InLine))
                    .Pageable()
                    .Sortable()
                    .Scrollable(scr=>scr.Height(430))
                    .Filterable()
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(20)
                        .Events(events => events.Error("error_handler"))
                        .Model(model => model.Id(p => p.Id))
                        .Create(update => update.Action("Sols_Create", "Sols"))
                        .Read(read => read.Action("Sols_Read", "Sols"))
                        .Update(update => update.Action("Sols_Update", "Sols"))
                        .Destroy(update => update.Action("Sols_Destroy", "Sols"))
                    )
                    )
</div>

This is my controller: 

[AcceptVerbs("Post")]
public async Task<ActionResult> Sols_CreateAsync([DataSourceRequest] DataSourceRequest request, SolDTO solDto)
{
    SolDTO idOnly = solDto;
    if (solDto != null && ModelState.IsValid)
    {
        idOnly = await _solService.CreateAsync(solDto);               
    }
 
    return Json(new[] { idOnly }.ToDataSourceResult(request, ModelState));
}

this is my Service returning object:

public async Task<SolDTO> CreateAsync(SolDTO solDto)
{
    var sol = _mapper.Map<Sol>(solDto);
    await _userService.SetCreatedByCurrentUserNowAsync(sol);
 
    sol = await _repository.AddAsync(sol);
    var dto = _mapper.Map<SolDTO>(sol);
    return dto;
}

I return here the ID that is not 0. However each time I add a new object (i click on update button) it calls the Create function one more time. First call once, second twice etc.

Does the Async method have something to do with that? 

Georgi Denchev
Telerik team
 answered on 27 Apr 2021
1 answer
144 views

what is that

source = Regex.Replace(source, @"\$\(document\)\.on\(""kendoReady"",", "$(document).ready(", RegexOptions.Multiline);

 

in the ASP.NET Core Examples code?

Should I understand that all the document.on('kendoReady' in fact should not be used, and instead "document.Ready" should be used ?

How a developer that usually copies only parts of examples should guess that hack?

 

Neli
Telerik team
 answered on 27 Apr 2021
1 answer
153 views

I try to implement a simple databinding in the Spreadseet, in an ASP.NETCore MVC application.

I read this article, "Specific behavior"

There it says in the first point : "Column headers are inferred from the data item fields. Configure the column headers and ordering by using the sheet setDataSource method."

The link on setDataSource goes to DataSource method of the jQuery (?!) component ...I didn't find any setDataSource in exemple code from github, there is a DataSource method, however it does not work locally...

please bring some clearly on how to bind the datasource with a simpler example maybe?

I can put my example here, I just try to bind to a datasource to display a "name" and "id", but it does not work, it reads the data from the server, but does not display that json collection that I return in the sheet. 

001.        <div class="row">
002.            <div class="col-sm-12">
003.                <div id="example">
004.                    <script src="https://kendo.cdn.telerik.com/2021.1.330/js/jszip.min.js"></script>
005. 
006.                    <div class="configurator">
007.                        <div class="header">Configurator</div>
008.                        <div class="box-col">
009.                            <h4>Save data changes</h4>
010.                            <ul class="options">
011.                                <li>
012.                                    <button id="save">Save changes</button>
013.                                    <button id="cancel">Cancel changes</button>
014.                                </li>
015.                            </ul>
016.                        </div>
017.                    </div>
018. 
019.                    @(Html.Kendo().Spreadsheet()
020.    .Name("spreadsheet")
021.    .HtmlAttributes(new { style = "width:100%" })
022.    .Toolbar(false)
023.    .Sheetsbar(false)
024.    .Events(e => e
025.        .DataBinding("onDataBinding")
026.        .DataBound("onDataBound")
027.    )
028.    .Excel(excel => excel
029.        .ProxyURL(Url.Action("Index_Save", "Entreprises"))
030.    )
031.    .Pdf(pdf => pdf
032.        .ProxyURL(Url.Action("Index_Save", "Entreprises"))
033.    )
034.    .Sheets(sheets =>
035.    {
036.        sheets.Add()
037.            .Name("Products")
038.            .DataSource<EntrepriseDTO>(ds => ds
039.                .Custom()
040.                .Batch(true)
041.                .Transport(t => t
042.                    .Read("onRead")
043.                    .Submit("onSubmit")
044.                )
045.                .Events(e => e.Change("onChange"))
046.                .Schema(s => s
047.                    .Model(m =>
048.                    {
049.                        m.Id(p => p.Id);
050.                    })
051.                )
052.            )
053.            .Columns(columns =>
054.            {
055.                columns.Add().Width(100);
056.                columns.Add().Width(415);
057.                columns.Add().Width(145);
058.                columns.Add().Width(145);
059.                columns.Add().Width(145);
060.                columns.Add().Width(145);
061.            })
062.            .Rows(rows =>
063.            {
064.                rows.Add().Height(40).Cells(cells =>
065.                {
066.                    cells.Add()
067.                        .Bold(true)
068.                        .Background("#9c27b0")
069.                        .TextAlign(SpreadsheetTextAlign.Center)
070.                        .Color("white");
071. 
072.                    cells.Add()
073.                        .Bold(true)
074.                        .Background("#9c27b0")
075.                        .TextAlign(SpreadsheetTextAlign.Center)
076.                        .Color("white");
077. 
078.                    cells.Add()
079.                        .Bold(true)
080.                        .Background("#9c27b0")
081.                        .TextAlign(SpreadsheetTextAlign.Center)
082.                        .Color("white");
083. 
084.                    cells.Add()
085.                        .Bold(true)
086.                        .Background("#9c27b0")
087.                        .TextAlign(SpreadsheetTextAlign.Center)
088.                        .Color("white");
089. 
090.                    cells.Add()
091.                        .Bold(true)
092.                        .Background("#9c27b0")
093.                        .TextAlign(SpreadsheetTextAlign.Center)
094.                        .Color("white");
095. 
096.                    cells.Add()
097.                        .Bold(true)
098.                        .Background("#9c27b0")
099.                        .TextAlign(SpreadsheetTextAlign.Center)
100.                        .Color("white");
101.                });
102.            });
103.    })
104.)
105.                </div>
106.            </div>
107.        </div>
Neli
Telerik team
 answered on 27 Apr 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?