Hi,

I have a scenario where an API I'm using is only able to filter by one column at a time. So either name, or email, or phone number, stuff like that. 

How can I prevent multiple filters being set at the same time?

I tried binding a mousedown handler to the filter button in the filter menu and iterating over the existing filters to set them to an empty string. Something like this, which I found here on the forums:

This triggered several ajax calls though with filters like "Name~undefined~''".

Is there a better way to handle this scenario?

Kind regards,

Georg

I'm using the menu component, and in the resulting links in my page it is adding a query string parameter or Length=3, to all of them.. What is this, and how do I get rid of it?

But here is what the resulting HTML looks like:

Where is this parameter coming from, and how do I get rid of it?

I have applied the Drag and Drop feature my Grid, It is not working for left 2 columns in Chrome and left 3 columns in Edge means when i drag the row by choosing from  left 2 columns or some times left 3 columns and  try to drop it on other position of row, it will stop working. Here is my code:

<div id="example">

<div id="grid"></div>

</div>

<script>
$(document).ready(function () {

var data = [{
EID: 1,
MilestoneName: "Chai",
MilestoneStart: "",
MilestoneNCD: "",
MilestoneComplete: "",
UnitPrice: 18.0000,
UnitsInStock: 39,
Discontinued: false,
PercComplete: "",
WorkPackagesOpen: "",
PlanTasksCount: "",
Position: 1
}, {
EID: 2,
MilestoneName: "Chang",
MilestoneStart: "",
MilestoneNCD: "",
MilestoneComplete: "",
UnitPrice: 19.0000,
UnitsInStock: 17,
Discontinued: false,
PercComplete: "",
WorkPackagesOpen: "",
PlanTasksCount: "",
Position: 2
}, {
EID: 3,
MilestoneName: "Aniseed Syrup",
MilestoneStart: "",
MilestoneNCD: "",
MilestoneComplete: "",
UnitPrice: 10.0000,
UnitsInStock: 13,
Discontinued: false,
PercComplete: "",
WorkPackagesOpen: "",
PlanTasksCount: "",
Position: 3
}, {
EID: 4,
MilestoneName: "Chef Anton's Cajun Seasoning",
MilestoneStart: "",
MilestoneNCD: "",
MilestoneComplete: "",
UnitPrice: 22.0000,
UnitsInStock: 53,
Discontinued: false,
PercComplete: "",
WorkPackagesOpen: "",
PlanTasksCount: "",
Position: 4
}, {
EID: 5,
MilestoneName: "Chef Anton's Gumbo Mix",
MilestoneStart: "",
MilestoneNCD: "",
MilestoneComplete:"",
UnitPrice: 21.3500,
UnitsInStock: 0,
Discontinued: true,
PercComplete: "",
WorkPackagesOpen: "",
PlanTasksCount: "",
Position: 5
}];

var data = data;
var dataSource = new kendo.data.DataSource({
data: data,
schema: {
model: {
id: "EID",
fields: {
EID: { type: "number" },
MilestoneName: { type: "string" },
MilestoneStart: { type: "date" },
MilestoneNCD: { type: "date" },
MilestoneRNCD: { type: "date" },
MilestoneComplete: { type: "date" },
MilestoneResp: { type: "string" },
MilestoneDelay: { type: "string" },
PlanTasksCount: { type: "string" },
WorkPackagesOpen: { type: "string" },
PercComplete: { type: "string" },
Position: { type: "number" }
}
}
}
});

var grid = $("#grid").kendoGrid({
dataSource: dataSource,
scrollable: false,
selectable: "single row",
dataBound: onDataBound,
columns: [
{ field: "EID", title: "EID", width: "50px", },
{ field: "MilestoneName", title: "Milestones", width: "320px" },
{ field: "MilestoneStart", title: "Start Date", format: "{0:MM/dd/yyyy}", width: "90px" },
{ field: "MilestoneNCD", title: "NCD", format: "{0:MM/dd/yyyy}", width: "90px" },
{ field: "MilestoneRNCD", title: "RNCD", format: "{0:MM/dd/yyyy}", width: "90px" },
{ field: "MilestoneComplete", title: "Complete Date", format: "{0:MM/dd/yyyy}", width: "90px" },
{ field: "MilestoneResp", title: "Milestone Resp", width: "150px"},
{ field: "MilestoneDelay", title: "Milestone Delay", width: "150px" },
{ field: "WorkPackagesOpen", title: "Milestone Delay", width: "150px" },
{ field: "PercComplete", title: "Milestone Delay", width: "150px"},
{ field: "Position", title: "Position", width: "30px" },
]
}).data("kendoGrid");

grid.table.kendoDraggable({
filter: "tbody > tr",
group: "gridGroup",
hint: function (e) {
return $('<div id="DragRow" class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
},
drag: function (e) {
var grid = $("#grid").data("kendoGrid"),
dataSource = grid.dataSource;
var guid = grid.table.find("tr data-uid");
var target = dataSource.getByUid($(e.currentTarget).data("uid"));
if (target.MilestoneRow <= 5 || target.MilestoneRow >= 100) {
$("#DragRow").html('');
return;
}
}

});

grid.table/*.find("tbody > tr")*/.kendoDropTarget({
group: "gridGroup",
drop: function (e) {
var grid = $(e.sender.element).closest('.k-grid').getKendoGrid(),
dataSource = grid.dataSource;
target = dataSource.getByUid($(e.draggable.currentTarget).data("uid")),
dest = $(e.target);

if (dest.is("th")) {
return;
}
dest = dataSource.getByUid(dest.parent().data("uid"));

if (target == undefined || dest == undefined) {
return false;
}

if (target.MilestoneRow <= 5 || target.MilestoneRow >= 100 || dest.MilestoneRow <= 5 || dest.MilestoneRow >= 100) {
return;
}

//not on same item
if (target.get("uid") !== dest.get("uid")) {

//reorder the items
var tmp = target.get("Position");
target.set("Position", dest.get("Position"));
dest.set("Position", tmp);


dataSource.sort({ field: "Position", dir: "asc" });

}
}
});

    });

    function onDataBound(e) {
        var grid = $("#grid").data("kendoGrid");
        var gridData = grid.dataSource.view();
        $("#grid tr.k-alt").removeClass("k-alt");

        for (var i = 0; i < gridData.length; i++) {
            if (gridData[i].MilestoneRow <= 5 || gridData[i].MilestoneRow >= 100) {
                grid.table.find("tr[data-uid='" + gridData[i].uid + "']").addClass("backgroundColor");
            }
        }
    }

    function getSelectedMilestone() {
        var grid = $("#grid").data("kendoGrid");
        return grid.dataItem(grid.select());
}

</script>

Hi,
Trying to build a multicolumn form within a tabstrip using div and bootstrap grid tags. Even after reading article about Bootstrap and Kendo, (http://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap#nesting-kendo-ui-widgets-and-bootstrap-grid-layout), the layout seems not to work as expected like in:

The expected result would be a form with two columns and fields (2x) on both sides. The code is in a partial view and it is invoked on the tabstrip as follows:

Is this the way to have it done or not?

Regards,

Marcello

Hi,

I have a requirement to have a TreeList which has up to 4 levels. I have the filter option enabled which gives me a filter to say Contains '' for example. When the first loads it loads with all nodes closed. When I apply the filter it only filters on what is shown directly in the view, so in this case on the top level items. Is there a way that it can filter on any child node as well, such that if a level 4 child node contained '' for example it would show the item expanded with the various parent nodes?

I can set it so that the view is always expanded, but then each time the view is rebound any user alterations to the expanded state are  by the expansion. 

Thanks,

Neil

Hello,

I have a requirement to filter some prices using pre-defined values like the following:

• Less than £10
• Between £10 and £20
• Between £20 and £30
• More than £30

I can't seem to see a way to do this with the Grid. Is it possible?

Thank you

Lucy

I have a grid with a custom command and a client-side function specified for the grid's DataBound event. In the DataBound function, I hide the custom command on rows where a particular column has a certain value. My code is successfully showing the custom button only on the appropriate rows when the grid is displayed. I've also specified a custom popup editor for the grid.
Skeleton of the grid code is:

@(Html.Kendo().Grid<Models.Task>()
            .Name("gridTask")
            .Columns(columns =>
                    {
                        columns.Bound(task => task.Name);
                        columns.Bound(task => task.TaskStatus);
                        columns.Command(cmd =>
                        {
                            cmd.Edit();
                            cmd.Custom("Show Survey").Click("ShowSurvey");
                        });
                    })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(10)
                    .ServerOperation(false)
                .Model(model => model.Id(m => m.Task_ID))
                .Read(read => read.Action("ReadTask", "TaskPartial"))
                .Update(update => update.Action("UpdateTask", "TaskPartial"))
                .Create(update => update.Action("CreateTask", "TaskPartial"))
            )
             .Events(e =>
             {
                 e.Cancel("EditCancel");
                 e.DataBound("TaskDataBound");
             })
            .Pageable()
            .Sortable()
            .Editable(ed => {
                ed.Mode(GridEditMode.PopUp);
                ed.TemplateName("TaskEditor");
                ed.Window(win => win.Title("Task Editor"));
            })
)

And the DataBound function is:

function TaskDataBound(e) {
        // Check the Show Survey button in each task row. Remove the button if the row has a certain value.
        $("[id^='gridTask'] tbody tr .k-grid-ShowSurvey").each(function () {
            var currentDataItem = $("[id^='gridTask']").data("kendoGrid").dataItem($(this).closest("tr"));
            //Check the current dataItem to see if the button should be removed
            if (currentDataItem.testValue == 0) {
                $(this).remove();
            }
        })
    }

Now suppose I click Edit on a row which does not show the custom button, and the edits I make do not effect the column determining the visibility of the custom button. When I click Update in the popup editor, the screen is updated as expected. The popup goes away, the updated data is shown, and the grid row still does not show the button.

However, when I click Cancel in the popup editor, the popup goes away but the custom command incorrectly reappears on the grid row, even though the column determining the visibility of the custom command hasn't changed. Why is the custom command mistakenly re-appearing? 

I've tried specifying a client-side function for the Cancel event as follows to remove the custom button upon the cancel. Even though I've traced the code to confirm my cancel function is called and the remove() command is hit and executed, the Custom button still comes back.

 function EditCancel(e) {
        // Check the Show Survey button in each task row. Remove the button if the row has a certain value.
        $("[id^='gridTask'] tbody tr").each(function () {
            var currentDataItem = $("[id^='gridtask']").data("kendoGrid").dataItem($(this));
            //Check the current dataItem to see if the button should be removed
            if (currentDataItem.testValue == 0) {

                $(this).find(".k-grid-ShowSurvey").remove();
            }
        })
    }

We want to customize the DataSource Export so that it will work against any datasource regardless of the number of columns.

In the example, the cells and columns are hard coded.  We want to modify the example to read the datasource and dynamically generated the bolded sections below.

See attached.

Any ideas would be appreciated.