Telerik Forums
UI for ASP.NET MVC Forum
1 answer
186 views

Hello Team, 

There is filter menu which get displayed when you click filter icon. Have added the code to display the same when you hit enter or space bar key . Below is the piece of code


Now once i am done i want to move the focus the tab on the clear filter icon and move to the next element . I am not able to do this. even i tried to set the focus. 

Is it possible to do ?

  $('.t-icon.t-filter').each(function () {
        $(this).attr('tabindex', '0')
        $(this).attr('title', 'Edit Filter')

        $(this).live('keydown', function (e) {
            var keyCode = e.keyCode || e.which;
            if (keyCode == 13 | keyCode == 32) {
                $(this).click();                     // show the filter pop up on enter or spacebar

                
            }

        });
    });
Daniel
Telerik team
 answered on 20 Aug 2013
4 answers
175 views
Hi

I'm trialling at the moment but i'm having a problem with the grid control.

I get the intial grid up with data to begin with but when i try to page or sort etc internet explorers asks whether I want to download the response and Firefox just displays the raw json data in a page.


I was wondering if anyone knew where I was going wrong with this one?
Here's the code:

private

IEnumerable<ReqAssess> GetRequests()

 {

 

var reqassess = reqAssessService.GetReqAssess();

return reqassess;

}


public

ActionResult Products_Read([DataSourceRequest] DataSourceRequest request)

 

{

 

return Json(GetRequests().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

}


@(Html.Kendo().Grid(Model)

.Name(

 

"Grid")

.Columns(columns =>

{

columns.Bound(p => p.ReqId).Width(100).Groupable(

 

false).Title("Request ID").ClientTemplate(

"# if (Urgent == \"Y\") { #" +

 "<div style=\"background-color: Red;\">#: ReqId #</div>" +

 "# } else { #" +

 "#: ReqId #" +

 "# } #"

 );

 columns.Bound(p => p.CompId).Title(

 

"Company ID").Width(110);

 columns.Bound(p => p.Facid).Title("Facility ID").Width(110);

 columns.Bound(p => p.Mtrlcode).Title("Code").Width(90);

 columns.Bound(p => p.Tradename).Title("Tradename").Width(170);

 columns.Bound(p => p.Requested).Format("{0:dd/MM/yyyy:hh:mm:ss}").Width(110); ;

 columns.Bound(p => p.DateDue).Format("{0:dd/MM/yyyy}").Title("Date due").Width(100); ;

 columns.Bound(p => p.Completed).Format("{0:dd/MM/yyyy}").Title("Completed").Width(100); ;

 columns.Bound(p => p.Status).Width(150);

 columns.Bound(p => p.AssignedTo).Width(100);

 

})

 .ClientDetailTemplateId(

 

"employeesTemplate")

 .Groupable()

 .Pageable()

 .Sortable()

 .Scrollable()

 .Filterable()

 .Selectable()

 .Pageable(pager => pager

 .Refresh(

 

true)

 .PageSizes(new int[4] {10, 20, 30, 40}))

 .ColumnMenu()

.Resizable(resize => resize.Columns(true))

 .Reorderable(reorder => reorder.Columns(true))

 .DataSource(dataSource => dataSource

 .Ajax()

 .Read(read => read.Action(

 

"Products_Read", "InTray"))

 .PageSize(30)

 ))

Mario
Top achievements
Rank 1
 answered on 19 Aug 2013
1 answer
247 views
I'm biding a treeview to a remote data and at this point the data is displayed correctly. The problem: when I change the data in the database and refresh my page, the treeview doesn't reflect the new data. It seems that the treeview is not calling the json action anymore after the first load.

I tried to work with LoadOnDemand and several other methods, but nothing worked so far. I need to refresh the data because when users drag and drop the nodes, the treeview will be updated in the database.

** Code is attached. I also just noticed that it works on Chrome but not IE 10. Thank you for any help.

I'm following this demo code: http://demos.kendoui.com/web/treeview/remote-data.html

This is my json action:

public JsonResult Categories(int? id)
{

var categories = from e in db.Categories
where (id.HasValue ? e.ParentCategoryID == id : e.ParentCategoryID == 1)
orderby(e.OrderNumber)
select new
{
id = e.CategoryID,
Name = e.CategoryNames.FirstOrDefault().Name,
ParentId = e.ParentCategoryID,
hasChildren = db.Categories.Where(j => j.ParentCategoryID == e.CategoryID).Any()
}
;

return Json(categories, JsonRequestBehavior.AllowGet);
}

This is my treeview code:

Html.Kendo().TreeView()
.Name("treeviewcategories")
.DataTextField("Name")
.DataSource(dataSource => dataSource
.Read(read => read
.Action("Categories", "Settings")
)
)
.Events(events => events
.Select("onSelect")
.DragEnd("onDragEnd")
.Expand("onExpand")
)
.DragAndDrop(true) 
Development Team
Top achievements
Rank 1
 answered on 19 Aug 2013
2 answers
474 views
I have a grid that I can select a row on and then click a button on the grid to move that row's data item to a different grid.

This code has been working fine for months, but broke after the last official release.  I upgraded to the most up to date internal release today (2013.2.814), but still no luck.

Basically, anytime I run code like this:

var grid = $("#ItemBook").data("kendoGrid");
console.log(grid.select()); //Errors
I get a strange error in Firebug and no code after the select line executes.  The error looks a bit like this:
TypeError: r is undefined
...table)),t.css(kt?"padding-left":"padding-right",l.virtual?c+1:c),n=e('<tabl
However, searching for the row by the selected class DOES work.  E.g.:
console.log($("#SavedQuoteBook tr.k-state-selected"));  //Gives tr element
console.log(grid.dataItem($("#SavedQuoteBook tr.k-state-selected")));  //Give dataItem

I don't think it should matter, but the grid as well as the script executing the code above are inside a partial view that's loaded into a Menu Widget.

Here's the code for the views:

Menu Widget Declaration:
@(Html.Kendo().Menu()
                .Name("ItemMenu")
                .OpenOnClick(true)
                .CloseOnClick(false)
                .Items(items =>
                {
                    items.Add()
                        .Text("Items")
                        .Content(Html.Partial("ItemBook", Model.Items).ToHtmlString());
                })
                .Events(events =>
                {
                    events.Open("ItemMenuOpen");
                })
            )

Partial View (Grid + Script):
<script type="text/javascript">
    function ConfigureItemBook() {
   
        //Drives multi-selection of grid rows (Overrides native functionality)
        $("#ItemBook").delegate('tbody tr', 'click', function () {
            $(this).toggleClass('k-state-selected');
        });
 
        //Drive single selection by double click
        $("#ItemBook").delegate('tbody tr', 'dblclick', function () {
            $(this).addClass('k-state-selected');
            PopulateItem();
        });
    }
 
    function PopulateItem() {
        var grid = $("#ItemBook").data("kendoGrid");
 
        console.log("Manual Search");
        console.log($("#ItemBook tr.k-state-selected"));  //This works
        console.log("Manual Search + Get DataItem");
        console.log(grid.dataItem($("#ItemBook tr.k-state-selected")));  //This works
        console.log("Kendo Grid Select");
        console.log(grid.select());  //ERROR
        console.log("Kendo Grid Select + GetDataItem");
        console.log(grid.dataItem(grid.select()));  //ERROR
    }
</script>
 
@(Html.Kendo().Grid(Model)
    .Name("ItemBook")
    .TableHtmlAttributes(new { @style = "cursor:pointer;" })
    .Columns(columns =>
    {
        columns.Bound(i => i.DateCreated).Width(90);
        //Other columns omitted for brevity
    })
    .ToolBar(toolbar =>
    {
        toolbar.Custom().Text("Select").Url("#_").HtmlAttributes(new { onclick = "PopulateItem()" });
    })
    .Events(events =>
    {
        events.DataBound("ConfigureItemBook");
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Resizable(resize => resize.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Model(model =>
        {
            model.Id(i => i.ID);
        })
    )
)


Jark Monster
Top achievements
Rank 1
 answered on 19 Aug 2013
2 answers
184 views
In out MVC app, we are using a Kendo grid to display/inline edit Department information. We also display a tree view of the Department hierarchy (see below). In Chrome when changes are made to the Department information the tree view dynamically changes, in IE10 this does not occur. We noticed through debugging that in IE10 the "GetDepartmentTree' action is only fired on initial load and is never called again, even when the department page is refreshed. In Chrome this action is fired with each change to the Department information. Any ideas on what we can do to make this more cross-browser compliant?

            @(Html.Kendo().TreeView()
                .Name ("DepartmentTree")               
                .HtmlAttributes(new {@class="dept-treeview"})
                .DataTextField("Name")
                .DataSource(ds => ds
                    .Read(read => read
                        .Action("GetDepartmetsTree", "Administration")
                        .Data("GetParameters")
                    )
                )               
                .LoadOnDemand(false)
            )

Dev Team
Top achievements
Rank 1
 answered on 19 Aug 2013
0 answers
113 views
I have a ASP.NET WebAPI endpoint that is receiving the calls for upload and it appears to be working fine in that the file is uploaded and it returns appropriate JSON.  It is however secured using windows authentication which seems to be causing a problem with loading the thumbnails.  What seems to be happening is that the initial call to the upload endpoint returns a 401 which causes the client to resend the request with the authorization cookie.  It seems that in between those two calls the tiles get updated and an img for the thumb is created even though the thumb hasn't been created on the server yet.  This causes the thumb not to load and it won't even try to load again until the browser is refreshed.  

Without security everything seems to go fine unfortunately the windows auth is a requirement of this application.  Is there a way to force the initial request to
include the auth token or is there a way to delay the reloading of the tiles/images until the second call is complete?  Seems to be mostly working great other than this issue.

Thanks,
Uriah
Uriah
Top achievements
Rank 1
 asked on 18 Aug 2013
5 answers
1.1K+ views
Is it possible to filter a column from a drop down list (from a foreign key look up table) - and if so what's the best way to do this?

The only way I can see to do this a present, is using a toolbar template - which isn't ideal but would be ok, but the example isn't for the MVC extensions ( http://demos.kendoui.com/web/grid/toolbar-template.html ), and it seems there should be an easier way in MVC.

Any examples would be helpful.

Thanks
Daniel
Top achievements
Rank 1
 answered on 16 Aug 2013
1 answer
172 views
<div class="k-block">
    <div class="k-header k-shadow"><span class="k-icon k-i-pencil"></span>Employee Colour</div>
    <div class="editor-label">
            @Html.LabelFor(x => x.BackgroundColour)
        </div>
        <div class="editor-field">
            @(Html.Kendo().ColorPicker().Name("BackgroundColour").Palette(ColorPickerPalette.Basic).Value(Model.BackgroundColour))
            @Html.TextBoxFor(x => x.BackgroundColourInput, new { @class = "editor-colour"})
        </div>
        <br />
        <div class="editor-label">
            @Html.LabelFor(x => x.TextColour)
        </div>
    <div class="editor-field">
        @(Html.Kendo().ColorPicker().Name("TextColour").Palette(ColorPickerPalette.Basic).Value(Model.TextColour))
         @Html.TextBoxFor(x => x.TextColourInput, new { @class = "editor-colour"})
    </div>
    <br/>
</div>
I'm using the code above to load a colour picker, the Model.BackgroundColour and Model.TextColour are strings as below:

rgb(0,255,255)

but when the form loads, the initial colour is always black, can someone tell me what I'm doing wrong please, as looking at the documentation it seems this should work. I should also point out that passing a string as below:

#00FFFF

does work.

Thanks.
Dimiter Madjarov
Telerik team
 answered on 16 Aug 2013
3 answers
254 views
Hello,
i am using Vs2012,kendo 2013.1.154 version,
and i want it to do the dropdown cascade example,and it gives me in firebug,that he doesn't know that javascript function put as filter
the error message is : filterProducts is not defined
here is my view
<div class="demo-section">
    <h2>View Order Details</h2>
    <p>
        <label for="categories">Catergories:</label>
        @(Html.Kendo().DropDownList()
              .Name("groups")
              .HtmlAttributes(new { style = "width:300px" })
              .OptionLabel("Select group...")
              .DataTextField("Name")
              .DataValueField("pkTallyGroup")
              .DataSource(source => {
                   source.Read(read => {
                       read.Action("GetCascadeGroups", "Employees");
                   });
              })
        )
    </p>
    <p>
        <label for="subgroups">Products:</label>
        @(Html.Kendo().DropDownList()
              .Name("subgroups")
              .HtmlAttributes(new { style = "width:300px" })
              .OptionLabel("Select subgroup...")
              .DataTextField("Name")
              .DataValueField("pkTallySubGroup")
              .DataSource(source => {
                  source.Read(read =>
                  {
                      read.Action("GetCascadeSubgroups", "Employees")
                          .Data("filterProducts");
                  })
                  .ServerFiltering(true);
              })
              .Enable(false)
              .AutoBind(false)
              .CascadeFrom("groups")
        )
        <script>
            function filterProducts() {
                return {
                    groups: $("#groups").val()
                };
            }
        </script>
    </p>
    
</div>

what should be the problem?or do i need to set something in VS2012 to see the scripts in the same page?
Regards,
Daniel
Vladimir Iliev
Telerik team
 answered on 16 Aug 2013
6 answers
164 views
Hello,
i have another question:
I would like to filter the grid data,based on some filters(textboxes or dropdowns) and when i press a button,the date will be loaded into the kendo grid.But initially i do not want to fill anything.based on filter inputs,i create the criteria and make the selection in where clause of the repository for the given entity.
How can i do that?can you show me an example?
Best Regards,
Daniel
Nikolay Rusev
Telerik team
 answered on 16 Aug 2013
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
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
Accessibility
ListView (Mobile)
Pager
ColorPicker
DateRangePicker
Security
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
SegmentedControl
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
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?