Telerik Forums
UI for ASP.NET MVC Forum
17 answers
1.9K+ views

Hi,

I need to change the default icon for the Kendo Grid when the filter is selected. Currently it displays the below icon by default. I have attached the screenshot of the current grid which we are using.

.k-i-more-vertical
Unicode: e031

So when the user adds a filter I need it to change to the below

k-i-filter-sm

Unicode: e12b

I need to do this in either my css file or any common javascript file. Please advise. Below is the current configuration which I am using.

Version: 2019.2.619.545 (Kendo Web Extensions for ASP.NET MVC)
MVC version: 5.0
IDE: Visual Studio 2015
Browser : Chrome  76.0.3809.100, IE 11.0
.Net Framework: 4.6.2
Programming Language: C#

Petar
Telerik team
 answered on 25 Aug 2020
4 answers
662 views
Hi, I'm wondering about a particular behavior with the Combobox.

I have a generic combobox (for people) in an editor template (basic code):
@model long?
@(Html.Kendo().ComboBoxFor(m => m)
 .DataTextField("DisplayName")
 .DataValueField("PersonId")
 .Filter(FilterType.Contains)
 .DataSource(
 source =>
 source.Read(read => read.Action("Search", "PersonController")
 .Data("getData")).ServerFiltering(true))
)


A little backstory about what I'm trying to do: I want to be able to use the combobox to load only partial data from the datasource (since all data can be too much). This is not a big deal if you just want to use the combo to search, but I also want to use it to show a single selected person (for example when editing a row in a grid, I want the combobox to load only the single person by id).

I thought I had a somewhat functional solution where I would use the combobox._initial field to see if the combobox should initially pull in the person by id. The "getData" function was similar to this:
var combo = $(selector).data('kendoComboBox');
 if (combo._initial != '' && !combo.hasLoadedInitial) {
  combo.hasLoadedInitial = true;
  return { id: combo._initial };
 }
  else
 return { text: combo.input.val() };

On the backend I would either load a single person by id, or search by text depending on what is passed.

When I use this in a MVC view (using HtmlHelper.EditorFor) it works fine, but when I use it in a grid (popup edit window) I am getting a different behavior. The _initial field value is not set to that of the grid dataItem; it is set to either 0 or blank depending on whether my property is nullable or not. It appears that the grid tries to setup the window editor form before binding the dataItem to it. So initially when the combobox tries to load data from the datasource, it can't know the id to pass.

How can I determine the PersonId in this case?
Ramez
Top achievements
Rank 1
 answered on 24 Aug 2020
7 answers
592 views
1. loading the existing Tabs

@helper RenderPCGTab(List<PCGTabModel> PCGs)
{
    <a id="add-button">Add new PCG</a>
    <div style="width:100%; height:auto;">
        @(Html.Kendo().TabStrip()
        .Name("PCGTabStrip").HtmlAttributes(new { style = "width:100%;" })
        .Items(items =>
        {
            var index = 0;
            foreach (PCGTabModel PCG in PCGs)
            {
                items.Add()
                .Text("PCG <button id='btn'" + index + " data-type='remove' class='k-button k-button-icon' onclick='deleteMe(this)'><span class='k-icon k-i-close'></span></button>")
                .Encoded(false)
                .Content(@<text>@(Html.Partial("_PCGForm", PCG, new ViewDataDictionary { TemplateInfo = new TemplateInfo { HtmlFieldPrefix = "PCG" } }))</text>);
                index++;
            }
        }))
    </div>
}

2.     </table>
<tr>
<td colspan="4">
@RenderPCGTab(Model.PCGTab)
</td>
</tr>
</table>

3. Script - to add dynamicic tabs

         $('#add-button').kendoButton({
            click: function () {
                var tabstrip = $('#PCGTabStrip').kendoTabStrip();
                validateCount = tabstrip.length;
                var index = validateCount;
                tabstrip.append([{
                    text: '<a>PCG <button id="btn' + index + '" data-type="remove" class="k-button k-button-icon deleteAll" onclick="deleteMe(this)"><span class="k-icon k-i-close"></span></button></a>',
                    encoded: false,
                    contentUrl: "@Url.Content("~/Home/_PCGTab?tabId=")" + index + ""
                }]);
            }
        });

4. Partial view action method

public ActionResult _PCGTab(int tabId)
        {
            PCGTabModel model = model = new PCGTabModel() { PCGTabId = tabId, IsWhollyEntity = null };          
            return PartialView("_PCGForm", model);
        }

5. Problem am facing

1.When i add a new tab and click on the existing tab , in the existing tab the content is getting duplicated i,e the whole content is getting duplicaated
2.If am not adding any new tab, if i click on any existing tab i dont have issue











Prakash Kumar
Top achievements
Rank 1
 answered on 21 Aug 2020
5 answers
3.9K+ views
Is there a way to display a k-icon inside a Kendo textbox? For example, displaying the k-i-email in a Kendo textbox for an email address.
Tsvetomir
Telerik team
 answered on 21 Aug 2020
8 answers
265 views

In the Linear gauge you can add a pointer value (little red arrow in the example) that goes on the scale.  Is this possible with the Radial gauge as well?  So I could make a low, avg, and high point on radial gauge instead of using the linear gauge?

 

 

Tsvetomir
Telerik team
 answered on 21 Aug 2020
2 answers
1.0K+ views

I have a grid with a Client Group Header Template like this:

columns.Bound(model => model.Area).ClientGroupHeaderTemplate(@"<input onclick='SelectAllSubStores(this)' type='checkbox' style='margin-right:5px;'/>");

I have been trying to get it so when I check the group header check box it will automatically check all the rows within the header. 

In the sub rows there is a column like this so that there are check boxes in the sub rows:

columns.Bound(model => model.Store)
                                        .ClientTemplate("<input type='checkbox'/>")
                                        .Sortable(false).Width(100)
                                        .HtmlAttributes(new { style = "text-align:center" })
                                        .HeaderHtmlAttributes(new { style = "text-align:center" });

 

I have tried this but nothing happens:

function SelectAllSubStores(e) {

$("#Grid tbody input:checkbox").prop("checked", this.checked);

}

and I have tried a few other ways but I wasn't getting anywhere.

 

How do I get it to auto select the sub row check boxes when I select the Group header template check box?

 

Thanks 

Ross
Top achievements
Rank 1
 answered on 21 Aug 2020
1 answer
212 views
 

I am attempting to have an ajax grid that does server side paging. (For reference, I am using Entity Framework for db context, and Automapper for model to view model mapping). The paging is working clientside, but it just pulls in all the data from my db then pages. I cannot seem to get the paging to reflect at the sql query level without doing it manually (which defeats the purpose of passing the request to the DataSourceResult(). Am i missing something, or must i do this manually?

 

Below is my current code:

 

Razor page

01.@(Html.Kendo()
02.            .Grid<AgencyContactViewModel>()
03.            .Name("Grid")
04.            .DataSource(dataSource => dataSource
05.                .Ajax()
06.                .Read(read => read.Action("Read", "AgencyContact"))
07.                .PageSize(5)
08.                .ServerOperation(true)
09.       )
10. 
11.        .Columns(columns =>
12.         {
13.             columns.Bound(o => o.ID).Width(50).Title("Id");
14.             columns.Bound(o => o.LastName).Width(100).Title("Last Name");
15.             columns.Bound(o => o.FirstName).Width(100).Title("First Name");
16.             columns.Bound(o => o.AgencyDescription).Width(175).Title("Agency");
17.             columns.Bound(o => o.IsActiveFlag)
18.             .ClientTemplate("<input type='checkbox' #= IsActiveFlag ? checked = 'checked' : '' #  disabled='disabled' ></input>")
19.             .Width(15).Title("Active");
20. 
21.             columns.Bound(o => o.AgencyCode)
22.             .ClientTemplate("<a href='" + Url.Action("Edit", "AgencyContact") + "/#=AgencyCode#'>Edit<a/>")
23.             .Title("")
24.             .Width(15);
25.             columns.Bound(o => o.AgencyCode)
26.             .ClientTemplate("<a href='" + Url.Action("Details", "AgencyContact") + "/#=AgencyCode#'>Details<a/>")
27.             .Title("")
28.             .Width(15);
29.         })
30.        .Groupable()
31.        .Sortable()
32.        .Pageable()
33.        .Filterable())
 
Controller
1.public JsonResult Read([DataSourceRequest] DataSourceRequest request)
2.{
3.    var agencyContacts = dbContext.AgencyContacts.Include("Agency") .OrderBy(a => a.AgencyCode);
4.    var agencyContactsViewModel = agencyContacts.ProjectTo<AgencyContactViewModel>();
5.    var result = agencyContactsViewModel.ToDataSourceResult(request);
6.    return Json(result, JsonRequestBehavior.AllowGet);
7.}
Veselin Tsvetanov
Telerik team
 answered on 21 Aug 2020
4 answers
255 views

We have had a spreadsheet popup working for a "quick edit" solution for a few years.  I just upgraded to 2020.2.617 and the spreadsheet is no longer calculating correctly.  If I turn the formula row on the top, it looks like the formulas are not there.  What changed between 2017 SP1 and this release?  What do I need to do differently?

Here is an example of the spreadsheet (cshtml)":

@(Html.Kendo().Spreadsheet()
    .Name("spreadsheet")
    .HtmlAttributes(new { style = "width:98%; height: 90%;" }).HeaderHeight(0).HeaderWidth(0)
    .Toolbar(false)
    .Sheetsbar(false)
    .Excel(excel => excel
        .ProxyURL(Url.Action("Index_Save", "Spreadsheet"))
    )
    .Pdf(pdf => pdf
        .ProxyURL(Url.Action("Index_Save", "Spreadsheet"))
    )
    .Events(events => events
        .Render("onRenderExpenses"))
    .Sheets(sheets =>
    {
        sheets.Add()
            .Name("Transactions")
            .Columns(columns =>
            {
                if (Model.SpreadSheetColumns != null)
                {
                    foreach (SpreadSheetColumnSettings col in Model.SpreadSheetColumns)
                    {
                        columns.Add().Width(col.Width);
                    }
                }
            })
            .Rows(rows =>
            {
                rows.Add().Index(0).Height(60).Cells(cells =>
                {
                    if (Model.SpreadSheetColumns != null)
                    {
                        foreach (SpreadSheetColumnSettings col in Model.SpreadSheetColumns)
                        {
                            cells.Add().Bold(true).TextAlign(SpreadsheetTextAlign.Center)
                                .Value(col.Title).Background("#80cce7").Color("#000000").Wrap(true)
                                .Enable(false);
                        }
                    }
                });
                rows.Add().Index(99).Height(40).Cells(cells =>
                {
                    foreach (SpreadSheetColumnSettings col in Model.SpreadSheetColumns)
                    {                       
                        cells.Add().Bold(true).TextAlign(SpreadsheetTextAlign.Right)
                            .Background("rgb(193,226,255)").Color("#000000")
                            .Enable(false).Format(col.Format).Formula(col.Formula);
                    }
 
                });
 
            });
    })
)

And here is an example of the columns:

columnList.Add(new SpreadSheetColumnSettings() { Width = 30, Editable = false });
                columnList.Add(new SpreadSheetColumnSettings() { Width = 30, Editable = false });
                columnList.Add(new SpreadSheetColumnSettings() { Width = 30, Editable = false });
                columnList.Add(new SpreadSheetColumnSettings() { Width = 30, Editable = false });
                columnList.Add(new SpreadSheetColumnSettings() { Width = 30, Editable = false });
                columnList.Add(new SpreadSheetColumnSettings() { Width = 30, Editable = false, Formula = "IF(ROUND(SUM(H" + rowTotal + ":I" + rowTotal + "),2) - ROUND(SUM(K" + rowTotal + ":BG" + rowTotal + "),2) = 0,0,1)" });
                columnList.Add(new SpreadSheetColumnSettings() { Width = 30, Editable = false });
                columnList.Add(new SpreadSheetColumnSettings() { Width = 100, Editable = false, Format = "$#,##0.00", Formula = "SUM(H2:H" + maxRows + ")" });               
                columnList.Add(new SpreadSheetColumnSettings() { Width = 100, Editable = false, Format = "$#,##0.00", Formula = "SUM(I2:I" + maxRows + ")" });
                    //columns
                columnList.Add(new SpreadSheetColumnSettings() { Width = 30, Editable = false });
                columnList.Add(new SpreadSheetColumnSettings() { Width = 100, Editable = false, Format = "$#,##0.00", Formula = "SUM(K2:K" + maxRows + ")" });
Aleksandar
Telerik team
 answered on 21 Aug 2020
1 answer
187 views

Here's my JQuery mask for textbox in $(document).ready():

$("#MyTextbox").inputmask({ "mask": "(99:99:9{6,7}:9{1,},{0,1}){1,}", 'autoUnmask': false, clearIncomplete: false });

 

Model contains values as a list so i wrote the element like this:

@(Html.Kendo().TextBox()
   .Value(string.Join(",", Model.Objects.Select(x=>x.SomeValue).ToList()))
   .Name("MyTextbox")
   .HtmlAttributes(...))

 

and instead of 

99:99:9999999:999,66:66:6666666:666,33:33:3333333:333

value shows up like 

99:99:9999999:9996666666666666633333333333333

What can i change to keep the mask for the whole string?

 

 

 

Neli
Telerik team
 answered on 21 Aug 2020
2 answers
295 views

Hey Guys

I want to render 1 column ( 1 that shows a file with the complete path) with the filename always showing and the rest of the path hidden to the left when the column is not wide enough.

Adding the htmlAttribute to set the direction works.. except that the '\\' at the start of the path seems to get moved to the end of the path 

c.Bound(Function(p) p.filename).Title("Filename").HtmlAttributes(New With {.style = "direction: rtl;"})
c.Bound(Function(p) p.info).Title("Info").Width(10)
c.Bound(Function(p) p.filename).Title("Filename")

 

To demonstrate, I have added the Filename column twice. First one using 'rtl' , the 2nd regular not to show what I am talking about. This is shown in the attached screen shot. 
I also tried implementing this as a Client Template and I get the same issue.

Any suggestions greatly appreciated.

Rob

Petar
Telerik team
 answered on 20 Aug 2020
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?