Telerik Forums
UI for ASP.NET Core Forum
3 answers
809 views

1.when i change the Brower width, the text auto wrap and the row height grow. I want to set the text not wrap(see attachment), how can I do that.

2.I want to set text wrap in edit mode, how can I do that?

 

Viktor Tachev
Telerik team
 answered on 22 Jan 2019
3 answers
908 views

I am attempting to call a function in the controller when the Destroy button is clicked on a row. The controller will then delete the record in the database. I also need to pass in the ID of the employee to identify which record in the database to delete. Thank you!

This is what I have:

@(Html.Kendo().Grid<TelerikAspNetCoreApp1.Models.EmployeeViewModel>()
    .Name("grid")
    .ToolBar(toolbar => toolbar.Create().Text("ADD").HtmlAttributes(new { title = "Add Employee" }))
    .Columns(columns =>
    {
        columns.Bound(p => p.EmployeeName);
        columns.Bound(p => p.Active);
        columns.Command(command =>
        {
            command.Destroy().HtmlAttributes(new { title = "Delete Highlighted Employee" });
        }).Width(150);
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:450px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Employee_Read", "Grid"))
        .Destroy(update => update.Action("Employee_Delete", "Grid"))
    )
)
Mark
Top achievements
Rank 1
 answered on 21 Jan 2019
2 answers
123 views

.Net Core 2.1,the cshtml

@using Kendo.Mvc.UI
@(Html.Kendo().Grid<Liwb.Entities.Travel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ID);
        columns.Bound(p => p.Name);
        columns.Bound(p => p.Pos);
        columns.Bound(p => p.IsDelete);
        columns.Bound(p => p.From);
        columns.Bound(p => p.To);
        columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}");
        columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}");
        columns.Bound(p => p.IntervalDays);
        columns.Bound(p => p.TrafficType);
        columns.Bound(p => p.PhotographDirectory);
        columns.Bound(p => p.ProblemDocument);
        columns.Command(commands =>
        {
            commands.Edit();
            commands.Destroy(); // The "destroy" command removes data items.
        }).Title("Commands").Width(200);
    })
    .Editable(editMode => editMode.Mode(GridEditMode.InLine))
    .Pageable()
    //.Sortable()
    .Scrollable()
    //.Filterable()
    .HtmlAttributes(new { style = "height:100%; width:100%" })
    .DataSource(dataSource => dataSource
        .WebApi()
        .Model(Model => { Model.Id(p => p.ID);})
        .Events(events=>events.Error("error_handler"))
        .Read(read => read.Action("Get", "Travel"))
        .Create(create => create.Action("Post", "Travel"))
        .Update(update => update.Action("Put", "Travel", new { id = "{0}" }))
        .Destroy(destory => destory.Action("Delete", "Travel", new { id = "{0}" }))
    )
)

the api controller
namespace PlantManagement.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class TravelController : ControllerBase
    {
        private readonly PlantManagementDbContext _context;
        public TravelController(PlantManagementDbContext context)
        {
            _context = context;
        }
        //MVC return Value: ActionResult
        // GET: api/Travel
        [HttpGet]
        //public IEnumerable<Travel> GetTravels()
        public DataSourceResult Get([DataSourceRequest]DataSourceRequest request)
        {
            return _context.Travels.ToDataSourceResult(request);//.Where(p => p.PID == null)
        }
        // GET: api/Travel/5
        [HttpGet("{id}")]
        public async Task<IActionResult> Get([FromRoute] long id)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }
            var travel = await _context.Travels.FindAsync(id);
            if (travel == null)
            {
                return NotFound();
            }
            return Ok(travel);
        }
        // PUT: api/Travel/5
        [HttpPut("{id}")]
        public async Task<IActionResult> Put([FromRoute] long id, [FromBody] Travel travel)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }
            if (id != travel.ID)
            {
                return BadRequest();
            }
            _context.Entry(travel).State = EntityState.Modified;
            try
            {
                await _context.SaveChangesAsync();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!TravelExists(id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }
            return NoContent();
        }
        // POST: api/Travel
        [HttpPost]
        public async Task<IActionResult> Post( Travel travel)//[FromBody]
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }
            _context.Travels.Add(travel);
            try
            {
                await _context.SaveChangesAsync();
            }
            catch (DbUpdateException)
            {
                if (TravelExists(travel.ID))
                {
                    return new StatusCodeResult(StatusCodes.Status409Conflict);
                }
                else
                {
                    throw;
                }
            }
            return CreatedAtAction("GetTravel", new { id = travel.ID }, travel);
        }
        // DELETE: api/Travel/5
        [HttpDelete("{id}")]
        public async Task<IActionResult> Delete([FromRoute] long id)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }
            var travel = await _context.Travels.FindAsync(id);
            if (travel == null)
            {
                return NotFound();
            }
            travel.IsDelete = true;
            //_context.Travels.Remove(travel);
            await _context.SaveChangesAsync();
            return Ok(travel);
        }
        private bool TravelExists(long id)
        {
            return _context.Travels.Any(e => e.ID == id);
        }
    }
}

Tsvetomir
Telerik team
 answered on 21 Jan 2019
1 answer
1.6K+ views

Hi there,

I am using a simple Kendo grid which contains a pop up form to allow a user to either add or delete new "categories" (many) for one product.

popup

@using KendoGridOneToMany.Models
 
@(Html.Kendo().Grid<ProductModel>()
                        .Name("persons")
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Model(model => model.Id(m => m.Id))
                            .Read(read => read.Action("GetProducts", "Home"))
                            .Update(up => up.Action("UpdateCategory", "Home"))
                            .Create(x => x.Action("CreateProduct", "Home"))
                    )
                    .ToolBar(x => x.Create())
                    .Columns(columns =>
                    {
                        columns.Bound(c => c.Id).Width(200);
                        columns.Bound(c => c.Type);
                        columns.Bound(c => c.DisplayCatogories);
                        columns.Command(cmd => cmd.Edit());
                    })
                    .Events(ev => ev.Edit("addDeleteButton"))
                    .Pageable()
                    .Sortable()
            .Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("PopUpView"))
)

I have altered the pop up to contain an additional "delete" button. As this extra button is not supported by the grid's inbuilt update function, I have used AJAX to capture data within the pop up held in a form and return it to the controller's separate "delete" method.

The pop up form code is contained on a partial view that looks like so:

@model ProductModel
<div>
<fieldset id="popUpForm">
    <dl>
        <dt>
            @Html.HiddenFor(m => m.Id)
            @Html.ValidationMessageFor(m => m.CategoryId)
 
        </dt>
        <dd>
            @(Html.Kendo().DropDownListFor(m => m.CategoryId).AutoBind(false).OptionLabel("Select Category...").DataTextField("Name").DataValueField("Id").DataSource(dataSource =>
                                                  { dataSource.Read(read => read.Action("GetCategories", "Home")).ServerFiltering(true); }))
        </dd>
    </dl>
</fieldset>

And just for reference, the "Product" model like so:

public ProductModel()
{
   public int Id { get; set; }
 
   public string Type { get; set; }
 
   public int CategoryId { get; set; }
 
   public ICollection<CategoryModel> Categories { get; set; }
 }

I've added the delete button by using the grid's edit event to add the button dynamically via JavaScript:

function addDeleteButton(e) {
    $('<a class="k-button k-button-icontext k-grid-delete custom"
    href="\\#"k-icon k-i-delete"></span>Delete</a>').insertAfter(".k-grid 
     -update");
    $('.k-window-title').text("Edit Categories");
    $(".custom").click(function (e) {
        e.preventDefault();
        var formContainer = $("#popUpForm");
        SubmitInfo(formContainer);
    });
}

 

So, when the user selects a category, they have the option to either add or delete a category from the selected "product". However, where "add" is handled by Kendo, I need to handle delete using AJAX.

The delete button is linked to the following JavaScript.

function SubmitInfo(formContainer) {
    var grid = $("#persons").data("kendoGrid"),
        parameterMap = grid.dataSource.transport.parameterMap;
    var data = parameterMap({ sort: grid.dataSource.sort(), filter: grid.dataSource.filter(), group: grid.dataSource.group() });
    $.ajax({
        url: '@Url.Action("Delete", "Home")',
        type: "POST",
        dataType: "JSON",
        data: data + "&" + formContainer.serialize(),
        success: function (result) {
               // Clear the input tags
                formContainer.find("input[type='text']").each(function (i, element) {
                    $(this).val('');
                });
                $('#persons').data('kendoGrid').dataSource.read();
                $('#persons').data('kendoGrid').refresh();
            }
        }
    });
}

 

And the corresponding Controller method like this:

[HttpPost]
   public Void Delete([DataSourceRequest] DataSourceRequest request, ProductModel product)
    {
        var productModel = siteRepository.GetProductById(product.Id);
        var categoryToRemove = productModel.Categories.SingleOrDefault(r => r.Id == product.CategoryId);
        if (categoryToRemove != null)
        {
            product.Categories.Remove(categoryToRemove);
            siteRepository.UpdateProduct(product);
        }
    }

 

This works pretty well at posting back the required Id from the desired Category, but I am unable to persist the Product ID back to the controller required to know from which product to remove the selected category from. This is despite including the relevant @Html.HiddenFor(m => m.Id) in the pop up form.

Error

Would anyone know the best way to persist that piece of data from my pop up form to my controller?

 

Tsvetomir
Telerik team
 answered on 18 Jan 2019
2 answers
104 views
How is that handled?  Binding to a column that is a nullable date time?
Reid
Top achievements
Rank 2
 answered on 18 Jan 2019
1 answer
112 views

Hello. I have a problem with grid edit in line.

 

I have defined normal grid, which uses ViewModel.

ViewModel has 3 fields (int A, int B, bool checkbox) 

A field isn't editable by default but whenever I click "edit" I can change B field or check/uncheck checkbox.

I'd like to make field A make editable whenever checkbox is checked by user during edition. So after the checkbox is check A fields is editable.

 

Greetings

Tsvetomir
Telerik team
 answered on 18 Jan 2019
0 answers
52 views

I have two charts, and I'd like to make it so the second chart updates when the series in the first chart is clicked. There's a master page with my RadAjaxManager, so I'm using a RadAjaxManagerProxy with these two charts. I'm having trouble converting the code samples I see in the documentation to work with my RadAjaxManagerProxy.

Here are my two charts:

<telerik:RadHtmlChart ID="Chart_Referrals_By_Month" runat="server" DataSourceID="ReferralsByMonth" Skin="Windows7" RenderMode="Lightweight" Height="250">
     <ClientEvents OnSeriesClick="OnSeriesClick"/>
     <PlotArea>
         <Series>
             <telerik:LineSeries Name="Column1" DataFieldY="AVERAGE_REFERRALS">
                 <TooltipsAppearance Visible="false"></TooltipsAppearance>
                 <Appearance>
                     <FillStyle BackgroundColor="#add8e6"></FillStyle>
                 </Appearance>
             </telerik:LineSeries>
         </Series>
         <XAxis DataLabelsField="MONTH_NAME" Color="black" MajorTickSize="0" MinorTickSize="2" MinorTickType="Outside">
             <LabelsAppearance RotationAngle="-45" />
             <MajorGridLines Visible="false" />
             <MinorGridLines Visible="true" />
         </XAxis>
         <YAxis AxisCrossingValue="0" Color="black" MajorTickSize="2" Step="1">
             <LabelsAppearance DataFormatString="{0}" RotationAngle="0" Skip="0" />
             <TitleAppearance Position="Center" RotationAngle="0" Text="Percent" Visible="false" />
             <MajorGridLines Visible="false" />
             <MinorGridLines Visible="false" />
         </YAxis>
     </PlotArea>
     <ChartTitle Text="Referrals per Day by Month - Average"></ChartTitle>
     <Legend>
         <Appearance BackgroundColor="Transparent" Position="Bottom" Visible="false"></Appearance>
     </Legend>
 </telerik:RadHtmlChart>

 

<telerik:RadHtmlChart ID="Chart_Referrals_By_Day" runat="server" DataSourceID="ReferralsByDay" Skin="Windows7" RenderMode="Lightweight" Height="250">
    <PlotArea>
        <Series>
            <telerik:LineSeries Name="Column1" DataFieldY="PERCENT_REFERRALS">
                <TooltipsAppearance Visible="false"></TooltipsAppearance>
                <Appearance>
                    <FillStyle BackgroundColor="#add8e6"></FillStyle>
                </Appearance>
            </telerik:LineSeries>
        </Series>
        <XAxis DataLabelsField="DAY_NAME_LONG" Color="black" MajorTickSize="0" MinorTickSize="2" MinorTickType="Outside">
            <LabelsAppearance RotationAngle="-45" />
            <MajorGridLines Visible="false" />
            <MinorGridLines Visible="true" />
        </XAxis>
        <YAxis AxisCrossingValue="0" Color="black" MajorTickSize="2">
            <LabelsAppearance DataFormatString="{0}" RotationAngle="0" Skip="0" />
            <TitleAppearance Position="Center" RotationAngle="0" Text="Percent" Visible="false" />
            <MajorGridLines Visible="false" />
            <MinorGridLines Visible="false" />
        </YAxis>
    </PlotArea>
    <ChartTitle Text="Referrals by Day - %"></ChartTitle>
    <Legend>
        <Appearance BackgroundColor="Transparent" Position="Bottom" Visible="false"></Appearance>
    </Legend>
</telerik:RadHtmlChart>

Here's my JavaScript:

function OnSeriesClick(args) {
    var kendoWidget = args.sender;
    if (args.value > 0) {
        $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest(args.category);
    }
} // end OnSeriesClick

 

What I don't know is how to handle this on the server side. From the Implementing Drill-Down Functionality example, I have:

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e) {
    string seriesName = Chart_Referrals_By_Month.PlotArea.Series[0].Name;
} // end RadAjaxManager1_AjaxRequest

 

However, this line never executes. I'm missing a step here, and I was hoping you could point out what I need.

Thank you!

bdrennen
Top achievements
Rank 1
 asked on 17 Jan 2019
2 answers
272 views

We are experiencing an issue with the virtual scrolling of a combobox when used as a custom editor template in a grid with in-cell editing. I have a solution to demonstrate the issue, but it is too large to upload.

Basically, when clicking into the combobox, the control is bound and looking at the web requests, the value is passed correctly to the ValueMapper and the index is retrieved correctly from the server. However, if you then TAB or press ENTER in the combobox, it attempts to retrieve the value based on the text in the combobox, clearing the reference.

Veselin Tsvetanov
Telerik team
 answered on 17 Jan 2019
1 answer
61 views

I use the Silverlight control before. it can use Keyboard navigation to select certain row. but asp.net core control can not do that. how can i use keyboard to change the selected row.

when the cell is editable. can i use down arrow to close the edit state and change to the next row like spreadsheet.

Milena
Telerik team
 answered on 16 Jan 2019
2 answers
397 views

Hi Telerik Team, 

I am facing an issue with the position of Kendo controls on my page. I am using Chrome browser. The issue persists for Autocomplete, Dropdown lists, date pickers and Grid column menu. As we scroll down the page and then if we try to open the Grid column menu, it opens up much below than it should be and the gap increases as we increase the vertical scrolling of the page. Is it a known issue? 

Attached is the screenshot for the same.

Please help me out with this.We are using Kendo controls in every page for our web application.

Thanks

LIS Help
Top achievements
Rank 1
 answered on 16 Jan 2019
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?