Kendo Grid MVC Load data based on search

[Medhanie]

Hello;

I want to load data using Kendo MVC Grid based on a requirement.

At first I want to load empty grid, then,

I have an html search textbox where I will provide ID, then

based on the ID provided on the search textbox, I want to load data on the grid.

 

Look at the attached pic for more info.

How can I achieve this, if there is a sample code please give me the link.

 

Looking forward for your help.

Thank you

[Medhanie]

Is there any hope I will get help here?

[Georgi Denchev]

Hi Medhanie,

Thank you for the provided details.

You can set the AutoBind configuration of the grid to false so it won't load the data during initialization.

@(Html.Kendo().Grid<MyModel>()
            .Name("grid")
            .AutoBind(false)
)

I'll assume you have the following input for searching:

<input id="search"/>

You can bind the blur event to it. Blur triggers every time you click outside of the input. In the handling function call the dataSource read method and provide it with the value of the input:

<script>
    $("#search").on("blur", function (e) {
        let value = $(e.currentTarget).val();
        let grid = $("#grid").data("kendoGrid");
        grid.dataSource.read({"inputValue" : value})
    });
</script>

And you can access the value in your controller like this:

public ActionResult Read([DataSourceRequest]DataSourceRequest request, string inputValue)

Let me know if you have any questions.

Best Regards,
Georgi Denchev
Progress Telerik

[Medhanie]

Georgi Denchev

Thank you so much for your help, this just worked without any issue. 

 

I still have problem customizing the style of column textbox in inline edit mode. I want to increase the width/height of the textbox as well as I want to allow either only number/ only alphabets. How can I achieve this?

 

Please look at the attached pic for further clarification. 

[Georgi Denchev]

Hi Medhanie,

You can obtain a reference to the input inside the Edit event of the grid:

.Events(e => e.Edit("onEdit"))

<script>
    function onEdit(e) {
        let propertyNameInput = $(e.container).find("input[id='PropertyName']"); // Get the input associated with the PropertyName field.
        $(propertyNameInput).width(350); // Set the width of the input.
        $(propertyNameInput).prop('type', 'number'); // Change the type of the input to a number.
    }
</script>

You can modify multiple inputs at once, it doesn't have to be just one.

Best Regards,
Georgi Denchev
Progress Telerik

[Medhanie]

thank you for replying;

I am able to increase the height and width of the input text but unable to write multiple line, how can I change the input type to textarea so that the user can type multiple line?

 

thank you

[Georgi Denchev]

Hello Medhanie,

I'd recommend the same approach as I mentioned in the other ticket.

Create an Editor Template just for one of the properties. Define a TextArea widget in this template and assign it to the property that you want to use an area.

In the Views/Shared/EditorTemplates folder create a new View TextAreaEditor.cshtml and add the widget inside of it:

@model string
@(Html.Kendo().TextAreaFor(m => m)
    .Rows(5)
)

After that use the UIHint attribute to set the template to a property in your model:

[UIHint("TextAreaEditor")]
public string MyProperty { get; set; }

Best Regards,
Georgi Denchev
Progress Telerik

[Medhanie]

Hi Georgi;

Is the implementation going to be different for InLine mode of editing? Am not able to get there, sorry

[Georgi Denchev]

Hello Medhanie,

The implementation for both Inline and Popup modes would be the same.

Let me know if you face any issues.

Best Regards,
Georgi Denchev
Progress Telerik

[Medhanie]

In that case, I have some issue, binding the existing data to be edited, I explained this in the other ticket

[Georgi Denchev]

Hello Medhanie,

Let's continue the discussion in the ticket, I'll provide my response there.

Best Regards,
Georgi Denchev
Progress Telerik