Telerik Forums
UI for ASP.NET Core Forum
5 answers
1.2K+ views
How to put kendo color picker inside kendo grid cell. And how to change cell color after selection of color from color picker.?
Tsvetomir
Telerik team
 answered on 05 Mar 2019
1 answer
1.7K+ views

I am trying to add a CSS class to a window object that is created when the popup is initialized for editing in a grid component but the class isn't being added to the window. Am I missing something here?

01.@(Html.Kendo().Grid<NotificationSystem.Web.Models.CategoryViewModel>()
02.                  .Name("categories")
03.                  .Columns(columns =>
04.                  {
05.                      columns.Command(command =>
06.                      {
07.                          command.Destroy().TemplateId("categories_delete");
08.                      }).Width(80);
09.                      columns.Bound(c => c.Name);
10.                      columns.Bound(c => c.Description);
11.                      columns.Bound(c => c.CreatedBy);
12.                      columns.Bound(c => c.Created);
13.                      columns.Command(command =>
14.                      {
15.                          command.Edit().TemplateId("categories_update");
16.                      }).Width(80);
17.                  })
18.                  .Scrollable()
19.                  .Sortable()
20.                  .Pageable(pageable => pageable
21.                      .Refresh(true)
22.                      .PageSizes(true)
23.                      .ButtonCount(5))
24.                  .NoRecords(true)
25.                  .Editable(editable =>
26.                  {
27.                      editable.Mode(GridEditMode.PopUp);
28.                      editable.TemplateName("CategoryEditor");
29.                      editable.Window(window =>
30.                      {
31.                          window.HtmlAttributes(new
32.                          {
33.                              @class = "k-window-lg"
34.                          });
35.                      });
36.                  })
37.                  .DataSource(dataSource => dataSource
38.                      .Ajax()
39.                      .PageSize(20)
40.                      .ServerOperation(false)
41.                      .Model(model => model.Id(m => m.Id))
42.                      .Create(create => create.Action("Create", "Categories"))
43.                      .Read(read => read.Action("Read", "Categories"))
44.                      .Update(update => update.Action("Update", "Categories"))
45.                      .Destroy(destroy => destroy.Action("Delete", "Categories"))
46.                  )
47.                  .Deferred()
48.                  )
Georgi
Telerik team
 answered on 05 Mar 2019
1 answer
84 views

Hello,

 

I'have a grid and the Calendar and TimePicker looks verry old, like it doens't have a bootstrap theme.

 

Can you please help me ? It's urgent we have to finish the project asap.

 

Here is the code:

 

@(Html.Kendo().Grid<OverTimeKendo.Models.OverTime>
                                                ().Name("OverTime")
                                                .Selectable()
                                                .Columns
                                                (columns =>
                                                {
                                                    columns.Bound(c => c.Id).Hidden(true);
                                                    columns.Bound(c => c.RecordDate);
                                                    columns.Bound(c => c.TimeFrom);
                                                    columns.Bound(c => c.TimeTo);
                                                    columns.Bound(c => c.NumberOfHours);
                                                    columns.Bound(c => c.OvertimeReason);
                                                    columns.Command(command => { command.Edit(); }).Width(100);
                                                    columns.Command(command => { command.Destroy(); }).Width(100);

                                                })
                                                .ToolBar(toolbar =>
                                                {
                                                    toolbar.Create();

                                                })
                                .Editable(editable => editable.Mode(GridEditMode.InLine))
                                    .Pageable(pageable =>
                                    {
                                        pageable.Refresh(true);
                                        pageable.PageSizes(true);
                                    })
                                       .Sortable()
                                .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .Model(model =>
                                    {
                                        model.Id(p => p.Id);
                                        model.Field(p => p.Id).Editable(false);

                                    })

                                    .Read(read => read.Action("Read_Overtime", "OverTimes"))
                                    .Create(create => create.Action("Add_Overtime", "OverTimes"))
                                    .Update(update => update.Action("Update_Overtime", "OverTimes"))
                                    .Destroy(destroy => destroy.Action("Destroy_Overtime", "OverTimes"))

                                                )
)

 

 

Tsvetina
Telerik team
 answered on 05 Mar 2019
5 answers
118 views

I am trying to use a custom command but its not working it refuses to work in a editorfortemplate of the main grid but it should work without issues. But it brakes the popup and does not load can someone help as to why please.

Basically I am wanting three fields in the inline popup name, start time,end time and duration from my activity lines model.

 

@model FuelActivityTrackerDal.ViewModels.ActivityEditViewModal
  
<style>
    numberCircle {
        border-radius: 50%;
        behavior: url(PIE.htc);
        /* remove if you don't care about IE8 */
        width: 36px;
        height: 36px;
        padding: 8px;
        background: #fff;
        border: 2px solid #666;
        color: #666;
        text-align: center;
        font: 60px Arial, sans-serif;
    }
</style>
<div class="container py-5">
    <div class="row">
        <div class="col-md-10 mx-auto">
            <form>
                <div class="form-group row">
                    <div class="col-sm-9">
                        <label for="inputFirstname">Activty Name</label>
                        <input type="text" class="form-control" id="inputFirstname" placeholder="Activity name">
                    </div>
                </div>
                <div class="form-group row">
 
                    <div class="col-sm-3">
                        <label for="inputLastname" class="form-control">Activity Start Date</label>
                        @Html.Kendo().DateTimePickerFor(model => model.ActivityDate)
                    </div>
                    <div class="col-sm-3">
                        <label for="inputLastname" class="form-control">Activity End Date</label>
                        @Html.Kendo().DateTimePickerFor(model => model.ActivityEndDate)
                    </div>
 
                </div>
                <div class="form-group row">
 
                    <div class="col-sm-3">
                        <label for="inputLastname" class="form-control">Location</label>
                        @foreach (var item in (SelectList)ViewBag.Location)
                        {
                            @Html.RadioButtonFor(model => model.OnSite, item.Value, false)
                            <label class="control-label">@item.Text</label>
                        }
                    </div>
 
                </div>
                <div class="form-group row">
                    <div class="col-md-10">
                        <label for="inputLastname" class="form-control">Description</label>
                        @Html.TextAreaFor(model => model.Description, new { @class = "whatever-class", @cols = 115, @rows = 10 })
 
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-6">
                        <label for="inputCity">Status </label>
                        <select asp-for="Status"
                                class="form-control"
                                asp-items="@(new SelectList(@ViewBag.ProjectStatusTypes,"LookupCode", "LookupDescription"))"></select>
 
 
                    </div>
                    <div class="col-sm-3">
                        <label for="inputState">ActivityType </label>
                        <select asp-for="ActivityType"
                                class="form-control"
                                asp-items="@(new SelectList(@ViewBag.ProjectTypes,"LookupCode", "LookupDescription"))"></select>
 
 
                    </div>
                </div>
 
                <div class="form-group row">
                    <div class="col-sm-6">
                        <label for="inputCity">Staff </label>
                        <select asp-for="StaffID"
                                class="form-control"
                                asp-items="@(new SelectList(@ViewBag.ListOfStaff,"StaffID", "FirstName"))"></select>
 
                    </div>
                    <div class="col-sm-3">
                        <label for="inputState">Hours Left On Project </label>
                        <label for="inputState"><div class="badge" style="font-size:18px;">26</div> </label>
                        <label for="projecthours">If Porject hours fall below ten Contact Charlie.</label>
                    </div>
                </div>
 
 
                <div class="form-group row">
 
 
 
                    @(Html.Kendo().Grid<FuelActivityTrackerDal.Models.ActivityLines>().Name("activityLines")
 
                                                          .Columns(columns =>
                                                          {
                                                              columns.Bound(p => p.Description).Filterable(false);
                                                              columns.Bound(p => p.StaffMemeber).Filterable(false);
                                                              columns.Bound(p => p.StartTime).Filterable(false);
                                                              columns.Bound(p => p.EndTime).Filterable(false);
                                                              columns.Bound(p => p.Status);
                                                              columns.Command(command => command.Custom("ViewDetails").Click("showDetails"));
                                                          })
                                                              .DataSource(dataSource => dataSource
                                                                            .Ajax()
                                                                               .Events(events => events.Error("error_handler"))
                                                                               .Model(model => model.Id(p => p.ActivityLineId))
 
                                                                        .Read(read => read.Action("ActivityLines_Read", "Activity"))
 
 
 
 
 
 
))
                </div>
 
                <div class="form-group row">
                    <div class="col-sm-6">
 
                    </div>
                </div>
 
 
                <button type="button" class="btn btn-primary px-4 float-right">Add Work Item</button>
                <button type="button" class="btn btn-primary px-4 float-right">Put Case & Client On Hold</button>
                <button type="button" class="btn btn-primary px-4">Cancel</button>
            </form>
        </div>
    </div>
 
    <script type="text/x-kendo-template" id="template">
        <div id="details-container">
            <h2>#= FirstName # #= LastName #</h2>
            <em>#= Title #</em>
            <dl>
                <dt>City: #= City #</dt>
                <dt>Address: #= Address #</dt>
            </dl>
        </div>
    </script>
 
    <script type="text/javascript">
        var detailsTemplate = kendo.template($("#template").html());
 
        function showDetails(e) {
            e.preventDefault();
 
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            var wnd = $("#Details").data("kendoWindow");
 
            wnd.content(detailsTemplate(dataItem));
            wnd.center().open();
        }
    </script>
 
    @*<div class="k-edit-form-container">
        <h3>Activity</h3>
        <br />
        @Html.HiddenFor(model => model.Name)
 
        <div class="k-edit-label">
            @Html.LabelFor(model => model.Name)
        </div>
 
 
        <div class="k-edit-label">
            @Html.LabelFor(model => model.Description)
        </div>
        <div class="k-edit-field">
          </div>
        <div class="k-edit-label">
            @Html.LabelFor(model => model.HoursLeftOnProject)
        </div>
        <div class="k-edit-field">
            @Html.Kendo().IntegerTextBoxFor(model => model.HoursLeftOnProject)
        </div>
        <div class="k-edit-label">
            @Html.LabelFor(model => model.ActivityDate)
        </div>
        <div class="k-edit-field">
            @Html.Kendo().DateTimePickerFor(model => model.ActivityDate)
        </div>*@
 
</div>

 

 

 

Alex Hajigeorgieva
Telerik team
 answered on 04 Mar 2019
2 answers
811 views

Hello,

I have a Grid with the editable mode set to "PopUp" and I've provided a template file for it.  In my template file I'm using a  Kendo ComboBox to allow the user to select from a list of US States, and in edit mode I would expect it to set the value to the selected record's StateId.  Unfortunately, when the edit popup appears the State is not selected in the ComboBox that matches the value in the grid's selected record.  However, as soon as I click on the ComboBox's down arrow the value gets populated.  I'm not sure what I'm doing wrong.  Am I missing a step somewhere?  Any help is appreciated.  Thanks.

Here's the code for my grid:

@(Html.Kendo().Grid<PARRE.Models.Project>
            ()
            .Name("Projects")
            .Columns(columns =>
            {
                columns.Bound(c => c.ProjectName).Width(200);
                columns.Bound(c => c.ProjectDescription);
                columns.Bound(c => c.Address).Width(200);
                columns.Bound(c => c.City).Width(160);
                columns.ForeignKey(f => f.StateId, (System.Collections.IEnumerable)ViewData["StatesList"], "StateId", "StateAbbr").Width(100);
                columns.Bound(c => c.ZipCode).Width(120);
                columns.Bound(c => c.ContactName).Width(160);
                columns.Bound(c => c.PhoneNumber).Width(135);
                columns.Bound(c => c.Email).Width(160);
                columns.Command(command => { command.Edit().Text(" "); command.Destroy().Text(" "); }).Width(170);
            })
            .HtmlAttributes(new { style = "height: 100%; width: 100%;" })
            .Scrollable()
            .Groupable()
            .Sortable()
            .Pageable(pageable => pageable
                .Refresh(true)
                .PageSizes(true)
                .ButtonCount(5))
            .Filterable()
            .ToolBar(toolbar => toolbar.Create())
            .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("_ProjectCreate").Window(x => x.Title("Add/Edit Project").Width(700)))
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .Events(events => {
                    events.Error("error_handler");
                })
                .Model(model =>{
                    model.Id(p => p.ProjectID);
                    model.Field(p => p.ProjectID).Editable(false);
                })
                .ServerOperation(false)
                .Read(read => read.Action("List", "Projects"))
                .Update(update => update.Action("Update", "Projects"))
                .Create(create =>  create.Action("Create", "Projects"))
                .Destroy(destroy => destroy.Action("Delete", "Projects"))
        )
 

 

Here's the code for the ComboBox

@(Html.Kendo().ComboBoxFor(model => model.StateId)
    .AutoBind(false)
    .BindTo((System.Collections.IEnumerable)ViewData["StatesList"])
    .DataTextField("StateAbbr")
    .DataValueField("StateId")
    .Filter(FilterType.Contains)
    .HtmlAttributes(new { style = "width: 70px; background-color: white;" })
    .Placeholder("...")
    .ClearButton(false))

 

Here's the code in the Controller to get the list of states:

  public IActionResult Index()
  {
      PopulateStates();
      return View();
  
 
private void PopulateStates()
  {
      IQueryable<USStates> usStates = _context.USStates.Select(s => new USStates
      {
          StateId = s.StateId,
          StateAbbr = s.StateAbbr
      }).OrderBy(o => o.StateId);
 
      ViewData["StatesList"] = usStates.ToList();
  }

 

Regards,

Shawn A.

Shawn
Top achievements
Rank 1
 answered on 04 Mar 2019
4 answers
3.1K+ views

 Hello,

I'm very new to developing in ASP.NET Core and Telerik's Keno UI.  I'm trying to find documentation on how I can change the title of a grid popup window when I click on the "Add New Record" button on top of the Grid.  Currently, the word "Edit" is displayed even though the operation is for "insert".  How do I go about changing the title of a popup add/edit window for a Grid?

Here's my code:

@(Html.Kendo().Grid<MyApp.Models.Project>
            ()
            .Name("Projects")
            .Columns(columns =>
            {
                columns.Bound(c => c.ProjectName).Width(100);
                columns.Bound(c => c.ProjectDescription).Width(100);
                columns.Bound(c => c.Address);
                columns.Bound(c => c.City).Width(100);
                columns.Bound(c => c.State).Width(100);
                columns.Bound(c => c.ZipCode).Width(50);
                columns.Bound(c => c.ContactName);
                columns.Bound(c => c.PhoneNumber);
                columns.Bound(c => c.Email);
            })
            .HtmlAttributes(new { style = "height: 380px;" })
            .Scrollable()
            .Groupable()
            .Sortable()
            .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
            .ToolBar(toolbar => toolbar.Create())
            .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("_ProjectCreate"))
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .Events(events => {
                    events.Error("error_handler");
                })
                .ServerOperation(false)
                .Read(read => read.Action("GetProjects", "Projects"))
                .Create(create => {
                    create.Action("Create", "Projects");
            })
        )
)
Shawn
Top achievements
Rank 1
 answered on 04 Mar 2019
2 answers
914 views

I am having trouble with the header text of a column where there is a client template in place.  I want to not show any text in that column.  But if I set .Title("") or .Title(string.Empty) it shows the column name anyway.

Here is the markup for that column :

columns.Bound(a => a.ProductBuyLink).ClientTemplate(
"<a href='" + "#= ProductBuyLink #" + "' target=blank>" + "<img title='Buy Now' alt='Buy Now' height=25 src='../../images/shoppingcart_24.png'/></a>").Width(63).Title("").Sortable(false).Locked(true);

 

 

I have searched and found many solutions that do not work. 
https://www.telerik.com/forums/get-column-header-title
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.headertemplate


Like this does not work :
$("#grid thead").find("[data-field='ProductBuyLink'] .k-link").html("");

If I use the code in the line above for another column not using a Client Template it works.  So the issue has to do with columns with a client template defined.

Please advise.

 

 

 

Reid
Top achievements
Rank 2
 answered on 01 Mar 2019
8 answers
145 views

How exactly can we get the virtualization working?  The demo is missing a lot of code.  There is also no information on how to send the antiForgery token, and no way to set the action to GET, in case you didn't want to post. Please post a complete working example with virtualization on autocomplete.

 

Thank you.

Chris
Top achievements
Rank 1
 answered on 26 Feb 2019
4 answers
789 views

Hi - we have a ASP.NET Core application. It has a grid in which we are prefiltering a default for one column. The filtering works fine but the .k-grid-filter class for that column does not have the k-active-state class applied as it does when we manually click the icon to filter. So the user can not see that a default filter is applied when grid is rendered.

How can we implement this - show the  default filter with class applied that lets the user know that the column has filter applied

we are using the latest 2019 version of Telerik UI for ASP.NET Core.

the default filter is applied to the datasource in this way:

 .Filter(f => f.Add(cr => cr.Ccrstatus).IsNotEqualTo("Rejected").And().IsNotEqualTo("Open"))

 

 

Viktor Tachev
Telerik team
 answered on 25 Feb 2019
4 answers
170 views

My Home view contains a grid. When a row in the grid is clicked, a window is displayed in an iframe with a spreadsheet on it.

<div>
    @(Html.Kendo().Window()
            .Name("timecard")
            .Modal(true)
            .Actions(actions => actions.Close())
            .Draggable(false)
            .LoadContentFrom("Timecard")
            .Events(events => events
                .Open("timecard_OnOpen")
                .Close("timecard_OnClose")
            )
            .Iframe(true)
            .Width(1650)
            .Height(800)
            .Visible(false)
            .Deferred(true)
    )
</div>

 

In the Open event I am using an ajax call to the controller to get data to fill the spreadsheet. Once I have the data I want to populate the spreadsheet. The spreadsheet is somewhat complex with frozen rows, merged cells, etc. so I can't use a datasource. My issue is that I cannot get access to the spreadsheet on the iFrame window to populate it with the data.

function timecard_OnOpen(e)
{
    $.ajax({
        url: '@Url.Action("Load", "Timecard")',
        type: 'POST',
        data: { id: employee_key },
        success: timecard_LoadTimecardSuccess
    });
}
 
function timecard_LoadTimecardSuccess(data)
{
    var window = $("#timecard").getKendoWindow();
    var spreadsheet = $("#timecardSpreadsheet").data("kendoSpreadsheet");
}

 

The var spreadsheet is undefined. I want to be able to do something like this:

        var spreadsheet = $("#timecardSpreadsheet").data("kendoSpreadsheet");
        var sheet = spreadsheet.activeSheet();
        var range = sheet.range('B12'); // Spreadsheet cell name
        range.value("TEST");

 

 

 

Marin Bratanov
Telerik team
 answered on 22 Feb 2019
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
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?